語法將依以下 13 大類來類分:
同一主題會繼續補充。
如有說明或實例,也會做上連結。有興趣的網友,可以 bookmark 本文。
既然我們要用英文來做 coding 工作,那麼凡是將來做 coding 當中必須用英文的部份,我就直接用英文,以免中文翻譯名稱混淆了對語法的了解。
語法的 property 都是按英文字母排列順序。
- 工具類
- 才說要介紹語法,第一項就是和 CSS 語法無關的工具。
主要的是,如果想把網頁編好,一些必要的工具是不可缺省的。
- 語法規則 (rules)
- inline styles rules
- Embedded style sheet (internal sytle sheet)
Link style sheet (external style sheet)
- @charset
- !important
- div 和 span
- style, class 和 id
- pseudo-selector
CSS 語法除了有它一定的「呼叫」規定以外,其語法本身十分簡單。可以以 selector, property, value 三項(或說 selector 和 declaration 兩項)全部包括完畢。
我編這個大綱的原始目的,只是給自己在做 coding 當中一些方便,除了可以省一點查書的工夫,還可以直接 copy & past 來用。所以只列出了 property 對 CSS 有一點認識的工作人員來說,已足夠運用了。如果還要進一步查 value 內容,按連結進去看不遲。
如不確定上面這些名詞代表些什麼,請詳文末譯解。
- FONT
- font:
- font-family:
- font-size:
- font-size-adjust:
- font-stretch: <-- not support
- font-style:
- font-variant:
- font-weight:
- TEXT
- color:
- direction:
- letter-spacing:
- text-align:
- text-decoration:
- text-indent:
- text-shadow:
- text-transform:
- unicode-bidi:
- white-space:
- word-spacing:
- BACKGROUND
- background-attachment:
- background-color:
- background-image:
url(..自己填入..);
- background-position:
- background-repeat:
- BORDER
- border:
- border-bottom:
- border-bottom-color:
- border-bottom-style:
- border-bottom-width:
- border-color:
- border-left:
- border-left-color:
- border-left-style:
- border-left-width:
- border-right:
- border-right-color:
- border-right-style:
- border-right-width:
- border-style:
- border-top:
- border-top-color:
- border-top-style:
- border-top-width:
- border-width:
- MARGIN
- margin:
- margin-bottom:
- margin-left:
- margin-right:
- margin-top:
- PADDING
- padding:
- padding-bottom:
- padding-left:
- padding-right:
- padding-top:
- DIMENSIONS
- height:
- line-height:
- max-height:
- max-width:
- min-height:
- min-width:
- width:
- POSITIONING
- bottom:
- clip:
- overflow:
- right:
- top:
- vertical-align:
- z-index:
- OUTLINES
- outline:
- outline-color:
- outline-style:
- outline-width:
- TABLE
- border-collapse:
- border-spacing:
- caption-side:
- empty-cells:
- table-layout:
- LIST & MARKER
- list-style:
- list-style-image:
- list-style-position:
- list-style-type:
- marker-offset:
- GENERATED CONTENT
- content:
- content-increment:
- conter-reset:
- quotes:
- CLASSIFICATIONS
- clear:
- cursor:
- display:
- float:
- overflow:
- position:
- visibility:
字體顏色代表的意思:
selector { property: value; }
例如:
#redword, h2, h3.notation { color: #ff0000; font-size: 1em; }
紫色:屬性 (property) 藍色:數質 (value) 紅色:使用者自行定義 (user define)
2005-06-03 rev.6
|