มีกฎไวยากรณ์สองข้อที่รวมอยู่ใน CSS:
กฎทั่วไป: ประกอบด้วยตัวเลือก คุณลักษณะ และค่าต่างๆ เราใช้กฎประเภทนี้ในการศึกษาก่อนหน้านี้เป็นหลัก
@Rule: ขึ้นต้นด้วย @ และตามด้วยคีย์เวิร์ด หรือเรียกอีกอย่างว่า "กฎ AT" สามารถแบ่งออกเป็น " กฎปกติ " และ " กฎที่ซ้อนกัน " ตามวิธีการใช้งานที่แตกต่างกัน
เรามาแนะนำกฎ @ ใน CSS กันดีกว่า
1. กฎทั่วไป
สิ่งที่เรียกว่า "กฎปกติ" หมายถึงกฎที่มีไวยากรณ์คล้ายกับตัวอย่างต่อไปนี้:
@[คำหลัก](กฎ);
(1)@ชุดอักขระ
@charset ใช้เพื่อตั้งค่าการเข้ารหัสอักขระที่ใช้ในไฟล์ CSS รูปแบบไวยากรณ์มีดังนี้:
@charset<charset>;
หนึ่งในนั้น <charset> คือการเข้ารหัสอักขระเฉพาะ และค่าเริ่มต้นคือ "utf-8"
คุณต้องใส่ใจกับประเด็นต่อไปนี้เมื่อใช้งาน:
1 หากตั้งค่า @charset จะต้องปรากฏที่ด้านหน้าของไฟล์ CSS และไม่มีอักขระปรากฏก่อน @charset
②การเข้ารหัสอักขระจะต้องอยู่ในเครื่องหมายคำพูดคู่
3. จำเป็นต้องใช้ช่องว่างเพื่อแยกชื่อ @rule (@charset) และการเข้ารหัสอักขระเฉพาะ
④ไม่สามารถละเครื่องหมายอัฒภาคหลังกฎได้
⑤หากตั้งค่า @charsets หลายรายการ เฉพาะคำสั่งแรกเท่านั้นที่ถูกต้อง
⑥@charset ไม่สามารถใช้ในองค์ประกอบ HTML หรือแท็ก <style>
⑦หากมีการกำหนดกฎการเข้ารหัสอักขระหลายตัวด้วยวิธีที่แตกต่างกัน ลำดับความสำคัญจะเป็นดังนี้:
● การประกาศการเข้ารหัสอักขระที่จุดเริ่มต้นของไฟล์ HTML
●การประกาศการเข้ารหัสอักขระในส่วนหัวคำขอ HTTP
●การประกาศการเข้ารหัสอักขระที่กำหนดโดย @charset ใช้ในไฟล์ CSS
●การประกาศการเข้ารหัสอักขระที่กำหนดโดยแอตทริบิวต์ชุดอักขระในแท็ก <link> (เลิกใช้แล้วใน HTML5)
ตัวอย่างต่อไปนี้สาธิตการใช้ @charset รวมถึงตัวอย่างข้อผิดพลาดหลายประการ:
/*ตั้งค่ารูปแบบการเข้ารหัส CSS เป็น UnicodeUTF-8*/@charsetUTF-8;@charsetutf-8;/*ไม่คำนึงถึงขนาดตัวพิมพ์*//*การสาธิตข้อผิดพลาด*/@charset'iso-8859-15';/*Invalid ใช่ ใช้เครื่องหมายคำพูดผิด */@charset'UTF-8'; /*ไม่ถูกต้อง มีการใช้เครื่องหมายคำพูดผิด*/@charsetUTF-8;/*ไม่ถูกต้อง มีการใช้ช่องว่างเพิ่มเติมระหว่าง @charset และการเข้ารหัสอักขระ*/@charsetUTF-8;/*ไม่ถูกต้อง ก่อนหน้านี้มีกฎ @ มากเกินไป ช่องว่าง*/@charsetUTF-8;/*ไม่ถูกต้อง การเข้ารหัสอักขระจะต้องอยู่ในเครื่องหมายคำพูดคู่*/
(2) @นำเข้า
@import ใช้เพื่อนำเข้าไฟล์สไตล์อื่นๆ ลงในไฟล์สไตล์ CSS ปัจจุบัน เนื้อหาทั้งหมดยกเว้น @charset ในไฟล์สไตล์ชีตอื่น ๆ สามารถแนะนำผ่าน @import ได้ นอกจากนี้ @import จะต้องวางไว้ที่ด้านหน้าของไฟล์สไตล์ด้วย รูปแบบไวยากรณ์ของ @import เป็นดังนี้:
@นำเข้า<url><media_query_list>
หนึ่งในนั้นคือ <url> คือเส้นทางไฟล์สไตล์ชีตภายนอกที่จะนำเข้าโดยใช้เส้นทางสัมบูรณ์หรือเส้นทางสัมพัทธ์ คุณยังสามารถใช้ฟังก์ชัน url() เพื่อระบุเส้นทางไฟล์ <media_query_list> เป็นพารามิเตอร์ทางเลือก ซึ่งใช้ในการระบุ เงื่อนไขของการสืบค้นสื่อ ใช้เครื่องหมายจุลภาคเพื่อแยกเงื่อนไขต่างๆ
ในโครงการจริง ไม่แนะนำให้ใช้ @import มากเกินไป เนื่องจากจะทำให้เกิดการร้องขอเพิ่มเติมจำนวนมากและบล็อกการโหลดไฟล์อื่น ๆ
เมื่อใช้ @import คุณต้องใส่ใจกับประเด็นต่อไปนี้ด้วย:
●@import จะต้องประกาศที่จุดเริ่มต้นของไฟล์สไตล์ชีต และการประกาศจะต้องลงท้ายด้วยเครื่องหมายอัฒภาค หากละเว้นอัฒภาคส่วนท้าย สไตล์ชีตภายนอกอาจนำเข้าไม่ถูกต้อง
●การใช้ @import ในเบราว์เซอร์ IE สามารถแนะนำสไตล์ชีตได้สูงสุด 35 สไตล์เท่านั้น
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้ @import:
@importurl(global.css);@importurl(global.css);@importglobal.css;@importurl(fineprint.css)พิมพ์;@importurl(bluish.css)การฉายภาพ,ทีวี;@import'cust om.css';@importurl(chrome://communicator/skin/);@importcommon.cssscreen,projection;@importurl('landscape.css')screenand(orientation:landscape);วิธีการกำหนดข้างต้นใช้ได้ทั้งหมด เมื่อใช้ url() เพื่อกำหนดเส้นทางของไฟล์สไตล์ชีต เครื่องหมายคำพูดของเส้นทางการตัดคำจะเป็นทางเลือก เมื่อใช้เส้นทางเฉพาะเพื่อกำหนดเส้นทางของไฟล์สไตล์ชีตโดยตรง เส้นทางการตัดเครื่องหมายคำพูดจะต้องคงไว้
(3)@เนมสเปซ
@namespace ใช้เพื่อกำหนดกฎ @ ของเนมสเปซ XML ในสไตล์ชีต CSS มันสามารถตั้งค่าเนมสเปซที่ระบุสำหรับตัวเลือกทั้งหมดในไฟล์สไตล์ปัจจุบัน โดยทั่วไป @namespace จะใช้ในการจัดการเอกสารที่มีเนมสเปซหลายรายการ เช่น SVG แบบอินไลน์ใน HTML5, MathML หรือ XML ผสมกับคำศัพท์หลายคำ
@namespace ต้องถูกกำหนดไว้หลัง @charset และ @import ทั้งหมด และก่อนการประกาศสไตล์อื่นๆ ในสไตล์ชีต @namespace สามารถใช้เพื่อกำหนดเนมสเปซเริ่มต้นได้ เมื่อระบุเนมสเปซเริ่มต้นแล้ว ตัวเลือกสากลและตัวเลือกคลาสทั้งหมด (แต่ไม่ใช่ตัวเลือกแอตทริบิวต์) จะถูกนำไปใช้กับองค์ประกอบในเนมสเปซนี้เท่านั้น @namespace ยังสามารถใช้เพื่อกำหนดคำนำหน้าเนมสเปซได้ เมื่อตัวเลือกทั่วไป คลาส หรือแอตทริบิวต์นำหน้าด้วยคำนำหน้าเนมสเปซ ตัวเลือกนี้จะจับคู่เฉพาะองค์ประกอบที่มีเนมสเปซตรงกับชื่อองค์ประกอบหรือแอตทริบิวต์
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้ @namespace:
/*เนมสเปซเริ่มต้น*/@namespaceurl(XML-namespace-URL);@namespaceXML-namespace-URL;/*คำนำหน้าเนมสเปซ*/@namespaceprefixurl(XML-namespace-URL);@namespaceprefixXML-namespace-URL;
2. กฎที่ซ้อนกัน
สิ่งที่เรียกว่า "กฎที่ซ้อนกัน" หมายความว่ากฎ @ จะต้องตามด้วยวงเล็บปีกกา { } ซึ่งประกอบด้วยการประกาศกฎอื่นๆ ที่คล้ายคลึงกับตัวอย่างต่อไปนี้:
@[KEYWORD]{/*คำสั่งที่ซ้อนกัน*/}(1)@สื่อ
@media ใช้เพื่อใช้บางส่วนของสไตล์ชีท (ข้อมูลสไตล์ในวงเล็บปีกกา) โดยอิงตามผลลัพธ์ของการสืบค้นสื่อตั้งแต่หนึ่งรายการขึ้นไป การใช้ @media คุณสามารถระบุชุดของการสืบค้นสื่อและบล็อกสไตล์ CSS ได้เท่านั้น หากสื่อ สไตล์ CSS ที่ระบุจะถูกนำไปใช้กับเอกสารเมื่อแบบสอบถามตรงกับอุปกรณ์ที่ใช้งานอยู่เท่านั้น
การสืบค้นสื่อคือชุดเงื่อนไขที่ใช้ในการกำหนดข้อมูลอุปกรณ์ เช่น ค่าความกว้างและความสูงของอุปกรณ์ อัตราส่วนภาพ สี ความละเอียด ฯลฯ เมื่อเงื่อนไขตรงกัน ข้อมูลสไตล์ที่ซ้อนกันจะถูกดำเนินการ
@media สามารถวางไว้ที่ใดก็ได้ในสไตล์ชีตหรือในกฎ @ อื่นๆ โค้ดตัวอย่างจะเป็นดังนี้:
@mediaalland(min-width:1280px){/*ความกว้างมากกว่า 1280*/}@media(-webkit-min-device-pixel-ratio:1.5),(ความละเอียดขั้นต่ำ:2dppx){/*หน้าจอ Retina*/ } @mediaprint{/*พิมพ์*/}@media screen,screen9{/*IE7,IE8*/}@mediascreen9{/*IE7*/}(2)@เพจ
@page ใช้เพื่อแก้ไขคุณสมบัติ CSS บางอย่างเมื่อพิมพ์เอกสาร โปรดทราบว่าการใช้ @page คุณสามารถแก้ไขคุณสมบัติ CSS บางอย่างได้เท่านั้น เช่น ขอบคุณสมบัติระยะห่างภายนอก เด็กกำพร้าที่เกี่ยวข้องกับการพิมพ์ คุณสมบัติ windows และตัวแบ่งหน้า -* คุณสมบัติ คุณสมบัติ CSS อื่นๆ จะถูกละเว้น
/*แสดงว่าระยะขอบด้านบนและซ้ายของหน้าแรกเมื่อพิมพ์มีทั้ง 50%*/@page:first{margin-left:50%;margin-top:50%;}(3)@สนับสนุน
@supports ใช้เพื่อตรวจสอบว่าเบราว์เซอร์รองรับคุณลักษณะ CSS บางอย่างหรือที่เรียกว่า "แบบสอบถามคุณลักษณะ" หรือไม่ โครงสร้างไวยากรณ์ของกฎนี้เป็นดังนี้:
@supports(กฎ)[โอเปอเรเตอร์(กฎ)]*{sRules};ในหมู่พวกเขากฎเป็นรูปแบบ CSS ที่เฉพาะเจาะจงและจะต้องอยู่ในวงเล็บ ค่าตัวเลือกของตัวดำเนินการคือหรือและและไม่สามารถระบุรูปแบบ CSS หลายรูปแบบผ่านพารามิเตอร์ตัวดำเนินการ
@supports สามารถกำหนดได้ที่ด้านบนของไฟล์สไตล์หรือภายในกฎที่ซ้อนกันอื่นๆ อย่างไรก็ตาม @supports ยังอยู่ในขั้นทดลอง ก่อนที่จะใช้งาน คุณต้องตรวจสอบก่อนว่าเบราว์เซอร์รองรับหรือไม่
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้ @supports:
/*สไตล์ CSS ที่จะใช้เมื่อเบราว์เซอร์รองรับแอตทริบิวต์ display:grid*/@supports(display:grid){div{display:grid;}}/*CSS ที่จะใช้เมื่อเบราว์เซอร์ไม่รองรับจอแสดงผล:กริด รูปแบบแอตทริบิวต์*/@supportsnot (display:grid){div{float:right;}}/*ตรวจสอบหลายเงื่อนไขพร้อมกัน*/@supports(display:flex)and(-webkit-appearance:checkbox){.module{display:flex;} }(4) @font-face
@font-face ใช้เพื่อโหลดแบบอักษรที่ระบุจากเซิร์ฟเวอร์ระยะไกลหรือผู้ใช้ภายในเครื่อง รูปแบบไวยากรณ์จะเป็นดังนี้:
@font-face{font-family:<identifier>;src:<url>[format(<string>)][,<url>[format(<string>)]]*;<font>;}คำอธิบายพารามิเตอร์มีดังนี้:
●<ตัวระบุ>: ชื่อแบบอักษร;
●<url>: ใช้ url() (แบบอักษรระยะไกล) หรือ local() (แบบอักษรท้องถิ่น) เพื่อระบุเส้นทางการจัดเก็บแบบอักษร ซึ่งอาจเป็นเส้นทางสัมพัทธ์หรือเส้นทางที่แน่นอน
●<string>: ใช้เพื่อระบุรูปแบบของแบบอักษรที่กำหนดเอง เช่นประเภทต่อไปนี้: truetype, opentype, Embedded-opentype, svg ฯลฯ
●<font>: กำหนดรูปแบบที่เกี่ยวข้องกับแบบอักษร
เคล็ดลับ: สามารถวาง @font-face ไว้ที่ด้านบนของสไตล์ชีต CSS หรือภายในกฎที่ซ้อนกันอื่นๆ หากคุณใช้ทั้งฟังก์ชัน local() และฟังก์ชัน url() เพื่อโหลดแบบอักษร แบบอักษรในเครื่องที่กำหนดในฟังก์ชัน local() จะถูกโหลดก่อน หากไม่พบ แบบอักษรระยะไกลที่กำหนดไว้ในฟังก์ชัน url() จะเป็น โหลดแล้ว
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้ @font-face:
/*กำหนดกฎ @font-face*/@font-face{/*ระบุชื่อแบบอักษร*/font-family:OpenSans;/*ระบุเส้นทางไปยังไฟล์แบบอักษร*/src:url(/fonts/OpenSans-Regular -webfont.woff2)รูปแบบ(woff2),url(/fonts/OpenSans-Regular-webfont.woff)รูปแบบ(woff);}/*แอปพลิเคชันแบบอักษร*/p{font-family:OpenSans;}(5)@คีย์เฟรม
@keyframes ใช้เพื่อกำหนดสไตล์ของคีย์เฟรมแอนิเมชั่น (หรือเวย์พอยท์) ใน CSS3 เพื่อควบคุมขั้นตอนกลางในลำดับแอนิเมชั่น หลังจากกำหนดกฎนี้แล้ว คุณจะต้องใช้กฎดังกล่าวผ่านแอตทริบิวต์ชื่อภาพเคลื่อนไหว ลำดับคีย์เฟรมตั้งชื่อตามเปอร์เซ็นต์ โดยมีสถานะเริ่มต้นและสิ้นสุดเป็นจากและถึงคิดเป็น 0% และ 100% ตามลำดับ
รูปแบบไวยากรณ์ของ @keyframes เป็นดังนี้:
@keyframes<ตัวระบุ>{<คีย์เฟรม-บล็อก>}ในหมู่พวกเขา <identi fier> ใช้เพื่อกำหนดชื่อของแอนิเมชั่น <keyframes-blocks> ใช้เพื่อกำหนดสไตล์ของแอนิเมชั่นในแต่ละขั้นตอน นั่นคือ แอนิเมชั่นเฟรม
การใช้ @keyframes แสดงให้เห็นในตัวอย่างต่อไปนี้:
/*คำสั่ง*/@keyframessslidein{from{margin-left:100%;width:300%;}ถึง{margin-left:0%;width:100%;}}@keyframessslideout{0%{top:0;} 50%{บน: 30px;}100%{top:60px;}}/*ใช้*/p{animation-name:slidein;animation-duration:4s;}div{animation-name:slideout;animation-duration:4s;}(6)@เอกสาร
@document ใช้เพื่อจำกัดขอบเขตของสไตล์ในเอกสารตาม URL ของเอกสาร คุณลักษณะนี้สามารถใช้เพื่อกำหนดสไตล์พิเศษสำหรับผู้ใช้ที่ระบุ ขณะนี้ @document ยังอยู่ในขั้นทดลอง และมาตรฐานเฉพาะจะได้รับการพิจารณาใน CSS4
ฟังก์ชั่นที่มีอยู่ใน @document มีดังนี้:
●url(): ตรงกับ URL ทั้งหมด;
●url-prefix(): URL ของเอกสารที่ตรงกันเริ่มต้นด้วยค่าที่ระบุโดยพารามิเตอร์หรือไม่
●domain(): ชื่อโดเมนของเอกสารที่ตรงกันคือชื่อโดเมนที่ระบุในพารามิเตอร์หรือชื่อโดเมนย่อย
●regexp(): URL ของเอกสารที่ตรงกันตรงกับนิพจน์ทั่วไปที่ระบุในพารามิเตอร์หรือไม่ นิพจน์จะต้องตรงกับ URL ทั้งหมด
เคล็ดลับ: พารามิเตอร์ที่ให้กับฟังก์ชัน url(), url-prefix() และ domain() สามารถห่อหุ้มได้โดยไม่ต้องใส่เครื่องหมายคำพูด แต่พารามิเตอร์ที่ให้กับฟังก์ชัน regexp() จะต้องห่อหุ้มด้วยเครื่องหมายคำพูด
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้ @document:
@documenturl(http://www.weixueyuan.net/),url-prefix(http://www.weixueyuan.net/Style/),โดเมน(weixueyuan.net),regexp(https:.*){/* กฎ CSS นี้จะนำไปใช้กับหน้าเว็บต่อไปนี้:+URL คือ http:/ หน้า /www.weixueyuan.net/ + หน้าเว็บใด ๆ ที่มี URL ขึ้นต้นด้วย http://www.weixueyuan.net/Style/ + หน้าเว็บทั้งหมดภายใต้ชื่อโดเมน weixueyuan.net + หน้าเว็บใด ๆ ที่มี URL ขึ้นต้นด้วย https:* // *กำหนดสไตล์*/body{สี:สีม่วง;พื้นหลัง:สีเหลือง;}