Contents ...
udn網路城邦
精選
【語法】CSS 語法大綱 　 -- 同一頁面會繼續補充
2005/05/07 00:22
瀏覽4,813
迴響2
推薦14
引用1

語法將依以下 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 內容，按連結進去看不遲。
  • selector

  • property

  • 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
有誰推薦more

限會員,要發表迴響,請先登入
迴響（2） ：
2樓.
2006/06/29 16:55
實習 list-style-type 例子
補充 list-style-type 【 實習 】例子
── 簡易 HTML & CSS 實例 ──
1樓.
2005/10/29 07:30
很實用的一篇文章

很簡潔但很實際，非常實用，立即收下來。

如果那一長串英文能加上中文的說明...不是翻譯..是說明，

短短一二句，對認識CSS會很有幫助...

目前我只看懂三分之一，還要再努力...呵呵..