跳至內容

CSS/Syntax

維基教科書,自由的教學讀本
< CSS

CSS最常是連結到網頁,因此可用於整個網站。由於是單獨文件,有它自己的結構。

樣式表的開頭是個聲明。

 @charset "UTF-8";

上述聲明之後,每條CSS規則是獨立的,包括3部分:選取項、屬性、實參(即值):

Example:

 @charset "UTF-8";

 body {
 background-color : #000000;
 font-family : Georgia, "Times New Roman", Times, serif;
 font-size : 100%;
 color : #ffffff;
 margin : 0;
 padding : 0;
 text-align : center;
 }

 h1 {
 font-family : Georgia, "Times New Roman", Times, serif;
 font-size : 16px;
 color : #ffffff;
 font-style : normal;
 font-weight : normal;
 letter-spacing : 0.1em;
 }

 h2 {
 font-family : Georgia, "Times New Roman", Times, serif;
 font-size : 12px;
 font-style : italic;
 font-weight : bold;
 color : #ffffff;
 text-decoration : underline;
 }

 p {
 font-family : Georgia, "Times New Roman", Times, serif;
 font-size : 12px;
 font-style : normal;
 color : #ffffff;
 }

 etc

規則可分解如下:

@rule argument(s) {
	selector {
		property: argument(s);
		another-property: argument(s);
		property-the-third: argument(s);
		fourth-property: argument(s);
	}
}

每個選取項可以有任意多的屬性-值對。

At規則

[編輯]

CSS 的頂層樣式表由兩種規則組成的規則列表構成,一種被稱為 at-rule,也就是 at規則,另一種是 qualified rule,也就是普通規則

at 規則由一個@關鍵字和後續的一對花括號的區塊組成;如果沒有區塊,則以分號結束。

@charset

[編輯]

用於提示 CSS 文件使用的字符編碼方式,它如果被使用,必須出現在最前面。這個規則只在給出語法解析階段前使用,並不影響頁面上的展示效果。

@charset "utf-8";

@import

[編輯]
@import "index.css";
@import url("index.css");

import 還支持 supports 和 media query 形式。

@import [ <url> | <string> ]
        [ supports( [ <supports-condition> | <declaration> ] ) ]?
        <media-query-list>? ;

@media

[編輯]

media 是 media query 使用的規則,能夠對設備的類型進行一些判斷

@media print {
    body { font-size: 10px }
}

@page

[編輯]

page 用於分頁媒體訪問網頁時的表現設置

@page {
  margin: 10%;

  @top-left {
    content: "Hamlet";
  }

  @top-right {
    content: "Page " counter(page);
  }
}

counter-style

[編輯]

counter-style 產生一種數據,用於定義列表項的表現。

@counter-style triangle {
  system: cyclic;
  symbols: ;
  suffix: " ";
}

@key-frames

[編輯]

keyframes 產生一種數據,用於定義動畫關鍵幀。

@keyframes diagonal-slide {
  from {
    left: 0;
    top: 0;
  }
  to {
    left: 100px;
    top: 100px;
  }
}

@fontface

[編輯]

fontface 用於定義一種字體,icon font 技術就是利用這個特性來實現的。

@font-face {
  font-family: Gentium;
  src: url(http://example.com/fonts/Gentium.woff);
}

@support

[編輯]

support 檢查環境的特性,它與 media 比較類似。

@namespace

[編輯]

用於跟 XML 命名空間配合的一個規則,表示內部的 CSS 選擇器全都帶上特定命名空間。

@viewport

[編輯]

用於設置視口的一些特性,不過兼容性目前不是很好,多數時候被 html 的 meta 代替。

其他不太推薦的at規則

[編輯]

@color-profile、@document、@font-feature-values

[編輯]

CSS中的塊(block)包括一條或多條語句(或者叫做聲明)。塊以{開始,以}結束.

屬性

[編輯]

屬性(property)是CSS的真正內容所在。語法相當簡單: property: argument(s);. 屬性必須出現在一個選擇器後面的{}中,必須以分號;結束.