ID และการตั้งชื่อคลาส
ใช้รหัสและชื่อคลาสที่สะท้อนถึงวัตถุประสงค์และการใช้องค์ประกอบหรือชื่อทั่วไปอื่นๆ เสมอ แทนที่จะปรากฏและชื่อที่คลุมเครือ
ชื่อที่เฉพาะเจาะจงและสะท้อนถึงวัตถุประสงค์ขององค์ประกอบควรเป็นที่ต้องการ เนื่องจากชื่อเหล่านี้เป็นชื่อที่เข้าใจได้มากที่สุดและมีแนวโน้มที่จะเปลี่ยนแปลงน้อยที่สุด
ชื่อสามัญเป็นเพียงชื่อทางเลือกสำหรับองค์ประกอบหลายรายการ โดยจะเหมือนกันในองค์ประกอบพี่น้องและไม่มีความหมายพิเศษ
แยกแยะให้ออกเพื่อให้มีความหมายพิเศษและมักต้องการเป็น "ผู้ช่วยเหลือ"
แม้ว่าความหมายของชื่อคลาสและ ID จะไม่มีความหมายในทางปฏิบัติสำหรับการแยกวิเคราะห์คอมพิวเตอร์
ชื่อความหมายมักจะเป็นตัวเลือกที่ถูกต้องเนื่องจากเป็นตัวแทนของข้อมูลที่ไม่ได้กำหนดข้อจำกัดที่แสดงออก
ไม่แนะนำ
.fw-800 {
น้ำหนักตัวอักษร: 800;
-
.สีแดง {
สี: สีแดง;
-แนะนำ
.หนัก {
น้ำหนักตัวอักษร: 800;
-
.สำคัญ {
สี: สีแดง;
- การหลีกเลี่ยง ID อย่างสมเหตุสมผล
โดยปกติแล้วไม่ควรนำรหัสไปใช้กับสไตล์
ลักษณะรหัสไม่สามารถนำมาใช้ซ้ำได้ และคุณสามารถใช้รหัสได้เพียงครั้งเดียวต่อหน้า
การใช้ ID อย่างมีประสิทธิภาพเพียงอย่างเดียวคือการกำหนดตำแหน่งภายในหน้าเว็บหรือทั้งไซต์
อย่างไรก็ตาม คุณควรพิจารณาใช้คลาสแทน id เสมอ เว้นแต่ว่าคุณจะใช้งานเพียงครั้งเดียว
ไม่แนะนำ
#เนื้อหา .title {
ขนาดตัวอักษร: 2em;
-แนะนำ
.เนื้อหา .title {
ขนาดตัวอักษร: 2em;
- ข้อโต้แย้งอีกประการหนึ่งที่ต่อต้านการใช้ ID ก็คือตัวเลือกที่มี ID นั้นมีน้ำหนักมาก
ตัวเลือกที่มีเพียง ID เดียวจะมีน้ำหนักมากกว่าตัวเลือกที่มีชื่อคลาส 1,000 ชื่อ ซึ่งทำให้มันแปลก
// ตัวเลือกนี้มีน้ำหนักมากกว่าตัวเลือกต่อไปนี้ #content .title {
สี: สีแดง;
-
// กว่าตัวเลือกนี้!
เนื้อหา html div.content.news-content .title.content-title.important {
สี: สีฟ้า;
- หลีกเลี่ยงชื่อแท็กในตัวเลือก CSS
เมื่อสร้างตัวเลือก คุณควรใช้ชื่อคลาสที่ชัดเจน แม่นยำ และสื่อความหมาย อย่าใช้ตัวเลือกแท็ก การบำรุงรักษาจะง่ายกว่าหากคุณสนใจเฉพาะชื่อคลาส ไม่ใช่องค์ประกอบโค้ด
เมื่อพิจารณาจากมุมมองการแยก ไม่ควรจัดสรรแท็ก html/อรรถศาสตร์ในเลเยอร์การนำเสนอ
อาจเป็นรายการเรียงลำดับที่ต้องเปลี่ยนเป็นรายการที่ไม่เรียงลำดับ หรือ div ที่ต้องแปลงเป็นบทความ
หากคุณใช้เฉพาะชื่อคลาสที่มีความหมาย
และหากไม่ใช้ตัวเลือกองค์ประกอบ คุณเพียงแค่ต้องเปลี่ยนมาร์กอัป html โดยไม่ต้องเปลี่ยน CSS
ไม่แนะนำ
div.content > header.content-header > h2.title {
ขนาดตัวอักษร: 2em;
-แนะนำ
.content > .content-header > .title {
ขนาดตัวอักษร: 2em;
- แม่นยำที่สุด
นักพัฒนาส่วนหน้าจำนวนมากไม่ได้ใช้ตัวเลือกย่อยโดยตรงเมื่อเขียนกลุ่มตัวเลือก (หมายเหตุ: ความแตกต่างระหว่างตัวเลือกย่อยโดยตรงและตัวเลือกสืบทอด)
บางครั้งสิ่งนี้อาจนำไปสู่ปัญหาการออกแบบที่เจ็บปวด และบางครั้งก็อาจสิ้นเปลืองประสิทธิภาพ
อย่างไรก็ตาม ไม่ว่าในกรณีใด นี่เป็นแนวทางปฏิบัติที่แย่มาก
หากคุณไม่ได้เขียนตัวเลือกทั่วไปที่ต้องตรงกับส่วนท้ายของ DOM คุณควรพิจารณาตัวเลือกย่อยโดยตรงเสมอ
พิจารณา DOM ต่อไปนี้:
<article class="เนื้อหาข่าวเนื้อหา"> <span class="title">กิจกรรมข่าว</span> <div class="content-body"> <div class="ชื่อเนื้อหา-ชื่อ"> ตรวจสอบสิ่งนี้ </div> <p>นี่คือเนื้อหาบทความข่าว</p> <div class="ทีเซอร์"> <div class="title">ซื้อสิ่งนี้</div> <div class="teaser-content">เย้!</div> </div> </div> </บทความ>
CSS ต่อไปนี้จะถูกนำไปใช้กับองค์ประกอบทั้งสามที่มีคลาสชื่อ
จากนั้น เพื่อแก้ไขสไตล์ที่แตกต่างกันภายใต้คลาสชื่อภายใต้คลาสเนื้อหาและคลาสชื่อภายใต้คลาสทีเซอร์ การดำเนินการนี้จะต้องใช้ตัวเลือกที่แม่นยำยิ่งขึ้นเพื่อเขียนสไตล์อีกครั้ง
ไม่แนะนำ
.เนื้อหา .title {
ขนาดตัวอักษร: 2rem;
-แนะนำ
.เนื้อหา > .title {
ขนาดตัวอักษร: 2rem;
-
.content > .content-body > .title {
ขนาดตัวอักษร: 1.5rem;
-
.content > .content-body > .teaser > .title {
ขนาดตัวอักษร: 1.2rem;
- คุณลักษณะตัวย่อ
CSS มีคุณสมบัติตัวย่อต่างๆ (เช่น แบบอักษร) ที่ควรใช้ทุกครั้งที่เป็นไปได้ แม้ว่าจะตั้งค่าเพียงค่าเดียวก็ตาม
การใช้แอตทริบิวต์แบบย่อมีประโยชน์สำหรับประสิทธิภาพของโค้ดและความสามารถในการอ่าน
ไม่แนะนำ
รหัสซีเอส:
สไตล์ขอบบน: ไม่มี; ตระกูลฟอนต์: Palatino, Georgia, Serif; ขนาดตัวอักษร: 100%; ความสูงของเส้น: 1.6; ช่องว่างภายใน: 2em; ช่องว่างภายในซ้าย: 1em; ช่องว่างภายในขวา: 1em; ช่องว่างด้านบน: 0;
แนะนำ
รหัสซีเอส:
ขอบบน: 0; แบบอักษร: 100%/1.6 Palatino, จอร์เจีย, เซอริฟ; ช่องว่างภายใน: 0 1em 2em;
0 และหน่วย
ละเว้นหน่วยที่อยู่หลังค่า "0" อย่าใช้หน่วยหลังค่า 0 เว้นแต่จะมีค่า
ไม่แนะนำ
รหัสซีเอส:
ช่องว่างด้านล่าง: 0px; ระยะขอบ: 0em;
แนะนำ
รหัสซีเอส:
ช่องว่างภายใน: 0; ระยะขอบ: 0;
สัญกรณ์เลขฐานสิบหก
หากเป็นไปได้ ให้ใช้สัญลักษณ์เลขฐานสิบหก 3 อักขระ
ค่าสีช่วยให้แสดงได้เช่นนี้
การแสดงเลขฐานสิบหก 3 อักขระจะสั้นกว่า
ใช้ตัวเลขฐานสิบหกตัวพิมพ์เล็กเสมอ
ไม่แนะนำ
สี: #FF33AA;
แนะนำ
สี: #f3a;
ตัวคั่นสำหรับ ID และชื่อคลาส
ใช้เครื่องหมายยัติภังค์ (ขีดกลาง) เพื่อแยกคำในชื่อ ID และชื่อคลาส เพื่อเพิ่มความเข้าใจในบทเรียน ห้ามใช้อักขระใดๆ (รวมถึงไม่มี) นอกเหนือจากขีดกลาง (ขีดกลาง) เพื่อเชื่อมคำและตัวย่อในตัวเลือก
นอกจากนี้ ตามมาตรฐานแล้ว ตัวเลือกแอตทริบิวต์เริ่มต้นจะจดจำยัติภังค์ (ขีดกลาง) เป็นตัวแยกคำสำหรับ [attribute|=value]
ดังนั้น ทางที่ดีควรใช้เครื่องหมายยัติภังค์เป็นตัวคั่น
ไม่แนะนำ
.เดโมอิมเมจ {}
.error_status {} แนะนำ
#รหัสวิดีโอ {}
.ads-ตัวอย่าง {}แฮ็ก
หลีกเลี่ยงการตรวจจับตัวแทนผู้ใช้และ "แฮ็ก" CSS – ลองใช้วิธีอื่นก่อน ความแตกต่างของสไตล์ได้รับการแก้ไขได้อย่างง่ายดายด้วยวิธีแก้ปัญหาและการแฮ็กผ่านการตรวจจับตัวแทนผู้ใช้หรือตัวกรอง CSS พิเศษ ทั้งสองวิธีควรได้รับการพิจารณาเป็นทางเลือกสุดท้ายเพื่อให้บรรลุและรักษาฐานโค้ดที่มีประสิทธิภาพและจัดการได้ กล่าวอีกนัยหนึ่งคือการตรวจจับตัวแทนผู้ใช้และการแฮ็กในระยะยาว
จะทำให้โครงการเสียหาย เนื่องจากโครงการควรอยู่ในเส้นทางที่มีการต่อต้านน้อยที่สุด อย่างไรก็ตาม การตรวจจับตัวแทนผู้ใช้และการแฮ็กได้รับอนุญาตให้ใช้บ่อยเกินไปได้อย่างง่ายดายในอนาคต
คำสั่งประกาศ
นี่คือโครงร่างคร่าวๆ ของลำดับคุณสมบัติ CSS ที่เขียนไว้ภายในตัวเลือก นี่เป็นสิ่งสำคัญเพื่อให้แน่ใจว่าสามารถอ่านและสแกนได้ดีขึ้น
ตามแนวทางปฏิบัติที่ดีที่สุด เราควรปฏิบัติตามลำดับต่อไปนี้ (ซึ่งควรอยู่ในลำดับของตารางด้านล่าง):
คุณสมบัติโครงสร้าง:
แสดง
ตำแหน่ง ซ้าย บน ขวา ฯลฯ
ล้น, ลอย, ชัดเจน ฯลฯ
ระยะขอบ, ช่องว่างภายใน
คุณสมบัติที่แสดงออก:
พื้นหลัง ขอบ ฯลฯ
แบบอักษรข้อความ
ไม่แนะนำ
.กล่อง {
ตระกูลแบบอักษร: 'Arial', sans-serif;
เส้นขอบ: 3px ทึบ #ddd;
ซ้าย: 30%;
ตำแหน่ง: แน่นอน;
การแปลงข้อความ: ตัวพิมพ์ใหญ่;
สีพื้นหลัง: #eee;
ขวา: 30%;
isplay: บล็อก;
ขนาดตัวอักษร: 1.5rem;
ล้น: ซ่อนเร้น;
ช่องว่างภายใน: 1em;
ระยะขอบ: 1em;
-แนะนำ
.กล่อง {
จอแสดงผล: บล็อก;
ตำแหน่ง: แน่นอน;
ซ้าย: 30%;
ขวา: 30%;
ล้น: ซ่อนเร้น;
ระยะขอบ: 1em;
ช่องว่างภายใน: 1em;
สีพื้นหลัง: #eee;
เส้นขอบ: 3px ทึบ #ddd;
ตระกูลแบบอักษร: 'Arial', sans-serif;
ขนาดตัวอักษร: 1.5rem;
การแปลงข้อความ: ตัวพิมพ์ใหญ่;
-สิ้นสุดคำสั่ง
เพื่อให้มั่นใจถึงความสอดคล้องและความสามารถในการขยาย แต่ละคำสั่งควรลงท้ายด้วยเครื่องหมายอัฒภาคและล้อมแต่ละคำสั่งในบรรทัดใหม่
ไม่แนะนำ
รหัสซีเอส:
.ทดสอบ {
จอแสดงผล: บล็อก; ความสูง: 100px
-แนะนำ
รหัสซีเอส:
.ทดสอบ {
จอแสดงผล: บล็อก;
ความสูง: 100px;
-ส่วนท้ายของชื่อแอตทริบิวต์
ใช้ช่องว่างหลังเครื่องหมายทวิภาคในชื่อคุณสมบัติ ด้วยเหตุผลด้านความสม่ำเสมอ
ใช้ช่องว่างระหว่างแอตทริบิวต์และค่าเสมอ (แต่ต้องไม่มีช่องว่างระหว่างแอตทริบิวต์และเครื่องหมายทวิภาค)
ไม่แนะนำ
รหัสซีเอส:
h3 {
แบบอักษรน้ำหนัก: ตัวหนา;
-แนะนำ
รหัสซีเอส:
h3 {
น้ำหนักตัวอักษร: ตัวหนา;
-การแยกตัวเลือกและการประกาศ
ใช้บรรทัดใหม่เสมอสำหรับตัวเลือกแต่ละรายการและการประกาศคุณสมบัติ
ไม่แนะนำ
รหัสซีเอส:
a:โฟกัส, a:ใช้งานอยู่ {
ตำแหน่ง: ญาติ; ด้านบน: 1px;
-แนะนำ
รหัสซีเอส:
h1,
h2,
h3 {
น้ำหนักตัวอักษร: ปกติ;
ความสูงของเส้น: 1.2;
-การแยกกฎ
กฎจะถูกคั่นด้วยบรรทัดว่างเสมอ (ขึ้นบรรทัดใหม่สองครั้ง)
แนะนำ
รหัสซีเอส:
HTML {
พื้นหลัง: #fff;
-
ร่างกาย {
ระยะขอบ: อัตโนมัติ;
ความกว้าง: 50%;
-คำพูด CSS
ใส่ตัวเลือกแอตทริบิวต์หรือค่าแอตทริบิวต์ด้วยเครื่องหมายคำพูดคู่ ("") แทนเครื่องหมายคำพูดเดี่ยว (")
อย่าใช้เครื่องหมายคำพูดสำหรับค่า URI (url())
ไม่แนะนำ
รหัสซีเอส:
@import url('//cdn.com/foundation.css');
HTML {
ตระกูลฟอนต์: 'open sans', arial, sans-serif;
-
เนื้อความ: หลังจาก {
เนื้อหา: 'หยุดชั่วคราว';
-แนะนำ
รหัสซีเอส:
@import url(//cdn.com/foundation.css);
HTML {
ตระกูลฟอนต์: "open sans", arial, sans-serif;
-
เนื้อความ: หลังจาก {
เนื้อหา: "หยุดชั่วคราว";
-การซ้อนตัวเลือก (SCSS)
ใน Sass คุณสามารถซ้อนตัวเลือกได้ ซึ่งจะทำให้โค้ดสะอาดขึ้นและอ่านง่ายขึ้น ซ้อนตัวเลือกทั้งหมด แต่พยายามหลีกเลี่ยงการซ้อนตัวเลือกโดยไม่มีเนื้อหาใดๆ
หากคุณต้องการระบุแอตทริบิวต์สไตล์บางอย่างสำหรับองค์ประกอบลูก และองค์ประกอบหลักจะไม่มีแอตทริบิวต์สไตล์
สามารถใช้เชนตัวเลือก CSS ปกติได้
วิธีนี้จะป้องกันไม่ให้สคริปต์ของคุณดูซับซ้อนเกินไป
ไม่แนะนำ
รหัสซีเอส:
// ไม่ใช่ตัวอย่างที่ดีในการไม่ใช้ประโยชน์จากการซ้อนเลย
.เนื้อหา {
จอแสดงผล: บล็อก;
-
.content > .ข่าว-บทความ > .title {
ขนาดตัวอักษร: 1.2em;
-ไม่แนะนำ
รหัสซีเอส:
// การใช้ Nesting ดีกว่า แต่ไม่ใช่ในทุกกรณี
// หลีกเลี่ยงการซ้อนเมื่อไม่มีแอตทริบิวต์ และใช้กลุ่มตัวเลือกแทน
.เนื้อหา {
จอแสดงผล: บล็อก;
> .news-บทความ {
> .หัวข้อ {
ขนาดตัวอักษร: 1.2em;
-
-
-แนะนำ
รหัสซีเอส:
// ตัวอย่างนี้ใช้แนวทางที่ดีที่สุดในขณะที่ทำรัง แต่ใช้กลุ่มตัวเลือกหากเป็นไปได้
.เนื้อหา {
จอแสดงผล: บล็อก;
> .ข่าว-บทความ > .title {
ขนาดตัวอักษร: 1.2em;
-
-การแนะนำบรรทัดว่างในการซ้อน (SCSS)
เว้นบรรทัดว่างระหว่างตัวเลือกที่ซ้อนกันและคุณสมบัติ CSS
ไม่แนะนำ
รหัสซีเอส:
.เนื้อหา {
จอแสดงผล: บล็อก;
> .news-บทความ {
สีพื้นหลัง: #eee;
> .หัวข้อ {
ขนาดตัวอักษร: 1.2em;
-
> .article-เชิงอรรถ {
ขนาดตัวอักษร: 0.8em;
-
-
-แนะนำ
รหัสซีเอส:
.เนื้อหา {
จอแสดงผล: บล็อก;
> .news-บทความ {
สีพื้นหลัง: #eee;
> .หัวข้อ {
ขนาดตัวอักษร: 1.2em;
-
> .article-เชิงอรรถ {
ขนาดตัวอักษร: 0.8em;
-
-
-ข้อความค้นหาสื่อตามบริบท (SCSS)
ใน Sass คุณยังสามารถใช้การสืบค้นสื่อตามบริบทเมื่อคุณซ้อนตัวเลือกของคุณ
ใน Sass คุณสามารถใช้การสืบค้นสื่อในระดับการซ้อนที่กำหนดได้
CSS ผลลัพธ์จะถูกแปลงเพื่อให้คิวรีสื่อถูกแสดงผลเป็นตัวเลือกแบบรวม
เทคโนโลยีนี้สะดวกมาก
ช่วยรักษาบริบทของการสืบค้นสื่อ
แนวทางแรกช่วยให้คุณสามารถเขียนสไตล์มือถือของคุณก่อน จากนั้นจึงใช้คิวรีสื่อตามบริบทเพื่อจัดเตรียมสไตล์เดสก์ท็อปทุกที่ที่คุณต้องการ
ไม่แนะนำ
รหัสซีเอส:
// ตัวอย่างแรกบนมือถือนี้ดูเหมือน CSS ธรรมดาซึ่งมีโครงสร้างทั้งหมดของ SCSS ซ้ำกัน
// ที่ด้านล่างสุดของข้อความค้นหาสื่อ นี่เป็นข้อผิดพลาดได้ง่ายและทำให้การบำรุงรักษายากขึ้นเนื่องจากไม่ใช่เรื่องง่ายที่จะเกี่ยวข้อง
// เนื้อหาในการสืบค้นสื่อไปยังเนื้อหาในส่วนบน (รูปแบบมือถือ)
.เนื้อหาหน้า {
ขนาดตัวอักษร: 1.2rem;
> .main {
สีพื้นหลัง: ควันขาว;
> .ข่าวล่าสุด {
ช่องว่างภายใน: 1rem;
> .news-บทความ {
ช่องว่างภายใน: 1rem;
> .หัวข้อ {
ขนาดตัวอักษร: 2rem;
-
-
-
> .เนื้อหา {
ขอบบน: 2rem;
ช่องว่างภายใน: 1rem;
-
-
> .หน้าส่วนท้าย {
ขอบบน: 2rem;
ขนาดตัวอักษร: 1rem;
-
-
หน้าจอ @media และ (ความกว้างขั้นต่ำ: 641px) {
.เนื้อหาหน้า {
ขนาดตัวอักษร: 1rem;
> .main > .latest-news > .news-article > .title {
ขนาดตัวอักษร: 3rem;
-
> .หน้าส่วนท้าย {
ขนาดตัวอักษร: 0.8rem;
-
-
-แนะนำ
รหัสซีเอส:
// นี่เป็นตัวอย่างเดียวกันกับข้างบน แต่ที่นี่เราใช้คิวรีสื่อตามบริบทเพื่อใส่สไตล์ที่แตกต่างกัน
// เพื่อให้สื่อต่างๆ อยู่ในบริบทที่เหมาะสม
.เนื้อหาหน้า {
ขนาดตัวอักษร: 1.2rem;
หน้าจอ @media และ (ความกว้างขั้นต่ำ: 641px) {
ขนาดตัวอักษร: 1rem;
-
> .main {
สีพื้นหลัง: ควันขาว;
> .ข่าวล่าสุด {
ช่องว่างภายใน: 1rem;
> .news-บทความ {
ช่องว่างภายใน: 1rem;
> .หัวข้อ {
ขนาดตัวอักษร: 2rem;
หน้าจอ @media และ (ความกว้างขั้นต่ำ: 641px) {
ขนาดตัวอักษร: 3rem;
-
-
-
-
> .เนื้อหา {
ขอบบน: 2rem;
ช่องว่างภายใน: 1rem;
-
-
> .หน้าส่วนท้าย {
ขอบบน: 2rem;
ขนาดตัวอักษร: 1rem;
หน้าจอ @media และ (ความกว้างขั้นต่ำ: 641px) {
ขนาดตัวอักษร: 0.8rem;
-
-
-ลำดับที่ซ้อนกันและตัวเลือกหลัก (SCSS)
เมื่อใช้ฟังก์ชันการซ้อนของ Sass
สิ่งสำคัญคือต้องมีลำดับการซ้อนที่ชัดเจน
ต่อไปนี้คือลำดับที่บล็อก SCSS ควรมี
คุณลักษณะสไตล์ของตัวเลือกปัจจุบัน <br/>ตัวเลือกคลาสหลอกของตัวเลือกหลัก (:อักษรตัวแรก, :hover, :active ฯลฯ)
องค์ประกอบคลาสหลอก (:before และ :after)
รูปแบบการประกาศของตัวเลือกพาเรนต์ (.selected, .active, .enlarged ฯลฯ)
ใช้ตัวเลือกย่อยการสืบค้นสื่อตามบริบทของ Sass เป็นส่วนสุดท้าย
ตัวอย่างต่อไปนี้ควรแสดงให้เห็นว่าการเรียงลำดับนี้จะมีโครงสร้างที่ชัดเจนในขณะที่ใช้ตัวเลือกพาเรนต์ Sass ได้อย่างไร
ที่แนะนำ
รหัสซีเอส:
.ผลิตภัณฑ์ทีเซอร์ {
// 1. คุณลักษณะสไตล์
จอแสดงผล: อินไลน์บล็อก;
ช่องว่างภายใน: 1rem;
สีพื้นหลัง: ควันขาว;
สี: สีเทา;
// 2. ตัวเลือกหลอกพร้อมตัวเลือกหลัก
&:โฮเวอร์ {
สี: สีดำ;
-
// 3. องค์ประกอบหลอกพร้อมตัวเลือกพาเรนต์
&:ก่อน {
เนื้อหา: "";
จอแสดงผล: บล็อก;
ขอบบน: 1px สีเทาทึบ;
-
&:หลังจาก {
เนื้อหา: "";
จอแสดงผล: บล็อก;
ขอบบน: 1px สีเทาทึบ;
-
// 4. ระบุคลาสด้วยตัวเลือกพาเรนต์
&.คล่องแคล่ว {
สีพื้นหลัง: สีชมพู;
สี: สีแดง;
// 4.2. Pseuso selector ใน state class selector
&:โฮเวอร์ {
สี: แดงเข้ม;
-
-
// 5. ข้อความค้นหาสื่อตามบริบท
หน้าจอ @media และ (ความกว้างสูงสุด: 640px) {
จอแสดงผล: บล็อก;
ขนาดตัวอักษร: 2em;
-
// 6. ตัวเลือกย่อย
> .content > .title {
ขนาดตัวอักษร: 1.2em;
// 6.5 การสืบค้นสื่อตามบริบทในตัวเลือกย่อย
หน้าจอ @media และ (ความกว้างสูงสุด: 640px) {
ระยะห่างระหว่างตัวอักษร: 0.2em;
การแปลงข้อความ: ตัวพิมพ์ใหญ่;
-
-
-