CSS (สไตล์ชีทแบบเรียงซ้อน)เป็นภาษาสไตล์ชีทที่ให้คุณแนบสไตล์ (เช่น แบบอักษรและสี) เข้ากับเอกสารที่มีโครงสร้าง (เช่น เอกสาร HTML และแอปพลิเคชัน XML) โดยทั่วไปสไตล์ CSS จะใช้เพื่อสร้างและจัดสไตล์องค์ประกอบของหน้าเว็บและส่วนต่อประสานผู้ใช้ที่เขียนด้วย HTML และ XHTML แต่ยังนำไปใช้กับเอกสาร XML ทุกประเภท รวมถึง XML, SVG และ XUL ด้วยการแยกสไตล์การนำเสนอเอกสารออกจากเนื้อหาเอกสาร CSS ทำให้การสร้างเว็บเพจและบำรุงรักษาเว็บไซต์ง่ายขึ้น

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

สไตล์ชีตแบบเรียงซ้อนอธิบายกฎสำหรับการจัดรูปแบบองค์ประกอบโดยใช้คุณสมบัติและค่าที่อนุญาตสำหรับคุณสมบัติเหล่านั้น สำหรับแต่ละองค์ประกอบ คุณสามารถใช้ชุดคุณสมบัติที่จำกัดได้; คุณสมบัติอื่นๆ จะไม่มีผลกระทบใดๆ

การประกาศสไตล์ประกอบด้วยสองส่วน: ตัวเลือกและ โฆษณา- ใน HTML ชื่อองค์ประกอบไม่คำนึงถึงขนาดตัวพิมพ์ ดังนั้น "h1" จึงทำงานเหมือนกับ "H1" การประกาศประกอบด้วยสองส่วน: ชื่อคุณสมบัติ (เช่น สี) และค่าคุณสมบัติ (สีเทา) ตัวเลือกจะบอกเบราว์เซอร์ว่าองค์ประกอบใดที่จะจัดรูปแบบ และบล็อกการประกาศ (โค้ดในวงเล็บปีกกา) จะแสดงรายการคำสั่งการจัดรูปแบบ - คุณสมบัติและค่าต่างๆ

แม้ว่าตัวอย่างนี้ให้ไว้เพียงความพยายามที่จะส่งผลกระทบต่อคุณสมบัติสองสามอย่างที่จำเป็นในการแสดงผลเอกสาร HTML แต่ก็มีคุณสมบัติเป็นสไตล์ชีทในสิทธิ์ของตัวเอง เมื่อรวมกับสไตล์ชีตอื่น ๆ (คุณสมบัติพื้นฐานอย่างหนึ่งของ CSS คือการรวมสไตล์ชีตเข้าด้วยกัน) กฎจะกำหนดการนำเสนอขั้นสุดท้ายของเอกสาร

ประเภทของสไตล์ชีตแบบเรียงซ้อนและข้อมูลเฉพาะ

1. ประเภทของสไตล์ชีท

1.1. สไตล์ชีตภายนอก

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

คุณสามารถแนบสไตล์ชีตได้หลายรายการในแต่ละหน้าเว็บโดยการเพิ่มแท็กหลายรายการตามลำดับ ซึ่งระบุวัตถุประสงค์ของสไตล์ชีตนี้ในแอตทริบิวต์แท็กสื่อ rel="stylesheet" ระบุประเภทของลิงก์ (ลิงก์ไปยังสไตล์ชีต)

มาตรฐาน HTML5 ไม่จำเป็นต้องใช้แอตทริบิวต์ type="text/css" ดังนั้นจึงข้ามไปได้ หากแอตทริบิวต์หายไป ค่าเริ่มต้นคือ type="text/css"

1.2. สไตล์ภายใน

สไตล์ภายในฝังอยู่ในส่วน เอกสาร HTML และถูกกำหนดไว้ภายในแท็ก- สไตล์ภายในมีความสำคัญมากกว่าสไตล์ภายนอก แต่จะด้อยกว่าสไตล์อินไลน์ (ระบุผ่านแอตทริบิวต์ style)

...

1.3. สไตล์ในตัว

เมื่อเราเขียน สไตล์อินไลน์เราเขียนโค้ด CSS ลงในไฟล์ HTML ภายในแท็กองค์ประกอบโดยตรงโดยใช้แอตทริบิวต์ style:

ให้ความสนใจกับข้อความนี้

สไตล์ดังกล่าวส่งผลต่อองค์ประกอบที่ตั้งค่าไว้เท่านั้น

1.4. @กฎการนำเข้า

@กฎการนำเข้าช่วยให้คุณสามารถโหลดสไตล์ชีตภายนอกได้ เพื่อให้คำสั่ง @import ทำงานได้ จะต้องปรากฏในสไตล์ชีต (ภายนอกหรือภายใน) ก่อนกฎอื่นๆ ทั้งหมด:

กฎ @import ยังใช้เพื่อรวมแบบอักษรของเว็บด้วย:

@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);

2. ประเภทของตัวเลือก

ตัวเลือกแสดงถึงโครงสร้างของหน้าเว็บ ช่วยสร้างกฎสำหรับการจัดรูปแบบองค์ประกอบของหน้าเว็บ ตัวเลือกสามารถเป็นองค์ประกอบ คลาสและตัวระบุ เช่นเดียวกับคลาสหลอกและองค์ประกอบหลอก

2.1. ตัวเลือกสากล

ตรงกับองค์ประกอบ HTML ใด ๆ ตัวอย่างเช่น * (margin: 0;) จะรีเซ็ตระยะขอบสำหรับองค์ประกอบของไซต์ทั้งหมด ตัวเลือกยังสามารถใช้ร่วมกับคลาสหลอกหรือองค์ประกอบหลอก: *:after (สไตล์ CSS) , *:checked (สไตล์ CSS)

2.2. ตัวเลือกองค์ประกอบ

ตัวเลือกองค์ประกอบช่วยให้คุณสามารถจัดรูปแบบองค์ประกอบทั้งหมดตามประเภทที่กำหนดในทุกหน้าของไซต์ ตัวอย่างเช่น h1 (ตระกูลแบบอักษร: Lobster, cursive;) จะกำหนดรูปแบบการจัดรูปแบบโดยรวมสำหรับส่วนหัว h1 ทั้งหมด

2.3. ตัวเลือกชั้นเรียน

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

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

หากองค์ประกอบมีแอตทริบิวต์คลาสหลายรายการ ค่าขององค์ประกอบเหล่านั้นจะถูกต่อด้วยช่องว่าง

คำแนะนำในการใช้คอมพิวเตอร์ส่วนบุคคล

2.4. ตัวเลือกรหัส

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

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

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

2.5. ตัวเลือกลูกหลาน

ตัวเลือกลูกหลานใช้สไตล์กับองค์ประกอบภายในองค์ประกอบคอนเทนเนอร์ ตัวอย่างเช่น ul li (text-transform: uppercase;) - จะเลือกองค์ประกอบ li ทั้งหมดที่เป็นลูกขององค์ประกอบ ul ทั้งหมด

หากคุณต้องการจัดรูปแบบลูกหลานขององค์ประกอบใดองค์ประกอบหนึ่ง คุณจะต้องกำหนดคลาสสไตล์ให้กับองค์ประกอบนั้น:

p.first a (สี: สีเขียว;) - สไตล์นี้จะใช้กับลิงก์ที่สืบทอดมาจากย่อหน้าที่มีคลาสแรก

p .first a (สี: สีเขียว;) - หากคุณเพิ่มช่องว่าง ลิงก์ที่อยู่ภายในแท็กคลาส .first ใดๆ ที่สืบทอดมาจากองค์ประกอบจะถูกจัดสไตล์

อันดับแรก (สี: สีเขียว;) - สไตล์นี้จะถูกนำไปใช้กับลิงก์ใด ๆ ที่อยู่ภายในองค์ประกอบอื่นซึ่งกำหนดโดย class.first

2.6. ตัวเลือกลูก

องค์ประกอบลูกเป็นลูกโดยตรงขององค์ประกอบที่มีอยู่ องค์ประกอบหนึ่งสามารถมีองค์ประกอบย่อยได้หลายองค์ประกอบ แต่แต่ละองค์ประกอบสามารถมีองค์ประกอบหลักได้เพียงองค์ประกอบเดียวเท่านั้น ตัวเลือกลูกอนุญาตให้คุณใช้สไตล์ได้ก็ต่อเมื่อองค์ประกอบลูกมาต่อจากองค์ประกอบหลักทันที และไม่มีองค์ประกอบอื่นอยู่ระหว่างองค์ประกอบเหล่านั้น กล่าวคือ องค์ประกอบลูกไม่ได้ซ้อนอยู่ในสิ่งอื่นใด
ตัวอย่างเช่น p > strong จะเลือกองค์ประกอบที่แข็งแกร่งทั้งหมดที่เป็นลูกขององค์ประกอบ p

2.7. ผู้คัดเลือกน้องสาว

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

h1 + p - จะเลือกย่อหน้าแรกทั้งหมดถัดจากแท็กใดๆ ทันที

โดยไม่กระทบต่อย่อหน้าที่เหลือ

h1 ~ p - จะเลือกย่อหน้าทั้งหมดที่เป็นพี่น้องกับส่วนหัว h1 ใด ๆ และหลังจากนั้นทันที

2.8. ตัวเลือกคุณสมบัติ

ตัวเลือกแอตทริบิวต์เลือกองค์ประกอบตามชื่อแอตทริบิวต์หรือค่าแอตทริบิวต์:

[attribute] - องค์ประกอบทั้งหมดที่มีแอตทริบิวต์ที่ระบุ - องค์ประกอบทั้งหมดที่ระบุแอตทริบิวต์ alt

ตัวเลือก [แอตทริบิวต์] - องค์ประกอบประเภทนี้ที่มีแอตทริบิวต์ที่ระบุ img - เฉพาะรูปภาพที่ระบุแอตทริบิวต์ alt เท่านั้น

selector[attribute="value"] - องค์ประกอบของประเภทนี้ที่มีแอตทริบิวต์ที่ระบุพร้อมค่าเฉพาะ img - รูปภาพทั้งหมดที่มีชื่อมีคำว่าดอกไม้

selector[attribute~="value"] - องค์ประกอบบางส่วนที่มีค่าที่กำหนด เช่น หากมีการระบุหลายคลาสสำหรับองค์ประกอบที่คั่นด้วยช่องว่าง p - ย่อหน้าที่มีชื่อคลาสประกอบด้วยคุณลักษณะ ;

selector[attribute|="value"] - องค์ประกอบที่มีรายการค่าแอตทริบิวต์เริ่มต้นด้วยคำที่ระบุ p - ย่อหน้าที่ชื่อคลาสเป็นคุณลักษณะหรือเริ่มต้นด้วยคุณลักษณะ ;

selector[attribute^="value"] - องค์ประกอบที่มีค่าแอตทริบิวต์เริ่มต้นด้วยค่าที่ระบุ a - ลิงก์ทั้งหมดที่ขึ้นต้นด้วย http:// ;

selector[attribute$="value"] - องค์ประกอบที่มีค่าแอตทริบิวต์ลงท้ายด้วยค่าที่ระบุ img - รูปภาพทั้งหมดในรูปแบบ PNG

selector[attribute*="value"] - องค์ประกอบที่มีค่าแอตทริบิวต์มีคำที่ระบุทุกที่ a - ลิงก์ทั้งหมดที่มีชื่อมี book

2.9. ตัวเลือกคลาสหลอก

Pseudo-classes คือคลาสที่ไม่ได้แนบไปกับแท็ก HTML อนุญาตให้คุณใช้กฎ CSS กับองค์ประกอบเมื่อมีเหตุการณ์เกิดขึ้นหรือปฏิบัติตามกฎเฉพาะ คลาสหลอกแสดงลักษณะองค์ประกอบด้วยคุณสมบัติดังต่อไปนี้:

:hover - องค์ประกอบใดๆ ที่มีการเลื่อนเคอร์เซอร์ของเมาส์ไว้

:focus - องค์ประกอบแบบโต้ตอบที่ถูกนำทางโดยใช้แป้นพิมพ์หรือเปิดใช้งานโดยใช้เมาส์

:active - องค์ประกอบที่ผู้ใช้เปิดใช้งาน;

:valid - ฟิลด์แบบฟอร์มที่มีการตรวจสอบเนื้อหาในเบราว์เซอร์เพื่อให้สอดคล้องกับประเภทข้อมูลที่ระบุ

:invalid — ช่องแบบฟอร์มที่มีเนื้อหาไม่ตรงกับประเภทข้อมูลที่ระบุ

:enabled - ช่องแบบฟอร์มที่ใช้งานอยู่ทั้งหมด

:disabled - ฟิลด์แบบฟอร์มที่ถูกบล็อก เช่น อยู่ในสถานะไม่ได้ใช้งาน

:in-range - ฟิลด์ฟอร์มที่มีค่าอยู่ในช่วงที่ระบุ

:out-of-range - ฟิลด์ฟอร์มที่มีค่าไม่อยู่ในช่วงที่ระบุ

:lang() - องค์ประกอบที่มีข้อความในภาษาที่ระบุ

:not(selector) - องค์ประกอบที่ไม่มีตัวเลือกที่ระบุ - คลาส, ตัวระบุ, ชื่อหรือประเภทฟิลด์แบบฟอร์ม - :not() ;

:target เป็นองค์ประกอบที่มีสัญลักษณ์ # ที่อ้างอิงในเอกสาร

:checked — องค์ประกอบแบบฟอร์มที่เลือก (ผู้ใช้เลือก)

2.10. ตัวเลือกคลาสหลอกโครงสร้าง

คลาสหลอกโครงสร้างเลือกองค์ประกอบลูกตามพารามิเตอร์ที่ระบุในวงเล็บ:

:nth-child(odd) - องค์ประกอบลูกคี่;

:nth-child(even) - แม้แต่องค์ประกอบลูก;

:nth-child(3n) - ทุก ๆ องค์ประกอบที่สามในหมู่ลูก;

:nth-child(3n+2) - เลือกทุกองค์ประกอบที่สาม เริ่มต้นด้วยลูกคนที่สอง (+2) ;

:nth-child(n+2) - เลือกองค์ประกอบทั้งหมดโดยเริ่มจากวินาที

:nth-child(3) - เลือกองค์ประกอบลูกที่สาม

:nth-last-child() - ในรายการองค์ประกอบย่อย ให้เลือกองค์ประกอบที่มีตำแหน่งที่ระบุ คล้ายกับ :nth-child() แต่เริ่มจากสุดท้ายในทิศทางตรงกันข้าม

:first-child - อนุญาตให้คุณจัดสไตล์เฉพาะองค์ประกอบลูกแรกของแท็ก

:last-child - อนุญาตให้คุณจัดรูปแบบองค์ประกอบลูกสุดท้ายของแท็ก

:only-child - เลือกองค์ประกอบที่เป็นองค์ประกอบลูกเดียว

:empty - เลือกองค์ประกอบที่ไม่มีลูก

:root - เลือกองค์ประกอบที่เป็นรากของเอกสาร - องค์ประกอบ html

2.11. ตัวเลือกคลาสหลอกประเภทโครงสร้าง

ระบุประเภทของแท็กย่อยที่เฉพาะเจาะจง:

:nth-of-type() - เลือกองค์ประกอบที่คล้ายกับ :nth-child() แต่คำนึงถึงประเภทขององค์ประกอบเท่านั้น

:first-of-type - เลือกลูกคนแรกของประเภทที่กำหนด

:last-of-type - เลือกองค์ประกอบสุดท้ายของประเภทนี้

:nth-last-of-type() - เลือกองค์ประกอบของประเภทที่กำหนดในรายการองค์ประกอบตามตำแหน่งที่ระบุโดยเริ่มจากจุดสิ้นสุด

:only-of-type - เลือกองค์ประกอบเดียวของประเภทที่ระบุจากองค์ประกอบลูกขององค์ประกอบหลัก

2.12. ตัวเลือกองค์ประกอบหลอก

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

:first-letter - เลือกอักษรตัวแรกของแต่ละย่อหน้า ใช้กับองค์ประกอบบล็อกเท่านั้น

:first-line - เลือกบรรทัดแรกของข้อความองค์ประกอบ ใช้กับองค์ประกอบบล็อกเท่านั้น

:before - แทรกเนื้อหาที่สร้างขึ้นก่อนองค์ประกอบ

:after - เพิ่มเนื้อหาที่สร้างขึ้นหลังองค์ประกอบ

3. ชุดตัวเลือก

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

img:nth-of-type(even) - จะเลือกรูปภาพที่เป็นเลขคู่ทั้งหมดซึ่งมีข้อความแสดงแทนมีคำว่า css

4. ตัวเลือกการจัดกลุ่ม

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

H1, h2, p, span ( สี: มะเขือเทศ; พื้นหลัง: ขาว; )

5. มรดกและน้ำตก

การสืบทอดและการเรียงซ้อนเป็นแนวคิดพื้นฐานสองประการใน CSS ที่เกี่ยวข้องกันอย่างใกล้ชิด การสืบทอดคือการที่องค์ประกอบสืบทอดคุณสมบัติจากผู้ปกครอง (องค์ประกอบที่มีองค์ประกอบเหล่านั้น) การเรียงซ้อนแสดงให้เห็นวิธีการใช้สไตล์ชีตประเภทต่างๆ กับเอกสาร และกฎที่ขัดแย้งกันจะแทนที่กันอย่างไร

5.1. มรดก

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

คุณสมบัติที่เกี่ยวข้องกับการจัดรูปแบบบล็อกจะไม่สืบทอด เหล่านี้คือ พื้นหลัง , เส้นขอบ , การแสดงผล , ลอยและชัดเจน , ความสูงและความกว้าง , ระยะขอบ , ความสูงต่ำสุดและสูงสุด และ -ความกว้าง , โครงร่าง , ล้น , ช่องว่างภายใน , ตำแหน่ง , การตกแต่งข้อความ , แนวตั้งและดัชนี z

มรดกที่ถูกบังคับ

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

วิธีการตั้งค่าและการทำงานของสไตล์ CSS

1) สไตล์สามารถสืบทอดมาจากองค์ประกอบหลัก (คุณสมบัติที่สืบทอดมาหรือใช้ค่าที่สืบทอด)

2) สไตล์ที่อยู่ในสไตล์ชีตด้านล่างจะแทนที่สไตล์ที่อยู่ในตารางด้านบน

3) สไตล์จากแหล่งต่างๆ สามารถนำไปใช้กับองค์ประกอบเดียวได้ คุณสามารถตรวจสอบสไตล์ที่ใช้ได้ในโหมดนักพัฒนาเบราว์เซอร์ โดยคลิกขวาที่องค์ประกอบด้านบนแล้วเลือก "ดูโค้ด" (หรืออะไรที่คล้ายกัน) คอลัมน์ทางขวาจะแสดงรายการคุณสมบัติทั้งหมดที่ตั้งค่าไว้ในองค์ประกอบนี้หรือสืบทอดมาจากองค์ประกอบหลัก พร้อมด้วยไฟล์สไตล์ที่ระบุไว้ และบรรทัดลำดับของโค้ด

4) เมื่อกำหนดสไตล์ คุณสามารถใช้ตัวเลือกผสมใดก็ได้ - ตัวเลือกองค์ประกอบ, คลาสหลอกองค์ประกอบ, คลาส หรือตัวระบุองค์ประกอบ

5.2. น้ำตก

เรียงซ้อนเป็นกลไกที่ควบคุมผลลัพธ์สุดท้ายในสถานการณ์ที่มีการนำกฎ CSS ที่แตกต่างกันไปใช้กับองค์ประกอบเดียวกัน มีเกณฑ์สามประการที่กำหนดลำดับในการใช้คุณสมบัติ ได้แก่ กฎสำคัญ ความเฉพาะเจาะจง และลำดับการรวมสไตล์ชีต

กฎ!สำคัญ

น้ำหนักของกฎสามารถระบุได้โดยใช้คีย์เวิร์ด!important ซึ่งจะถูกเพิ่มทันทีหลังค่าคุณสมบัติ เช่น span (font-weight:old!important;) กฎจะต้องวางไว้ที่ส่วนท้ายของการประกาศก่อนวงเล็บปิดโดยไม่มีช่องว่าง การประกาศดังกล่าวจะมีความสำคัญเหนือกว่ากฎอื่นๆ ทั้งหมด กฎนี้อนุญาตให้คุณยกเลิกค่าคุณสมบัติและตั้งค่าใหม่สำหรับองค์ประกอบจากกลุ่มองค์ประกอบในกรณีที่ไม่มีการเข้าถึงไฟล์สไตล์โดยตรง

ความจำเพาะ

เบราว์เซอร์จะคำนวณสำหรับแต่ละกฎ ความจำเพาะของตัวเลือกและหากองค์ประกอบมีการประกาศคุณสมบัติที่ขัดแย้งกัน กฎที่มีความเฉพาะเจาะจงที่สุดจะถูกนำมาพิจารณาด้วย ค่าความจำเพาะมีสี่ส่วน: 0, 0, 0, 0 ความจำเพาะของตัวเลือกถูกกำหนดดังนี้:

สำหรับ id จะมีการเพิ่ม 0, 1, 0, 0;
สำหรับคลาส 0, 0, 1, 0 ถูกเพิ่ม;
สำหรับแต่ละองค์ประกอบและองค์ประกอบหลอก จะมีการเพิ่ม 0, 0, 0, 1;
สำหรับสไตล์อินไลน์ที่เพิ่มเข้ากับองค์ประกอบโดยตรง - 1, 0, 0, 0 ;
ตัวเลือกสากลไม่มีความเฉพาะเจาะจง

H1 (สี: ฟ้าอ่อน;) /*ความจำเพาะ 0, 0, 0, 1*/ em (สี: เงิน;) /*ความจำเพาะ 0, 0, 0, 1*/ h1 em (สี: ทอง;) /*ความจำเพาะ: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about (สี: น้ำเงิน;) /*ความจำเพาะ: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .sidebar (สี: สีเทา;) /*ความจำเพาะ 0, 0, 1, 0 */ #sidebar (สี: ส้ม;) /*ความจำเพาะ 0, 1, 0, 0*/ li#sidebar (สี: น้ำ;) /*ความจำเพาะ: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/

ด้วยเหตุนี้ กฎเหล่านั้นที่มีความเฉพาะเจาะจงมากขึ้นจะถูกนำไปใช้กับองค์ประกอบ ตัวอย่างเช่นหากองค์ประกอบมีความจำเพาะสองประการโดยมีค่า 0, 0, 0, 2 และ 0, 1, 0, 1 กฎข้อที่สองจะชนะ

ลำดับของตารางที่เชื่อมต่อกัน

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

สำหรับผู้เริ่มต้น ฉันจะบอกว่าตัวเลือกถูกใช้เพื่อระบุองค์ประกอบในเอกสาร html โดยไม่ซ้ำกันซึ่งเราต้องการใช้สไตล์ CSS เฉพาะ

ตัวเลือกองค์ประกอบ

จนถึงจุดนี้ เราได้ทำงานร่วมกับตัวเลือกนี้แล้ว ชื่อขององค์ประกอบ html ที่เราต้องการใช้สไตล์นี้ถูกใช้เป็นตัวเลือก เหล่านั้น. หลังจากเขียนคลาสเช่นย่อหน้า (P) แล้ว ทุกย่อหน้าบนเพจก็ได้รับสไตล์ของคลาสนี้

ป{
ขนาดตัวอักษร: 12px
}

ทีนี้ลองนึกภาพสถานการณ์ที่คุณต้องสร้างย่อหน้าแรกในรูปแบบหนึ่ง ย่อหน้าแรกในรูปแบบอื่น ย่อหน้าแรกในรูปแบบที่สาม ฯลฯ ที่นี่มันจะมาช่วยเหลือเรา ตัวเลือกตามชั้นเรียน.

ตัวเลือกตามชั้นเรียน

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

.สีเขียว {
ตระกูลฟอนต์: arial, verdana, sans-serif;
ขนาดตัวอักษร: 12px; สี:สีเขียว;
}

วิธีการใช้สไตล์นี้?

สมมติว่าเราต้องการใช้สไตล์นี้กับย่อหน้าเฉพาะในเอกสาร นี่คือลักษณะที่จะปรากฏใน html:

ชั้น = "สีเขียว" > ... ข้อความย่อหน้า...