DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> CSS基礎教程:CSS的At-Rules@規則
CSS基礎教程:CSS的At-Rules@規則
編輯:CSS進階教程     
At-rules分裝不同的CSS規則,應用在特定場合。

Importing

  import@規則引用另外的樣式。例如,如果你想添加另外樣式到現在的樣式,可以這樣:
  @import url(addonstyles.css);
  這很像使用link元素連接CSS到HTML,本質上說有一個內容樣式像下面:
  <style type="text/css" media="all">@import url(monkey.css);</style>
  這是為了照顧老版本浏覽器,比如Netscape4不支持@規則所以不能鏈接樣式表,已經構建好標簽的HTML頁面會失去樣式表提供的功能。

Media types

  media@規則應用內容使用特定媒體,比如打印,例如:

@media print {
    body {
        font-size: 10pt;
        font-family: times new roman, times, serif;
    }
    #navigation {
        display: none;
    }
}
  媒體形式:
  all,所有媒體。 
  aural,言語合成器。 
  handheld,移動設備 
  print,打印 
  projection,投影 
  screen,電腦屏幕
  你還可以使用braille,embossed,tty或者tv。
  注意:說了這麼多,IE只支持all,screen和print。

Charachter sets 字符設定

  charset@規則簡單設定外部樣式裡的編碼。它出現在樣式的最上面例如@charset "ISO-8859-1"; 

Font faces 字體外觀

  font-face@規則用來詳細描述字體,可以在CSS裡嵌入外部字體。
  它需要font-family描述符引用字體,它的值可以是字體的名稱或是新命名一個。嵌入一個字體,使用src描述符。其他添加到font-face@規則裡的描述符將影響正在使用的內含字體,例如如果你添加font-weight: bold粗體到@規則,font-family的src只能運用到帶有font-family屬性的選擇器裡,而且選擇器裡font-weight屬性同樣設置成bold。
  看下面例子:

@font-face {
    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字體轉換成壓縮的OpenType字體(只有這個你才能使用URI指定)。由於這個限制(顯得非常復雜)兼容性,最好不要使用系統沒有的字體。

Pages

  page@規則服務頁面媒體,是個高級方式應用於打印媒體樣式。它定義了頁面塊,在盒模型上擴展,所以你可以定義單一頁面的大小和表現。
  應用page@規則有許多規定,比如沒有padding和border,而且也不上我們說的電腦屏幕,所以pixels和ems單位不被允許使用。
  有許多特定屬性可以使用,比如size,可以設定portrait縱向,landscape橫向,auto自動或長度。marks屬性可以用來定義裁剪標志

@page {
    size: 15cm 20cm;
    margin: 3cm;
    marks: cross;
}
頁面媒體裡的偽標簽

  有三種偽標簽用來鏈接特定page@規則,如下形式:@page :pseudo-class {stuff}。
  :first應用到頁面媒體裡的第一頁
  :left和:right應用到左邊和左邊頁面。這可能用在指定有非常大margin的左邊頁面和有非常大margin的右邊頁面。
  還有一些頁面@規則,比如page-breaks頁面中斷和named pages頁面命名,但這些@規則在浏覽器裡很難工作,你也許浪費了許多時間閱讀這篇文章,不過這些都是不錯的想法。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved