ฉันเพิ่งสะดุดกับคำถามนี้และฉันสังเกตเห็นว่าผู้ใช้ใช้สัญกรณ์บางอย่างที่ฉันไม่เคยเห็นมาก่อน:
@font-face {
/* CSS HERE */
}@สัญลักษณ์นี้มีอะไรใหม่ใน CSS3 หรือสิ่งเก่า ๆ ที่ฉันมองข้ามไป นี่เป็นสิ่งที่คุณใช้กับ ID #และชั้นเรียนที่คุณใช้.หรือไม่ Google ไม่ได้ให้บทความที่ดีใด ๆ เกี่ยวกับเรื่องนี้กับฉัน จุดประสงค์ของ @สัญลักษณ์ใน CSS คืออะไร?
คำตอบ:
@ได้รับมาตั้งแต่สมัย@importใน CSS1 แม้ว่ามันจะกลายเป็นเรื่องธรรมดามากขึ้นในโครงสร้าง@media(CSS2, CSS3) และ@font-face(CSS3) ล่าสุด อย่างไรก็ตาม@ไวยากรณ์เองนั้นตามที่ฉันพูดถึงไม่ใช่เรื่องใหม่
ทั้งหมดนี้เป็นที่รู้จักใน CSS ว่าเป็นกฎที่กฎเป็นคำแนะนำพิเศษสำหรับเบราว์เซอร์ซึ่งไม่เกี่ยวข้องโดยตรงกับการกำหนดสไตล์ขององค์ประกอบ (X) HTML / XML ในเอกสารเว็บโดยใช้กฎและคุณสมบัติแม้ว่าจะมีบทบาทสำคัญในการควบคุมวิธีการใช้สไตล์
ตัวอย่างโค้ดบางส่วน:
/* Import another stylesheet from within a stylesheet */
@import url(style2.css);
/* Apply this style only for printing */
@media print {
body {
color: #000;
background: #fff;
}
}
/* Embed a custom web font */
@font-face {
font-family: 'DejaVu Sans';
src: local('DejaVu Sans Regular'), url(/fonts/DejaVuSans.ttf);
}@font-faceกฎกำหนดแบบอักษรที่กำหนดเองสำหรับใช้ในการออกแบบของคุณที่ไม่สามารถใช้ได้กับคอมพิวเตอร์ทุกเครื่องดังนั้นเบราว์เซอร์จะดาวน์โหลดแบบอักษรจากเซิร์ฟเวอร์และตั้งค่าข้อความในแบบอักษรที่กำหนดเองนั้นราวกับว่าคอมพิวเตอร์ของผู้ใช้มีแบบอักษร
@mediaกฎร่วมกับการสืบค้นสื่อ (ก่อนหน้านี้เท่านั้นประเภทสื่อสิ่งพิมพ์ ), การควบคุมรูปแบบที่จะนำไปใช้และที่ไม่ได้ขึ้นอยู่กับสิ่งที่สื่อจะแสดงหน้าในตัวอย่างรหัสของฉันเฉพาะเมื่อพิมพ์เอกสารควรตั้งค่าข้อความทั้งหมด ในสีดำตัดกับพื้นหลังสีขาว (กระดาษ) คุณสามารถใช้เคียวรีสื่อบันทึกเพื่อกรองสื่อสิ่งพิมพ์อุปกรณ์พกพาและอื่น ๆ และเพจสไตล์ต่างกันสำหรับเอกสารเหล่านั้น
กฎไม่มีความสัมพันธ์กับตัวเลือกใด ๆ เนื่องจากลักษณะที่แตกต่างกันของพวกเขากฎที่แตกต่างกันมีการกำหนดในรูปแบบที่แตกต่างกันในโมดูลที่แตกต่างกันมากมาย ตัวอย่างเพิ่มเติม ได้แก่ :
(รายการนี้อยู่ไกลจากครบถ้วนสมบูรณ์)
ตัวอย่างของ @media ที่อาจเป็นประโยชน์ในการอธิบายเพิ่มเติม:
@media screen and (max-width: 1440px)
{
span.sizedImage
{
height:135px;
width: 174px;
}
}
@media screen and (min-width: 1441px)
{
span.sizedImage
{
height:150px;
width: 200px;
}
}สิ่งนี้จะเปลี่ยนแปลงขนาดของภาพตามเงื่อนไขบนขนาดของหน้าจอโดยใช้ภาพที่เล็กลงบนหน้าจอที่เล็กกว่า บล็อกแรกจะระบุที่อยู่ของหน้าจอมากถึง 1440px ครั้งที่สองจะอยู่หน้าจอที่ใหญ่กว่า 1440px
สิ่งนี้มีประโยชน์กับแท็บที่เลื่อนลงหรือเลื่อนบนหน้าจอขนาดเล็ก คุณมักจะสามารถลดขนาดแบบอักษรของป้ายแท็บลงขนาดจุดบนหน้าจอขนาดเล็กและให้พอดีทั้งหมด
@ ถูกใช้เป็นข้อกำหนดของกฎ ชอบ@font-face
สไตล์ CSS ของ ProBoard ยังใช้สิ่งเหล่านี้เป็นตัวแปร
นี่เป็นตัวอย่างเล็กน้อยจากหนึ่งในหน้า CSS ของพวกเขา:
@wrapper_width: 980px;
@link_color: #c06806;
@link_font: 100% @default_forum_text_font_family;
@link_decoration: none;
#wrapper { width: @wrapper_width; margin: 0 auto; overflow-x: hidden; }
table { table-layout: fixed; }
a { cursor: pointer; color: @link_color; font: @link_font; text-decoration: @link_decoration; }หมายเหตุ: ไม่ใช่คนพื้นเมืองดูความคิดเห็นแรก