1. ข้อกำหนดไวยากรณ์พื้นฐาน
วิเคราะห์คำสั่ง CSS ทั่วไป:
p {สี:#FF0000;พื้นหลัง:#FFFFFF}
ในหมู่พวกเขา "p" เรียกว่า "ตัวเลือก" บ่งชี้ว่าเราต้องการกำหนดสไตล์สำหรับ "p";
การประกาศรูปแบบจะเขียนด้วยวงเล็บปีกกาคู่หนึ่ง "{}";
สีและพื้นหลังเรียกว่า "คุณสมบัติ" และคุณสมบัติที่แตกต่างกันจะถูกคั่นด้วยเครื่องหมายอัฒภาค ";";
"#FF0000" และ #FFFFFF" เป็นค่าของแอตทริบิวต์
2. ค่าสี
ค่าสีสามารถเขียนเป็นค่า RGB ได้ เช่น color : rgb(255,0,0) หรือเป็นเลขฐานสิบหก ดังตัวอย่างข้างต้น color:#FF0000 หากค่าเลขฐานสิบหกซ้ำกันสามารถย่อให้มีผลเหมือนกันได้ ตัวอย่างเช่น: #FF0000 สามารถเขียนเป็น #F00 ได้ อย่างไรก็ตาม จะไม่สามารถใช้อักษรย่อได้หากไม่ซ้ำ เช่น #FC1A1B จะต้องกรอกด้วยตัวเลขหกหลัก
3. กำหนดแบบอักษร
มาตรฐานเว็บแนะนำวิธีการกำหนดแบบอักษรต่อไปนี้:
body { ตระกูลฟอนต์ : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif;
แบบอักษรจะถูกเลือกตามลำดับที่แสดง หากคอมพิวเตอร์ของผู้ใช้มีฟอนต์ Lucida Grande เอกสารจะถูกกำหนดให้เป็น Lucida Grande ถ้าไม่เช่นนั้น จะถูกกำหนดให้เป็นฟอนต์ Verdana หากไม่มี Verdana ก็จะถูกกำหนดให้เป็นฟอนต์ Lucida และอื่นๆ
ฟอนต์ Lucida Grande เหมาะสำหรับ Mac OS X;
ฟอนต์ Verdana เหมาะสำหรับทุกระบบ Windows
Lucida เหมาะสำหรับผู้ใช้ UNIX
"Song Ti" เหมาะสำหรับผู้ใช้ภาษาจีนตัวย่อ
หากไม่มีแบบอักษรใดในรายการที่พร้อมใช้งาน จะรับประกันว่าจะมีการเรียกแบบอักษร sans-serif เริ่มต้น
4.ตัวเลือกกลุ่ม
เมื่อองค์ประกอบหลายรายการมีคุณลักษณะสไตล์เดียวกัน คำสั่งสามารถเรียกรวมกันได้ และองค์ประกอบต่างๆ จะถูกคั่นด้วยเครื่องหมายจุลภาค: p, td, li { font-size: 12px }
5. รับตัวเลือก
คุณสามารถใช้ตัวเลือกที่ได้รับมาเพื่อกำหนดสไตล์สำหรับองค์ประกอบย่อยภายในองค์ประกอบได้ เช่น:
li แข็งแกร่ง { แบบอักษร: ตัวเอียง;
เป็นการกำหนดลักษณะตัวเอียงแต่ไม่เป็นตัวหนาสำหรับองค์ประกอบย่อยที่แข็งแกร่งภายใต้ li
ตัวเลือก 6.id
เค้าโครงด้วย CSS ส่วนใหญ่จะนำไปใช้โดยใช้เลเยอร์ "div" และรูปแบบของ div ถูกกำหนดผ่าน "ตัวเลือกรหัส" ตัวอย่างเช่น อันดับแรกเรากำหนดเลเยอร์
<div id="เมนูบาร์"></div>
จากนั้นให้กำหนดดังนี้ในสไตล์ชีต:
#menubar {มาร์จิ้น: 0px; พื้นหลัง: #FEFEFE; สี: #666;}
โดยที่ "menubar" คือชื่อรหัสที่คุณกำหนด สังเกตเครื่องหมาย "#" ที่ด้านหน้า
ตัวเลือกรหัสยังรองรับการสืบทอดมาด้วย เช่น:
#menubar p { การจัดแนวข้อความ : right;
วิธีการนี้ส่วนใหญ่จะใช้เพื่อกำหนดเลเยอร์และองค์ประกอบที่ซับซ้อนมากขึ้นและมีองค์ประกอบที่ได้รับหลายรายการ
6. ตัวเลือกหมวดหมู่
ใช้จุดใน CSS เพื่อระบุคำจำกัดความของตัวเลือกหมวดหมู่ เช่น
.14px {สี : #f60 ;font-size:14px ;}
ในหน้านี้ให้ใช้ class="category name" วิธีการโทร:
<span class="14px">แบบอักษรขนาด 14px</span>
วิธีการนี้ค่อนข้างง่ายและยืดหยุ่น และสามารถสร้างและลบได้ตลอดเวลาตามความต้องการของเพจ
7. กำหนดรูปแบบของลิงค์
คลาสหลอกสี่คลาสถูกใช้ใน CSS เพื่อกำหนดรูปแบบลิงก์ ได้แก่: a:link, a:visited, a:hover และ a:active เช่น:
a:link{แบบอักษร-น้ำหนัก : ตัวหนา ;การตกแต่งข้อความ : ไม่มี ;สี : #c00 ;}
a: เยี่ยมชมแล้ว {font-weight : ตัวหนา ; ตกแต่งข้อความ : ไม่มี ; สี : #c30 ;}
a:hover {แบบอักษรน้ำหนัก : ตัวหนา ;การตกแต่งข้อความ : ขีดเส้นใต้ ;สี : #f60 ;}
a:active {แบบอักษรน้ำหนัก : ตัวหนา ; ตกแต่งข้อความ : ไม่มี ;สี : #F90 ;}
ข้อความข้างต้นกำหนดลักษณะของ "ลิงก์ ลิงก์ที่เข้าชม เมื่อวางเมาส์ไว้ และเมื่อคลิกเมาส์" ตามลำดับ โปรดทราบว่าคุณต้องเขียนตามลำดับข้างต้น ไม่เช่นนั้นการแสดงผลอาจแตกต่างไปจากที่คุณคาดไว้ โปรดจำไว้ว่าพวกเขาอยู่ในลำดับ "LVHA"
ฮ่าๆ หลังจากอ่านมาเยอะก็รู้สึกเวียนหัวนิดหน่อย จริงๆ แล้วยังมีข้อกำหนดทางไวยากรณ์อีกมากมายสำหรับ CSS ในคำเดียว :)