Ada dua aturan sintaksis yang disertakan dalam CSS:
Aturan biasa: terdiri dari penyeleksi, atribut, dan nilai, kami terutama menggunakan aturan semacam ini dalam penelitian sebelumnya;
@Rule: Dimulai dengan @ dan diikuti dengan kata kunci. Ini juga disebut "At rule". Ini dapat dibagi menjadi " aturan reguler " dan " aturan bersarang " sesuai dengan metode penggunaan yang berbeda.
Mari kita perkenalkan aturan @ di CSS.
1. Aturan umum
Yang disebut "aturan reguler" mengacu pada aturan dengan sintaksis yang mirip dengan berikut:
@[KATA KUNCI](ATURAN);
(1)@set karakter
@charset digunakan untuk mengatur pengkodean karakter yang digunakan dalam file CSS. Format sintaksnya adalah sebagai berikut:
@charset<charset>;
Diantaranya, <charset> adalah pengkodean karakter tertentu, dan nilai defaultnya adalah "utf-8".
Anda perlu memperhatikan hal-hal berikut saat menggunakannya:
① Jika @charset disetel, maka harus muncul di depan file CSS, dan tidak ada karakter yang boleh muncul sebelum @charset;
②Pengkodean karakter harus diapit dengan tanda kutip ganda;
③ Spasi perlu digunakan untuk memisahkan nama @rule (@charset) dan pengkodean karakter tertentu;
④ Titik koma setelah aturan tidak dapat dihilangkan;
⑤Jika beberapa @charsets disetel, hanya pernyataan pertama yang valid;
⑥@charset tidak dapat digunakan dalam elemen HTML atau tag <style>;
⑦Jika beberapa aturan pengkodean karakter didefinisikan dengan cara yang berbeda, urutan prioritasnya adalah sebagai berikut:
● Deklarasi pengkodean karakter di awal file HTML;
●Deklarasi pengkodean karakter dalam header permintaan HTTP;
●Deklarasi pengkodean karakter yang ditentukan oleh @charset digunakan dalam file CSS;
●Deklarasi pengkodean karakter yang ditetapkan oleh atribut charset di tag <link> (tidak digunakan lagi di HTML5).
Contoh berikut menunjukkan penggunaan @charset, serta beberapa contoh kesalahan:
/*Setel format penyandian CSS ke UnicodeUTF-8*/@charsetUTF-8;@charsetutf-8;/*Tidak peka huruf besar-kecil*//*Demonstrasi kesalahan*/@charset'iso-8859-15';/*Tidak valid Ya, tanda kutip yang digunakan salah */@charset'UTF-8'; /*Tidak valid, tanda kutip salah digunakan*/@charsetUTF-8;/*Tidak valid, spasi tambahan digunakan antara @charset dan pengkodean karakter*/@charsetUTF-8;/*Tidak valid, ada terlalu banyak aturan @ sebelumnya Spasi*/@charsetUTF-8;/*Tidak valid, pengkodean karakter harus diapit tanda kutip ganda*/
(2) @impor
@import digunakan untuk mengimpor file gaya lain ke file gaya CSS saat ini. Semua konten kecuali @charset di file style sheet lainnya dapat dimasukkan melalui @import. Selain itu, @import juga harus ditempatkan di depan file style. Format sintaks @import adalah sebagai berikut:
@impor<url><media_query_list>
Diantaranya, <url> adalah jalur file style sheet eksternal yang akan diimpor menggunakan jalur absolut atau relatif. Anda juga dapat menggunakan fungsi url() untuk menentukan jalur file; <media_query_list> adalah parameter opsional, digunakan untuk menentukan jalur file kondisi kueri media. Gunakan koma untuk memisahkan beberapa kondisi.
Dalam proyek sebenarnya, tidak disarankan untuk menggunakan @import terlalu banyak, karena akan menyebabkan banyak permintaan tambahan dan memblokir pemuatan file lain.
Saat menggunakan @import, Anda juga perlu memperhatikan hal-hal berikut:
●@import harus dideklarasikan terlebih dahulu di awal file style sheet, dan deklarasi harus diakhiri dengan titik koma. Jika titik koma di akhir dihilangkan, style sheet eksternal mungkin tidak dapat diimpor dengan benar;
●Menggunakan @import di browser IE hanya dapat menampilkan hingga 35 style sheet.
Contoh berikut menunjukkan penggunaan @import:
@importurl(global.css);@importurl(global.css);@importglobal.css;@importurl(fineprint.css)print;@importurl(bluish.css)proyeksi,tv;@import'cust om.css';@importurl(chrome://communicator/skin/);@importcommon.cssscreen,projection;@importurl('landscape.css')screenand(orientation:landscape);Semua metode definisi di atas valid. Saat menggunakan url() untuk menyetel jalur file style sheet, tanda kutip dari jalur pembungkus bersifat opsional; jalur pembungkus tanda kutip harus dipertahankan.
(3)@namespace
@namespace digunakan untuk mendefinisikan aturan @ dari namespace XML di style sheet CSS. Ini dapat mengatur namespace yang ditentukan untuk semua penyeleksi dalam file gaya saat ini. @namespace biasanya digunakan untuk menangani dokumen yang berisi beberapa namespace, seperti SVG sebaris dalam HTML5, MathML, atau XML yang dicampur dengan beberapa kosakata.
@namespace harus didefinisikan setelah semua @charset dan @import, dan sebelum deklarasi gaya lainnya di style sheet. @namespace dapat digunakan untuk mendefinisikan namespace default. Ketika namespace default ditentukan, semua penyeleksi universal dan penyeleksi kelas (tetapi bukan penyeleksi atribut) hanya akan diterapkan ke elemen dalam namespace ini. @namespace juga dapat digunakan untuk mendefinisikan awalan namespace. Ketika pemilih umum, kelas, atau atribut didahului dengan awalan namespace, pemilih ini hanya akan mencocokkan elemen yang namespacenya cocok dengan nama atau atribut elemen.
Contoh berikut menunjukkan penggunaan @namespace:
/*Namespace bawaan*/@namespaceurl(XML-namespace-URL);@namespaceXML-namespace-URL;/*Awalan namespace*/@namespaceprefixurl(XML-namespace-URL);@namespaceprefixXML-namespace-URL;
2. Aturan bersarang
Yang disebut "aturan bersarang" berarti bahwa aturan @ harus diikuti dengan tanda kurung kurawal {}, yang berisi beberapa deklarasi aturan lainnya, serupa dengan yang berikut:
@[KEYWORD]{/*Pernyataan bertingkat*/}(1)@media
@media digunakan untuk menerapkan bagian tertentu dari style sheet (informasi gaya dalam tanda kurung kurawal) berdasarkan hasil dari satu atau lebih kueri media. Dengan menggunakan @media Anda dapat menentukan sekumpulan kueri media dan blok gaya CSS jika dan saja jika media Gaya CSS yang ditentukan hanya diterapkan ke dokumen ketika kueri cocok dengan perangkat yang digunakan.
Kueri media adalah sekumpulan kondisi yang digunakan untuk menentukan informasi perangkat, seperti nilai lebar dan tinggi perangkat, rasio aspek, warna, resolusi, dll. Jika kondisi cocok, informasi gaya bertingkat akan dijalankan.
@media dapat ditempatkan di mana saja di style sheet atau di @ aturan lainnya. Contoh kodenya adalah sebagai berikut:
@mediaalland(min-width:1280px){/*width lebih besar dari 1280*/}@media(-webkit-min-device-pixel-ratio:1.5),(min-resolusi:2dppx){/*Layar retina*/ } @mediaprint{/*print*/}@media screen,screen9{/*IE7,IE8*/}@mediascreen9{/*IE7*/}(2)@halaman
@page digunakan untuk mengubah properti CSS tertentu saat mencetak dokumen. Perlu dicatat bahwa dengan menggunakan @page Anda hanya dapat mengubah beberapa properti CSS, seperti margin properti spasi luar, anak yatim terkait pencetakan, properti windows, dan hentian halaman. -* properti, properti CSS lainnya akan diabaikan.
/*Menunjukkan bahwa margin atas dan kiri halaman pertama saat mencetak keduanya 50%*/@page:first{margin-left:50%;margin-top:50%;}(3)@dukungan
@supports digunakan untuk memeriksa apakah browser mendukung fitur CSS tertentu, juga dikenal sebagai "fitur query". Struktur sintaks dari aturan ini adalah sebagai berikut:
@supports(aturan)[operator(aturan)]*{sRules};Diantaranya, aturan adalah gaya CSS tertentu dan harus diapit tanda kurung; nilai opsional operator adalah atau, dan, dan tidak. Beberapa gaya CSS dapat ditentukan melalui parameter operator.
@supports dapat didefinisikan di bagian atas file gaya atau dalam aturan bersarang lainnya. Namun @supports masih dalam tahap percobaan. Sebelum menggunakannya, Anda harus memastikan terlebih dahulu apakah browser mendukungnya.
Contoh berikut menunjukkan penggunaan @supports:
/*Gaya CSS untuk digunakan ketika browser mendukung atribut display:grid*/@supports(display:grid){div{display:grid;}}/*CSS untuk digunakan ketika browser tidak mendukung display:grid gaya atribut*/@supportsnot (display:grid){div{float:right;}}/*Periksa beberapa kondisi secara bersamaan*/@supports(display:flex)and(-webkit-appearance:checkbox){.module{display:flex;} }(4) @font-wajah
@font-face digunakan untuk memuat font yang ditentukan dari server jarak jauh atau pengguna lokal. Format sintaksnya adalah sebagai berikut:
@font-face{font-family:<identifier>;src:<url>[format(<string>)][,<url>[format(<string>)]]*;<font>;}Deskripsi parameternya adalah sebagai berikut:
●<pengidentifikasi>: nama font;
●<url>: Gunakan url() (font jarak jauh) atau lokal() (font lokal) untuk menentukan jalur penyimpanan font, yang dapat berupa jalur relatif atau jalur absolut;
●<string>: digunakan untuk menentukan format font khusus, seperti tipe berikut: truetype, opentype, embedded-opentype, svg, dll.;
●<font>: Menentukan gaya terkait font.
Tip: @font-face dapat ditempatkan di bagian atas style sheet css atau di dalam aturan bersarang lainnya. Jika Anda menggunakan fungsi local() dan fungsi url() untuk memuat font, font lokal yang ditentukan dalam fungsi local() akan dimuat terlebih dahulu, jika tidak ditemukan, font jarak jauh yang ditentukan dalam fungsi url() akan dimuat sarat.
Contoh berikut menunjukkan penggunaan @font-face:
/*Tentukan aturan @font-face*/@font-face{/*Tentukan nama font*/font-family:OpenSans;/*Tentukan jalur ke file font*/src:url(/fonts/OpenSans-Regular -webfont.woff2)format(woff2),url(/fonts/OpenSans-Regular-webfont.woff)format(woff);}/*Aplikasi font*/p{font-family:OpenSans;}(5)@bingkai utama
@keyframes digunakan untuk menentukan gaya keyframe animasi (atau titik jalan) di CSS3 untuk mengontrol langkah-langkah perantara dalam urutan animasi. Setelah mendefinisikan aturan ini, Anda perlu menggunakannya melalui atribut nama animasi. Urutan keyframe diberi nama berdasarkan persentase, dengan status awal dan akhir dari dan ke masing-masing mewakili 0% dan 100%.
Format sintaks @keyframes adalah sebagai berikut:
@keyframes<identifier>{<keyframes-blocks>}Diantaranya, <identi fier> digunakan untuk menentukan nama animasi; <keyframes-blocks> digunakan untuk menentukan gaya animasi pada setiap tahap, yaitu animasi bingkai.
Penggunaan @keyframes ditunjukkan dalam contoh berikut:
/*Pernyataan*/@keyframessslidein{dari{margin-left:100%;width:300%;}hingga{margin-left:0%;width:100%;}}@keyframessslideout{0%{top:0;} 50%{atas: 30px;}100%{top:60px;}}/*Terapkan*/p{animation-name:slidein;animation-duration:4s;}div{animation-name:slideout;animation-duration:4s;}(6)@dokumen
@document digunakan untuk membatasi cakupan gaya dalam dokumen berdasarkan URL dokumen. Atribut ini dapat digunakan untuk menentukan gaya eksklusif untuk pengguna tertentu. Saat ini @document masih dalam tahap percobaan, dan standar spesifiknya akan ditentukan di CSS4.
Fungsi yang tersedia di @document adalah sebagai berikut:
●url(): cocok dengan keseluruhan URL;
●url-prefix(): Apakah URL dokumen yang cocok dimulai dengan nilai yang ditentukan oleh parameter;
●domain(): Apakah nama domain dokumen yang cocok adalah nama domain yang ditentukan dalam parameter atau nama subdomainnya;
●regexp(): Apakah URL dokumen yang cocok cocok dengan ekspresi reguler yang ditentukan dalam parameter.
Tip: Parameter yang dimasukkan ke fungsi url(), awalan url(), dan domain() dapat diapit tanpa tanda kutip, namun parameter yang dimasukkan ke fungsi regexp() harus diapit dengan tanda kutip.
Contoh berikut menunjukkan penggunaan @document:
@documenturl(http://www.weixueyuan.net/),url-prefix(http://www.weixueyuan.net/Style/),domain(weixueyuan.net),regexp(https:.*){/* Aturan CSS ini akan diterapkan pada halaman web berikut:+URL adalah http:/ Halaman /www.weixueyuan.net/. + Semua halaman web yang URL-nya diawali dengan http://www.weixueyuan.net/Style/ + Semua halaman web dengan nama domain weixueyuan.net + Semua halaman web yang URL-nya diawali dengan https:* // *Tentukan gaya*/tubuh{warna:ungu;latar belakang:kuning;}