ตัวอย่างสไตล์ CSS แบบเรียงซ้อน ตัวอย่าง. การเลือกบล็อกที่มีเส้นขอบ การระบุค่าน้อยกว่าสี่ค่าสำหรับคุณสมบัติชวเลข

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

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

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


ข้าว. 1. โครงสร้างการประกาศสไตล์ 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. ตัวเลือกชั้นเรียน

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

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

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

.headline ( การแปลงข้อความ: ตัวพิมพ์ใหญ่; สี: สีฟ้าอ่อน; )

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

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

#sidebar ( กว้าง: 300px; ลอย: ซ้าย; )

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 - ลิงก์ทั้งหมดที่มีชื่อมีหนังสือ

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

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

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

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

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

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

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

:เปิดใช้งาน - ทั้งหมด ฟิลด์ที่ใช้งานอยู่แบบฟอร์ม;

: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

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

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

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

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

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

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


ข้าว. 2. โหมดนักพัฒนาซอฟต์แวร์ใน เบราว์เซอร์ Googleโครเมียม

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

div (เส้นขอบ: 1px solid #eee;) #wrap (กว้าง: 500px;).box (float: left;).clear (ชัดเจน: ทั้งสอง;)

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 กฎข้อที่สองจะชนะ

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

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

1. CSS Cascading Style Sheets คืออะไร

สวัสดีผู้อ่านที่รักของฉัน ฉันตัดสินใจเปิดส่วนใหม่ของไซต์ที่เน้นการทำงานกับสไตล์ชีตแบบเรียงซ้อน CSS

ดังนั้น, CSS สไตล์ชีทแบบเรียงซ้อนคืออะไร?

ซีเอสเอส(ภาษาอังกฤษ) สไตล์ชีทแบบเรียงซ้อน — สไตล์ชีตแบบเรียงซ้อน) เป็นภาษาสำหรับอธิบายลักษณะที่ปรากฏของเอกสารที่เขียนโดยใช้ภาษามาร์กอัป
เพื่อให้ผู้เริ่มต้นเข้าใจได้ง่ายขึ้น CSS สไตล์ชีทแบบเรียงซ้อนได้รับการออกแบบมาเพื่อสร้างการออกแบบที่สวยงามและง่ายต่อการแก้ไขสำหรับหน้าเว็บไซต์ html

สไตล์ชีตแบบเรียงซ้อนถูกนำมาใช้ครั้งแรกในทศวรรษที่ 90 ของศตวรรษที่ผ่านมา แต่ในตอนแรกพวกเขาไม่ได้รับความนิยมเหมือนตอนนี้ เนื่องจากเบราว์เซอร์ที่แตกต่างกันรับรู้และแสดงหน้า html ที่ใช้ css ต่างกัน

หลังจากนั้นไม่นาน เพื่อให้การทำงานของผู้สร้างไซต์ง่ายขึ้น เบราว์เซอร์จึงเริ่ม "ปรับ" ให้เป็นมาตรฐานเดียวกัน ในปัจจุบัน โปรแกรมเกือบทั้งหมดที่ใช้ในการดูหน้าอินเทอร์เน็ตสร้างเว็บไซต์ที่ใช้สไตล์ชีต CSS แบบเรียงซ้อนเท่าๆ กัน

ข้อสังเกตของฉัน!!!จากการสังเกตส่วนตัวของผมดังกล่าว เวอร์ชันล่าสุด เบราว์เซอร์เช่น Opera, Mazilla ForeFox, Maxthon, Google Chrome และ อินเทอร์เน็ตเอ็กซ์พลอเรอร์หน้าที่ใช้สไตล์ชีตแบบเรียงซ้อนจะแสดงเกือบจะเหมือนกัน แต่ถ้าเบราว์เซอร์ไม่แสดง รุ่นล่าสุดจากนั้นหน้าเว็บไซต์ก็จะดูแตกต่างออกไป และเพื่อให้ไซต์ของคุณดูเหมือนกันในเบราว์เซอร์เกือบทั้งหมด เทคโนโลยีพิเศษการตั้งค่าสไตล์ชีตแบบเรียงซ้อน

เรามาเริ่มสร้างกันดีกว่า ตารางใหม่สไตล์และเชื่อมต่อกับเอกสารของเรา

2. จะสร้างสไตล์ชีต CSS แบบเรียงซ้อนได้อย่างไร?

ในส่วนนี้ของบทความนี้ เราจะสร้างและเชื่อมต่อสไตล์ชีตแบบเรียงซ้อนกับหน้า html ที่ง่ายที่สุด

เรามาทำสิ่งนี้กัน:

1. เราสร้างโฟลเดอร์ที่จะมีหน้า html และสไตล์ชีตแบบเรียงซ้อนของเรา
ให้โฟลเดอร์ของฉันถูกเรียกว่า "css"

2. เราสร้าง HTML ง่าย ๆหน้า (index.html) คุณสามารถอ่านวิธีการทำสิ่งนี้ได้

3. ตอนนี้เราสร้างเอกสารข้อความธรรมดา (คล้ายกับการสร้างหน้า html) เพียงเรียกมันว่า style.css

ดังนั้นคุณควรได้รับสิ่งนี้:

เพียงเท่านี้ไฟล์ก็จะมี สไตล์ CSSพร้อม.

ตอนนี้เรามาเชื่อมต่อสไตล์ชีตที่สร้างขึ้นกับไฟล์ index.html

3. จะเชื่อมต่อ CSS สไตล์ชีทแบบเรียงซ้อนได้อย่างไร?

ดังนั้น ในการเชื่อมต่อสไตล์ชีตกับหน้า html คุณจะต้องอยู่ในไฟล์ index.html ในแท็ก เพิ่มแท็ก:

ที่นี่ในแอตทริบิวต์ href="style.css"มีการระบุเส้นทางไปยังไฟล์ด้วยสไตล์ css ในกรณีนี้ ไฟล์ css และ index.html จะอยู่ในโฟลเดอร์เดียวกัน

ตัวอย่างเช่น หากไฟล์ index.html ของเรามีโค้ดต่อไปนี้:

สำคัญ!!! อย่าลืมตั้งค่าการเข้ารหัสเป็น 1251 (ANSI-Cyrillic) เมื่อบันทึกไฟล์ index.html ใน Notepad เพราะถ้าคุณไม่ทำเช่นนี้และบันทึกไฟล์ด้วยการเข้ารหัสอื่น เบราว์เซอร์จะแสดง "ดูเดิล" แทนข้อความ

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

เพียงเท่านี้ ไฟล์ index.html ก็ถูกสร้างขึ้นแล้ว และสไตล์ชีต css ก็เชื่อมต่อกับไฟล์นั้นด้วย

ตอนนี้เรามาดูการทำงานของสไตล์ชีท CSS กัน

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

หากต้องการตั้งค่าภาพพื้นหลัง คุณต้องทำเครื่องหมายลงในโฟลเดอร์ที่มีไฟล์ของเรา

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

ในหลักสูตรของเรา เราจะครอบคลุมบทเรียน CSS เช่น บทเรียนเกี่ยวกับเทคโนโลยีที่สำคัญที่สุดอย่างหนึ่งในการจัดวางหน้าเว็บ

ในบทเรียนนี้ เราจะออกแบบหน้าเว็บของเราให้มีสีสันมากขึ้น (รูปที่ 1)

รูปที่ 1

ก่อนที่จะไปยังการออกแบบเพจ เรามาศึกษาวิธีการตั้งค่าสีในเว็บกันก่อน

1. คำจำกัดความของสี บทเรียน CSS

เมื่อกำหนดสีสำหรับ เอกสาร HTMLคุณสามารถใช้ชื่อสีหรือชื่อก็ได้ รหัสฐานสิบหก- ระบบการเข้ารหัสเลขฐานสิบหกนั้นใช้องค์ประกอบสามส่วน ได้แก่ สีแดง (สีแดง) สีเขียว (สีเขียว) และสีน้ำเงิน (สีน้ำเงิน) จึงเป็นที่มาของชื่อ RGB ตามตัวอักษรตัวแรกของชื่อสีเหล่านี้ แต่ละส่วนประกอบสอดคล้องกับเลขฐานสิบหกตั้งแต่ 00 ถึง FF (0 และ 255 ในรูปแบบทศนิยม) จากนั้นค่าทั้งสามนี้จะรวมกันเป็นค่าเดียวที่นำหน้าด้วย # เช่น #800080 ซึ่งตรงกับสีม่วง

ตารางแสดงชื่อสีบางสีและรหัส สามารถดูตารางสีที่สมบูรณ์ยิ่งขึ้นและรหัสได้ในโฟลเดอร์ สีอยู่ในโฟลเดอร์ ซีดี.

สี

สี

สีดำ

เงิน

สีน้ำตาลแดง (เบอร์กันดีเข้ม)

สีแดง

สีเขียว

มะนาว (มะนาว)

มะกอก

สีเหลือง

น้ำเงิน (น้ำเงินเข้ม)

สีฟ้า

สีม่วง

สีบานเย็น (บานเย็น)

ฟ้าอมเขียว (เขียวเข้ม)

สีเทา

สีขาว

โต๊ะ สีที่ปลอดภัยสำหรับการพัฒนาการออกแบบเว็บไซต์

ชุดสีที่ปลอดภัยช่วยให้มั่นใจได้ถึงการแสดงผลที่แม่นยำที่สุดบนจอภาพต่างๆ

จานสีที่ปลอดภัยประกอบด้วย 216 สี สีที่ปลอดภัยจะสอดคล้องกันเสมอจากเบราว์เซอร์หนึ่งไปยังอีกเบราว์เซอร์หนึ่ง จากแพลตฟอร์มหนึ่งไปยังอีกหน้าจอหนึ่ง จากจอภาพหนึ่งไปยังอีกหน้าจอหนึ่งด้วยความสามารถในการแสดงสีและความละเอียดที่แตกต่างกัน

ถ้าอย่างใดอย่างหนึ่งทั้งสาม ค่าเลขฐานสิบหกแตกต่างจาก 00, 33, 66, 99, SS หรือ FF ดังนั้นสีจึงไม่ปลอดภัย

สามารถดูตารางสีที่ปลอดภัยได้ในโฟลเดอร์ ซีดี/ สี.

2. คำจำกัดความ CSS

หน้าเว็บของเรายังไม่มีการออกแบบ ซึ่งสามารถทำได้สองวิธี:

  • ครั้งแรก - โดยวิธีการ สไตล์ชีต ซีเอสเอส (วิธีการที่ก้าวหน้าและถูกต้องมากขึ้น)
  • ประการที่สอง - โดยวิธีการ คุณลักษณะของแท็ก HTML .

มาเริ่มต้นกันทันทีด้วยวิธีการที่ก้าวหน้ากว่านี้

CSS - สไตล์ชีตแบบเรียงซ้อน(ข้อกำหนดลักษณะแบบลำดับชั้นหรือสไตล์ชีตแบบเรียงซ้อน) ไม่ได้แทนที่ภาษามาร์กอัป แต่เป็นเทคโนโลยีอิสระที่นำไปใช้กับแท็ก HTML

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

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

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

สไตล์ชีตประกอบด้วยชุดขององค์ประกอบ CSS ที่มีโครงสร้างแตกต่างจากโครงสร้างขององค์ประกอบ HTML

ไวยากรณ์ซีเอสเอส-องค์ประกอบ

ตัวเลือก (คุณสมบัติ 1: ค่า; คุณสมบัติ 2: ค่า; ... คุณสมบัติ N: ค่า)

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

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

สามารถมีคุณสมบัติสไตล์ได้มากเท่าที่คุณต้องการ

CSS ไม่คำนึงถึงขนาดตัวพิมพ์ การขึ้นบรรทัด การเว้นวรรค หรือ อักขระแท็บ, ดังนั้นรูปแบบการบันทึกจึงขึ้นอยู่กับความต้องการของผู้พัฒนา

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

h1 (ตระกูลแบบอักษร:Arial; ขนาดแบบอักษร:14pt)

หรือเหมือนกันสามารถเขียนได้ดังนี้:

ตระกูลแบบอักษร: Arial;

ขนาดตัวอักษร:14pt

ในตัวอย่างนี้:

  • h1 - ตัวเลือกในกรณีนี้คือองค์ประกอบ HTML
  • ตระกูลฟอนต์และขนาดฟอนต์ - คุณสมบัติสไตล์
  • Arial - ค่าของทรัพย์สินตระกูลฟอนต์
  • 14pt คือค่าของคุณสมบัติขนาดตัวอักษร

วิธีรวมสไตล์ชีตในเอกสาร HTML

  1. สไตล์ชีตภายนอก (สไตล์ที่เชื่อมโยง)
  2. สไตล์ชีตแบบฝัง (สไตล์สากล)
  3. สไตล์ภายใน

3. สไตล์ชีต CSS ภายนอก (สไตล์ที่เชื่อมโยง)

กำหนดสไตล์ของทั้งไซต์

เป็นไฟล์ข้อความที่มีนามสกุล css

ใน ในตัวอย่างนี้สไตล์ชีทถูกเขียนไว้ ไฟล์ข้อความสไตล์.css.

แบบฝึกหัดที่ 1

1. เปิดเอกสารเปล่าใน Notepad++ แล้วบันทึกลงในโฟลเดอร์ public_htmlภายใต้ชื่อ สไตล์. ซีเอสเอส- โปรดทราบว่าในสนาม ประเภทไฟล์ก่อตั้งขึ้น ทุกประเภท(รูปที่ 2)

รูปที่ 2

2. เนื่องจาก CSS เป็นเทคโนโลยีที่แตกต่าง จึงไม่มีการเขียนแท็ก HTML ในไฟล์ .css เลย มาจัดรูปแบบชื่อ "แคตตาล็อกโครงการสถาปัตยกรรม" ของเราในไฟล์กัน หลัก. htmlจัดกึ่งกลาง สีฟ้า ฟอนต์ Verdana ความสูงของฟอนต์ 20 pt เพื่อจุดประสงค์นี้ใน ไฟล์ cssมาทำกันเถอะ รายการถัดไป(รูปที่ 3):

รูปที่ 3

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

  • h1 เป็นตัวเลือกเช่น องค์ประกอบ html ที่ใช้สไตล์
  • การจัดตำแหน่งข้อความ: กึ่งกลาง; - สไตล์ คุณสมบัติการจัดแนวข้อความ(จัดแนวข้อความ) ด้วยศูนย์ค่า (กึ่งกลาง);
  • สี:#0000FF; - สีคุณสมบัติสไตล์ (สีข้อความ) พร้อมค่า สีฟ้า#0000FF (ค่าที่นำมาจากตารางสี)
  • ตระกูลแบบอักษร:Verdana; - คุณสมบัติสไตล์ของแบบอักษรแบบอักษรตระกูลฟอนต์ที่มีค่า Verdana
  • คุณสมบัติสไตล์ที่มีค่าจะถูกคั่นด้วยเครื่องหมายอัฒภาค
  • และอื่นๆ ทั้งหมดเป็นไปตามไวยากรณ์

เพื่อให้หน้าเว็บของเรา "เห็น" สไตล์ชีทและใช้คุณสมบัติกับองค์ประกอบ html จำเป็นต้องสร้างลิงก์ระหว่างไฟล์ หลัก. htmlและ สไตล์. ซีเอสเอส- ในการดำเนินการนี้ ให้เปิดไฟล์ main.html และระหว่างแท็กต่างๆ < ศีรษะ> และ ศีรษะ> การออกแบบแทรก , ยังไงในรูปที่ 4

รูปที่ 4

3. ดูผลลัพธ์ในเบราว์เซอร์ มันควรจะตรงกับรูปที่ 5

รูปที่ 5

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

4. กำหนดสไตล์สำหรับหัวข้อ h2 “โครงการสำหรับบ้านในอนาคตของคุณ” โดยจัดวางให้ถูกต้อง สีเบอร์กันดี, ฟอนต์ Verdana, ความสูงของฟอนต์ 16 pt. เมื่อต้องการทำสิ่งนี้ในไฟล์ สไตล์. ซีเอสเอส ชม.2 (รูปที่ 6)

รูปที่ 6

5. ตรวจสอบผลลัพธ์ในเบราว์เซอร์ควรตรงกับรูปที่ 7

รูปที่ 7

6. ย่อหน้าจะเป็นสีน้ำเงินเข้ม แบบอักษร Arial ความสูงของแบบอักษร 12 พอยต์ เมื่อต้องการทำสิ่งนี้ในไฟล์ สไตล์. ซีเอสเอสมาสร้างรายการต่อไปนี้สำหรับตัวเลือก พี(รูปที่ 8)

รูปที่ 8

7. เราจะทำให้พื้นหลังของหน้าเว็บทั้งหมดเป็นสีฟ้าด้วย เมื่อต้องการทำเช่นนี้ให้กับตัวเลือก ร่างกายเพิ่มบันทึก (รูปที่ 9)

รูปที่ 9

8. ดูผลลัพธ์ในเบราว์เซอร์ มันควรจะตรงกับรูปที่ 10

รูปที่ 10

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

การมอบหมายงานวิจัย

  1. การใช้ไดเร็กทอรี Sprav_CSS.doc,จัดรูปแบบชื่อเรื่อง < ชม.3> ในไฟล์ main.html คุณสมบัติสไตล์ให้เลือก
  2. สำหรับรายการ "โครงการบ้าน" ให้ใช้รูปแบบ เปลี่ยนเลขอารบิคเป็นเลขโรมัน พารามิเตอร์อื่นๆ เป็นทางเลือก
  3. สำหรับรายการ "พื้นที่บ้าน" ให้ใช้รูปภาพเป็นเครื่องหมาย spisok_1.gifจากโฟลเดอร์ html_css_2- พารามิเตอร์อื่นๆ เป็นทางเลือก
  4. ใช้รูปภาพเป็นพื้นหลังของหน้าเว็บผ่านสไตล์ fon9.jpgจากโฟลเดอร์ html_css_2.
  5. ใช้ลักษณะเพื่อทำให้แบบอักษรของย่อหน้าเป็นตัวหนา

ผลลัพธ์ตัวอย่างแสดงในรูปที่ 11

รูปที่ 11

4. คลาสตามข้อกำหนดสไตล์

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

ตัวอย่างเช่น เรามีหัวเรื่องหลายหัวในข้อความ ชม.1 และเราต้องการให้มีสีต่างกัน จากนั้นคุณจะต้องแยกสไตล์ดังนี้:

h1.golub(สี:สีฟ้า)

h1.krasn(สี:แดง)

h1.เขียว(สี:เขียว)

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

ตอนนี้เมื่อใช้แท็ก < ชม.1> ต้องตั้งค่าแอตทริบิวต์ในเอกสาร ระดับเพื่อระบุสไตล์ที่จะใช้:

< ชม.1 ระดับ=" โกลูบ"> นี่คือชื่อสีน้ำเงิน ชม.1>

< ชม.1 ระดับ=" คราสน์"> นี่คือหัวสีแดง ชม.1>

< ชม.1 ระดับ=" สีเขียว"> นี่คือส่วนหัวสีเขียว ชม.1>

แบบฝึกหัดที่ 2

1. เปิดไฟล์ แม่แบบ. html- บันทึกไว้ในชื่อใหม่ สี่เหลี่ยม. htmlในโฟลเดอร์ public_html.

2. เขียนระหว่างแท็ก และหัวข้อใหม่ "พื้นที่บ้าน"

3. เพื่อเนื้อหา คัดลอกข้อความจากไฟล์ พื้นที่บ้าน.txtจากโฟลเดอร์ html_ ซีซีเอส_2 .

4. เราจะเขียนสไตล์ในไฟล์เดียวกัน สไตล์. ซีเอสเอสซึ่งเราสร้างไว้ในบทเรียนที่แล้ว ดังนั้นในไฟล์ สี่เหลี่ยม. htmlเชื่อมโยงไปยังสไตล์ชีตนี้โดยการแทรกระหว่างแท็ก และ(ภาพที่ 12)

รูปที่ 12

5. จัดรูปแบบส่วนหัวด้วยแท็ก

และกำหนดแต่ละหัวข้อเป็นชั้นของตัวเอง (รูปที่ 13)

รูปที่ 13

ไฟล์ของคุณ สี่เหลี่ยม. htmlตอนนี้ควรมีลักษณะเช่นนี้ (รูปที่ 14)

รูปที่ 14

6. ในสไตล์ชีท สไตล์. ซีเอสเอสสร้างรายการต่อไปนี้ (รูปที่ 15)

รูปที่ 15

7. ตรวจสอบหน้าเว็บในเบราว์เซอร์ของคุณ ผลลัพธ์อยู่ในรูปที่ 16

รูปที่ 16

8. คุณอาจสังเกตเห็นว่าโพสต์รูปแบบส่วนหัวใหม่ของเรามีโครงสร้างที่ซ้ำกัน ตระกูลแบบอักษร:Verdana; การจัดแนวข้อความ: ซ้าย; ขนาดตัวอักษร:14pt.โครงสร้างดังกล่าวสามารถเขียนได้ครั้งเดียวโดยการจัดกลุ่มตัวเลือกที่จะใช้ ในการดำเนินการนี้ คุณจะต้องแสดงรายการตัวเลือกโดยคั่นด้วยเครื่องหมายจุลภาค แล้วเขียนในวงเล็บปีกกา คุณสมบัติทั่วไป- จากนั้นสไตล์ชีตสำหรับส่วนหัวของเราจะมีลักษณะดังนี้ (รูปที่ 17):

รูปที่ 17

แบบฝึกหัดที่ 3

ใต้แต่ละหัวข้อในไฟล์ สี่เหลี่ยม. htmlมีข้อความอยู่ จัดรูปแบบย่อหน้าโดยใช้คลาสต่างๆ ใช้สี การจัดแนว และแบบอักษรที่แตกต่างกัน ชื่อคลาสต้องไม่ซ้ำกัน ไม่แนะนำให้ใช้ชื่อเดียวกันสำหรับตัวเลือกที่แตกต่างกัน หนึ่งในตัวเลือกที่เป็นไปได้ในรูปที่ 18:

รูปที่ 18

5. สไตล์ ID สำหรับองค์ประกอบเฉพาะ

บทเรียน CSS รวมถึงการเรียนรู้เกี่ยวกับสไตล์ที่เรียกว่ารหัส

องค์ประกอบใดๆ สามารถกำหนดตัวระบุได้ รหัสจากนั้นกำหนดสไตล์ให้กับองค์ประกอบนี้โดยใช้ รหัส.

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

รายการในไฟล์สไตล์ชีตจะเป็นดังนี้

# ทดสอบ { สี:#00 ffff}

ตอนนี้คุณสามารถจับคู่สไตล์นี้กับองค์ประกอบใด ๆ ในเอกสาร html:

...

...

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

แบบฝึกหัดที่ 4

มาสร้างเทมเพลตสำหรับเมนูในอนาคตของเว็บไซต์ของเรากันดีกว่า

1. เปิดไฟล์ แม่แบบ. htmlและบันทึกไว้ในชื่อใหม่ เมนู. htmlในโฟลเดอร์ public_html.

2. ไปที่เนื้อหาของหน้าไฟล์ เมนู. htmlป้อนข้อความจากไฟล์ เมนู. ข้อความจากโฟลเดอร์ html_ ซีเอสเอส_2 .

3. ใช้แท็ก HTML จัดรูปแบบไฟล์ดังนี้:

  • สำหรับหัวข้อ “หมวดหมู่โครงการ”, “แคตตาล็อกโครงการสถาปัตยกรรม” และ “พื้นที่บ้าน” ใช้แท็ก

    ;

  • สำหรับรายการ "หมวดหมู่โครงการ" ให้ใช้รายการลำดับเลข
      ;
    1. สำหรับรายการ "แคตตาล็อกโครงการสถาปัตยกรรม" และ "พื้นที่บ้าน" ให้ใช้รายการสัญลักษณ์แสดงหัวข้อย่อย

      4. ที่ด้านบนของหน้าเว็บ ให้ใส่โลโก้ (file logo_myhouse.gif- ผลลัพธ์ควรตรงกับรูปที่ 19

      รูปที่ 19

      5. สำหรับเมนูนี้ เราจะจัดทำสไตล์ชีตแยกต่างหากภายใต้ชื่อ สไตล์_ เมนู. ซีเอสเอส. เชื่อมโยงไฟล์ เมนู. htmlและสไตล์ชีต สไตล์_ เมนู. ซีเอสเอสโดยการใส่รายการ ระหว่างแท็ก และในไฟล์ เมนู. html.

      6. สร้างเอกสารเปล่าและบันทึกไว้ใต้ชื่อ สไตล์_ เมนู.ซีเอสในโฟลเดอร์ของคุณ

      7. สำหรับกลุ่ม "หมวดหมู่โครงการ" ซึ่งประกอบด้วยชื่อและรายการลำดับเลข และสำหรับกลุ่ม "แคตตาล็อกโครงการสถาปัตยกรรม" ซึ่งรวมถึงชื่อและรายการหัวข้อย่อย เราจะใช้ชื่อของสไตล์ id สีฟ้า- เหล่านั้น. โค้ดจะมีลักษณะดังนี้ (รูปที่ 20):

      รูปที่ 20

      8. ในไฟล์ สไตล์_ เมนู. ซีเอสเอสรูปแบบขององค์ประกอบเหล่านี้จะเป็นสีน้ำเงินเข้มในแบบอักษร Tahoma (รูปที่ 21):

      รูปที่ 21

      9. สำหรับกลุ่ม “พื้นที่บ้าน” ซึ่งมีส่วนหัวและรายการสัญลักษณ์แสดงหัวข้อย่อย เราจะใช้ชื่อรูปแบบรหัส สีน้ำตาล- เหล่านั้น. โค้ดจะมีลักษณะดังนี้ (รูปที่ 22):

      รูปที่ 22

      10. ในไฟล์ สไตล์_ เมนู. ซีเอสเอสมาจัดสไตล์องค์ประกอบเหล่านี้กันดีกว่า สีน้ำตาลในแบบอักษร Times (รูปที่ 23):

      รูปที่ 23

      11. และเพิ่มสีพื้นหลังอื่นให้กับไฟล์ menu.html (รูปที่ 24)

      รูปที่ 24

      12. จึงได้หน้าเว็บดังนี้ (รูปที่ 25)

      รูปที่ 25

      หลังจากเสร็จสิ้นบทช่วยสอน CSS นี้แล้ว คุณควรสร้างไฟล์ต่อไปนี้:

      • สไตล์. ซีเอสเอส
      • สไตล์_ เมนู. ซีเอสเอส
      • สี่เหลี่ยม. html
      • เมนู. html

      สไตล์ชีตมีไว้เพื่ออะไร?

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

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

      อย่างไรก็ตาม มีการเปลี่ยนแปลงมากมายตั้งแต่นั้นมา และมาตรฐาน HTML ได้สูญเสียความกลมกลืนดั้งเดิมไป ในช่วงแรก Netscape ได้เพิ่ม "แท็กที่ได้รับการปรับปรุง" ซึ่งช่วยให้สามารถควบคุมลักษณะที่ปรากฏของข้อมูลที่นำเสนอได้ดียิ่งขึ้น นวัตกรรมดังกล่าวเกิดขึ้น และส่วนขยายของ Netscape ทั้งหมดก็กลายเป็นมาตรฐานโดยพฤตินัย จากนั้น Microsoft ก็ทำเช่นเดียวกัน เมื่อพวกเขาตระหนักว่า HTML เป็นส่วนผสมที่แย่มากระหว่างแท็กเชิงตรรกะและการออกแบบ ส่วนขยายที่เข้ากันไม่ได้ และหยุดสอดคล้องกับแนวคิดดั้งเดิมโดยสิ้นเชิง - เพื่อนำเสนอข้อมูลบนอุปกรณ์ใด ๆ โดยไม่คำนึงถึงลักษณะเอาต์พุตข้อมูล

      จากนั้นจึงดำเนินการสร้างมาตรฐานขนาดใหญ่ เป็นผลให้เกิดมาตรฐาน HTML 3.2 เขาไม่ได้ปฏิวัติ แต่เพียงวางนวัตกรรมทั้งหมดให้เข้าที่และพัฒนาเท่านั้น คำแนะนำทั่วไปสำหรับผู้ผลิตเบราว์เซอร์ การเปลี่ยนแปลงเชิงปฏิวัติถูกนำมาใช้ในมาตรฐานใหม่ - HTML 4.0 หรือที่เรียกกันว่า Dynamic HTML เลเยอร์ สไตล์ชีต และสากลแบบจำลองวัตถุ

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

      ปัญหาการนำเสนอข้อมูลปรากฏได้รับการแก้ไขอย่างไร?

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

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

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

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

      เมื่อเข้าใจทฤษฎีนี้มาบ้างแล้ว เรามาฝึกฝนกันต่อ และเราจะเริ่มต้นด้วยปัญหาการเชื่อมต่อสไตล์ชีตกับไฟล์ HTML
      การเชื่อมต่อสไตล์ชีท

      เพื่อให้งานนี้สำเร็จ เราสามารถใช้หนึ่งใน 3 วิธีที่เสนอ:

      ไฟล์ภายนอก

      คำอธิบายในส่วนหัว

      คำอธิบายแบบอินไลน์

      มาเริ่มกันด้วยวิธีที่ง่ายที่สุดด้วยสิ่งที่เรียกว่าคำอธิบายอินไลน์หรือคำอธิบายที่สร้างไว้ในแท็ก:

      ข้อความนี้ถูกแทนที่ตามสไตล์ การใช้แอตทริบิวต์ style เพิ่มเติม ทำให้เราสามารถกำหนดพารามิเตอร์สไตล์ที่เราต้องการในแท็กใดก็ได้ นี่คือที่สุดวิธีง่ายๆ

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

      เมื่อใช้วิธีการนี้ ต้องวางคำอธิบายสไตล์ไว้ในส่วนหัว:


      ....

      ตอนนี้สไตล์เหล่านี้สามารถนำไปใช้ได้ทุกที่ในโค้ด html มีการใช้โครงสร้างต่อไปนี้สำหรับสิ่งนี้:

      ข้อความนี้เขียนในรูปแบบส่วนหัว

      ข้อความนี้เขียนด้วยสีแดง

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

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

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

      การนำไปปฏิบัติเป็นอย่างไร? ไฟล์ภายนอก- ขั้นแรก ไฟล์สไตล์จะถูกสร้างขึ้นพร้อมกับคำอธิบายของคลาสทั้งหมดที่เราต้องการ (mystyle.css):

      ส่วนหัว (จัดข้อความ: กึ่งกลาง; ขนาดตัวอักษร: 27pt;)
      .red ( สี: แดง; )
      p (จัดข้อความ: กึ่งกลาง; ขนาดตัวอักษร: 12pt;)


      ....

      ....

      นี่คือที่สุด วิธีที่สะดวกและขอแนะนำให้ใช้สำหรับสไตล์ชีตหลัก

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

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

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

      โดยใช้ไฟล์สไตล์แยกต่างหากและแทรกโดยใช้แท็ก

      คำอธิบายสไตล์ในส่วนหัวของเอกสาร

      การใช้สไตล์เป็นพารามิเตอร์ในแท็ก

      การเรียงซ้อนหมายถึงสามารถแทนที่สไตล์ได้ รายการข้างต้นของวิธีการนำสไตล์ไปใช้ตามลำดับของการแทนที่

      วิธีการดาวน์สตรีมสามารถแทนที่วิธีการที่สูงกว่าได้

      ตัวอย่างเช่น เรากำหนดไว้ในไฟล์สไตล์ภายนอกว่าข้อความในแท็ก

      ต้องเขียนด้วยฟอนต์ขนาด 10 พอยต์ แต่หากในชื่อหน้าเราระบุเพิ่มเติมว่ามีข้อความเดียวกันอยู่ในแท็ก

      ควรเขียนด้วยฟอนต์ขนาด 12 พอยต์ จากนั้นข้อความจะแสดงในขนาดนั้นพอดี - เช่น สไตล์ในส่วนหัวของหน้าจะแทนที่สไตล์ในไฟล์ภายนอก มีไว้เพื่ออะไร? โอ้ นี่มันมากเลยนะสิ่งที่มีประโยชน์


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

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

      ลิขสิทธิ์ (ค)

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

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

      พื้นที่แนวตั้ง


      พื้นที่แนวตั้ง

      พื้นที่แนวตั้ง

      ) เช่นเดียวกับที่แท็กทำ

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

      แท็ก คล้ายกันซึ่งมีเนื้อหาหลักของหน้า วิธีที่ดีที่สุดคือกำหนดแท็กใหม่

      และไม่ใช่โดยการกำหนดคลาสแยกต่างหาก

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

      , เพราะ Netscape ปฏิเสธที่จะสืบทอดสไตล์ที่ได้รับมอบหมายต่อหน้าตารางโดยเด็ดขาด

      หลังจากจัดการกับการเรียงซ้อนแล้ว เรามาพูดถึงไวยากรณ์กันดีกว่า

      ไวยากรณ์ซีเอสเอส
      คำอธิบายของแต่ละคลาสทำได้โดยใช้โครงสร้างดังนี้:

      ขนาดเล็ก (ขนาดตัวอักษร: 9pt; )

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

      เล็ก ( ขนาดตัวอักษร: 9pt; color: #eeeeee; text-align: center; )

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


      เนื่องจากมีคลาสสากล แล้วอาจมีคลาสอื่นอีกบ้าง?

      ถูกต้อง ยังมีคลาสแท็กที่เรียกว่า:

      p.small (ขนาดตัวอักษร: 9pt; )

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


      ข้อความนี้จะแสดงในรูปแบบขนาดเล็ก

      เราสามารถกำหนดพารามิเตอร์ได้ไม่เพียงแต่สำหรับแท็กเดียว แต่ยังสำหรับหลายแท็กพร้อมกันด้วย

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

      p, td (ขนาดตัวอักษร: 9pt; สี:เขียว;)

      เทคนิคนี้เรียกว่าการจัดกลุ่ม และในกรณีนี้ เราได้กำหนดไว้สำหรับ

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

      a (การตกแต่งข้อความ: none; )
      a:hover ( การตกแต่งข้อความ: ขีดเส้นใต้; )

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

      และนี่คืออีกตัวอย่างหนึ่งของคลาสหลอก - การกำหนด drop cap ที่จุดเริ่มต้นของย่อหน้า:

      p:อักษรตัวแรก ( ขนาดตัวอักษร: 200%; น้ำหนักตัวอักษร: ตัวหนา; )

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

      อินเทอร์เน็ตของรัสเซียมีการเติบโตทุกวัน ในช่วงหนึ่งหรือสองปีที่ผ่านมา จำนวนหน้าภาษารัสเซียทั้งหมดเพิ่มขึ้นมากกว่าสองเท่า วันนี้ในรัสเซีย คุณจะไม่ทำให้ใครแปลกใจด้วยวลีนี้<домашняя страничка>หรือคำภาษาอังกฤษ - ถ้า การสร้างก่อนหน้านี้หน้าเว็บเป็นหน้าเว็บที่มีชนชั้นสูงและมีเพียงหน้าเว็บที่ได้รับการยอมรับเท่านั้นที่ครองราชย์ในความกว้างใหญ่ของ Runet<киты>การออกแบบเว็บไซต์ ตอนนี้แม้แต่ลูกชายวัยสิบขวบของฉันก็สร้างงานฝีมือเล็กๆ น้อยๆ ในเวลาว่างได้ หน้าของตัวเองมีแผนจะวางบนบ้าง เซิร์ฟเวอร์ฟรี(เช่น narod.ru หรือ boom.ru) ซึ่ง ปีที่แล้วนอกจากนี้ยังมีจำนวนมากบน RuNet ผู้ที่ไม่ได้เชื่อมต่ออินเทอร์เน็ตหรือขี้เกียจอาจไม่เกี่ยวข้องกับการออกแบบเว็บไซต์ในปัจจุบัน หลายคนที่ท่องอินเทอร์เน็ตไม่ช้าก็เร็วก็คิดจะสร้างเพจของตัวเอง สำหรับพวกเขาที่บทความนี้เขียนขึ้น

      เราจะพูดถึงที่นี่<правильном>HTML สำหรับผู้เริ่มต้น ได้แก่ - ประมาณบางส่วน คุณสมบัติเพิ่มเติมได้รับการอนุมัติอย่างเป็นทางการจาก Internet Consortium (http://www.w3.org/) โดยเฉพาะอย่างยิ่งเกี่ยวกับความสามารถบางอย่างที่มีให้โดย HTML แบบไดนามิก (DHTML) และแม่นยำยิ่งขึ้น - เกี่ยวกับวิธีการ ใช้ CSS(สไตล์ชีตแบบเรียงซ้อนหรือสไตล์ชีตแบบเรียงซ้อน) สร้างเพจที่ดูดีกว่าเพจที่สร้างขึ้นโดยใช้<классического>HTML ในขณะที่ใช้พื้นที่น้อยลงและส่งผลให้โหลดเร็วขึ้น

      ไม่กี่คนที่ตัดสินใจสร้างการนำเสนอเว็บของตัวเองเป็นครั้งแรกจะติดกระดาษจดบันทึกหรืออื่นๆ โปรแกรมแก้ไขข้อความเช่นโฮมไซต์ โดยปกติแล้วผู้เริ่มต้นจะคิดเช่นนี้:<Все свои привычные документы я создаю посредством программ WYSIWYG (<что вижу, то и получаю>) - ฉันสร้างข้อความใน MS Word งานนำเสนอใน MS PowerPoint ดังนั้นฉันจะใช้โปรแกรมที่คล้ายกันเพื่อสร้างหน้าเว็บ - MS FrontPage...> หลังจากตัดสินใจเช่นนี้ ประติมากรเว็บที่เพิ่งสร้างเสร็จใหม่ก็ปล้นตัวเองสองครั้ง

      ครั้งแรก - ในแง่ของการใช้พื้นที่เว็บอย่างมีเหตุผล ความจริงก็คือว่าโปรแกรมแก้ไขภาพของหน้าเว็บทั้งหมดซึ่งรวมถึง MS FrontPage ที่กล่าวถึงนั้นแทรกลงในเพจที่สร้างขึ้น<отсебятину>- มีแท็กที่ไม่จำเป็นเพิ่มเติมมากมาย อาจมีข้อยกเว้นคือ Macromedia Dreamweaver (ซึ่งได้รับความนิยมอย่างมากทั้งในหมู่ผู้เริ่มต้นและมืออาชีพ) แต่ถึงแม้เขาจะไม่เหมาะในเรื่องนี้ - เขาชอบทิ้งขยะ แหล่งที่มาเครื่องหมายคำพูด (ในกรณีส่วนใหญ่ไม่จำเป็นเลย) และยังใส่สัญลักษณ์ด้วย พื้นที่ไม่ทำลายในสถานที่ไม่เหมาะสมที่สุดสำหรับสิ่งนี้ เพื่อความเป็นธรรม เป็นที่น่าสังเกตว่าโปรแกรมแก้ไขภาพทั้งหมดเปิดโอกาสให้ผู้ใช้ได้ทำงานด้วย ซอร์สโค้ด กำลังสร้างเพจแต่ FrontPage อันเป็นที่รักจะทำซ้ำทุกอย่างในแบบของตัวเองอีกครั้งหากคุณเปลี่ยนกลับเป็นโหมดภาพ

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

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

      การจัดรูปแบบลอจิคัลและฟิสิคัล

      คลาสสิค เวอร์ชัน HTML 3.2 พบมากที่สุดใน ในขณะนี้บนเว็บ ให้วิธีการจัดรูปแบบเอกสารทางกายภาพแก่เรา ซึ่งมีแท็กพิเศษ (เช่น แท็ก , , ) และคุณลักษณะต่างๆ มากมาย (ขนาด สี ความสูง ความกว้าง ฯลฯ) คุณลักษณะของการจัดรูปแบบเว็บบังคับให้เราเขียนแท็กและคุณลักษณะเหล่านี้ซ้ำแล้วซ้ำอีกสำหรับแต่ละย่อหน้าใหม่ ซึ่งแน่นอนว่าจะเพิ่มขนาดของโค้ดเพจได้อย่างมาก นอกจากนี้ ด้วยวิธีการจัดรูปแบบนี้ ในกรณีของการวิเคราะห์โครงสร้างของเอกสาร ก็ยังไม่ชัดเจนว่าเหตุใดคำนี้จึงถูกเน้นด้วยตัวหนา - เพื่อความสวยงามหรือเพื่อดึงดูดความสนใจ ความสนใจเป็นพิเศษ ผู้ใช้ปลายทาง- หากคนที่ยังมีชีวิตอยู่ยังสามารถเข้าใจการสร้างเพจเชิงตรรกะใน HTML แบบคลาสสิกเป็นอย่างน้อยได้ เครื่องมือค้นหาโอ้หรือตัวอย่างเช่น ไม่สามารถพูดได้ในเบราว์เซอร์เสียง นำพวกเขาออกไปและใส่ตรรกะที่แท้จริงลงในโครงสร้างของเพจ มันเป็นเพราะสิ่งนี้<неподвластности>สำหรับการวิเคราะห์เชิงตรรกะ วิธีการจัดรูปแบบนี้เรียกว่าการจัดรูปแบบทางกายภาพ ในทางตรงกันข้าม เมื่อสร้างข้อกำหนด HTML 4.0 ใหม่ การจัดรูปแบบแบบลอจิคัลจะถูกให้ความสำคัญเป็นอันดับแรก กล่าวคือ การจัดรูปแบบที่โครงสร้างและการออกแบบของเอกสารจะแยกออกจากกันอย่างชัดเจน Internet Consortium แนะนำให้ใช้วิธีการจัดรูปแบบนี้ เนื่องจากวิธีนี้ให้โอกาสในการค้นหาข้อมูลบนอินเทอร์เน็ตที่กว้างขวาง ช่วยให้คุณสามารถจัดโครงสร้างและวิเคราะห์ข้อมูลโดยใช้เครื่องมือค้นหาได้แม่นยำยิ่งขึ้น และยังช่วยลดขนาดของหน้าเว็บและเวลาลงอย่างมาก โหลดเต็ม- การแยกโครงสร้างเอกสารและการออกแบบทำได้โดยใช้ CSS

      เป็นที่น่าสังเกตว่าจุดเริ่มต้น การจัดรูปแบบเชิงตรรกะมีอยู่ในแท็ก HTML แบบคลาสสิกด้วย

      ,

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

      การกำหนดสไตล์ให้กับองค์ประกอบของหน้าแต่ละส่วน

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

      สมมติว่าเราต้องการให้ทุกย่อหน้าแสดงเป็นแบบอักษร Times New Roman ขนาด 12 จุดเป็นสีเขียวเข้ม ในการดำเนินการนี้ คุณจะต้องระบุแอตทริบิวต์ style ของแท็ก โดยกำหนดค่าให้เหมาะสม ไวยากรณ์คือ:

      ดังนั้นทุกย่อหน้าบนหน้าจึงแสดงตามที่เราต้องการ และโค้ดไม่อุดตันด้วยแท็ก และคุณลักษณะของพวกเขา ลองนึกภาพการประหยัดขนาดไฟล์หากเพจของคุณประกอบด้วยข้อความจำนวนมาก!

      โปรดทราบว่าเมื่อเราระบุรูปแบบตัวอักษร หลังจากชื่อ Times New Roman เราได้ระบุรูปแบบ serif ซึ่งหมายถึงแบบอักษรใดๆ ที่มี serif หากเครื่องของผู้ใช้ไม่ได้ติดตั้งแบบอักษร Times New Roman เบราว์เซอร์จะแทนที่แบบอักษร serif ที่มีอยู่ และการแสดงหน้าเว็บจะใกล้เคียงกับที่คุณต้องการมากที่สุด นอกจากนี้ ตัวอย่างที่ให้มาจะสามารถเข้าใจได้ทั้ง IE (4.0 และสูงกว่า) และ NN (4.0 และสูงกว่า) แม้ว่าเราจะต้องจองทันทีว่า Netscape Navigator ไม่รองรับคุณสมบัติทั้งหมดที่มีให้โดย CSS และ DHTML และแน่นอนว่าสิ่งนี้ไม่ได้เพิ่มจำนวนแฟน ๆ ของมัน

      ตัวอย่างข้างต้นใช้การฝังสไตล์ลงในแท็กเอกสารโดยตรง - ที่เรียกว่าสไตล์อินไลน์ แนะนำให้ใช้วิธีการเชื่อมโยง CSS กับไฟล์ HTML นี้ในกรณีที่แยกกัน - หากมีการวางแผนให้ใช้สไตล์นี้กับองค์ประกอบเดียวในหน้าเดียวของเว็บไซต์ หากต้องใช้สไตล์กับองค์ประกอบหลายรายการในหน้าเดียวกันหรือหลายหน้าพร้อมกัน แนะนำให้ใช้วิธีอื่นในการเชื่อมโยง CSS และ HTML ซึ่งเราจะหารือกันต่อไป

      การกำหนดสไตล์ให้กับหลายองค์ประกอบในหน้าเดียวกัน - สร้างสไตล์ชีตแบบฝัง

      จนถึงตอนนี้ เรากำลังพูดถึงการตั้งค่าเพียงสไตล์เดียวสำหรับองค์ประกอบเดียว ตอนนี้เราจะเรียนรู้วิธีสร้างสไตล์ชีท

      สมมติว่าเราต้องการให้ย่อหน้าทั้งหมดบนหน้ามีลักษณะเหมือนตัวอย่างก่อนหน้านี้ โดยมีส่วนหัวระดับแรกเป็นตัวหนา Arial สีเขียว 16 จุด และส่วนหัวระดับที่สองทั้งหมดเป็นตัวหนา ตัวเอียง สีเหลืองเขียว การทำเช่นนี้เราจำเป็นต้องสร้างใน<голове>หน้า (ที่ใดก็ได้ระหว่างแท็ก และ) สไตล์ชีตแบบฝังซึ่งเราจะเขียนกฎหลายข้อในคราวเดียว เมื่อต้องการทำเช่นนี้ ให้สร้างแท็กคอนเทนเนอร์สไตล์ชีตที่เริ่มต้นด้วยแท็กเปิด- ภายในคอนเทนเนอร์แท็กนี้ เรามีอิสระที่จะตั้งค่ากฎ CSS จำนวนเท่าใดก็ได้ที่ประกอบด้วยตัวเลือก (name แท็ก HTMLซึ่งจะใช้กฎนี้) และคำจำกัดความ (ชุดของตัวจัดรูปแบบโดยตรง) อยู่ในเครื่องหมายปีกกา ไวยากรณ์สำหรับตัวอย่างข้างต้นคือ:

      ... ...

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

      การกำหนดสไตล์ให้กับหน้าเว็บไซต์หลายหน้าพร้อมกัน

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

      นี่คือตัวอย่างเนื้อหาของไฟล์ดังกล่าว (เช่น my.css):

      เนื้อความ ( ตระกูลแบบอักษร: "Times New Roman", serif; ขนาดตัวอักษร: 12pt; สี: สีเขียวเข้ม; ) h1 ( ตระกูลแบบอักษร: Arial, sans-serif; ขนาดแบบอักษร: 16pt; สี: สีเขียว; น้ำหนักแบบอักษร : ตัวหนา; ) h2 ( ตระกูลแบบอักษร: Arial, sans-serif; ขนาดตัวอักษร: 14pt; สี: สีเขียวเหลือง; น้ำหนักแบบอักษร: ตัวหนา; รูปแบบตัวอักษร: ตัวเอียง; )

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

      ... ...

      บรรทัดนี้ระบุว่าไฟล์ที่กำลังเชื่อมโยงเป็นสไตล์ชีต (rel="stylesheet") รูปแบบของไฟล์นี้คือ .css (type="text/css") และอยู่ในไดเร็กทอรีเดียวกันกับ ไฟล์ htmlหรือมี URL อื่น (href="my.css") แน่นอนว่าเราสามารถเขียนบรรทัดนี้ลงในไฟล์ html ใดๆ (หรือทั้งหมด) ของเราได้ ดังนั้นหนึ่ง จัดแต่งทรงผมจะถูกลงทะเบียนหลายหน้าพร้อมกัน

      โปรดทราบว่าสไตล์อินไลน์ (สไตล์ที่เขียนสำหรับ แต่ละองค์ประกอบหน้าโดยใช้แอตทริบิวต์ style) และสไตล์ที่ฝัง (สไตล์ที่เขียนใน<голове>หน้าภายในคอนเทนเนอร์แท็ก ...

      นอกจากที่อยู่ของสไตล์ชีตที่นำเข้าแล้ว คุณยังสามารถเขียนลงในแท็กคอนเทนเนอร์ได้ ... ...

      คำถามของนักข่าว

      คำตอบของผู้ถูกสัมภาษณ์

      ...

      ในตัวอย่างข้างต้น คำถามของนักข่าวจะแสดงเป็นแบบอักษร Arial สีเทา, ตัวหนา, ตัวเอียง ขนาด 10 พอยต์ โดยเว้นระยะ 15 พิกเซลจากขอบด้านซ้ายของหน้า คำตอบจะแสดงเป็นตัวอักษร Times New Roman ขนาด 12 จุด สีดำ สิ่งสำคัญคืออย่าลืมกำหนดพารามิเตอร์ class ให้กับคลาสย่อหน้าต่างๆ โดยตรง รหัสเอชทีเอ็ม- คุณสามารถสร้างคลาสจำนวนเท่าใดก็ได้สำหรับองค์ประกอบของหน้า

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

      มาดูอีกกรณีหนึ่ง สมมติว่าคุณต้องการสร้างองค์ประกอบที่ไม่ซ้ำใครบนเพจที่คุณวางแผนจะเข้าถึงในอนาคตจากโปรแกรม JavaScript บางทีองค์ประกอบเหล่านี้อาจถูกทำซ้ำในหน้าอื่นๆ และคุณต้องการทำให้องค์ประกอบเหล่านี้ดูสอดคล้องกันโดยใช้ CSS ในกรณีนี้ สไตล์ชีตแบบเรียงซ้อนมีความสามารถในการกำหนดตัวระบุ (id) ให้กับองค์ประกอบเฉพาะ การใช้ตัวระบุที่พบบ่อยที่สุดคือสำหรับองค์ประกอบของแบบฟอร์ม ซึ่งในข้อกำหนด HTML 4.0 มีการรองรับ CSS แบบเต็มหรือแบบจำกัด (ขึ้นอยู่กับองค์ประกอบ) ต่อไปนี้คือตัวอย่างการกำหนดกฎ ID และ CSS ให้กับองค์ประกอบดังกล่าว

      ... ... ...

      ข้อความที่ป้อนในช่องนี้จะปรากฏขึ้น สีเขียว:

      ข้อความที่กรอกในช่องนี้จะปรากฏเป็นสีแดง:

      ...

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

      ตัวเลือกบริบท

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

      H1 ( สี: แดง; สีพื้นหลัง: เทา; ) p ( สี: เขียว; สีพื้นหลัง: เหลือง; ) em ( สี: ดำ; สีพื้นหลัง: เงิน; )

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

      H1 em ( สี: #CC0000; สีพื้นหลัง: สีเทา; )

      และนี่คือตัวอย่างของโค้ดหน้าโดยใช้ตัวเลือกบริบทนี้:

      ... ... ...

      นี่คือระดับแรกที่มุ่งหน้าไปด้วย เน้นในคำ

      และนี่คือย่อหน้าธรรมดาด้วย ด้วยคำที่เน้นย้ำ

      ...

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



บทความที่เกี่ยวข้อง