這篇文章主要介紹“@在css中的作用是什么”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“@在css中的作用是什么”文章能幫助大家解決問題。

創(chuàng)新互聯(lián)是專業(yè)的郁南網(wǎng)站建設公司，郁南接單;提供成都網(wǎng)站制作、網(wǎng)站建設,網(wǎng)頁設計,網(wǎng)站設計,建網(wǎng)站,PHP網(wǎng)站建設等專業(yè)做網(wǎng)站服務;采用PHP框架,可快速的進行郁南網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

在css中，“@”是一個聲明，為CSS提供執(zhí)行或怎么表現(xiàn)的指令。每個規(guī)則聲明以“@”開頭，后緊跟一個可用的關鍵字，這個關鍵字充當一個標識符，用于表示CSS該做什么；例如“@charset”規(guī)則就定義了瀏覽器使用的字符集，“@font-face”規(guī)則允許在web頁面上加載自定義字體。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

@ 在 CSS1 中的 @import 時代就已經(jīng)存在了，在 CSS 中稱為 at-rules。

at-rule是一個聲明，為CSS提供執(zhí)行或怎么表現(xiàn)的指令。每個規(guī)則聲明以@開頭，后緊跟一個可用的關鍵字，這個關鍵字充當一個標識符，用于表示CSS該做什么。這是一個通用的語法，盡管每個at-rule有其它語法變體。

常規(guī)規(guī)則

常規(guī)規(guī)則遵循下面的語法：

代碼如下:

@[KEYWORD] (RULE);

@charset

這個規(guī)則定義了瀏覽器使用的字符集，如果樣式表包含非ASCII characters (e.g:UTF-8)。注意，被放在HTTP頭部的字符集將會覆蓋@charset規(guī)則

代碼如下:

@charset "UTF-8";

@import

這個規(guī)則指示請求樣式表，在這一行，如果內容是正確的，就會引入一個外部的CSS文件。

代碼如下:

@import 'global.css';

雖然流行的CSS預處理器都支持@import，但是應該指出的是，它們的工作原理不同于原生的CSS：預處理器會抓取CSS文件并將它們處理成一個CSS文件，對原生CSS，每一個@import都是一個獨立的HTPP請求。

@namespace

對于將CSS應用在XML HTML（XHTML），這個規(guī)則是非常有用的，因為XHTML元素能在CSS中被作為一個選擇器使用。

代碼如下:

/* 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);

嵌套規(guī)則

嵌套規(guī)則包含了額外的子集聲明，其中一些聲明只能用于特定情況。

代碼如下:

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

@document

這個規(guī)則為樣式表指定了條件：只能應用于特定頁面。舉個粟子，我們提供一個URL，然后為這個特定的頁面自定義樣式，在其他頁面中，這些樣式會被忽略。

代碼如下:

@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

這個規(guī)則允許在web頁面上加載自定義字體，對自定義字體有不同程度的支持，但是這個規(guī)則接受語句創(chuàng)建和提供這些字體。

代碼如下:

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

@keyframes

在諸多CSS屬性中，這個規(guī)則是關鍵幀  動畫的基礎,并允許我們標記動畫開始和結束的標志。

代碼如下:

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

@media

這個規(guī)則包含條件聲明，可用于為特定屏幕指定樣式，這些聲明可以包含屏幕大小，在適屏樣式中會很有用.

代碼如下:

 /* 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%; }
}

或者只在文檔打印時運用樣式

代碼如下:

@media print {
}

@page

這個規(guī)則為將要打印的單獨頁面定義樣式。特別的是，它能為頁面?zhèn)卧卦O置外邊距：:first、:left和:right

代碼如下:

@page :first {
margin: 1in;
}

@supports

這個規(guī)則可測試瀏覽器知否支持某個特性/功能，如果滿足條件，將會為這些元素應用特定樣式。有點像Modernizr,但確實是CSS屬性。

代碼如下:

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

關于“@在css中的作用是什么”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識，可以關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。