CSS中除了我們經(jīng)常寫(xiě)的那些內(nèi)容外 還有像@charset @import @namespce @keyframes @media @page @font-face @viewport等。

　　

　　1, @charset 在外部樣式表文件內(nèi)使用。指定該樣式表使用的字符編碼。該規(guī)則后面的分號(hào)是必需的，如果省略了此分號(hào)，會(huì)生成錯(cuò)誤信息。

　　?

@charset "utf-8"; html{***}

?

　　2，@import 指定導(dǎo)入的外部樣式表及目標(biāo)媒體。

　　語(yǔ)法：

　　@import?<url>?<media_query_list>

　　<url>：使用絕對(duì)或相對(duì)地址指定導(dǎo)入的外部樣式表文件。可以是url(url)或者直接是一個(gè)url

　　<media_query_list>：指定媒體類(lèi)型和查詢(xún)條件。

　　<media_query_list>：[<media_query>[','?<media_query>]*]?

　　<media_query>：[only | not]??<media_type>?[and?<expression>]* |?<expression>?[and?<expression>]*

　　<expression>：'('<media_feature>[:<value>]?')'

　　

@import url("global.css"); @import url(global.css); @import "global.css"; @import url(example.css) screen and (min-width:800px); @import url(example.css) screen and (width:800px),(color); @import url(example.css) screen and (min-device-width:500px) and (max-device-width:1024px);

?

　　3，@namespce 在CSS中聲明一個(gè)XML命名空間的前綴。當(dāng)你使用的選擇器僅匹配特定命名空間下的元素，則這東西就很管用。

　　4，@keyfames 用于設(shè)置動(dòng)畫(huà)

　　5，@media 指定樣式表規(guī)則用于指定的媒體類(lèi)型和查詢(xún)條件。

　　　　語(yǔ)法：@media：<media_query_list>，可以用于@meida 和@import 以及HTMl中。

　　　　

@media screen and (width:800px){ … }@import url(example.css) screen and (width:800px);<link media="screen and (width:800px)" rel="stylesheet" href="example.css" />

　　　　所有瀏覽器都適用的媒介類(lèi)型有：all,screen,print。 handheld適用于chrome safari 以及opera.

　　6，@page 檢索或指定顯示對(duì)象容器時(shí)使用的頁(yè)面類(lèi)型

　　7，@font-face 設(shè)置嵌入HTML文檔的字體。通常使用.ttf(TrueType)和.otf(OpenType)兩種字體格式。

　　　　語(yǔ)法：

　　　　　　@font-face{font-family:name;src:<url>;sRules;}

　　　　　　<name>：字體名稱(chēng)

　　　　　　<url>：使用絕對(duì)或相對(duì)地址指定OpenType字體

　　　　　　<sRules>：樣式表定義。包括（font-style：設(shè)置文本樣式。

font-variant：設(shè)置文本是否大小寫(xiě)。

font-weight：設(shè)置文本的粗細(xì)。

font-stretch：設(shè)置文本是否橫向的拉伸變形。

font-size：設(shè)置文本字體大小。）

@font-face{font-family:YH;src:url(http://domain/fonts/MSYH.TTF); } //media query將viewport小于400px縮放至320px寬。

?

　　8，@viewport 需要加前綴

　　　　

@media screen and (max-width: 400px) {@-ms-viewport { width: 320px; }... }

?

?

　　9,!important用于提升指定樣式規(guī)則的應(yīng)用優(yōu)先權(quán)，在IE6以及以前的瀏覽器不支持。

　　　　

.classes{color:#f00!important;color:#ff0; } 表現(xiàn)為紅色，而非黃色。但是在IE6中表現(xiàn)為黃色。

?

轉(zhuǎn)載于:https://www.cnblogs.com/kirinchang/p/4322519.html

總結(jié)

以上是生活随笔為你收集整理的CSS语法总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。