css中@的使用方法有哪些

這篇文章主要介紹了css中@的使用方法有哪些，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

十年的枝江網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都全網(wǎng)營(yíng)銷(xiāo)推廣的優(yōu)勢(shì)是能夠根據(jù)用戶(hù)設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整枝江建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)建站從事“枝江網(wǎng)站設(shè)計(jì)”,“枝江網(wǎng)站推廣”以來(lái)，每個(gè)客戶(hù)項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

css中@的使用方法有哪些

CSS代碼中經(jīng)常會(huì)有@命令的應(yīng)用，且功能多樣。語(yǔ)法結(jié)構(gòu)基本是一致的，@后面緊跟一個(gè)關(guān)鍵字，用于規(guī)定各自的功能。

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

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

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

代碼如下:

@[KEYWORD] (RULE);

@charset

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

代碼如下：

@charset "UTF-8";

@import

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

代碼如下:

@import 'global.css';

雖然流行的CSS預(yù)處理器都支持@import，但是應(yīng)該指出的是，它們的工作原理不同于原生的CSS：預(yù)處理器會(huì)抓取CSS文件并將它們處理成一個(gè)CSS文件，對(duì)原生CSS，每一個(gè)@import都是一個(gè)獨(dú)立的HTPP請(qǐng)求。

@namespace

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

代碼如下:

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

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

代碼如下:

@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

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

代碼如下:

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

@keyframes

在諸多CSS屬性中，這個(gè)規(guī)則是關(guān)鍵幀動(dòng)畫(huà)的基礎(chǔ),并允許我們標(biāo)記動(dòng)畫(huà)開(kāi)始和結(jié)束的標(biāo)志。

代碼如下:

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

@media

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

代碼如下:

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

或者只在文檔打印時(shí)運(yùn)用樣式

代碼如下:

@media print {
}

@page

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

代碼如下:

@page :first {
margin: 1in;
}

@supports

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

代碼如下:

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享css中@的使用方法有哪些內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問(wèn)題就找創(chuàng)新互聯(lián)，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!

名稱(chēng)欄目：css中@的使用方法有哪些
文章位置：http://bm7419.com/article8/jdsdip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、微信公眾號(hào)、定制網(wǎng)站、靜態(tài)網(wǎng)站、網(wǎng)頁(yè)設(shè)計(jì)公司、企業(yè)建站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容