การเพิ่มรูปแบบลงในเลเยอร์
กำหนดกฎ CSS ให้กับเลเยอร์เฉพาะด้วยบล็อก @layer และสไตล์ชีตที่นำเข้า
การเพิ่มรูปแบบลงในเลเยอร์ เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
สองวิธีในการเพิ่มสไตล์ลงในชั้น
คุณสามารถเพิ่มสไตล์ลงในชั้นโดยตรง (ภายในบล็อก @layer) หรือผ่าน @import (เพื่อกำหนดสไตล์ชีตที่นำเข้าให้กับชั้นหนึ่ง)
บล็อก @layer โดยตรง
ห่อกฎไว้ภายในบล็อก @layer พร้อมระบุชื่อชั้น:
<button class="button">Layered button</button>การเพิ่มลงในชั้นที่มีอยู่
คุณสามารถเพิ่มสไตล์ลงในชั้นผ่านบล็อก @layer แยกกันหลายบล็อก การประกาศทั้งหมดจะถูกรวมเข้าด้วยกันในชั้นนั้น:
<button class="button">Button</button>
<input class="input" placeholder="Input" />ชั้นที่ไม่ระบุชื่อ
บล็อก @layer ที่ไม่มีชื่อจะสร้างชั้นที่ไม่ระบุชื่อ ชั้นที่ไม่ระบุชื่อไม่สามารถเพิ่มสไตล์ในภายหลังได้ และจะอยู่ ณ ตำแหน่งที่ปรากฏ:
<p style="margin: 24px; border: 1px dashed #999;">Normal paragraph (default margin)</p>
<p class="reset" style="border: 1px dashed #999;">Reset paragraph (anonymous layer sets margin: 0)</p>@import ร่วมกับ @layer
กำหนดสไตล์ชีตที่นำเข้าทั้งหมดให้กับชั้นหนึ่ง:
<p>This scene assigns whole imported stylesheets to layers — see the CSS panel.</p>การแบ่ง CSS ของคอมโพเนนต์ข้ามไฟล์
ในโครงการแบบแยกส่วน ไฟล์ของคอมโพเนนต์แต่ละไฟล์จะเพิ่มสไตล์ลงในชั้นคอมโพเนนต์:
<button class="button">Button</button>
<div class="card">Card</div>ชั้นกับ PostCSS/แซส
ทั้งแซสและ PostCSS ทำงานร่วมกับ @layer ได้ คุณสามารถกำหนดชั้นในไฟล์เริ่มต้นหลัก และใช้ @use หรือ @import เพื่อรวมไฟล์ย่อยของคอมโพเนนต์ที่เพิ่มสไตล์ลงในชั้นเหล่านั้น
สไตล์ในบรรทัดกับชั้น
สไตล์ในบรรทัด (แอตทริบิวต์ style="") จะไม่ได้รับผลจากชั้น เพราะจะชนะสไตล์ของทุกชั้นเสมอ เฉพาะกฎของสไตล์ชีต (รวมถึงบล็อก <style>) เท่านั้นที่สามารถวางไว้ในชั้นได้
การแก้ไขข้อผิดพลาดของชั้นใน DevTools
โครม DevTools จะแสดงขอบเขตของชั้นในแผงสไตล์ กฎจากชั้นที่มีลำดับความสำคัญต่ำกว่าซึ่งถูกเขียนทับโดยชั้นที่สูงกว่าจะถูกขีดฆ่า พร้อมระบุชั้นที่เป็นผู้ชนะ
ความเข้ากันได้ย้อนหลัง
เบราว์เซอร์ที่ไม่รองรับ @layer จะถือว่าบล็อก @layer ทั้งหมดเป็นบล็อก CSS มาตรฐาน (จึงแสดงผลทุกอย่าง) พฤติกรรมการเรียงซ้อนจะแตกต่างกัน แต่สไตล์จะไม่สูญหาย เพื่อความปลอดภัย ให้ห่อโค้ดที่ขึ้นกับคุณลักษณะนี้ไว้ใน @supports (@layer selector)
การย้าย CSS ที่มีอยู่ไปใช้ชั้น
กลยุทธ์การย้าย:
- ประกาศชั้นไว้ด้านบนสุดของไฟล์ CSS หลัก
- ห่อแต่ละส่วนของ CSS เดิมไว้ในบล็อกชั้นที่สอดคล้องกัน
- ทดสอบและแก้ไขปัญหาด้านลำดับความสำคัญที่เกิดขึ้น
- เมื่อเวลาผ่านไป ให้ลบตัวเลือกที่มีความจำเพาะสูงเกินความจำเป็น
ตรวจสอบอย่างรวดเร็ว
จะเพิ่มสไตล์จากบล็อก @layer แยกกันหลายบล็อกลงในชั้นที่มีชื่อเดียวกันได้อย่างไร
สรุป
เพิ่มสไตล์ลงในชั้นโดยใช้บล็อก @layer name { } ที่มีชื่อ ซึ่งสามารถแบ่งข้ามไฟล์ได้ และการประกาศทั้งหมดจะถูกรวมเข้าด้วยกัน กำหนดสไตล์ชีตที่นำเข้าให้กับชั้นด้วย @import layer() ชั้นที่ไม่ระบุชื่อไม่สามารถเปิดกลับมาใช้อีกได้ สไตล์ในบรรทัดจะเขียนทับสไตล์ที่ประกาศในชั้นเสมอ
คำถามที่พบบ่อย
บทเรียน “การเพิ่มรูปแบบลงในเลเยอร์” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การเพิ่มรูปแบบลงในเลเยอร์” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การเพิ่มรูปแบบลงในเลเยอร์”
กำหนดกฎ CSS ให้กับเลเยอร์เฉพาะด้วยบล็อก @layer และสไตล์ชีตที่นำเข้า คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “การเพิ่มรูปแบบลงในเลเยอร์” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การประกาศและการจัดลำดับ @layer
- การเพิ่มรูปแบบลงในเลเยอร์
- ลำดับความสำคัญของเลเยอร์และการทำงานร่วมกับ !important
- เลเยอร์ในโค้ดจากผู้ให้บริการภายนอก