มีการใช้มากขึ้นในการออกแบบเพจแทนการจัดโครงสร้างข้อความ
แท็กการออกแบบใหม่มากมายเช่น
ได้รับการสนับสนุนโดยเบราว์เซอร์เดียวเท่านั้น “คุณต้องมีเบราว์เซอร์ X เพื่อดูหน้านี้” กลายเป็นข้อจำกัดความรับผิดชอบทั่วไปบนเว็บไซต์
CSS ถูกสร้างขึ้นเพื่อแก้ไขสถานการณ์นี้โดยมอบความสามารถในการออกแบบที่แม่นยำแก่นักออกแบบเว็บไซต์ซึ่งรองรับทุกเบราว์เซอร์ ในขณะเดียวกัน การนำเสนอและเนื้อหาของเอกสารก็ถูกแยกออกจากกัน ซึ่งทำให้งานง่ายขึ้นมาก
มุมมองที่แตกต่างกันสำหรับสื่อที่แตกต่างกัน (หน้าจอ การพิมพ์ ฯลฯ );
เทคนิคการออกแบบที่ซับซ้อนและซับซ้อน เป็นภาษาสไตล์ชีตที่ให้คุณแนบสไตล์ (เช่น แบบอักษรและสี) เข้ากับเอกสารที่มีโครงสร้าง (เช่น เอกสาร HTML และแอปพลิเคชัน XML) โดยทั่วไปสไตล์ CSS จะใช้เพื่อสร้างและจัดสไตล์องค์ประกอบของหน้าเว็บและส่วนต่อประสานผู้ใช้ที่เขียนด้วย HTML และ XHTML แต่ยังนำไปใช้กับเอกสาร XML ทุกประเภท รวมถึง XML, SVG และ XUL ด้วยการแยกสไตล์การนำเสนอเอกสารออกจากเนื้อหาเอกสาร CSS ทำให้การสร้างเว็บเพจและบำรุงรักษาเว็บไซต์ง่ายขึ้น
CSS รองรับสไตล์ชีตเฉพาะสื่อ ดังนั้นผู้เขียนจึงสามารถปรับแต่งการนำเสนอเอกสารของตนให้เหมาะกับเบราว์เซอร์ภาพ อุปกรณ์การได้ยิน เครื่องพิมพ์ อุปกรณ์อักษรเบรลล์ อุปกรณ์มือถือ และอื่นๆ
สไตล์ชีตแบบเรียงซ้อนอธิบายกฎสำหรับการจัดรูปแบบองค์ประกอบโดยใช้คุณสมบัติและค่าที่อนุญาตสำหรับคุณสมบัติเหล่านั้น สำหรับแต่ละองค์ประกอบ คุณสามารถใช้ชุดคุณสมบัติที่จำกัดได้; คุณสมบัติอื่นๆ จะไม่มีผลกระทบใดๆ
การประกาศสไตล์ประกอบด้วยสองส่วน: ตัวเลือก และ โฆษณา - ใน HTML ชื่อองค์ประกอบไม่คำนึงถึงขนาดตัวพิมพ์ ดังนั้น "h1" จึงทำงานเหมือนกับ "H1" การประกาศประกอบด้วยสองส่วน: ชื่อคุณสมบัติ (เช่น สี) และค่าคุณสมบัติ (สีเทา) ตัวเลือกจะบอกเบราว์เซอร์ว่าองค์ประกอบใดที่จะจัดรูปแบบ และในบล็อกการประกาศ (โค้ดใน วงเล็บปีกกา ) คำสั่งการจัดรูปแบบจะแสดงรายการ - คุณสมบัติและค่าต่างๆ
แม้ว่าตัวอย่างนี้ให้ไว้เพียงความพยายามที่จะส่งผลกระทบต่อคุณสมบัติสองสามอย่างที่จำเป็นในการแสดงผลเอกสาร HTML แต่ก็มีคุณสมบัติเป็นสไตล์ชีทในสิทธิ์ของตัวเอง เมื่อรวมกับสไตล์ชีตอื่น ๆ (คุณสมบัติพื้นฐานอย่างหนึ่งของ CSS คือการรวมสไตล์ชีตเข้าด้วยกัน) กฎจะกำหนดการนำเสนอขั้นสุดท้ายของเอกสาร
ประเภทของสไตล์ชีตแบบเรียงซ้อนและข้อมูลเฉพาะ
1. ประเภทของสไตล์ชีท
1.1. สไตล์ชีตภายนอก
สไตล์ชีตภายนอก แสดงถึง ไฟล์ข้อความ ด้วยส่วนขยาย .css ซึ่งมีชุดรูปแบบ CSS สำหรับองค์ประกอบ ไฟล์ถูกสร้างขึ้นในโปรแกรมแก้ไขโค้ด เช่นเดียวกับหน้า HTML ไฟล์จะมีได้เฉพาะสไตล์เท่านั้น โดยไม่มีมาร์กอัป HTML สไตล์ชีตภายนอกเชื่อมต่อกับเว็บเพจโดยใช้แท็ก
- สไตล์เหล่านี้ใช้ได้กับทุกหน้าของไซต์
คุณสามารถแนบสไตล์ชีตได้หลายรายการในแต่ละหน้าเว็บโดยการเพิ่มแท็กหลายรายการตามลำดับ
มาตรฐาน 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 .
#sidebar ( กว้าง: 300px; ลอย: ซ้าย; )2.5. ตัวเลือกลูกหลาน
ตัวเลือกลูกหลานใช้สไตล์กับองค์ประกอบภายในองค์ประกอบคอนเทนเนอร์ ตัวอย่างเช่น ul li (text-transform: uppercase;) - จะเลือกองค์ประกอบ li ทั้งหมดที่เป็นลูกขององค์ประกอบ ul ทั้งหมด
หากคุณต้องการจัดรูปแบบลูกหลาน องค์ประกอบเฉพาะ องค์ประกอบนี้จะต้องได้รับคลาสสไตล์:
p.first a (สี: เขียว;) — สไตล์นี้ จะนำไปใช้กับลิงก์ทั้งหมดที่สืบทอดมาจากย่อหน้าที่มีคลาสมาก่อน ;
p .first a (สี: สีเขียว;) - หากคุณเพิ่มช่องว่าง ลิงก์ที่อยู่ภายในแท็กคลาส .first ใดๆ ที่สืบทอดมาจากองค์ประกอบจะถูกจัดสไตล์
อันดับแรก (สี: สีเขียว;) - สไตล์นี้จะถูกนำไปใช้กับลิงก์ใด ๆ ที่อยู่ภายในองค์ประกอบอื่นซึ่งกำหนดโดย class.first
2.6. ตัวเลือกลูก
องค์ประกอบลูกเป็นลูกโดยตรงขององค์ประกอบที่มีอยู่ องค์ประกอบหนึ่งสามารถมีองค์ประกอบย่อยได้หลายองค์ประกอบ แต่แต่ละองค์ประกอบสามารถมีองค์ประกอบหลักได้เพียงองค์ประกอบเดียวเท่านั้น ตัวเลือกลูกอนุญาตให้คุณใช้สไตล์ได้ก็ต่อเมื่อองค์ประกอบลูกมาต่อจากองค์ประกอบหลักทันที และไม่มีองค์ประกอบอื่นอยู่ระหว่างองค์ประกอบเหล่านั้น กล่าวคือ องค์ประกอบลูกไม่ได้ซ้อนอยู่ในสิ่งอื่นใด
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 — ช่องแบบฟอร์มที่มีเนื้อหาไม่ตรงกับประเภทข้อมูลที่ระบุ
: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
มรดกที่ถูกบังคับ
โดยการใช้ คำหลัก inherit สามารถบังคับให้องค์ประกอบสืบทอดค่าคุณสมบัติขององค์ประกอบหลักได้ วิธีนี้ใช้ได้แม้กับคุณสมบัติที่ไม่ได้รับการสืบทอดตามค่าเริ่มต้น
วิธีการตั้งค่าและทำงานสไตล์ CSS
1) สไตล์สามารถสืบทอดมาจากองค์ประกอบหลัก (คุณสมบัติที่สืบทอดมาหรือใช้ค่าที่สืบทอด)
2) สไตล์ที่อยู่ในสไตล์ชีตด้านล่างจะแทนที่สไตล์ที่อยู่ในตารางด้านบน
3) สามารถใช้สไตล์จากแหล่งต่างๆ กับองค์ประกอบเดียวได้ คุณสามารถตรวจสอบสไตล์ที่ใช้ได้ในโหมดนักพัฒนาเบราว์เซอร์ โดยคลิกที่องค์ประกอบ คลิกขวา เมาส์และเลือก "ดูโค้ด" (หรืออะไรที่คล้ายกัน) คอลัมน์ด้านขวาจะแสดงรายการคุณสมบัติทั้งหมดที่ตั้งค่าไว้ในองค์ประกอบนี้หรือสืบทอดมาจากองค์ประกอบหลัก พร้อมด้วยไฟล์สไตล์ที่ระบุไว้และบรรทัดลำดับของโค้ด
เบราว์เซอร์ 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;
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 กฎข้อที่สองจะชนะ
ลำดับของตารางที่เชื่อมต่อกัน
คุณสามารถสร้างสไตล์ชีทภายนอกได้หลายแบบและเชื่อมต่อเข้ากับหน้าเว็บเดียว หากพบค่าคุณสมบัติที่แตกต่างกันสำหรับองค์ประกอบหนึ่งในตารางที่แตกต่างกัน ด้วยเหตุนี้กฎที่พบในสไตล์ชีตที่แสดงด้านล่างจะถูกนำไปใช้กับองค์ประกอบ
ทุกคนที่มีส่วนเกี่ยวข้องในการพัฒนาเว็บไซต์แม้แต่น้อยก็ต้องเผชิญ แนวคิดของซีเอสเอส และผู้ดูแลเว็บทุกคนจำเป็นต้องรู้จัก CSS อย่างถ่องแท้
ซีเอสเอสคืออะไร? ตัวย่อนี้ย่อมาจาก Cascading Style Sheets
เว็บไซต์รายได้เป็นหัวข้อที่ทุกคนสามารถสร้างรายได้!
หากคุณต้องการพัฒนาทักษะของคุณในการสร้างรายได้บนเว็บไซต์และเข้าถึง 100,000 รูเบิลต่อเดือน! ฟรีแน่นอน - มินิบุ๊คใหม่เกี่ยวกับไซต์ที่ทำกำไรได้และ 5 ขั้นตอนสู่ไซต์ที่ทำกำไรได้
ความแตกต่างระหว่าง HTML และ CSS หากต้องการสร้างเว็บเพจสมัยใหม่ คุณต้องใช้สองภาษา: HTML และ CSS HTML (HyperText Markup Language) ใช้สำหรับมาร์กอัปแบบลอจิคัลของเว็บเพจ กล่าวคือ มันบอกเบราว์เซอร์ อะไร อยู่ในนั้นและอยู่ในลำดับใด ต้องขอบคุณภาษา HTML ที่ทำให้เบราว์เซอร์แสดงข้อความ รูปภาพ วิดีโอ และสร้างเว็บเพจได้
CSS "อธิบาย" ให้กับเบราว์เซอร์ ยังไง วัตถุทั้งหมดนี้ควรมีลักษณะเช่นนี้ สไตล์ชีตจะอธิบายสี สไตล์ ขนาดตัวอักษร การเยื้อง การจัดตำแหน่ง สีพื้นหลังหรือรูปภาพพื้นหลัง คุณสมบัติของตาราง รูปภาพ รูปร่าง การวางตำแหน่งขององค์ประกอบ ฯลฯ
การใช้สองวิธีในการอธิบายเว็บเพจช่วยให้คุณสามารถทำงานแยกกันกับเนื้อหา (HTML) และการออกแบบเพจ (CSS)
ประโยชน์ของซีเอสเอส หลักการของการใช้ CSS มีดังนี้ เว็บเพจอธิบายด้วยไฟล์สองไฟล์ ไฟล์ HTML มีคำอธิบายโครงสร้างและเนื้อหาของหน้านี้ และไฟล์ CSS (สไตล์ชีต) อธิบายลักษณะที่ปรากฏ ในช่วงเริ่มต้นของการสร้างเว็บไซต์ มีการใช้เฉพาะ HTML เท่านั้น และจำเป็นต้องสร้างแท็กและคุณลักษณะใหม่เพื่อจัดรูปแบบเอกสาร เนื่องจากนักพัฒนาเบราว์เซอร์กำลังทำเช่นนี้ สถานการณ์จึงมีเอกสาร HTML เดียวกันเข้ามา เบราว์เซอร์ที่แตกต่างกัน แสดงแตกต่างออกไป บนเว็บไซต์อาจพบข้อความต่อไปนี้: "ไซต์นี้เหมาะสำหรับดูโดยใช้เบราว์เซอร์ดังกล่าวและด้วยความละเอียดดังกล่าว" แน่นอนว่าสถานการณ์นี้ไม่สามารถดำเนินต่อไปได้เป็นเวลานาน อินเทอร์เน็ตกำลังพัฒนาและเปลี่ยนแปลง วิธีการทางเทคนิค เพื่อทำงานกับมัน ในการดูเว็บไซต์ที่เราใช้ไม่เพียงเท่านั้น คอมพิวเตอร์ตั้งโต๊ะ แต่ยังรวมถึงแล็ปท็อป แท็บเล็ต อุปกรณ์มือถือที่หลากหลายด้วย ซอฟต์แวร์ - และทุกที่ที่ไซต์ควรแสดงตามที่นักพัฒนาต้องการ
การใช้ CSS ช่วยให้สามารถก้าวไปข้างหน้าอย่างมากในการสร้างเว็บไซต์ได้ แม้ว่า HTML จะมีความสามารถในการจัดรูปแบบมากมาย แต่การใช้ CSS ก็มีข้อดีหลายประการ
การแยกการออกแบบและเนื้อหา ช่วยให้คุณสามารถทำงานเกี่ยวกับการออกแบบเว็บไซต์และเนื้อหาควบคู่กันไปความสามัคคีของการออกแบบ เว็บไซต์ประกอบด้วยหลายหน้า และกฎหมายของการออกแบบเว็บไซต์กำหนดให้ทุกหน้าได้รับการออกแบบในรูปแบบ สไตล์เครื่องแบบ - สิ่งนี้ช่วยปรับปรุงการรับรู้ของไซต์และทำให้ทำงานได้ง่ายขึ้น ที่ ใช้ CSS คำอธิบายของสไตล์ทั้งหมดอยู่ในตารางเดียว ซึ่งควบคุมการแสดงเอกสาร HTML หลายรายการ ตัวอย่างเช่น หากต้องการเปลี่ยนสีของส่วนหัวทั่วทั้งไซต์ คุณจะต้องเปลี่ยนเพียงบรรทัดเดียวในสไตล์ชีต หากอธิบายสีโดยใช้แท็ก HTML หากต้องการเปลี่ยนคุณจะต้องทำซ้ำทุกหน้าซึ่งอาจมีได้มาก ดังนั้น CSS ช่วยให้สามารถควบคุมลักษณะที่ปรากฏของไซต์ได้แม่นยำยิ่งขึ้นตำแหน่งแบบรวมศูนย์ ด้วยการใช้ CSS คุณสามารถสร้างโครงสร้างไฟล์ที่ชัดเจนของเว็บไซต์ได้ โดยทั่วไป ไฟล์สไตล์ชีตทั้งหมดจะอยู่ในโฟลเดอร์เดียว ซึ่งทำให้ค้นหาได้ง่ายเมื่อทำงานออกแบบการใช้สไตล์ที่แตกต่างกัน ดังที่กล่าวไปแล้วสามารถดูเว็บไซต์ได้บน อุปกรณ์ต่างๆ เช่น บนจอภาพขนาดใหญ่ คอมพิวเตอร์ตั้งโต๊ะ และ หน้าจอขนาดเล็ก อุปกรณ์เคลื่อนที่ - เพื่อให้สะดวกยิ่งขึ้น คุณสามารถใช้สไตล์ชีตที่แตกต่างกันได้โดยการเปลี่ยนลิงก์เดียวโอกาสที่กว้างขึ้นสำหรับนักออกแบบ เนื่องจากภาษา CSS ถูกสร้างขึ้นสำหรับการออกแบบเว็บไซต์โดยเฉพาะ จึงมีความสามารถมากขึ้นในการแก้ปัญหาการออกแบบ ด้วยเทคโนโลยี CSS เว็บไซต์ที่มีความยืดหยุ่นมากขึ้นได้เข้ามาแทนที่เค้าโครงตารางที่ล้าสมัยเกือบทั้งหมดเร่งงาน. เนื่องจากสไตล์ชีตถูกจัดเก็บไว้ในไฟล์แยกต่างหาก เมื่อคุณเรียกดูไซต์ ไฟล์ดังกล่าวจะถูกจัดเก็บไว้ในแคชของคอมพิวเตอร์ของคุณและโหลดได้เร็วขึ้นในครั้งถัดไปที่คุณเยี่ยมชมไซต์นั้นการเรียนรู้ CSS ลิงค์นี้
หลักสูตรวิดีโอประกอบด้วยบทเรียนวิดีโอสั้น ๆ 45 บทซึ่งครอบคลุมประเด็นหลักของเทคโนโลยี CSS หลักสูตรนี้มีการนำเสนอที่เรียบง่ายและเข้าใจง่าย บทเรียนทั้งหมดได้รับการคิดและวางแผนอย่างรอบคอบ ไม่มีอะไรฟุ่มเฟือยในบทเรียนเหล่านั้น แต่ละบทเรียนอิงจากตัวอย่างจริง ทำซ้ำซึ่งคุณสามารถรวบรวมความรู้ที่ได้รับ
หลักสูตรวิดีโอนี้เป็นลิงก์ในหลักสูตรทั้งหมดที่เกี่ยวข้องกับการสร้างเว็บไซต์โดยเฉพาะ ข้อได้เปรียบที่สำคัญของหลักสูตรนี้ก็คือ แม้จะมีความครบถ้วนสมบูรณ์ แต่ก็ฟรี
ฉันทำซ้ำลิงก์เพื่อดาวน์โหลดหลักสูตรอีกครั้ง
และโดยสรุปฉันขอแนะนำให้คุณดูทิวทัศน์ฤดูหนาว ปีนี้ถือเป็นฤดูหนาวจริงๆ มีทั้งพายุหิมะ น้ำค้างแข็ง น้ำค้างแข็ง และฉันก็ทำได้ไม่กี่อย่าง
ซีเอสเอส เป็นตัวย่อของ Cascading Style Sheets ไฟล์มีความสอดคล้องกัน ส่วนขยาย.css .รหัสซีเอสเอส – นี่คือรายการคำแนะนำและคำแนะนำสำหรับเบราว์เซอร์ว่าจะแสดงอะไร ที่ไหน และอย่างไร (องค์ประกอบของหน้าเว็บ) องค์ประกอบ - แท็ก XHTML/HTML และเนื้อหา
คุณสามารถทำอะไรกับ CSS? ซีเอสเอส เป็นภาษาสไตล์ที่กำหนดวิธีการแสดงเอกสาร HTML และองค์ประกอบต่างๆ กับ ใช้ CSS คุณสามารถกำหนดตำแหน่งขององค์ประกอบ สี แบบอักษร ระยะขอบ เส้นขอบ เส้น ความสูง ความกว้าง ภาพพื้นหลัง และอื่นๆ อีกมากมาย HTML สามารถใช้ตกแต่งได้ เว็บไซต์ - แต่ CSS ให้ความเป็นไปได้ที่มากกว่ามาก รองรับทุกเบราว์เซอร์ (IE, Mozilla, Chrome, Safari ฯลฯ)
ประโยชน์ของการใช้ CSS 1)
คุณสามารถระบุคุณสมบัติที่ไม่ได้อยู่ใน HTML 2)
ตอนนี้โค้ดจะถูกจัดโครงสร้างและสามารถอยู่ในไฟล์แยกต่างหากได้ 3)
คุณสามารถลดขนาดของโค้ดและทำให้สามารถอ่านได้อย่างมาก 4)
ความสามารถในการเชื่อมต่อ CSS กับหลาย ๆ แยกไฟล์ - สมมติว่าคุณมี 10 เพจที่คุณระบุสีของส่วนหัวแยกต่างหากก่อนหน้านี้ (ส่วนหัวของไซต์) และตอนนี้คุณจะไม่เปลี่ยนแยกกัน 10 ครั้งในไฟล์ต่าง ๆ แต่เปลี่ยนพารามิเตอร์ในไฟล์ css เท่านั้น 5)
การเปลี่ยนจากรูปแบบเว็บไซต์แบบตารางเป็นแบบบล็อก เราย่อและจัดโครงสร้างโค้ด! ตัวอย่างโค้ดไฟล์ CSS รหัสซีเอสเอส (ไฟล์ เช่น สไตล์.css ) * {
ตอบ:โฮเวอร์ (
