内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

CSS中@用法詳解

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

成都創(chuàng)新互聯(lián)堅(jiān)持“要么做到,要么別承諾”的工作理念,服務(wù)領(lǐng)域包括:網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù),滿足客戶于互聯(lián)網(wǎng)時(shí)代的薩爾圖網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求,幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴!

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

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

代碼如下:

@[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)用于特定頁面。舉個(gè)粟子,我們提供一個(gè)URL,然后為這個(gè)特定的頁面自定義樣式,在其他頁面中,這些樣式會(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頁面上加載自定義字體,對(duì)自定義字體有不同程度的支持,但是這個(gè)規(guī)則接受語句創(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)畫的基礎(chǔ),并允許我們標(biāo)記動(dòng)畫開始和結(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ú)頁面定義樣式。特別的是,它能為頁面?zhèn)卧卦O(shè)置外邊距::first、:left和:right

代碼如下:

@page :first {
margin: 1in;
}

@supports
這個(gè)規(guī)則可測(cè)試瀏覽器知否支持某個(gè)特性/功能,如果滿足條件,將會(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; }
}

總結(jié)

at-rule可以使CSS做一些瘋狂有趣的事情。盡管文章中的示例很基礎(chǔ),但是可以看到,對(duì)于特定的條件,它們是如何使用樣式的,從而創(chuàng)建匹配特定場(chǎng)景的用戶體驗(yàn)和交互。

推薦教程:《CSS教程》

本文標(biāo)題:CSS中@用法詳解
當(dāng)前網(wǎng)址:http://www.rwnh.cn/article6/cgjsig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供動(dòng)態(tài)網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)用戶體驗(yàn)、服務(wù)器托管、外貿(mào)建站、網(wǎng)站營銷

廣告

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

網(wǎng)站托管運(yùn)營
杂多县| 阳城县| 油尖旺区| 尖扎县| 甘孜县| 昔阳县| 岳池县| 达尔| 精河县| 眉山市| 伊川县| 墨竹工卡县| 额敏县| 怀化市| 论坛| 威海市| 凤庆县| 盖州市| 张北县| 乐平市| 博野县| 固原市| 尚义县| 大连市| 中山市| 葫芦岛市| 昌江| 靖西县| 中超| 阳谷县| 肃南| 石柱| 邹平县| 炎陵县| 酒泉市| 吴忠市| 屏山县| 太谷县| 安远县| 肃宁县| 冷水江市|