ต่อไปนี้เป็นหลัก “ ที่กฎ ” ใน CSS:
เรามาคุยกันสั้น ๆ ทั้งสามเรื่อง ' ที่กฎ ” เพื่อทำความเข้าใจว่าพวกเขาทำงานอย่างไร
@import Rule ใน CSS คืออะไร
“ @นำเข้า ” กฎใน CSS ใช้เพื่อนำเข้าสไตล์ชีต CSS จากสไตล์ชีตอื่น หากมีสไตล์ชีต CSS ที่มีคุณสมบัติหรือคำแนะนำเกี่ยวกับสไตล์สำหรับองค์ประกอบต่างๆ ของหน้าเว็บ และจำเป็นต้องเพิ่มสไตล์ชีตเดียวกันลงในไฟล์หน้าเว็บอื่น ให้เขียนเฉพาะ “ @นำเข้า ” พร้อมชื่อของสไตล์ชีตนั้น (ที่มีคุณสมบัติ CSS) ทางด้านขวาในวงเล็บเหลี่ยมที่มี “ URL ” หรือเครื่องหมายจุลภาคกลับหัวสามารถนำเข้าคุณสมบัติทั้งหมดจากสไตล์ชีตนั้นและนำไปใช้โดยตรงกับสไตล์ชีตโดยที่ “ @นำเข้า ” เพิ่มกฎแล้ว
ไวยากรณ์
ควรมีชื่อไฟล์สไตล์ชีตที่จัดรูปแบบ CSS ไว้หลัง “ @นำเข้า '. ดังนั้นไวยากรณ์ที่จะเพิ่ม “ @นำเข้า ” กฎในสไตล์ชีตมีดังนี้:
@นำเข้า 'stylesheetname.css' ;
กฎการนำเข้าสามารถเขียนได้ดังต่อไปนี้เพื่อจุดประสงค์เดียวกันเนื่องจากจะสร้างผลลัพธ์เดียวกันด้วย:
@นำเข้า URL ( stylesheetname.css ) ;กฎ @media ใน CSS คืออะไร
“ @สื่อ ” กฎใช้เพื่อเพิ่มคำสั่งสื่อไปยังหน้าเว็บ กฎนี้ทำงานตามเงื่อนไขที่ใช้ในขณะที่เพิ่มกฎนี้ เงื่อนไขจะถูกเพิ่มทันทีหลังจากเพิ่ม “ @สื่อ ” ทางด้านขวาและจากนั้นภายในกฎในวงเล็บปีกกาคือคุณสมบัติหรือคำแนะนำที่ต้องดำเนินการเมื่อเงื่อนไขเป็นจริง
ตัวอย่าง: การใช้กฎ @media
เพื่อให้เข้าใจผ่านตัวอย่าง เราสามารถเพิ่มเนื้อหาบางส่วนลงในหน้าเว็บได้:
< แผนก ระดับ = 'ห้องเรียนของฉัน' >< h1 > ยินดีต้อนรับสู่การสอน LinuxHint! < / h1 >
< / แผนก >
ในข้อมูลโค้ดด้านบน มีหัวข้อที่สร้างขึ้นเพื่อแสดงเป็นเนื้อหาของหน้าเว็บ
ลองมาดูตัวอย่างการเพิ่มคำสั่งสื่อเมื่อขนาดหรือความกว้างของหน้ากระดาษเพิ่มขึ้นหรือลดลง ขั้นแรก ให้เขียนว่า “ @สื่อ ” แล้วเพิ่มเงื่อนไข จากนั้นในวงเล็บปีกกาจะกำหนดคุณสมบัติ CSS ที่ควรนำไปใช้หากเงื่อนไขมี “ @สื่อ ” กลายเป็นจริง:
@สื่อ ( ความกว้างสูงสุด : 700px ) {.ห้องเรียนของฉัน {
สี : สีดำ ;
พื้นหลัง : สีเขียว ;
}
}
@สื่อ ( ความกว้างต่ำสุด : 700px ) และ ( ความกว้างสูงสุด : 900px ) {
.ห้องเรียนของฉัน {
สี : สีดำ ;
พื้นหลัง : สีเหลือง ;
}
}
@สื่อ ( ความกว้างต่ำสุด : 900px ) {
.ห้องเรียนของฉัน {
สี : สีดำ ;
พื้นหลัง : สีฟ้า ;
}
}
ในโค้ดข้างต้น มีการกล่าวถึงขนาดความกว้างที่แตกต่างกันเป็นเงื่อนไขสำหรับกฎสื่อที่แตกต่างกันสามข้อในการดำเนินการตามนั้น ตัวอย่างเช่น ตามโค้ดข้างต้น เมื่อความกว้างขั้นต่ำคือ 700px สีพื้นหลังของข้อความจะเปลี่ยนเป็นสีเหลือง
ต่อไปนี้จะเป็นผลลัพธ์ที่สร้างผ่านโค้ดด้านบน การเปลี่ยนขนาดของหน้าจอจะเปลี่ยนสีพื้นหลังของข้อความ:
กฎ @font-face ใน CSS คืออะไร
กฎฟอนต์เฟซเป็นวิธีการง่ายๆ ในการเพิ่มรูปแบบฟอนต์ลงในหน้าเว็บโดยตรง แบบอักษรจะถูกดาวน์โหลดโดยตรงและนำไปใช้กับข้อความผ่านกฎนี้
ตัวอย่าง: การใช้ @font-face Rule
มาทำความเข้าใจวิธีการเพิ่ม “ @font-face ” ปกครองผ่านตัวอย่างง่ายๆ:
< แผนก ระดับ = 'ห้องเรียนของฉัน' >< h1 > ยินดีต้อนรับสู่การสอน LinuxHint! < / h1 >
< / แผนก >
ข้อมูลโค้ดด้านบนมีหัวข้อความเดียวกันกับที่อธิบายไว้ในส่วนก่อนหน้าของโพสต์นี้
มาปรับใช้ “ @font-face ” กฎสำหรับ “ ” มุ่งหน้าเปลี่ยนฟอนต์:
@font-face {ครอบครัวแบบอักษร : 'เดจาวูซัง' ;
src : URL ( './fonts/DejaVuSans.ttf' ) รูปแบบ ( 'ทีทีเอฟ' ) ;
ตัวอักษรน้ำหนัก : 500 ;
}
h1 {
ครอบครัวแบบอักษร : 'เดจาวู ซันส์' ;
ตัวอักษรน้ำหนัก : 500 ;
}
ในข้อมูลโค้ดด้านบน มีชื่อตระกูลฟอนต์ที่จำเป็น และจากนั้น ' URL ” ลิงก์จากตำแหน่งที่ควรดาวน์โหลดฟอนต์ จากนั้นตามด้วยฟอนต์-น้ำหนัก เมื่อมีการระบุรูปแบบตัวอักษรผ่าน “ @font-face กฎ ชื่อของแบบอักษรสามารถใช้กับองค์ประกอบใด ๆ เช่นในรหัสนี้ใช้สำหรับ ' h1 ” หัวเรื่อง.
การเรียกใช้โค้ดนี้จะเปลี่ยนฟอนต์ตามคำแนะนำที่ระบุไว้ใน “ @font-face ' กฎ. ต่อไปนี้จะเป็นผลลัพธ์ของข้อมูลโค้ดด้านบน:
สรุปจุดประสงค์ของ “ @ ” สัญลักษณ์ใน CSS
บทสรุป
“ @ ” สัญลักษณ์ใน CSS ใช้เพื่อเพิ่ม “ ที่กฎ ” ใน CSS กฎเหล่านี้ทำงานที่มีประโยชน์มากในขณะที่ใช้ CSS เพื่อจัดรูปแบบเอกสาร เช่น กฎเหล่านี้นำเข้าสไตล์ชีตทั้งหมดจากไฟล์ css อื่นผ่าน ' @นำเข้า ” กฎ ใช้คุณสมบัติ CSS บนสื่อที่กำหนดตามเงื่อนไขผ่าน “ @สื่อ ” และดาวน์โหลดฟอนต์โดยตรงเพื่อใช้ในเว็บเพจผ่าน “ @font-face ' กฎ.