1. ตัวเลือกประเภท ตัวเลือกประเภทคืออะไร? หมายถึงอักขระบรรทัดที่ใช้ประเภทแท็กที่มีอยู่ในหน้าเว็บเป็นชื่อ Body คือประเภทแท็กในหน้าเว็บ รวมถึง div, p และ span
ดังต่อไปนี้:
เนื้อความ {}
ดิฟ {}
พี{}
ช่วง {}
2. ตัวเลือกกลุ่ม
สำหรับวัตถุ XHMTL สามารถกำหนดสไตล์เดียวกันให้กับกลุ่มได้ในเวลาเดียวกัน
ตัวเลือกจะถูกคั่นด้วยเครื่องหมายจุลภาค ข้อดีของการเขียนด้วยวิธีนี้คือต้องเขียนสไตล์เดียวกันเพียงครั้งเดียว ซึ่งจะช่วยลดจำนวนโค้ดและปรับปรุงโครงสร้างโค้ด CSS
เมื่อใช้งาน โปรดทราบว่า "จุลภาค" อยู่ในโหมดครึ่งความกว้าง ไม่ใช่โหมดเต็มความกว้างของจีน
ดังนี้:
h1,h2,h6,p,span
-
ขนาดตัวอักษร:12px;
สี:#FF0000;
ตระกูลแบบอักษร: arial;
-
3. มีตัวเลือกเพื่อระบุสไตล์สำหรับวัตถุย่อยในวัตถุ เพื่อให้วิธีการเลือกมีบทบาท
ควรสังเกตว่าการตั้งค่าสไตล์นี้ใช้ได้เฉพาะกับป้ายชื่อวัตถุย่อยของวัตถุนี้เท่านั้น การตั้งค่าสไตล์นี้ใช้ไม่ได้กับวัตถุย่อยอื่น ๆ ที่มีอยู่เพียงอย่างเดียวหรือตั้งอยู่ภายนอกวัตถุนี้
ข้อดีของการทำเช่นนี้คือช่วยให้เราหลีกเลี่ยงการตั้งค่า ID และคลาสที่มากเกินไป และกำหนดองค์ประกอบที่จำเป็นได้โดยตรง
ดังนี้:
ช่วง h2
-
สี:สีแดง;
-
ดังต่อไปนี้:
ร่างกาย h1 สแปนแข็งแกร่ง
-
แบบอักษรน้ำหนัก: ตัวหนา;
-
4. ตัวเลือกรหัสคือ
ตัวเลือกที่ปรากฏตามหลักการของโมเดลออบเจ็กต์เอกสาร DOM สำหรับไฟล์ XHTML แต่ละแท็กสามารถกำหนดชื่อในรูปแบบของ id="" ได้ แต่ควรสังเกตว่าใน ไฟล์ XHTML รหัสไม่ซ้ำกันและไม่สามารถทำซ้ำได้
ในหน้าเว็บเค้าโครง div CSS คุณสามารถตั้งชื่อเพื่อวัตถุประสงค์ที่แตกต่างกันได้ เช่น ส่วนหัวสำหรับส่วนหัวและส่วนท้ายสำหรับด้านล่าง
XHTML มีลักษณะดังนี้:
<div id="content"></div>
CSS มีดังนี้:
#content
-
ขนาดตัวอักษร:14px;
เส้นสูง:120%;
-
5. ตัวเลือกคลาส
อันที่จริง id เป็นส่วนขยายของแท็ก XHTML และคลาสคือการรวมกันของแท็ก SHTML หลายแท็ก การแปลตามตัวอักษรของคลาสหมายถึงคลาสหรือหมวดหมู่
สำหรับแท็ก XHTML ให้ใช้ class="" เพื่อกำหนดชื่อ ต่างจากรหัสตรงที่คลาสสามารถนำกลับมาใช้ใหม่ได้ หลายองค์ประกอบที่มีสไตล์เดียวกันสามารถกำหนดเป็นคลาสได้โดยตรง
ข้อดีของการใช้คลาสนั้นชัดเจนในตัวเอง มันสะท้อนถึงการนำโค้ด CSS มาใช้ซ้ำได้ หลายแท็กสามารถกำหนดได้โดยใช้สไตล์โดยไม่ต้องเขียนโค้ดสไตล์ให้กับแต่ละแท็ก
XHTML จะเป็นดังนี้:
<p class="he"></p>
<span class="เขา"></span>
<h5 class="เขา"></h5>
CSS มีดังต่อไปนี้:
.he
-
ระยะขอบ:10px;
สีพื้นหลัง:สีแดง;
-
6. ตัวเลือกเฉพาะแท็ก
หากคุณต้องการใช้ id และคลาสในเวลาเดียวกัน และยังต้องการใช้ตัวเลือกแท็กในเวลาเดียวกัน คุณสามารถใช้วิธีการต่อไปนี้:
h1#content {}
/*แทนแท็ก h1 ทั้งหมดที่มี id เป็นเนื้อหา*/
h1.p1 {}
/*ระบุแท็ก h1 ทั้งหมดที่มีคลาส p1*/
ความแม่นยำของตัวเลือกเฉพาะป้ายกำกับอยู่ระหว่างตัวเลือกป้ายกำกับและตัวเลือกรหัส/คลาส และเป็นหนึ่งในตัวเลือกที่ใช้กันทั่วไป
7. ตัวเลือกแบบผสม
สำหรับตัวเลือกข้างต้นทั้งหมด ให้ใช้ตัวเลือกเหล่านี้ร่วมกัน ดังต่อไปนี้:
h1 .p1 {}
/*ระบุแท็กทั้งหมดที่มีคลาส p1 ต่ำกว่า h1*/
#เนื้อหา h1 {}
แสดงถึงแท็ก h1 ทั้งหมดภายใต้แท็กที่มีเนื้อหารหัส
h1 .p1,#เนื้อหา h1 {}
/*แสดงถึงแท็ก h1 ทั้งหมดภายใต้ h1 ที่มีคลาส p1 และแท็ก h1 ทั้งหมดภายใต้แท็กที่มีเนื้อหารหัส*/
h1#เนื้อหา h2{}
/*แท็ก h2 ใต้แท็ก h1 โดยมี id เป็นเนื้อหา*/
ตัวเลือก CSS นั้นฟรีและยืดหยุ่นมาก คุณสามารถใช้ตัวเลือกต่างๆ ได้ตามความต้องการของเพจเพื่อจัดโครงสร้างและปรับแต่งไฟล์ CSS ให้มากที่สุด