CSS教程15、CSS的At-Rules@規(guī)則[翻譯Htmldog]_CSS教程
教程Tag:暫無Tag,歡迎添加,賺取U幣!
At-rules分裝不同的CSS規(guī)則,應(yīng)用在特定場合。
Importing
import@規(guī)則引用另外的樣式。例如,假如你想添加另外樣式到現(xiàn)在的樣式,可以這樣:
@import url(addonstyles.css);
這很像使用link元素連接CSS到HTML,本質(zhì)上說有一個內(nèi)容樣式像下面:
<style type="text/css" media="all">@import url(monkey.css);</style>
這是為了照顧老版本瀏覽器,比如Netscape4不支持@規(guī)則所以不能鏈接樣式表,已經(jīng)構(gòu)建好標(biāo)簽的HTML頁面會失去樣式表提供的功能。
Media types
media@規(guī)則應(yīng)用內(nèi)容使用特定媒體,比如打印,例如:
示例代碼 [www.wf0088.com]
@media print {
body {
font-size: 10pt;
font-family: times new roman, times, serif;
}
#navigation {
display: none;
}
}
body {
font-size: 10pt;
font-family: times new roman, times, serif;
}
#navigation {
display: none;
}
}
媒體形式:
all,所有媒體。
aural,言語合成器。
handheld,移動設(shè)備
print,打印
projection,投影
screen,電腦屏幕
你還可以使用braille,embossed,tty或者tv。
注重:說了這么多,IE只支持all,screen和print。
Charachter sets 字符設(shè)定
charset@規(guī)則簡單設(shè)定外部樣式里的編碼。它出現(xiàn)在樣式的最上面例如@charset "ISO-8859-1";
Font faces 字體外觀
font-face@規(guī)則用來具體描述字體,可以在CSS里嵌入外部字體。
它需要font-family描述符引用字體,它的值可以是字體的名稱或是新命名一個。嵌入一個字體,使用src描述符。其他添加到font-face@規(guī)則里的描述符將影響正在使用的內(nèi)含字體,例如假如你添加font-weight: bold粗體到@規(guī)則,font-family的src只能運用到帶有font-family屬性的選擇器里,而且選擇器里font-weight屬性同樣設(shè)置成bold。
看下面例子:
示例代碼 [www.wf0088.com]
@font-face {
font-family: somerandomfontname;
src: url(somefont.eot);
font-weight: bold;
}
p {
font-family: somerandomfontname;
font-weight: bold;
}
font-family: somerandomfontname;
src: url(somefont.eot);
font-weight: bold;
}
p {
font-family: somerandomfontname;
font-weight: bold;
}
如上面的例子,段落里的字體將是somefont的字體(假如p選擇器沒有font-weight: bold,那字體就不是somefont)
嵌入字體還湊合著用,因為Mozilla瀏覽器不支持也沒有計劃添加這個功能。只有IE有分寸的支持,但這也不是說可以直接使用,IE瀏覽器嵌入字體,你還需要微軟WEFT軟件,它提供Truetype字體轉(zhuǎn)換成壓縮的OpenType字體(只有這個你才能使用URI指定)。由于這個限制(顯得非常復(fù)雜)兼容性,最好不要使用系統(tǒng)沒有的字體。
Pages
page@規(guī)則服務(wù)頁面媒體,是個高級方式應(yīng)用于打印媒體樣式。它定義了頁面塊,在盒模型上擴展,所以你可以定義單一頁面的大小和表現(xiàn)。
應(yīng)用page@規(guī)則有許多規(guī)定,比如沒有padding和border,而且也不上我們說的電腦屏幕,所以pixels和ems單位不被答應(yīng)使用。
有許多特定屬性可以使用,比如size,可以設(shè)定portrait縱向,landscape橫向,auto自動或長度。marks屬性可以用來定義裁剪標(biāo)志
示例代碼 [www.wf0088.com]
@page {
size: 15cm 20cm;
margin: 3cm;
marks: cross;
}
size: 15cm 20cm;
margin: 3cm;
marks: cross;
}
頁面媒體里的偽標(biāo)簽
有三種偽標(biāo)簽用來鏈接特定page@規(guī)則,如下形式:@page :pseudo-class {stuff}。
:first應(yīng)用到頁面媒體里的第一頁
:left和:right應(yīng)用到左邊和左邊頁面。這可能用在指定有非常大margin的左邊頁面和有非常大margin的右邊頁面。
還有一些頁面@規(guī)則,比如page-breaks頁面中斷和named pages頁面命名,但這些@規(guī)則在瀏覽器里很難工作,你也許浪費了許多時間閱讀這篇文章,不過這些都是不錯的想法。
相關(guān)CSS教程:
CSS教程Rss訂閱Div+Css教程搜索
CSS教程推薦
猜你也喜歡看這些
- 初學(xué)者接觸HTML了解一些HTML標(biāo)記(2)
- HTML表格標(biāo)記教程(29):單元格的亮邊框色屬性BORDERCOLORLIGHT
- HTML表格標(biāo)記教程(25):行的垂直對齊屬性VALIGN
- CSS網(wǎng)頁布局中必須要了解的幾個XHTML標(biāo)簽
- HTML初級教程title文檔標(biāo)題
- HTML和CSS在Flash中的應(yīng)用
- 網(wǎng)頁設(shè)計中文本輸入框的一些參數(shù)說明
- HTML表格標(biāo)記教程(34):跨行屬性ROWSPAN
- HTML表格標(biāo)記教程(31):單元格的寬度和高度屬性WIDTH、HEIGHT
- HTML教程,認(rèn)識optgroup元素
- 相關(guān)鏈接:
- 教程說明:
CSS教程-CSS教程15、CSS的At-Rules@規(guī)則[翻譯Htmldog]
。