CSS自學筆記（5）:CSS的樣式

標籤：style   blog   http   color   使用   os   strong   檔案   

CSS中擁有各種各樣的樣式表，而基本的樣式有背景，文本，字型，連結，列表，表格，輪廓。

一.CSS-背景

CSS中允許用純色背景，也允許用圖片來建立複雜的個性背景。

p {background-color: #000;}

是用純色作為背景。這時你可以定義其他屬性，產生不同效果的背景。

CSS中也可以用圖片作為背景，這是就需要使用background-image屬性了，如果屬性值為一個URL值，並且圖片檔案存在，那麼就可以看到用該圖片做為背景的網頁了

body {background-image: url(4.gif);}

註：background-image屬性也可以用在其他標籤裡。

這時可以定義其他屬性，改變圖片的位置，大小等等。

可以使用 background-repeat 屬性，對頁面上的圖片背景進行平鋪處理，利用 background-position 屬性改變映像在背景中的位置。

需要注意的是，在改變圖片背景的位置時，可以使用關鍵字，也可以使用百分比，還可以使用長度值來確定圖片的位置。

當文檔很長，一個螢幕顯示不下的時候，在向下滾動的時候，我們不希望背景也一起滾動，這是就可以用到background-attachment 屬性防止這種滾動，防止背景滾動，將背景固定到一個可視地區中（fixed），不會收到網頁滾動的影響。

二.CSS-文本

文本，應該是一個網頁中佔據內容最多的部分，所以文本的樣式是比較重要的。

CSS中的屬性可定義文本的外觀，包括文本的顏色、字元間距、對齊，還可以對文本進行裝飾、排版等。

CSS 文字屬性

屬性	描述
color	設定文本顏色
direction	設定文本方向。
line-height	設定行高。
letter-spacing	設定字元間距。
text-align	對齊元素中的文本。
text-decoration	向文本添加修飾。
text-indent	縮排元素中文本的首行。
text-shadow	設定文本陰影。CSS2 包含該屬性，但是 CSS2.1 沒有保留該屬性。
text-transform	控制元素中的字母。
unicode-bidi	設定文本方向。
white-space	設定元素中空白的處理方式。
word-spacing	設定字間距。

註：在文字屬性中的部分屬性值，可以用長度、百分比、關鍵字等等來設定。

三.CSS-字型

CSS的字型屬性定義文本的字型、大小、風格（加粗、傾斜）和變形等。

CSS的字型系列

在 CSS 中，有兩種不同類型的字型系列名稱：

• 通用字型系列 - 擁有相似外觀的字型系統組合（比如 "Serif" 或 "Monospace"）
• 特定字型系列 - 具體的字型系列（比如 "Times" 或 "Courier"）

除了各種特定的字型系列外，CSS 定義了 5 種通用字型系列：

• Serif 字型
• Sans-serif 字型
• Monospace 字型
• Cursive 字型
• Fantasy 字型

定義文本的字型屬性時，應用到font-family屬性。定義它的屬性值時，可以用通用字型系列，也可以用指定字型系列，這兩種字型系列也可以同時使用。

body {font-family: Serif;}

希望html文檔使用Serif字型，但又不關心是哪種字型，這時可以用到通用字型系列。

body {font-family: Georgia;}

將body元素的字型設定成具體的Georgia字型。

定義字型風格時，應用到font-style屬性。

font-style屬性值有：

• normal - 文本正常顯示
• italic - 文本斜體顯示
• oblique - 文本傾斜顯示

註：斜體（italic）是一種簡單的字型風格，對每個字母的結構有一些小改動，來反映變化的外觀。與此不同，傾斜（oblique）文本則是正常豎直文本的一個傾斜版本。

CSS 字型屬性

屬性	描述
font	簡寫屬性。作用是把所有針對字型的屬性設定在一個聲明中。
font-family	設定字型系列。
font-size	設定字型的尺寸。
font-size-adjust	當首選字型不可用時，對替換字型進行智能縮放。
font-stretch	對字型進行水平展開。
font-style	設定字型風格。
font-variant	以小型大寫字型或者正常字型顯示文本。
font-weight	設定字型的粗細。

四.CSS-連結

CSS中我們也可以為連結設定各種規格樣的樣式。不過相對於其他的，連結樣式比較簡單。

連結的特殊性在於能夠根據它們所處的狀態來設定它們的樣式。

連結的四種狀態：

• a:link - 普通的、未被訪問的連結
• a:visited - 使用者已訪問的連結
• a:hover - 滑鼠指標位於連結的上方
• a:active - 連結被點擊的時刻

當為連結的不同狀態設定樣式時，請按照以下次序規則：

• a:hover 必須位於 a:link 和 a:visited 之後
• a:active 必須位於 a:hover 之後

五.CSS-列表

CSS 列表屬性允許你放置、改變清單項目標誌，或者將映像作為清單項目標誌。

在html中有效使用列表，可以使頁面變得非常豐富的同時，也很整齊。

列表最常用的屬性是它的標誌類型：list-style-type

同樣，當清單項目不夠用（不想用）時，我們也可以用圖片來做清單項目。

ul li {list-style-image : url(1.gif)}

由於列表的使用頻率比較高，所以可以將列表的屬性簡寫

li {list-style : url(1.gif) square inside}

CSS 列表屬性(list)

屬性	描述
list-style	簡寫屬性。用於把所有用於列表的屬性設定於一個聲明中。
list-style-image	將圖象設定為清單項目標誌。
list-style-position	設定列表中清單項目標誌的位置。
list-style-type	設定清單項目標誌的類型。

六.CSS-表格

有效使用表格屬性，可以將那些看起來很死板的表格變得很個性。

table, th, td  {  border: 1px solid red;;  }

將表格table、th 以及 td 設定了藍色邊框。

也可以對錶格邊框的其他屬性進行定義，從而得到各式各樣邊框的表格。

對錶格的大小（高寬）進行定義，使之更符合html的布局設計，是網頁更加美觀。

我也可以對錶格內部的文字屬性進行定義，text-align 和 vertical-align 屬性設定表格中文本的對齊

td  {  text-align:right;  }

為表格td和th元素設定padding屬性，可以改變表格內容對錶格內邊框的距離。

和其他背景一樣，也可以為表格添加背景顏色，可以為純色，也可以為圖片。

CSS Table 屬性

屬性	描述
border-collapse	設定是否把表格邊框合并為單一的邊框。
border-spacing	設定分隔儲存格邊框的距離。
caption-side	設定表格標題的位置。
empty-cells	設定是否顯示表格中的空儲存格。
table-layout	設定顯示單元、行和列的演算法。

七.CSS-輪廓

輪廓可以理解為包圍在某元素周圍的一條線，起強調作用。

CSS 邊框屬性

屬性	描述
outline	在一個聲明中設定所有的輪廓屬性。
outline-color	設定輪廓的顏色。
outline-style	設定輪廓的樣式。
outline-width	設定輪廓的寬度。