Apakah peranan @ dalam css?

Dalam css, "@" ialah pernyataan yang menyediakan arahan untuk pelaksanaan CSS atau cara berkelakuan. Setiap pengisytiharan peraturan bermula dengan "@", diikuti dengan kata kunci yang tersedia, yang bertindak sebagai pengecam untuk menunjukkan perkara yang harus dilakukan oleh CSS sebagai contoh, peraturan "@charset" mentakrifkan set aksara yang digunakan oleh penyemak imbas , "@font-; peraturan muka" membenarkan memuatkan fon tersuai pada halaman web.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

@ telah wujud sejak zaman @import dalam CSS1, dan dipanggil peraturan-peraturan dalam CSS.

at-rule ialah pengisytiharan yang menyediakan arahan untuk CSS melaksanakan atau berkelakuan. Setiap pengisytiharan peraturan bermula dengan @, diikuti dengan kata kunci yang tersedia, yang bertindak sebagai pengecam untuk menunjukkan perkara yang perlu dilakukan oleh CSS. Ini ialah sintaks umum, walaupun terdapat variasi sintaks lain untuk setiap at-rule.

Peraturan am

Peraturan am mengikut sintaks berikut:

Kodnya adalah seperti berikut:

@[KEYWORD] (RULE);

@charset

Peraturan ini mentakrifkan set aksara yang digunakan oleh penyemak imbas jika lembaran gaya mengandungi aksara bukan ASCII (cth: UTF-8). Ambil perhatian bahawa set aksara yang diletakkan dalam pengepala HTTP akan mengatasi peraturan @charset

Kodnya adalah seperti berikut:

@charset "UTF-8";

@import

<.>ini Peraturan mengarahkan helaian gaya untuk diminta Pada baris ini, jika kandungannya betul, fail CSS luaran akan diperkenalkan.

Kod tersebut adalah seperti berikut:

@import 'global.css';

Walaupun prapemproses CSS popular menyokong @import, perlu diingatkan bahawa ia berfungsi secara berbeza daripada CSS asli: prapemproses akan Merebut fail CSS dan memprosesnya ke dalam fail CSS Untuk CSS asli, setiap @import ialah permintaan HTTP bebas.

@namespace

Peraturan ini sangat berguna untuk menggunakan CSS pada XML HTML (XHTML), kerana elemen XHTML boleh digunakan sebagai pemilih digunakan.

Kod adalah seperti berikut:

/* Namespace for XHTML */
@namespace url(http://www.w3.org/1999/xhtml);
/* Namespace for SVG embedded in XHTML */
@namespace svg url(http://www.w3.org/2000/svg);

Peraturan bersarang

Peraturan bersarang mengandungi pengisytiharan subset tambahan, Beberapa daripada kenyataan ini hanya boleh digunakan dalam situasi tertentu.

Kod adalah seperti berikut:

@[KEYWORD] {
/* Nested Statements */
}

@document

Peraturan ini menentukan syarat untuk helaian gaya: ia hanya boleh digunakan pada halaman tertentu. Contohnya, kami menyediakan URL dan kemudian menyesuaikan gaya untuk halaman khusus ini Dalam halaman lain, gaya ini akan diabaikan.

Kodnya adalah seperti berikut:

@document
/* Rules for a specific page */
url(http://css-tricks.com/),
/* Rules for pages with a URL that begin with... */
url-prefix(http://css-tricks.com/snippets/),
/* Rules for any page hosted on a domain */
domain(css-tricks.com),
/* Rules for all secure pages */
regexp("https:.*")
{
/* Start styling */
body { font-family: Comic Sans; }
}

@font-face

Peraturan ini membenarkan memuatkan fon tersuai pada halaman web Terdapat pelbagai tahap sokongan, tetapi peraturan ini menerima kenyataan untuk membuat dan menyediakan fon ini.

Kodnya adalah seperti berikut:

 @font-face {
font-family: 'MyWebFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff');
}

@keyframes

Antara banyak sifat CSS, peraturan ini adalah asas animasi keyframe dan membenarkan kami ke Bendera menandakan permulaan dan tamat animasi.

Kod adalah seperti berikut:

 @keyframes pulse {
0% {
background-color: #001f3f;
}
100% {
background-color: #ff4136;
}
}

@media

Peraturan ini mengandungi pernyataan bersyarat yang boleh digunakan untuk menentukan gaya untuk skrin tertentu . Pernyataan ini boleh mengandungi saiz Skrin, yang akan berguna dalam gaya penyesuaian skrin

Kodnya adalah seperti berikut:

 /* iPhone in Portrait and Landscape */
@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
.module { width: 100%; }
}

Atau hanya gunakan gaya semasa mencetak dokumen

Kod adalah seperti berikut:

@media print {
}

@page

Peraturan ini mentakrifkan gaya untuk halaman individu yang akan dicetak. Khususnya, ia boleh menetapkan margin untuk elemen pseudo halaman: :first, :left and :right

Kodnya adalah seperti berikut:

@page :first {
margin: 1in;
}

@supports

Peraturan ini boleh menguji sama ada penyemak imbas menyokong ciri/fungsi tertentu Jika syarat dipenuhi, gaya tertentu akan digunakan pada elemen ini. Sedikit seperti Modernizr, tetapi benar-benar sifat CSS.

Kod adalah seperti berikut:

/* Check one supported condition */
@supports (display: flex) {
.module { display: flex; }
}
/* Check multiple conditions */
@supports (display: flex) and (-webkit-appearance: checkbox) {
.module { display: flex; }
}

Ringkasan

peraturan boleh membuat CSS melakukan sesuatu yang gila dan perkara yang menarik. Walaupun contoh dalam artikel adalah asas, anda boleh melihat cara ia boleh digunakan dengan gaya untuk keadaan tertentu untuk mencipta pengalaman pengguna dan interaksi yang sepadan dengan senario tertentu.

(Belajar perkongsian video:

bahagian hadapan web)

Atas ialah kandungan terperinci Apakah peranan @ dalam css?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!