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

22.06.2020

CSS (Cascading Style Sheets) คือโค้ดที่คุณใช้จัดรูปแบบหน้าเว็บของคุณ พื้นฐาน CSSจะช่วยให้คุณเข้าใจสิ่งที่คุณต้องการในการเริ่มต้น เราจะตอบคำถามเช่น: ฉันจะทำให้ข้อความของฉันเป็นสีดำหรือสีแดงได้อย่างไร ฉันจะทำให้เนื้อหาปรากฏในตำแหน่งเฉพาะบนหน้าจอได้อย่างไร? ฉันจะตกแต่งหน้าเว็บด้วยรูปภาพและสีพื้นหลังได้อย่างไร

แล้ว CSS คืออะไร?

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

P ( สี: แดง; )

ลองทำดู: วาง CSS สามบรรทัดนี้ลงในไฟล์ใหม่ในโปรแกรมแก้ไขข้อความของคุณ จากนั้นบันทึกไฟล์เป็น style.css ในโฟลเดอร์สไตล์ของคุณ

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

เปิดไฟล์ index.html ของคุณและวางบรรทัดต่อไปนี้ไว้ที่ไหนสักแห่งในส่วนหัวระหว่าง และแท็ก:
บันทึก index.html และโหลดลงในเบราว์เซอร์ของคุณ คุณควรเห็นสิ่งนี้:

หากข้อความย่อหน้าของคุณเป็นสีแดง ยินดีด้วย! คุณได้เขียน CSS ที่ประสบความสำเร็จเป็นครั้งแรก!

กายวิภาคของชุดกฎ CSS

มาดูรายละเอียด CSS ข้างต้นกันสักหน่อย:

โครงสร้างทั้งหมดเรียกว่า ชุดกฎ(แต่มักเรียกสั้น ๆ ว่า "กฎ") สังเกตชื่อของแต่ละส่วนด้วย:

Selector ชื่อขององค์ประกอบ HTML ที่จุดเริ่มต้นของชุดกฎ จะเลือกองค์ประกอบที่จะใช้สไตล์กับ (ในกรณีนี้คือองค์ประกอบ p) หากต้องการจัดสไตล์องค์ประกอบอื่น เพียงเปลี่ยนตัวเลือก ประกาศ กฎข้อเดียว เช่น สี: สีแดง; บ่งชี้ว่าอันไหนของ คุณสมบัติองค์ประกอบที่คุณต้องการจัดสไตล์ คุณสมบัติ วิธีที่คุณสามารถจัดรูปแบบองค์ประกอบ HTML ที่เฉพาะเจาะจง (ในกรณีนี้ สีคือคุณสมบัติขององค์ประกอบที่กำหนดย่อหน้าของข้อความ">

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

โปรดทราบส่วนสำคัญของไวยากรณ์:

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

ดังนั้น หากต้องการเปลี่ยนค่าคุณสมบัติหลายค่าในคราวเดียว คุณเพียงแค่ต้องเขียนโดยคั่นด้วยเครื่องหมายอัฒภาค เช่นนี้

P ( สี: แดง; กว้าง: 500px; ขอบ: 1px สีดำทึบ; )

การเลือกหลายรายการ

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

P,li,h1 ( สี: แดง; )

ตัวเลือกประเภทต่างๆ

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

ชื่อตัวเลือก	เขาเลือกอะไร?	ตัวอย่าง
ตัวเลือกองค์ประกอบ (บางครั้งเรียกว่าแท็กหรือตัวเลือกประเภท)	องค์ประกอบ HTML ทั้งหมดของประเภทที่ระบุ	พี เลือก
ตัวเลือกรหัส	องค์ประกอบบนเพจที่มี ID ที่ระบุ (ในหน้า HTML หนึ่งเพจ สามารถมีได้เพียงองค์ประกอบเดียวที่มี ID ใดก็ได้)	#มายไอดี เลือก หรือ
ตัวเลือกชั้นเรียน	องค์ประกอบบนเพจที่มีคลาสที่ระบุ (สามารถประกาศคลาสได้หลายอินสแตนซ์บนเพจ)	.ห้องเรียนของฉัน เลือก และ
ตัวเลือกคุณสมบัติ	องค์ประกอบบนเพจที่มีแอตทริบิวต์ที่ระบุ	รูปภาพ เลือก แต่ไม่
ตัวเลือกคลาสหลอก	องค์ประกอบที่ระบุ แต่เฉพาะในกรณีของสถานะบางอย่าง เช่น เมื่อโฮเวอร์	ตอบ: โฮเวอร์ เลือก แต่เฉพาะเมื่อตัวชี้เมาส์อยู่เหนือลิงก์เท่านั้น

แบบอักษรและข้อความ

ตอนนี้เราได้เรียนรู้พื้นฐาน CSS แล้ว เรามาเพิ่มกฎและข้อมูลอีกสองสามข้อลงในไฟล์ style.css ของเราเพื่อทำให้ตัวอย่างของเราดูดี ก่อนอื่น มาทำให้แบบอักษรและข้อความของเราดูดีขึ้นเล็กน้อย

ก่อนอื่นให้ย้อนกลับไปค้นหา ซึ่งคุณได้บันทึกไว้ที่ไหนสักแห่งแล้ว เพิ่มองค์ประกอบ ที่ไหนสักแห่งในส่วนหัวของ index.html ของคุณ (อีกครั้ง ที่ใดก็ได้ระหว่างแท็ก และ- มันจะมีลักษณะดังนี้:
จากนั้น ลบกฎที่มีอยู่ในไฟล์ style.css ของคุณ เป็นการทดสอบที่ดี แต่จริงๆ แล้วข้อความสีแดงดูไม่ดีนัก
เพิ่มบรรทัดต่อไปนี้ตามที่จำเป็น โดยแทนที่บรรทัดตัวยึดตำแหน่งด้วยบรรทัดตระกูลแบบอักษรจริงที่คุณได้รับจาก Google Fonts (font-family หมายถึงแบบอักษรที่คุณต้องการใช้สำหรับข้อความของคุณ) กฎนี้ตั้งค่าแบบอักษรพื้นฐานสากลและขนาดแบบอักษรสำหรับทั้งหน้า (ตั้งแต่ เป็นองค์ประกอบหลักสำหรับทั้งหน้า และองค์ประกอบทั้งหมดภายในนั้นสืบทอดขนาดตัวอักษรและตระกูลแบบอักษรเดียวกัน): html ( ขนาดตัวอักษร: 10px; /* px หมายถึง "พิกเซล": แบบอักษรพื้นฐานจะสูง 10 พิกเซล */ font -family: placeholder: นี่ควรเป็นชื่อแบบอักษรจากแบบอักษร Google)
บันทึก: ทุกอย่างในเอกสาร CSS ระหว่าง /* และ */ คือ ความคิดเห็น CSSซึ่งเบราว์เซอร์จะเพิกเฉยเมื่อรันโค้ด นี่คือสถานที่ที่คุณสามารถเขียนบันทึกที่เป็นประโยชน์เกี่ยวกับสิ่งที่คุณกำลังทำอยู่
ตอนนี้เราจะกำหนดขนาดตัวอักษรสำหรับองค์ประกอบที่มีข้อความอยู่ภายในเนื้อหา HTML (
และกำหนดย่อหน้าของข้อความ">
- นอกจากนี้เรายังจะจัดข้อความส่วนหัวไว้ตรงกลางและตั้งค่าความสูงของบรรทัดและระยะห่างระหว่างตัวอักษรในเนื้อหาของเอกสารเพื่อให้อ่านง่ายขึ้นเล็กน้อย: h1 ( ขนาดตัวอักษร: 60px; text-align: center; ) p, li ( ขนาดตัวอักษร : 16px; line-height: 2;

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

บล็อก บล็อก และบล็อกอีกมากมาย

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

ไม่น่าแปลกใจเลยที่เค้าโครง CSS มีพื้นฐานมาจาก รุ่นกล่อง- แต่ละบล็อกที่ใช้พื้นที่บนเพจของคุณมีคุณสมบัติเช่น:

ช่องว่างภายใน เว้นวรรคเฉพาะรอบเนื้อหา (เช่น รอบย่อหน้าของข้อความ)
border ซึ่งเป็นเส้นทึบที่อยู่ติดกับช่องว่างภายใน
Margin คือช่องว่างรอบๆ ด้านนอกขององค์ประกอบ

ในส่วนนี้เรายังใช้:

ความกว้าง (ความกว้างขององค์ประกอบ)
สีพื้นหลัง สีเบื้องหลังเนื้อหาและการเติมองค์ประกอบ
color สีของเนื้อหาขององค์ประกอบ (โดยปกติจะเป็นข้อความ)
ข้อความเงา: ตั้งค่าเงาบนข้อความภายในองค์ประกอบ
display: ตั้งค่าโหมดการแสดงผลขององค์ประกอบ (ไม่ต้องกังวลกับเรื่องนี้ในตอนนี้)

มาเริ่มกันเลยและเพิ่ม CSS ให้กับเพจของเรากันดีกว่า! เพิ่มกฎใหม่เหล่านี้ที่ด้านล่างของหน้าต่อไป และอย่ากลัวที่จะทดลองเปลี่ยนค่าเพื่อดูว่ามันทำงานอย่างไร

การเปลี่ยนสีหน้า

html ( สีพื้นหลัง: #00539F; )

กฎนี้กำหนดสีพื้นหลังสำหรับทั้งหน้า เปลี่ยนรหัสสีด้านบนให้เป็นสีนั้น

จัดการกับร่างกาย

เนื้อความ ( ความกว้าง: 600px; ระยะขอบ: 0 อัตโนมัติ; สีพื้นหลัง: #FF9500; การขยาย: 0 20px 20px 20px; เส้นขอบ: 5px สีดำทึบ; )

ตอนนี้สำหรับ องค์ประกอบ. มีการประกาศค่อนข้างน้อยที่นี่ ดังนั้นเรามาดูทีละรายการกันดีกว่า:

ความกว้าง: 600px; - ทำให้เนื้อหามีความกว้าง 600 พิกเซลเสมอ
ระยะขอบ: 0 อัตโนมัติ; - เมื่อคุณตั้งค่าสองค่าสำหรับคุณสมบัติ เช่น ระยะขอบ หรือ ช่องว่างภายใน ค่าแรกขององค์ประกอบจะส่งผลต่อค่าบนสุด และด้านล่าง (ในกรณีนี้ทำให้เป็น 0) และค่าที่สองทางด้านซ้าย และทางด้านขวา (ในที่นี้ auto คือค่าพิเศษที่แบ่งพื้นที่ว่างในแนวนอนทางซ้ายและขวาเท่าๆ กัน) คุณยังสามารถใช้ค่าหนึ่ง สาม หรือสี่ค่าตามที่อธิบายไว้
สีพื้นหลัง: #FF9500; - เช่นเดิม ตั้งค่าสีพื้นหลังขององค์ประกอบ ฉันใช้สีส้มแดงสำหรับตัวกล้อง แทนที่จะใช้สีน้ำเงินเข้มสำหรับ ) องค์ประกอบอื่นๆ ทั้งหมดจะต้องสืบทอดมาจากองค์ประกอบนี้"> องค์ประกอบ แต่อย่าอายและทดลอง
การขยาย: 0 20px 20px 20px; - เรามีการตั้งค่าสี่ค่าสำหรับการขยายเพื่อให้มีช่องว่างรอบๆ เนื้อหาของเรา ครั้งนี้เราไม่ได้ตั้งค่า Padding ที่ด้านบนของตัว แต่เพิ่ม 20 พิกเซลทางด้านซ้าย ล่าง และขวา ค่าต่างๆ จะถูกตั้งไว้บน ขวา ล่าง ซ้าย ตามลำดับ
ขอบ: 5px สีดำทึบ; - เพียงกำหนดขอบสีดำทึบกว้าง 5 พิกเซลในทุกด้านของลำตัว

การวางตำแหน่งและจัดรูปแบบส่วนหัวของหน้าแรกของเรา

h1 ( ระยะขอบ: 0; การขยาย: 20px 0; สี: #00539F; ข้อความ-เงา: 3px 3px 1px สีดำ; )

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

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

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

ที่นี่ เราได้ใช้คุณสมบัติที่น่าสนใจอย่างหนึ่ง นั่นคือ text-shadow ซึ่งใช้เงากับเนื้อหาข้อความขององค์ประกอบ มีความหมาย ๔ ประการ คือ

ค่าพิกเซลแรกระบุ ชดเชยแนวนอนเงาข้อความ - เลื่อนไปไกลแค่ไหน: ค่าลบควรเลื่อนไปทางซ้าย

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

ค่าพิกเซลที่สามระบุ รัศมีเบลอเงา - ค่าที่สูงกว่าจะหมายถึงเงาที่เบลอมากขึ้น

ค่าที่สี่กำหนดสีพื้นฐานของเงา

ลองทดลองกับค่าต่างๆ อีกครั้งเพื่อดูว่าคุณจะได้อะไรมาบ้าง

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

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

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

อ่านเพิ่มเติมเกี่ยวกับ Cascading Style Sheet (CSS) คืออะไร และใช้เพื่ออะไรด้านล่างนี้

เวอร์ชันวิดีโอ:

ซีเอสเอสคืออะไร?

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

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

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

เป็นตัวอย่างที่ดี

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

สถานการณ์ที่คล้ายกันคือกับ HTML ซึ่งเราสร้างเนื้อหาของหน้าเว็บ

เว็บไซต์ใช้ HTML เปล่า ไม่มี CSS

ไซต์เดียวกันกับสไตล์ชีตที่เชื่อมต่อกัน

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

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

ลักษณะของเครือข่ายโซเชียลที่ไม่มีไฟล์ CSS ที่เชื่อมต่อ

นั่นคือตอนนี้เราเห็นไซต์บน HTML เปล่า หากต้องการเปิดใช้งานไฟล์ css ของหน้านี้ เราจะกลับไปที่ WEbDeveloper และยกเลิกการเลือกปิดการใช้งานสไตล์ทั้งหมด

สไตล์ชีตเชื่อมต่อกันอีกครั้งและเราสามารถดูเนื้อหาของหน้าเว็บพร้อมกับการออกแบบได้

ทางสังคม เครือข่ายที่มีไฟล์ CSS ที่เชื่อมต่ออยู่

ซีเอสเอสทำงานอย่างไร?

กฎการออกแบบเว็บไซต์ทั้งหมดจะถูกจัดเก็บไว้ในไฟล์ที่มีนามสกุล css ซึ่งจะถูกโหลดลงบนหน้าเว็บผ่านทางแท็ก .

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

ตัวอย่างเช่น ผ่านตัวเลือก "p" เราจะระบุประเภท ขนาด และสีของแบบอักษรในย่อหน้า ในการกำหนดค่าแบบอักษรส่วนหัวระดับแรก เราใช้ตัวเลือก "h1"

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

ทำไมต้องเรียน CSS?

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

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

ข้อดีของ CSS

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

วิธีการเรียนรู้พื้นฐาน CSS อย่างรวดเร็ว

ในการเรียนรู้ CSS เช่นเดียวกับการเขียนโปรแกรมทั่วไป การฝึกฝนมีบทบาทสำคัญ ยิ่งคุณฝึกฝนบ่อยเท่าไร คุณก็จะยิ่งเก่งขึ้นเท่านั้น

บทเรียน #3
คุณสมบัติ CSS พื้นฐาน

โครงร่างโค้ด CSS มีลักษณะดังนี้:

ชื่อแท็ก ( คุณสมบัติ CSS: ค่า; )

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

คุณสมบัติ CSS ที่ส่งผลต่อสีและพื้นหลัง

สี: - คุณสมบัติ CSS ที่ส่งผลต่อสีของข้อความ: ส่วนหัว ย่อหน้า ลิงก์ ฯลฯ ค่าของมันคือชื่อสีหรือรหัสฐานสิบหกในรูปแบบ RGB
ตัวอย่างโค้ดที่ใช้คุณสมบัติสี CSS:
สี: สีเขียว; — ข้อความต้องเป็นสีเขียว ชื่อสีระบุเป็นค่า
สี: #008800; — ข้อความควรเป็นสีเขียว ค่าควรเป็นรหัสเลขฐานสิบหกในรูปแบบ RGB

สีพื้นหลัง: — คุณสมบัติ CSS ที่ส่งผลต่อสีพื้นหลังของส่วนหัว ย่อหน้า ลิงก์ ฯลฯ
ค่าของมันคือชื่อสีหรือรหัสฐานสิบหกในรูปแบบ RGB
ตัวอย่างโค้ดโดยใช้คุณสมบัติ CSS สีพื้นหลัง:
สีพื้นหลัง: สีฟ้า; - พื้นหลังควรเป็นสีน้ำเงิน
สีพื้นหลัง: #0000ff; - พื้นหลังควรเป็นสีน้ำเงิน

ภาพพื้นหลัง: — คุณสมบัติ CSS ที่กำหนดรูปภาพเป็นพื้นหลังพื้นหลังของส่วนหัว ย่อหน้า ลิงก์ ฯลฯ ค่าของมันคือ URL (ที่อยู่) ของรูปภาพ
ตัวอย่างโค้ดโดยใช้คุณสมบัติ CSS ภาพพื้นหลัง:
ภาพพื้นหลัง: url (http://domain name.ru/kartinka.jpg); — พื้นหลังควรเป็นรูปภาพที่อยู่ตามที่อยู่ http://domainname.ru/kartinka.jpg

คุณสมบัติ CSS ที่ส่งผลต่อแบบอักษร

ขนาดตัวอักษร: - คุณสมบัติ CSS ที่ส่งผลต่อขนาดตัวอักษรของส่วนหัว ย่อหน้า ลิงก์ ฯลฯ ค่าของมันคือหน่วยการวัด: พิกเซล (px), เปอร์เซ็นต์ (%), จุด (pt) เป็นต้น
ตัวอย่างโค้ดโดยใช้คุณสมบัติ CSS ขนาดแบบอักษร:
ขนาดตัวอักษร: 17px; - ขนาดตัวอักษรควรเป็น 17 พิกเซล
ขนาดตัวอักษร: 20pt; – ขนาดตัวอักษรควรมีขนาด 20 พอยต์

ครอบครัวแบบอักษร: - คุณสมบัติ CSS ที่กำหนดชื่อแบบอักษรสำหรับส่วนหัว ย่อหน้า ลิงก์ ฯลฯ ค่าของมันคือชื่อของแบบอักษร: Arial, Courier, Impact, Garamond, Georgia, Helvetica, Tahoma, Times (ตั้งค่าตามค่าเริ่มต้น), Verdana ฯลฯ
ตัวอย่างโค้ดโดยใช้คุณสมบัติ CSS ของตระกูลฟอนต์:
ตระกูลฟอนต์: Arial; - ชื่อฟอนต์ต้องเป็น Arial
ตระกูลแบบอักษร: Impact; — ชื่อฟอนต์ควรเป็น Impact

Font-style: — คุณสมบัติ CSS ที่ส่งผลต่อรูปแบบตัวอักษร (สไตล์) ของชื่อ ย่อหน้า ลิงก์ ฯลฯ ความหมายของมันคือ: ปกติ, เฉียง
ตัวอย่างโค้ดโดยใช้คุณสมบัติ CSS แบบแบบอักษร:
รูปแบบตัวอักษร: ปกติ; - สไตล์สคริปต์ปกติ
รูปแบบตัวอักษร:เฉียง; - สไตล์การเลื่อนตัวเอียง

Font-weight: - คุณสมบัติ CSS ที่ส่งผลต่อน้ำหนักแบบอักษรของชื่อ ย่อหน้า ลิงก์ ฯลฯ ค่าของมันจะเป็น: ปกติ, ตัวหนา
ตัวอย่างโค้ดโดยใช้คุณสมบัติ CSS น้ำหนักแบบอักษร:
น้ำหนักตัวอักษร: ปกติ; - รูปแบบสคริปต์ปกติ
น้ำหนักตัวอักษร: ตัวหนา; - รูปแบบตัวอักษรตัวหนา

คุณสมบัติ CSS ที่ส่งผลต่อข้อความ

การจัดตำแหน่งข้อความ: - คุณสมบัติ CSS ที่ส่งผลต่อการจัดตำแหน่งของข้อความในส่วนหัว ย่อหน้า และองค์ประกอบบล็อกอื่น ๆ ค่าของมันคือ: left , center , right , justify
ตัวอย่างโค้ดที่ใช้คุณสมบัติ text-align CSS:
การจัดแนวข้อความ: ซ้าย; — การจัดตำแหน่งข้อความไปทางซ้าย (ตั้งค่าตามค่าเริ่มต้น)
การจัดแนวข้อความ: กึ่งกลาง; - การจัดตำแหน่งข้อความให้อยู่ตรงกลาง
การจัดแนวข้อความ: ขวา; - การจัดตำแหน่งข้อความไปทางขวา
การจัดแนวข้อความ: จัดชิดขอบ; — การจัดตำแหน่งข้อความที่สม่ำเสมอไปทางขอบซ้ายและขวา

เยื้องข้อความ: - คุณสมบัติ CSS ที่ส่งผลต่อการเยื้องบรรทัดแรก (บรรทัดสีแดง) ของข้อความในส่วนหัว ย่อหน้า และองค์ประกอบบล็อกอื่น ๆ ค่าของมันคือหน่วยการวัด: พิกเซล (px), เปอร์เซ็นต์ (%), จุด (pt) เป็นต้น

เยื้องข้อความ: 20px; — เยื้องบรรทัดแรกคือ 20 พิกเซล
เยื้องข้อความ: 15pt; — การเยื้องบรรทัดแรกคือ 15 จุด

line-height: — คุณสมบัติ CSS ที่ส่งผลต่อระยะห่างระหว่างบรรทัดข้อความ (นำหน้า) ของชื่อ ย่อหน้า ลิงก์ ฯลฯ ค่าของมันคือหน่วยการวัด: ตัวคูณ, พิกเซล (px), เปอร์เซ็นต์ (%), จุด (pt) ฯลฯ
ตัวอย่างโค้ดโดยใช้คุณสมบัติ CSS เยื้องข้อความ:
ความสูงของบรรทัด: 35px; — ระยะห่างระหว่างบรรทัดคือ 35 พิกเซล
ความสูงของเส้น: 1.5; — ระยะห่างระหว่างเส้นคือ 1.5 คูณปัจจัย (คล้ายกับ 150%)

การเว้นวรรคตัวอักษร: - คุณสมบัติ CSS ที่ส่งผลต่อระยะห่างระหว่างอักขระในคำของชื่อเรื่อง, ย่อหน้าลิงก์ ฯลฯ ค่าของมันคือหน่วยการวัด: พิกเซล (px), เปอร์เซ็นต์ (%), จุด (pt) เป็นต้น
ตัวอย่างโค้ดโดยใช้คุณสมบัติ CSS การเว้นวรรคตัวอักษร:
การเว้นวรรคตัวอักษร: 3px; — ระยะห่างระหว่างอักขระในคำคือ 3 พิกเซล
ระยะห่างระหว่างตัวอักษร: 5pt; — ระยะห่างระหว่างอักขระในคำคือ 5 คะแนน

การเว้นวรรคคำ: - คุณสมบัติ CSS ที่ส่งผลต่อระยะห่างระหว่างคำในข้อความของชื่อเรื่อง ย่อหน้า ลิงก์ ฯลฯ ค่าของมันคือหน่วยการวัด: พิกเซล (px), เปอร์เซ็นต์ (%), จุด (pt) ฯลฯ
ตัวอย่างโค้ดที่ใช้คุณสมบัติ CSS การเว้นวรรคคำ:
การเว้นวรรคคำ: 10px; — ระยะห่างระหว่างคำคือ 10 พิกเซล
การเว้นวรรคคำ: 7pt; — ระยะห่างระหว่างคำคือ 7 คะแนน

การแปลงข้อความ: - คุณสมบัติ CSS ที่ส่งผลต่อลักษณะของตัวอักษรในข้อความ ทำให้เป็นตัวพิมพ์ใหญ่หรือตัวพิมพ์เล็ก ความหมายของมันคือ: ตัวพิมพ์ใหญ่, ตัวพิมพ์เล็ก, ตัวพิมพ์ใหญ่
ตัวอย่างโค้ดโดยใช้คุณสมบัติ CSS การแปลงข้อความ:
การแปลงข้อความ: พิมพ์ใหญ่; - ตัวอักษรแรกของแต่ละคำขึ้นต้นด้วยตัวพิมพ์ใหญ่
การแปลงข้อความ: ตัวพิมพ์ใหญ่; - ตัวอักษรทั้งหมดในข้อความเขียนด้วยตัวพิมพ์ใหญ่
การแปลงข้อความ: ตัวพิมพ์เล็ก; — ตัวอักษรทั้งหมดในข้อความเขียนด้วยตัวพิมพ์เล็ก

ข้อความเงา: - คุณสมบัติ CSS ที่สร้างเงาข้อความ
ค่าของมันคือ: รัศมีแกนสี-x แกน-y
โค้ดตัวอย่างโดยใช้คุณสมบัติ text-shadow CSS:
ข้อความเงา: สีเขียว 3px 2px 2px; — เงาจะเป็นสีเขียว เลื่อนไปทางซ้าย 3 พิกเซล เลื่อนลง 2 พิกเซล รัศมี (การกระจายเงา) จะเป็น 5 พิกเซล

คุณสมบัติ CSS ที่ส่งผลต่อเส้นขอบ (เส้นขีด)

border-color: — คุณสมบัติ CSS ที่ส่งผลต่อสีของเส้นขอบของชื่อเรื่อง ย่อหน้า ลิงก์ ฯลฯ ค่าของมันคือชื่อของสีหรือรหัสฐานสิบหกในรูปแบบ RGB
ตัวอย่างโค้ดโดยใช้คุณสมบัติ CSS สีเส้นขอบ:
ขอบสี: สีเขียว; - สีโครงร่างสีเขียว
ขอบสี: #008800; — สีเส้นขีดสีเขียว ระบุในรหัส RGB เลขฐานสิบหก

border-width: - คุณสมบัติ CSS ที่ส่งผลต่อความหนาของเส้นขอบของชื่อ ย่อหน้า ลิงก์ ฯลฯ ค่าของมันคือหน่วยการวัด: พิกเซล (px)
ตัวอย่างรหัสโดยใช้คุณสมบัติ CSS ความกว้างชายแดน:
เส้นขอบกว้าง: 1px; — ความหนาของเส้นขีดคือ 1 พิกเซล
เส้นขอบกว้าง: 3px; — ความหนาของเส้นขีดคือ 3 พิกเซล

border-style: - คุณสมบัติ CSS ที่ส่งผลต่อสไตล์ของเส้นขอบของหัวเรื่อง, ย่อหน้า, ลิงค์ ฯลฯ ค่าของมันคือ: ทึบ, ประ, ประ, สองเท่า
ตัวอย่างโค้ดโดยใช้คุณสมบัติ CSS แบบเส้นขอบ:
สไตล์เส้นขอบ: ทึบ; - เส้นขีดเป็นเส้นทึบ
สไตล์เส้นขอบ: ประ; - จังหวะในรูปแบบของปล้อง
สไตล์เส้นขอบ: ลายจุด; - ร่างในรูปแบบของจุด
สไตล์เส้นขอบ: สองเท่า; - เส้นขีดในรูปแบบของเส้นทึบคู่

คุณสมบัติ CSS ที่ส่งผลต่อการเติมและการเติม

ระยะขอบ: - คุณสมบัติ CSS ที่ส่งผลต่อระยะขอบระหว่างขอบพื้นหลังขององค์ประกอบบล็อกหนึ่ง (ส่วนหัว ย่อหน้า ฯลฯ) และขอบพื้นหลังขององค์ประกอบบล็อกอื่น ค่าของมันคือหน่วยการวัด: พิกเซล (px), เปอร์เซ็นต์ (%), จุด (pt) เป็นต้น
ตัวอย่างโค้ดที่ใช้คุณสมบัติ CSS ของมาร์จิ้น:
ระยะขอบ: 15px; — เยื้องคือ 15 พิกเซล
ระยะขอบ: 12pt; - การเยื้องมี 12 จุด

ช่องว่างภายใน: - คุณสมบัติ CSS ที่ส่งผลต่อช่องว่างภายในระหว่างขอบของพื้นหลังขององค์ประกอบและเนื้อหา (ข้อความ รูปภาพ) ค่าของมันคือหน่วยการวัด: พิกเซล (px), เปอร์เซ็นต์ (%), จุด (pt) ฯลฯ
ตัวอย่างโค้ดที่ใช้คุณสมบัติการเติม CSS:
ช่องว่างภายใน: 5px; — เยื้องคือ 5 พิกเซล
ช่องว่างภายใน: 3pt; - การเยื้องเป็น 3 จุด

หมวดหมู่:

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

แน่นอนว่าเพื่อที่จะสร้างสิ่งต่าง ๆ คุณจำเป็นต้องทำความคุ้นเคย พื้นฐาน CSS- และไซต์ประเภทนี้จะช่วยให้คุณทำสิ่งนี้ได้อย่างรวดเร็วและมีประสิทธิภาพที่สุด

จบหลักสูตรใน HTML, CSS และเค้าโครงเว็บไซต์:

หลังจากอ่านบทความเกี่ยวกับพื้นฐาน CSS คุณจะได้เรียนรู้:

1) ไวยากรณ์ ซีเอสเอส.

2) วิธีการและลำดับความสำคัญของการมอบหมายงาน สไตล์ CSS.

3) ประเภทของตัวเลือกใน ซีเอสเอส.

4) ซีเอสเอสแฮ็กเบราว์เซอร์

5) กฎการเขียน ซีเอสเอส.

6) วิธีสร้างคำแนะนำเครื่องมือ ซีเอสเอส.

7) วิธีเปลี่ยนรูปลักษณ์ของตัวอักษรตัวแรกผ่าน ซีเอสเอส.

8) วิธีการตั้งค่าประเภทเคอร์เซอร์ผ่าน ซีเอสเอส.

9) วิธีเปลี่ยนลักษณะเคอร์เซอร์เมื่อเลื่อนเมาส์โดยใช้ ซีเอสเอส.

10) วิธีทำเมนูย่อย ซีเอสเอส.

11) เกี่ยวกับการแทนที่คุณสมบัติ ความกว้างขั้นต่ำวี IE6.

12) เกี่ยวกับความถูกต้อง ซีเอสเอส.

13) วิธีการตั้งค่าสีของลิงค์ที่เข้าชม

14) วิธีการเยื้องย่อหน้าโดยใช้ ซีเอสเอส.

15) วิธีทำมุมโค้งมนให้ทะลุ ซีเอสเอส.

16) วิธีใส่รูปภาพของคุณแทนการใส่เครื่องหมายรายการ ซีเอสเอส.

17) วิธีทำให้พื้นหลังเป็นรูปภาพ

18) วิธีทำให้พื้นหลังมืดลง ซีเอสเอส.

19) ตัวเลือกลูกคืออะไร ซีเอสเอส.

20) มีหน่วยวัดอะไรบ้าง ซีเอสเอส.

21) วิธีสร้างหน้าต่างป๊อปอัปพร้อมการหรี่แสง

22) วิธีสร้างพื้นหลังแบบเคลื่อนไหว

23) วิธีสร้างช่องข้อความที่สวยงาม

24) วิธีเปลี่ยนรูปภาพเมื่อคุณวางเคอร์เซอร์ของเมาส์ไว้เหนือรูปภาพ

25) องค์ประกอบหลอกคืออะไร ซีเอสเอส.

26) มันคืออะไร สไปรต์ CSS.

27) วิธีกดส่วนท้าย (ส่วนท้าย) ไปด้านล่างผ่าน ซีเอสเอส.

28) วิธีป้องกันการปรับขนาด พื้นที่ข้อความผ่าน ซีเอสเอส.

29) วิธีวาดรูปสามเหลี่ยมผ่าน ซีเอสเอส.

30) วิธีจัดการกับเหตุการณ์ คลิกผ่าน ซีเอสเอส.

31) วิธีตั้งค่าเคอร์เซอร์ของคุณผ่าน ซีเอสเอส.

32) วิธีเปิดเมนูแบบเลื่อนลงแนวนอน ซีเอสเอส.

33) วิธีใช้แบบอักษรที่ไม่ได้มาตรฐานบนเว็บไซต์

34) วิธีเปลี่ยนพื้นหลังของปุ่มตัวเลือกผ่าน ซีเอสเอส.

35) ฉันสามารถใช้ได้ CSS3.

36) วิธีทำเงาบน ซีเอสเอส.

37) วิธีการตั้งค่าคุณสมบัติ เซลล์แพ็ดและ ระยะห่างระหว่างเซลล์บน ซีเอสเอส.

38) วิธีทำ div ที่มีความสูง 100%.

39) เกี่ยวกับความเข้ากันได้ ดัชนี zและผู้เล่น ยูทูป.

40) ทำไมใช้แล้วไม่ดี -โมซ, -นางสาว, -เว็บคิทและคุณสมบัติอื่นๆ

41) มันคุ้มค่าที่จะใช้หรือไม่ รีเซ็ต CSS.

42) วิธีจัดตำแหน่งเครื่องหมายรายการในแนวตั้ง

43) วิธีสร้างเวอร์ชันสำหรับพิมพ์

44) วิธีทำให้ข้ามเบราว์เซอร์โปร่งใส ซีเอสเอส.

45) มันคืออะไร เคลียร์ฟิกซ์.

46) วิธียกเลิกบางส่วน ลอย.

47) วิธีสร้างเค้าโครงสองคอลัมน์ที่มีความสูงของคอลัมน์เท่ากัน

48) รูปแบบที่ปรับเปลี่ยนได้คืออะไร

49) คำสั่งสื่อคืออะไร ซีเอสเอส.

50) มันคืออะไร น้อย.

51) ทำอย่างไร เอฟเฟกต์มุมสุนัขใน CSS.

52) ทำอย่างไร ส่วนท้ายของไซต์ "เหนียว" ที่ตอบสนอง.

53) วิธีการใช้งาน Google แบบอักษร API.

54) วิธีการใช้บริการ Livetools.

55) วิธีอนุญาตหรือปิดใช้งานการเลือกข้อความบน ซีเอสเอส.

56) วิธีเปลี่ยนรูปลักษณ์ขององค์ประกอบให้เป็นมาตรฐานโดยใช้คุณสมบัติ รูปร่างวี ซีเอสเอส.

57) เหตุใดจึงจำเป็น คุณสมบัติการแบ่งหน้าภายในวี ซีเอสเอส.

58) อย่างไร จัดกึ่งกลางบล็อกความกว้างของตัวแปรบน ซีเอสเอส.

59) ทำอย่างไร สามเหลี่ยมใน CSS บริสุทธิ์.

60) บริการโดย การสร้างสามเหลี่ยม CSS.

61) วิธีดันส่วนท้ายไปที่ด้านล่างของหน้า(การวางตำแหน่ง)

62) วิธีดันส่วนท้ายไปที่ด้านล่างของหน้า(วิธีการแบบตาราง)

63) การเรียน สัส- การติดตั้งและการกำหนดค่า

64) วิธีซ่อนองค์ประกอบบนเพจบน ซีเอสเอส.

65) การเรียน สัส- พื้นฐาน

66) ควรใช้เมื่อใด รีเซ็ต.cssและ ทำให้เป็นมาตรฐาน.css.

67) บริการรูปภาพด้วยพลังอันทรงพลัง เอพีไอ.

68) ทำอย่างไร เอฟเฟกต์การขยายภาพ CSS.

69) โคอาล่า- การรวบรวมอย่างรวดเร็ว หน้าด้านไฟล์.

70) วิธีเพิ่ม ฟิลเตอร์สำหรับรูปภาพโดยใช้ CSS.

71) การเรียน สัส- ปลาแฮกฟิช.

72) การเรียน สัส- การดำเนินการทางคณิตศาสตร์

73) ภาพเคลื่อนไหว ไอคอนเมนูใน Sass.

74) การเรียน สัส- ฟังก์ชั่น.

75) มันคืออะไร โพสต์ CSS.

76) วิธีการติดตั้งและกำหนดค่า โพสต์ CSS.

77) ทำอย่างไร ความเป็นไปได้ของการประเมิน CSS.

78) การเรียน สัส- สไตล์การเขียนโค้ด

79) การเรียน สัส- การขยายตัวเลือกหลัก

80) 10 มีประโยชน์ มิกซ์อิน SASS.

81) ทำอย่างไร การแนะนำสไตล์ Star Wars โดยใช้ CSS.

82) บูทสแตรป 4- การแนะนำ.

83) บูทสแตรป 4- การติดตั้ง.

84) บูทสแตรป 4- รีบูต

85) บูทสแตรป 4- คอนเทนเนอร์และประเด็นสำคัญ

86) บูทสแตรป 4- ระบบกริด

87) บูทสแตรป 4- คุณสมบัติดิ้นของกริด

88) 5 นวัตกรรมใดบ้างที่จะปรากฎ CSS4.

89) บูทสแตรป 4- จัมโบตรอนคืออะไร?

90) บูทสแตรป 4- ยูทิลิตี้และการพิมพ์

91) บูทสแตรป 4- ส่วนประกอบการ์ด

92) ความแตกต่างระหว่าง ระดับและ รหัสโดยใช้แท็กเป็นตัวอย่าง กอง.

93) องค์ประกอบที่ไม่สำเร็จ การออกแบบเว็บซึ่งไม่ควรนำมาใช้

94) บูทสแตรป 4- หน้าต่างโมดอล

95) โอ้ ลำดับความสำคัญและ มรดกวี ซีเอสเอสในการปฏิบัติ

96) วิธีจัดวางเค้าโครง PSD โดยใช้ ตาราง Bootstrap- ส่วนที่ 1.

97) วิธีจัดวางเค้าโครง PSD โดยใช้ ตาราง Bootstrap- ส่วนที่ 2

98) วิธีใช้องค์ประกอบหลอก หลังและก่อนหน้าใน CSS.

99) เกี่ยวกับคุณสมบัติ ความกว้างและความสูงของบล็อกใน CSS.

100) องค์ประกอบหลอกหลังจากและ ลูกคนสุดท้ายชั้นหลอก.

101) วิธีแสดงเว็บไซต์บนอุปกรณ์ต่างๆ

102) เค้าโครงบนตาราง บูทสแตรป(ส่วนที่ 1)

103) เค้าโครงบนตาราง บูทสแตรป(ตอนที่ 2)

104) เค้าโครงบนตาราง บูทสแตรป(ตอนที่ 3)

105) เค้าโครงบนตาราง บูทสแตรป(ตอนที่ 4)

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

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

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

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

ข้าว. 1. โครงสร้างโฆษณา

แม้ว่าตัวอย่างนี้ให้ไว้เพียงความพยายามที่จะส่งผลกระทบต่อคุณสมบัติสองสามอย่างที่จำเป็นในการแสดงผลเอกสาร 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. ตัวเลือกชั้นเรียน

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

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

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

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

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

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. ตัวเลือกลูก

องค์ประกอบลูกเป็นลูกโดยตรงขององค์ประกอบที่มีอยู่ องค์ประกอบหนึ่งสามารถมีองค์ประกอบย่อยได้หลายองค์ประกอบ แต่แต่ละองค์ประกอบสามารถมีองค์ประกอบหลักได้เพียงรายการเดียวเท่านั้น ตัวเลือกลูกอนุญาตให้คุณใช้สไตล์ได้ก็ต่อเมื่อองค์ประกอบลูกมาต่อจากองค์ประกอบหลักทันที และไม่มีองค์ประกอบอื่นอยู่ระหว่างองค์ประกอบเหล่านั้น กล่าวคือ องค์ประกอบลูกไม่ได้ซ้อนอยู่ในสิ่งอื่นใด
ตัวอย่างเช่น 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) สามารถใช้สไตล์จากแหล่งต่างๆ กับองค์ประกอบเดียวได้ คุณสามารถตรวจสอบสไตล์ที่ใช้ได้ในโหมดนักพัฒนาเบราว์เซอร์ โดยคลิกขวาที่องค์ประกอบแล้วเลือก "ดูโค้ด" (หรืออะไรที่คล้ายกัน) คอลัมน์ทางขวาจะแสดงรายการคุณสมบัติทั้งหมดที่ตั้งค่าไว้ในองค์ประกอบนี้หรือสืบทอดมาจากองค์ประกอบหลัก พร้อมด้วยไฟล์สไตล์ที่ระบุไว้ และหมายเลขลำดับของบรรทัดโค้ด

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

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

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

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