Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS
CSS
  1. มาตราส่วนแปลงองค์ประกอบโดยใช้แกน x กับ CSS3

    วิธี scaleX(x) ใช้เพื่อปรับขนาดการแปลงองค์ประกอบโดยใช้แกน x ให้เราดูไวยากรณ์ − scaleX(x) ในที่นี้ x คือตัวเลขที่แทนตัวคูณมาตราส่วนเพื่อใช้กับ abscissa ของแต่ละจุดขององค์ประกอบ เรามาดูตัวอย่างกัน − div {    width: 60px;    height: 60px;    background-color: yellow; }

  2. มาตราส่วนแปลงองค์ประกอบโดยใช้แกน z กับ CSS3

    วิธี scaleZ(z) ใช้เพื่อปรับขนาดการแปลงองค์ประกอบโดยใช้แกน Z ให้เราดูไวยากรณ์ − scaleZ(z) ในที่นี้ z คือตัวเลขที่แทนตัวคูณมาตราส่วนเพื่อใช้กับพิกัด z ของแต่ละจุดขององค์ประกอบ เรามาดูตัวอย่างกัน − div {    width: 60px;    height: 60px;    background-color: black; } .pe

  3. CSS border-image-width

    คุณสมบัติ border-image-width ใช้เพื่อกำหนดความกว้างของรูปภาพเส้นขอบ คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้งาน border-image-width ทรัพย์สิน − ตัวอย่าง <html>    <head>       <style>          #borderimg1 {        

  4. CSS3 ปรับขนาดคุณสมบัติ

    คุณสมบัติการปรับขนาด CSS3 มีค่าทั่วไปสามค่าดังที่แสดงด้านล่าง - แนวนอน แนวตั้ง ทั้งสองอย่าง ตัวอย่าง การใช้ทั้งสองค่าในคุณสมบัติการปรับขนาดในอินเทอร์เฟซผู้ใช้ CSS3: <html>    <head>       <style>          div {     &nbs

  5. CSS3 เค้าร่าง offset คุณสมบัติ

    เค้าร่างหมายถึงการวาดเส้นรอบองค์ประกอบที่ด้านนอกของเส้นขอบ ตัวอย่าง คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้งาน CSS3 outline-offset ทรัพย์สิน − <html>    <head>       <style>          div {           &nb

  6. คุณสมบัติการปรับขนาด CSS2 เทียบกับคุณสมบัติการปรับขนาดกล่อง CSS3

    ให้เราเข้าใจความแตกต่างระหว่างคุณสมบัติการกำหนดขนาด CSS2 และคุณสมบัติการปรับขนาดกล่อง CSS3 คุณสมบัติการปรับขนาด CSS2 <html>    <head>       <style>          .div1 {             width: 200px;   &nbs

  7. คุณสมบัติการปรับขนาดกล่อง CSS

    คุณสมบัติการปรับขนาดกล่องใช้เพื่อเปลี่ยนความสูงและความกว้างขององค์ประกอบ ตั้งแต่ CSS2 คุณสมบัติของกล่องก็ทำงานดังที่แสดงด้านล่าง - width + padding + border = actual visible/rendered width of an element's box height + padding + border = actual visible/rendered height of an element's box ตัวอย

  8. แบบสอบถามสื่อด้วย CSS3

    ข้อความค้นหาสื่อใช้สำหรับกฎรูปแบบที่แตกต่างกันสำหรับอุปกรณ์ขนาดต่างๆ เช่น โทรศัพท์มือถือ เดสก์ท็อป ฯลฯ คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้งานการสืบค้นสื่อด้วย CSS3 - ตัวอย่าง <html> <head> <style> body { background-color: lightpink; }

  9. การออกแบบเว็บที่ตอบสนองต่อ CSS3

    การออกแบบเว็บที่ตอบสนองตามอุปกรณ์จะมอบประสบการณ์ที่ดีที่สุด อ่านง่าย และไปยังส่วนต่างๆ ได้ง่าย โดยมีการปรับขนาดขั้นต่ำในอุปกรณ์ต่างๆ เช่น เดสก์ท็อป โทรศัพท์มือถือ และแท็บ ให้เราดูว่าการออกแบบเว็บตอบสนองคืออะไร:

  10. ตั้งค่า Media Queries สำหรับกฎสไตล์ CSS ที่แตกต่างกันสำหรับอุปกรณ์ขนาดต่างๆ

    ในการตั้งค่าการสืบค้นสื่อสำหรับกฎรูปแบบ CSS ต่างๆ คุณสามารถลองเรียกใช้โค้ดต่อไปนี้ - ตัวอย่าง <html>    <head>       <style>          body {             background-color: lightpink;      

  11. การผสมแบบอักษร CSS3

    CSS3 ได้ดัดแปลงเทคโนโลยีการผสมแบบอักษร ในที่นี้ หากเบราว์เซอร์ไม่รองรับแบบอักษรแรก เบราว์เซอร์จะลองใช้แบบอักษรถัดไป เรามาดูตัวอย่างฟอนต์ Sans-Serif กัน −

  12. การทำงานกับหน่วย CSS

    CSS มีหลายหน่วยสำหรับหน่วยต่างๆ เช่น width, margin, padding, font-size, border-width เป็นต้น ความยาวระบุโดยใช้ค่าตัวเลขตามด้วยหน่วยความยาว เช่น px , dp, em ฯลฯ ไม่อนุญาตให้มีช่องว่างระหว่างค่าตัวเลขและหน่วยความยาว หน่วยความยาวแบ่งเป็นดังนี้: หน่วยสัมพัทธ์ แน่นอน หน่วยสัมบูรณ์ หน่วย ตัวย่อ P

  13. CSS Relative units

    ในหน่วยสัมพัทธ์ ค่าความยาวคงที่และปรากฏเป็นขนาดที่แน่นอนขององค์ประกอบ ให้เราดูหน่วย: หน่วย ตัวย่อ Percent % Em Em Ex Ex Root em Rem ความกว้างของวิวพอร์ต Vw ความกว้างของวิวพอร์ต Vh ความกว้างของวิวพอร์ต Vm อักขระ Ch ตาราง Gd

  14. สวิงแอนิเมชั่นเอฟเฟกต์ด้วย CSS

    เอฟเฟกต์แอนิเมชั่นการแกว่งจะเคลื่อนที่หรือทำให้เคลื่อนที่ไปมาหรือจากด้านหนึ่งไปอีกด้านในขณะที่แขวนอยู่หรือบนแกนไปยังองค์ประกอบ ตัวอย่าง <html>    <head>       <style>          .animated {             ba

  15. CSS :ตัวอักษรตัวแรกหลอกองค์ประกอบ

    ใช้องค์ประกอบนี้เพื่อเพิ่มรูปแบบพิเศษให้กับตัวอักษรตัวแรกของข้อความในตัวเลือก ตัวอย่างต่อไปนี้จะสาธิตวิธีการใช้องค์ประกอบ :first-letter เพื่อเพิ่มเอฟเฟกต์พิเศษให้กับตัวอักษรตัวแรกขององค์ประกอบในเอกสาร ตัวอย่าง <html>    <head>       <style>     &n

  16. เอฟเฟกต์แอนิเมชั่น Tada ด้วย CSS

    ในการสร้างเอฟเฟกต์แอนิเมชั่น Tada ด้วย CSS คุณสามารถลองเรียกใช้โค้ดต่อไปนี้: ตัวอย่าง <html>    <head>       <style>          .animated {             background-image: url(/css/images/logo.png);  

  17. คุณสมบัติ CSS border-image

    คุณสมบัติ CSS border-image ใช้เพื่อเพิ่มเส้นขอบรูปภาพให้กับองค์ประกอบบางอย่าง คุณสามารถลองเรียกใช้รหัสต่อไปนี้เพื่อใช้คุณสมบัติ border-image - ตัวอย่าง <html>    <head>       <style>          #borderimg1 {        

  18. ตั้งค่ารูปภาพเป็นเส้นขอบสำหรับองค์ประกอบด้วย CSS

    คุณสมบัติ CSS border-image ใช้เพื่อเพิ่มเส้นขอบรูปภาพให้กับองค์ประกอบบางอย่าง คุณสามารถลองเรียกใช้รหัสต่อไปนี้เพื่อตั้งค่ารูปภาพเป็นเส้นขอบสำหรับองค์ประกอบ: ตัวอย่าง <html>    <head>       <style>          #borderimg1 {    

  19. กำหนดเส้นทางของรูปภาพด้วย CSS

    คุณสมบัติ border-image-source ใช้ใน CSS เพื่อกำหนดเส้นทางของรูปภาพ คุณสามารถลองเรียกใช้รหัสต่อไปนี้เพื่อกำหนดเส้นทางของภาพ - ตัวอย่าง <html> <head> <style> #borderimg1 { border: 15px solid transparent; padding: 15px; border-im

  20. ตัดภาพเส้นขอบด้วย CSS

    border-image-slice คุณสมบัติใช้เพื่อแบ่งภาพเส้นขอบด้วย CSS คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้งาน border-image-slice คุณสมบัติ: ตัวอย่าง <html>    <head>       <style>          #borderimg1 {           &

Total 1566 -คอมพิวเตอร์  FirstPage PreviousPage NextPage LastPage CurrentPage:61/79  20-คอมพิวเตอร์/Page Goto:1 55 56 57 58 59 60 61 62 63 64 65 66 67