ตัวเลือก CSS

CSS: เป็นตัวย่อของ Cascading Style Sheet แปลว่า [Cascading Style Sheet] ซึ่งเป็นชุดของกฎการจัดรูปแบบ เป็นภาษามาร์กอัปที่ใช้สำหรับ (ปรับปรุง) ควบคุมการจัดรูปแบบหน้าเว็บ และอนุญาตให้แยกข้อมูลสไตล์ออกจากเนื้อหาเว็บ

องค์ประกอบของ CSS: คำจำกัดความของ CSS ประกอบด้วยสามส่วน: ตัวเลือก (ตัวเลือก) คุณสมบัติ (คุณสมบัติ) และมูลค่าคุณสมบัติ (ค่า) ไวยากรณ์: selector{proprety:value} (selector{property:property value})

สิ่งที่ควรทราบ:

1. บล็อกการประกาศ CSS ประกอบด้วย: ตัวเลือก + "{" + แอตทริบิวต์ CSS หนึ่งรายการขึ้นไป + "}"

2. CSS ไม่คำนึงถึงขนาดตัวพิมพ์ และแนะนำให้ใช้ตัวพิมพ์เล็กในรูปแบบ CSS

1. ตัวเลือก CSS

เป็นชื่อของสไตล์ CSS เมื่อแสดงสไตล์ CSS ในเอกสาร HTML จะใช้ CSS วิธีการใช้งาน? ในขณะนี้ ตัวเลือก CSS (ชื่อ CSS) ใช้เพื่อระบุว่าแท็ก HTML นี้ใช้สไตล์ CSS นี้

2. ไวยากรณ์ตัวเลือก

ตัวเลือก CSS กำหนดสไตล์

ชื่อตัวเลือก {ประกาศ;}

ตัวอย่างเช่น:

 p{font-size:12px;}.dreamdublue{color:blue;}.dreamdu18px{font-size:18px;}#dreamdured{สี:สีแดง;}

P, dreamdublue และ dreamdured ล้วนเป็นตัวเลือก

3. กฎการตั้งชื่อตัวเลือก

ตัวเลือก CSS สามารถใช้ตัวอักษรภาษาอังกฤษตัวพิมพ์ใหญ่และตัวพิมพ์เล็ก ตัวเลข ขีดกลาง ขีดเส้นใต้ ทวิภาค และจุด

(1) ตัวอักษรภาษาอังกฤษตัวพิมพ์ใหญ่และตัวพิมพ์เล็ก AZ az

(2) หมายเลข 0-9

(3) ยัติภังค์ -

(4) ขีดเส้นใต้_

(5) ลำไส้ใหญ่:

(6) ระยะเวลา

หมายเหตุ: ตัวเลือก CSS เริ่มต้นด้วยตัวอักษรเท่านั้น

4. การจำแนกตัวเลือก

ตัวเลือก CSS สามารถแบ่งออกเป็นหลายประเภท เช่น: ตัวเลือกประเภท, ตัวเลือกรหัส, ตัวเลือกคลาส, ตัวเลือกสากล, ตัวเลือกกลุ่ม, ตัวเลือกการรวม, ตัวเลือกเฉพาะองค์ประกอบ, ตัวเลือกวัตถุย่อย, ตัวเลือกแอตทริบิวต์, ตัวเลือกที่เกี่ยวข้อง ตัวเลือกเพื่อนบ้าน ฯลฯ จะ จะถูกแนะนำและวิเคราะห์ทีละรายการด้านล่าง

1. ตัวเลือกประเภท: ตัวเลือกประเภทคือองค์ประกอบของหน้าเว็บ และชื่อองค์ประกอบจะถูกใช้โดยตรงเมื่อกำหนด

 เนื้อความ{/*กำหนดแอตทริบิวต์ของหน้า*/}Div{Width:774px;/*กำหนดองค์ประกอบ div ทั้งหมดให้มีความกว้าง 774 พิกเซล*/}

2. ตัวเลือกรหัส: ไม่ซ้ำกัน ค่ารหัสขององค์ประกอบที่แตกต่างกันไม่สามารถทำซ้ำได้ ตัวเลือกรหัสกำหนดสไตล์ที่แตกต่างกันสำหรับวัตถุเฉพาะของแต่ละองค์ประกอบซึ่งอำนวยความสะดวกให้ผู้ใช้ควบคุมหน้าได้แม่นยำยิ่งขึ้น เมื่อใช้ตัวเลือกรหัส คุณต้องกำหนดแอตทริบิวต์รหัสสำหรับแต่ละองค์ประกอบก่อน

 <divid="top"></div>เมื่อใช้ตัวเลือกรหัส คุณต้องใช้ # เพื่อระบุตัวตน: #top{Width:774px;/*กำหนดองค์ประกอบ div ทั้งหมดให้มีความกว้าง 774 พิกเซล*/}

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

 <divclass="red"></div><spanclass="red"></span><pclass="red"></p>เมื่อใช้ตัวเลือกคลาส คุณจะต้องใช้ภาษาอังกฤษ (จุด) เพื่อระบุตัวตน : . สีแดง{สี:สีแดง;}

4. Universal selector: เป็นตัวเลือกพิเศษที่แสดงด้วย * ซึ่งเป็นตัวเลือกที่ใช้แต่มองข้ามได้ง่าย

 *{font-size:12pt;/*กำหนดขนาดของแบบอักษรทั้งหมดในเอกสารเป็น 12pt*/}

5. ตัวเลือกกลุ่ม: ตัวเลือกกลุ่มไม่ใช่ประเภทตัวเลือก แต่เป็นวิธีการเลือก เมื่อวัตถุหลายชิ้นกำหนดสไตล์เดียวกัน เราสามารถจัดกลุ่มพวกมันออกเป็นกลุ่มได้ สิ่งนี้สามารถลดความซับซ้อนในการอ่านและเขียนโค้ด เช่น:

 .class1{font-size:13px;color:red;text-decrotian:underline;}.class2{font-size:13px;color:blue;text-decroation:underline;}

สามารถจัดกลุ่มเป็น:

 .class1,class2{font-size:13px;text-decroation:underline;}.class1{color:red;}.class2{สี:น้ำเงิน;}

มีสองหลักการสำหรับการใช้การจัดกลุ่ม: 1. หลักการของมุมมอง 2. หลักการของความใกล้เคียง (หากหลายองค์ประกอบอยู่ติดกัน คุณสามารถพิจารณาใช้ตัวเลือกการจัดกลุ่มภายในโมดูลได้)

6. ประกอบด้วยตัวเลือก: ตัวเลือกประเภทที่มีประโยชน์ที่สุด ซึ่งสามารถลดความซับซ้อนของโค้ดและบรรลุการควบคุมสไตล์ที่หลากหลาย ตัวอย่างเช่น:

 .div1h2{/*กำหนดรูปแบบชื่อเรื่องของ h2 ทั้งหมดในเลเยอร์คลาส div1*/font-size:18px;}.div1p{/*กำหนดรูปแบบชื่อเรื่องของ p ทั้งหมดในเลเยอร์คลาส div1*/font-size:12px ;}

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

 span.red{/*กำหนดสีขององค์ประกอบด้วยคลาสสีแดงในองค์ประกอบ span เป็น red*/color:red;}div#top{/*กำหนดความกว้างขององค์ประกอบโดยมี id เป็นด้านบนในองค์ประกอบ div เป็น 100 %*/ความกว้าง:100% ;}เช่น:<div><h2><h2><p></p><span></span></div>

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

p.news{} h2.news{} span.news{}

8. ตัวเลือกออบเจ็กต์ย่อย: เช่นเดียวกับตัวเลือกองค์ประกอบ เป็นตัวเลือกข้อจำกัด นั่นคือสไตล์องค์ประกอบที่ตรงตามเงื่อนไขข้อจำกัดถูกกำหนดไว้ภายในช่วงหนึ่งขององค์ประกอบ ตัวเลือกเฉพาะองค์ประกอบใช้แอตทริบิวต์คลาสและ id เป็นข้อจำกัด -ตัวเลือกวัตถุ ตัวเลือกใช้รหัสและวัตถุย่อยเป็นข้อจำกัด

 #main>table{/*กำหนดรูปแบบของตารางวัตถุย่อยในโมดูลหลักด้วยรหัสเป็น main*/width:788px;font-size:12px;}#main>.title{/*กำหนดวัตถุย่อย ในโมดูลหลักที่มีรหัสเป็นหลัก คลาสของวัตถุคือรูปแบบของ title*/color:red;font-style:italic;}

9. ตัวเลือกแอตทริบิวต์: ตัวเลือกแอตทริบิวต์จะต้องเพิ่มวงเล็บหลังองค์ประกอบ และแอตทริบิวต์หรือนิพจน์ต่างๆ จะแสดงอยู่ในวงเล็บ ตัวเลือกแอตทริบิวต์มีรูปแบบเฉพาะ 7 รูปแบบ:

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

 h1[class]{color:red;/*ใช้กับองค์ประกอบ h1 ใดๆ ที่มีแอตทริบิวต์ class โดยไม่คำนึงถึงค่าของ class*/}img[alt]{border:none;/*นำไปใช้กับองค์ประกอบ img ใดๆ ที่มีแอตทริบิวต์ alt โดยไม่คำนึงถึง alt ค่า*/}a[href][title]{font-weight:bold;/*ทำหน้าที่เป็นองค์ประกอบที่มีทั้งแอตทริบิวต์ href และ title*/} คืออะไร

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

 a[href=www.163.com][title=NetEase]{font-size:12px;/*ที่อยู่ฟังก์ชันชี้ไปที่ www.163.com และข้อความแจ้งชื่อคือองค์ประกอบหนึ่งของ NetEase*/}

(3) ช่องว่างจะถูกจับคู่แยกกัน: ด้วยการกำหนดรายการสตริงสำหรับแอตทริบิวต์ คุณสามารถควบคุมสไตล์องค์ประกอบได้ตราบใดที่คุณจับคู่สตริงใดสตริงหนึ่ง

 <spanclass=abc>ใครเป็นผู้ควบคุมสไตล์ของฉัน</span> คุณสามารถใช้สไตล์ต่อไปนี้เพื่อควบคุม: [class^=a]{color:red;} หรือ: [class^=b]{color:red;} หรือ: [class^=c]{color:red;} หรือ: span[class^=c]{color:red;}

(4) การจับคู่ยัติภังค์: ฟังก์ชันและการใช้งานเหมือนกับการจับคู่ช่องว่าง แต่รายการสตริงในการจับคู่ยัติภังค์จะถูกคั่นด้วยยัติภังค์

<span>ใครจะเป็นผู้ควบคุมสไตล์ของฉัน</span>

สามารถควบคุมได้โดยใช้สไตล์ต่อไปนี้:

 [class|=a]{color:red;} หรือ: [class|=a]{color:red;} หรือ: [class|=b]{color:red;} หรือ: [class|=c]{color :red;} หรือ: span[class|=c]{color:red;}

(5) ตัวเลือกคำนำหน้า: ตราบใดที่อักขระเริ่มต้นของค่าแอตทริบิวต์ตรงกับสตริงที่ระบุ สไตล์ก็สามารถนำไปใช้กับองค์ประกอบได้ การจับคู่คำนำหน้าดำเนินการโดยใช้แบบฟอร์ม [^=]:

<div>การจับคู่คำนำหน้า</div>

คุณสามารถใช้ตัวควบคุมสไตล์ต่อไปนี้

 [คลาส^=ของฉัน]{color:red;}

(6) การจับคู่คำต่อท้าย: ตรงกันข้ามกับคำนำหน้า ตราบใดที่อักขระสิ้นสุดของแอตทริบิวต์ตรงกับอักขระที่ระบุ ให้ใช้การควบคุมแบบฟอร์ม [$=]

<div>การจับคู่คำต่อท้าย</div>

คุณสามารถใช้ตัวควบคุมสไตล์ต่อไปนี้

 [class$=ทดสอบ]{สี:สีแดง;}

(7) การจับคู่สตริงย่อย: สไตล์จะถูกนำไปใช้ตราบใดที่สตริงที่ระบุมีอยู่ในแอตทริบิวต์ และถูกควบคุมในรูปแบบ [*=]

<div>การจับคู่สตริงย่อย</div>

คุณสามารถใช้ตัวควบคุมสไตล์ต่อไปนี้

 [class*=est]{สี:สีแดง;}

10. ตัวเลือกที่อยู่ติดกัน: หมายถึงองค์ประกอบถัดไปที่อยู่ติดกับองค์ประกอบ

 div+p{font-size:24px;/*นำไปใช้กับองค์ประกอบ p ทั้งหมดทันทีหลังจากองค์ประกอบ div โดยกำหนดขนาดตัวอักษรขององค์ประกอบ p เป็น 14px*/}เช่น:<divid=wrap><divid=sub_wrap><h1 >< /h1><p></p></div><p></p></div>

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

 #sub_wrap+p{ขนาดตัวอักษร:14px;}