常用的css樣式

字型
font-family: 字型名稱
如果在
font-family後加上多種字型的名稱，瀏覽器回按字型名稱的順序逐一在使用者的電腦裡尋找已經安裝的字型，一旦遇到與要求的相匹配的字型，就按這
種字型顯示網頁內容，並停止搜尋；如果不匹配就繼續搜尋，直到找到為止，萬一樣式表裡的所有字型都沒有安裝的話，瀏覽器就會用自己預設的字型來替代顯示網
頁的內容。
注意：
·當指定多種字型時，用“，”分隔每種字型名稱。
·當字型名稱包含兩個以上分開的單詞時，用“”把該字型名稱括
起來。
·當樣式規則外已經有“”時，用‘’代替“”。
字型大小
font-size: 字型大小參數
字型大小的取值範圍：
·
以Point為單位：點單位在所有的瀏覽器和操作平台上都適用
·以Em為單位：指字母要素的尺寸，和Point相同距離
·以
Pixes為單位：像素可以使用於所有的操作平台，但可能會因為瀏覽者的螢幕解析度不同，而造成顯示上的效果差異
·以in（英寸）為單位
·
以cm（厘米）為單位
·以mm（毫米）為單位
·以pc（印表機的字型大小）為單位
·以ex（x-height）為單位
·smaller：
比當前文字的預設大小更小一號
·larger：比當前文字的預設大小更小大號
·使用比例關係
·xx-small
·x-small

·small
·medium
·large
·x-large
·xx-large
字型風格
字
體風格只能控制各種斜體字的顯示。
基本格式如下：
font-style: 斜體字的名稱
字型粗細
字型粗細控制粗
體字的顯示，取值範圍從數字100~900，瀏覽器預設的字型粗細為400。另外可以通過參數lighter和bolder使得字型在原有基礎上顯得更細
或更粗些。
基本格式如下：
font-weight: 字型粗細
文字大小寫
文字大小寫使網頁的設計者不用在輸入文
字時就完成文字的大小寫，而可以在輸入完畢後，再根據需要對局部的文字設定大小寫。
基本格式如下：
text-transform:
參數
參數取值範圍：
·uppercase：所有文字大寫顯示
·lowercase：所有文字小寫顯示
·capitalize：
每個單詞的頭字母大寫顯示
·none：不繼承母體的文字變形參數
注意：繼承是指HTML的標識符對於包含自己的標識符的參數會繼承下
來。
文字修飾
文字修飾的主要用途是改變瀏覽器顯示文字連結時的底線。
基本格式如下：
text-decoration:
參數
參數取值範圍：
·underline：為文字加底線
·overline：為文字加上劃線
·line-
through：為文字加刪除線
·blink：使文字閃爍
·none：不顯示上述任何效果
單詞間距
單詞間距指的
是英文每個單詞之間的距離，不包括中文文字。
基本格式如下：
word-spacing: 間隔距離
間隔距離的取
值：points、em、pixes、in、cm、mm、pc、ex、normal等。
字母間距
字母間距是指英文字母之間的距離，功
能、用法，以及參數的設定和單詞間距很相似。
基本格式如下：
letter-spacing: 字母間距
行距
行距
是指上下兩行基準線之間的垂直距離。一般地說，英文五線格練習本，從上往下數的第三條橫線就是電腦所認為的該行的基準線。
基本格式如下：
line-height:
行間距離
行間距離取值：
·不帶單位的數字：以1為基數，相當於比例關係的100%
·帶長度單位的數字：以具體的單位為準
·
比例關係
注意：如果文字字型很大，而行距相對較小的話，可能會發生上下兩行文字互相重疊的現象。
文本水平對齊
文本水平對齊可以
控制文本的水平對齊，而且並不僅僅指文字內容，也包括設定圖片、影像資料的對齊。
基本格式如下：
text-align: 參數
參
數的取值：
·left：靠左對齊
·right：靠右對齊
·center：置中對齊
·justify：相對左靠右對齊
但
需要注意的是，text-alight是塊級屬性，只能用於< p>、< blockquqte>、<
ul>、< h1>~< h6>等標識符裡。
文本垂直對齊
文本的垂直對齊應當是相對於文本母體的位置而
言的，不是指文本在網頁裡垂直對齊。比如說，表格的儲存格裡有一段文本，那麼對這段文本設定垂直置中就是針對儲存格來衡量的，也就是說，文本將在儲存格的
正中顯示，而不是整個網頁的正中。
基本格式如下：
vertical-align: 參數
參數取值：
·top：頂對齊
·bottom：
底對齊
·text-top：相對文本頂對齊
·text-bottom：相對文本底對齊
·baseline：基準線對齊
·middle：
中心對齊
·sub：以下標的形式顯示
·super：以上標的形式顯示
文本縮排
文本縮排可以使文本在相對預設值較窄的區
域裡顯示，主要用於中文板式的首行縮排，或是為大段的引用文本和備忘做成縮排的格式。
基本格式如下：
text-indent: 縮排距離
縮
進距離取值：
·帶長度單位的數字
·比例關係
但是需要注意的是，在使用比例關係的時候，有人會認為瀏覽器預設的比例是相對段落的寬
度而言的，其實事實並非如此，整個瀏覽器的視窗才是瀏覽器所預設的參照物。
另外，text-indent是塊級屬性，只能用於<
p>、< blockquqte>、< ul>、< h1>~< h6>等標識符裡。
顏
色屬性
基本格式如下：
color: 參數
顏色參數取值範圍：
·以RGB值表示
·以16進位（hex）
的色彩值表示
·以預設顏色的英文名稱表示
以預設顏色的英文名稱表示無疑是最為方便的，但由於預定義的顏色種類太少，所以更多的網頁設
計者喜歡用RGB的方式。RGB方式的好處很多，不但可以用數位形式精確地表示顏色，而且也是很多映像製作軟體（如Photoshop）裡預設使用的規
範，這樣一來就為圖片和網頁更好地結合打下了堅實的基礎。
背景顏色
在HTML當中，要為某個對象加上背景色只有一種辦法，那就是先做一
個表格，在表格中設定完背景色，再把對象放進儲存格。這樣做比較麻煩，不但代碼較多，還要為表格的大小和定位傷些腦筋。現在用CSS就可以輕鬆地直接搞定
了，而且對象的範圍很廣，可以是一段文字，也可以只是一個單詞或一個字母。
基本格式如下：
background-color: 參數
參
數取值和顏色屬性一樣。
背景圖片
基本格式如下：
background-image: url(URL)
URL就
是背景圖片的存放路徑。如果用“none”來代替背景圖片的存放路徑，將什麼也不顯示。
背景圖片重複
背景圖片重複控制的是背景圖片平鋪
與否，也就是說，結合背景定位的控制可以在網頁上的某處單獨顯示一幅背景圖片。
基本格式如下：
background-repeat:
參數
參數取值範圍：
·no-repeat：不重複平鋪背景圖片
·repeat-x：使圖片只在水平方向上平鋪
·repeat-
y：使圖片只在垂直方向上平鋪
如果不指定背景圖片重複屬性，瀏覽器預設的是背景圖片向水平、垂直兩個方向上平鋪。
背景圖片固定
背
景圖片固定控制背景圖片是否隨網頁的滾動而滾動。如果不設定背景圖片固定屬性，瀏覽器預設背景圖片隨網頁的滾動而滾動。為了避免過於花哨的背景圖片在滾動
時傷害瀏覽者的視力，所以可以解除背景圖片和文字內容的捆綁，該為和瀏覽器視窗捆綁。
基本格式如下：
background-attachment:
參數
參數取值範圍：
·fixed：網頁滾動時，背景圖片相對於瀏覽器的視窗而言，固定不動
·scroll：網頁滾動時，
背景圖片相對於瀏覽器的視窗而言，一起滾動
背景定位
背景定位用於控制背景圖片在網頁中顯示的位置。
基本格式如下：
background-position:
參數表
參數取值範圍：
·帶長度單位的數字參數
·top：相對前景對象頂對齊
·bottom：相對前景對象底對
齊
·left：相對前景對象靠左對齊
·right：相對前景對象靠右對齊
·center：相對前景對象中心對齊
·比
例關係
參數中的center如果用於另外一個參數的前面，表示水平置中；如果用於另外一個參數的後面，表示垂直置中。
列表符號
列
表符號是指顯示於每一個清單項目前的符號標識。
基本格式如下：
list-style-type：參數
參數取值範圍：
·disc：
圓形
·circle：空心圓
·square：方塊
·decimal：十進位數字
·lower-roman：小寫
羅馬數字
·upper-roman：大寫羅馬數字
·lower-alpha：小寫希臘字母
·upper-alpha：大寫
希臘字母
·none：無符號顯示
參數中的disc是預設選項。
圖形符號
圖形符號指原來列表的項目符號將可以使用
圖形來代替。
基本格式如下：
list-style-image：URL
URL是用來代替項目符號的圖形檔案的地址，可以使
用相對位址或絕對位址。
列表位置
列表位置描述列表在何處顯示。
基本格式如下：
list-style-
position：參數
參數取值範圍：
·inside：在BOX模型內部顯示
·outside：在BOX模型外部顯示
這
裡又出現了一個新的概念：BOX模型。BOX是指一種容器，包含了應用樣式規則的對象，具體介紹將在後文中給出。
在網頁上，滑鼠平時呈箭頭形，
指向連結時成為手形，等待網頁下載時成為沙漏形……這似乎是約定俗成的。雖然這樣的設計能使我們知道瀏覽器現在的狀態或是可以做什麼，但這些好像還不能完
全地滿足我們的需要。就拿連結來說，可以是指向一個協助檔案，也可以是向前進一頁或是向後退一頁，針對如此多的功能光靠千篇一律的手形滑鼠是不能說明問題
的。值得慶幸的是，CSS提供了多達13種的滑鼠形狀，供我們選擇。
基本格式如下：
cursor：滑鼠形狀參數
CSS滑鼠
形狀參數表：
CSS代碼
滑鼠形狀
style="cursor:hand"
手形
style="cursor:crosshair"

十字形
style="cursor:text"
文本形
style="cursor:wait"
沙漏形

style="cursor:move"
十字箭頭形
style="cursor:help"
問號形
style="cursor:e-resize"

右箭頭形
style="cursor:n-resize"
上箭頭形
style="cursor:nw-resize"

左上箭頭形
style="cursor:w-resize"
左箭頭形
style="cursor:s-resize"

下箭頭形
style="cursor:se-resize"
右下箭頭形
style="cursor:sw-resize"

左下箭頭形
邊框空白（MARGIN）
，位於BOX模型的最外層，包括四項屬性。
格式分別如下：
·margin-
top：頂部空白距離
·margin-right：右邊空白距離
·margin-bottom：底部空白距離
·margin-
left：左邊空白距離
空白的距離可以用帶長度單位的數字表示。
如果使用上述屬性的簡化方式margin，可以在其後連續加上四個帶
長度單位的數字，來分別表示margin-top、margin-right、margin-bottom、margin-left，每個數字中間要用空
格分隔。
對象邊框（BORDER）
，位於邊框空白和對象空隙之間，包括了七項屬性。
格式分別如下：
·border-
top：頂邊框寬度
·border-right：右邊框寬度
·border-bottom：底邊框寬度
·border-
left：左邊框寬度
·border-width：所有邊框寬度
·border-color：邊框顏色
·border-
style：邊框樣式參數
其中border-width可以一次性設定所有的邊框寬度，border-color同時設定四面邊框的顏色時，可
以連續寫上四種顏色，並用空格分隔。上述連續設定的邊框都是按border-top、border-right、border-bottom、
border-left的順序。
Border-style相對別的屬性而言稍稍複雜些，因為它還包括了多個邊框樣式的參數：
·none：
無邊框。
·dotted：邊框為點線。
·dashed：邊框為長短線。
·solid：邊框為實線。
·double：
邊框為雙線。
·groove：根據color屬性顯示不同效果的3D邊框
·ridge：根據color屬性顯示不同效果的3D邊框
·inset：
根據color屬性顯示不同效果的3D邊框
·outset：根據color屬性顯示不同效果的3D邊框
對象間隙（PADDING）
如
圖所示，位於對象邊框和對象之間，包括了四項屬性。
基本格式如下
·padding-top：頂部間隙
·padding-
right：右邊間隙
·padding-bottom：底部間隙
·padding-left：左邊間隙
和MARGIN類
似，PADDING也可以用padding一次性設定所有的對象間隙，格式也和MARGIN相似，不再一一列舉了。
顯示控制樣式
基本格
式如下：
display: 參數
參數取值範圍：
·block（預設）：在對象前後都換行
·inline：在對象
前後都不換行
·list-item：在對象前後都換行，增加了項目符號
·none：無顯示
空白控制樣式
基本格式
如下：
空白屬性決定如何處理元素內的空格。
white-space: 參數
參數取值範圍：
normal：把多個
空格替換為一個來顯示
pre：忠實地按輸入顯示空格
nowrap：禁止換行
但要注意的是，write-space也是一個
塊級屬性。