這些是我在網路上收集來的資料,一方面是供我自己以後參考的.畢竟這種東西太瑣碎,背起來沒意思.要用的時候查的到反倒是比較適合.
何謂CSS? (Cascading Style Sheet 樣式表)
隨著網路上網站增加，重視第一眼感覺的網頁越來越多，原本HTML的格式已不敷使用。而產生用來協助網頁排版新工具，CSS的出現。
從外部連結，適用於整個網頁
在 <head> </head>中間加入這一行，<link rel="stylesheet" type="text/css" href="filename.css">。
單一頁面的使用方式
在<head> </head>中間加入類似下面的內容
<style type="text/css">
h3 {color:green;}
p {background-color:yellow;}
</style>
單一句子使用方式
在欲使用CSS裝飾的句子前的標籤tag內加上。例如: style="color:#FF0000"。
可以加在大部分的tag內,像是 <p><h3><td>
文字
項目 變數 參數 範例
字體顏色 color 關鍵字
#rgb (以16個色階來設定)
#rrggbb (以32個色階來設定)
rgb(n%,n%,n%)
rgb(n,n,n) color:gray
color:#DE0
color:#FF0000
color:rgb(100%,60%,20%)
color:rgb(128,0,128)
水平對齊 text-align left
center
right text-align:center
設定文字分散對齊 text-justify auto
distribute-all-lines (分散對齊) text-justify:distribute-all-lines
段落縮排 text-indent 數值+%
數值+單位 (px,cm,em) text-indent:20%
垂直對齊 vertical-align baseline (一般位置)
super (上標)
sub (下標)
top
middle
botton vertical-align:top
設定英文大小寫 text-transform capitalize (第一個為大寫)
uppercase (皆大寫)
lowercase (皆小寫)
none (預設) text-transform:capitalize
調整字元間距 letter-spacing normal
數字+單位 (pt , px , em , 亦可為負值) letter-spacing:5pt
調整單字間距
只有Netscape支援 word-spacing normal ;
數字+單位 (pt , px , em) word spacing:7pt
設定文字效果 text-decoration none
overline (上線)
underline (底線)
line-throughx (刪除線)
blink (閃爍效果) text-decoration
verline underline
text-decoration:none
設定空白或換行 white-space normal
pre (顯示輸入的換行,space,tab.IE不支援)
nowrap (不會自動換行) white-space:nowrap儲純格內無法換行
避頭尾字元 line-break normal (要看瀏覽器支援與否)
strict (日文小的片假名,平假名或長音-不得至於行頭) style="line-break"
單字中的換行處理 word-break normal
break-all (英文中,到畫面右邊就換行,不保持單字完整性)
keep-all (中文中,保持單字或句子完整性.只是用於中日韓文) word-break:keep-all (中文中,保持單字或句子完整性.只適用於中日韓文)
指定在單字中換行 word-wrap normal
break-word (讓無法自動換行的單字進行自動換行) word-wrap:word-wrap thisisoursampleisitlongenough
以直書方式顯示
Netscape 不支援 writing-mode lr-tb 橫書
tb-rl 直書 writing-mode:tb-rl 直書
設定底線位置
此功能可用overline取代 text-underline-position below (底線在下或在左)
above (底線在上或在右) text-underline-position:below 直書
調整標注符號的位置
只適用於<Ruby>標籤 ruby-align auto
left (從左端開始標注)
center (從中間開始標注)
right (從右端開始標注)
distribute-letter (平均地標注)
distribute-space (平均地標注,且空間足夠時會在左右再留一些空白.空間不足時兩者效果是一樣的.)
line-edge (只有在最左方或最右方有要標注的文字時,標注符號會從該文字的另一方開始標注) 左端標注left
中間標注center
右端標注right
平均地標注ruby-align:distribute-letter
平均地標注,且空間足夠時會在左右再留一些空白ruby-align:distribute-space
edge標edge注
edge標注edge
標注符號的位置 ruby-positon above (置於文字之上,預設值)
inline (至於文字之後) 標注在後inline
將文字調整收編在格線內的方法 layout-grid-type loose (不改變字型,紙漿字與自之間空開.預設值)
fixed (僅對中日韓設定為一樣的字型大小,再調整收標於格線內)
strict (將所有字型都設定為一樣的字型大小,再調整收標於格線內) layout-grid-type:loose;layout-grid-line:20px;layout-grid-char:20px
字元,單行間距 layout-grid-char
layout-grid-line none (預設值)
auto (自動設定格線大小)
文字大小的數值+單位 (無法指定為負值,px,pt,em)
數值+% (無法指定為負值) 調整單行距離
layout-grid-type:loose;layout-grid-line:40px;layout-grid-char:20px;layout-grid-mode:line
對齊格線的方向 layout-grid-mode none (不與格線對齊)
both (縱向,橫向都與格線對齊)
line (只有縱向對齊)
char (只有橫向對齊) 調整字元距離
layout-grid-type:loose;layout-grid-line:20px;layout-grid-char:10px;layout-grid-mode:char
統一對格線的指定 layout-grid 依序為 mode , type , line , char 的值 layout-grid:loose 15px 20px both
字型
項目 變數 參數 範例
指定字型 font-family serif (新細明體或Times等)
sans-serif (Helvetica等)
cursive (筆記體的字型)
fantasy (裝飾為主的字型)
monospace (等寬的字型) 1。用font-family時可以同時設定多個字型，若第一順位的字型不存在時則用下個順位的字型。兩種字型間要用","分開。例如:
font-family:華康少女體,新細明體,標楷體
2。要用字型名稱來指定時，字型名稱一定要正確，有分大小寫。若字型名稱中有空白鍵時，要用( ' )或( " )將自行名稱括起來。 例如:
font-family:"Times New Roman",新細明體
3。讓瀏覽器選擇相似的字型。
font-family:cursive
字型大小 font-size 文字大小的數值+單位 (px,pt,em)
數值+% (相對於父元素中設定的相對大小)
關鍵字
