CSS中常用樣式的總結以及css中常用的屬性總結

本篇文章給大家帶來的內容是關於CSS中常用樣式的總結以及css中常用的屬性總結，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。

CSS樣式表：

作用：設定如何顯示HTML標籤
文法結構：

第一種：選取器{
樣式屬性聲明；
}說明：這種方式的CSS樣式表由選取器及一條或多條聲明兩個部分組成；該種樣式表只能定義在style標籤或css檔案中，每個style標籤或css檔案可定義多個樣式表
第二種：style="樣式屬性聲明1;樣式屬性聲明2;..."說明：這種方式的CSS樣式表只由一條或多條聲明組成；該種樣式表只能定義在style標籤屬性；HTML文檔中每個標籤都有一個style標籤屬性

無論使用哪一種方式定義CSS樣式表，樣式表中的樣式屬性聲明都由一個樣式屬性（非標籤屬性，即樣式屬性不能當標籤屬性直接用在標籤中）和一個樣式屬性值組成，樣式屬性和樣式屬性值使用冒號分開；聲明之間使用分號間隔

注意：1.如果一個樣式屬性有多個樣式屬性值，則樣式屬性值之間用逗號間隔
2.在CSS中樣式屬性及其樣式屬性值對大小寫不敏感，且不忽略空格
3.如果屬性值由多個單片語成，則建議使用單引號引起來

選取器：

標籤選取器：標籤選取器以HTML文檔中定義的標籤名為選取器名，其文法如下：

標籤名{    樣式屬性聲明1;    ...}

作用對象：HTML文檔中標籤名與標籤選取器名相同的所有標籤都會受影響
類別選取器：類別選取器以標籤中class標籤屬性的屬性值為選取器名，其文法如下：

.class  標籤屬性的屬性值{    樣式屬性聲明1;    ...}

作用對象：class標籤屬性的屬性值與類別選取器 . 後相同的標籤都受影響，注意：class標籤屬性不能與數字開頭
id選取器： id選取器以標籤中的id標籤屬性的屬性值為選取器名，其文法如下：

#id 標籤屬性的屬性值{    樣式屬性聲明1;    ...}

作用對象：只有id標籤屬性的屬性值與id選取器#後相同的標籤才受影響。注意：id標籤屬性的屬性值不能以數字開頭；id標籤屬性的屬性值在HTML文檔中必需唯一，class標籤屬性的屬性值可以不唯一
後代選取器：

文法：父代選取器1 子父代選取器2 子父代選取器3...子代選取器{        樣式屬性聲 明1;        ...    }

注意：選取器之間用空格間隔
分組 選取器：如果HTML文檔多個CSS樣式表內的部分樣式相同，則可以通過定義一個分組選取器抽取出來以簡化CSS樣式代碼，該類別選取器的選取器名由多個選取器組成，使用逗號分隔，其文法如下：

選取器1,選取器2,選取器3...{    樣式屬性聲明;    ...}

萬用字元選取器：萬用字元選取器等價於列出了HTML文檔中所有標籤的一個分組選取器，其文法如下：

*{    樣式屬性聲明1;    ...}

如何使用CSS樣式

在HTML中插入CSS樣式有三種方式：外部樣式表，內部樣式表，內聯樣式
外部樣式表：當多個HTML文檔中某些標籤的樣式規則相同時，為了實現這些樣式表的重用，同時也為了方便管理樣式1表，會將CSS樣式寫在css樣式檔案中，載用link標籤將該css檔案引入到HTML文檔中
補充：link標籤還用於設定HTML文檔頭部小表徵圖，文法結構：< link rel=”shortcut icon” type=”image/x-icon” href=”圖片路徑” />

內部樣式表：當一個HTML文檔中的樣式在其他HTML文檔中不具有共性，但本HTML文檔中的多個標籤的樣式相同，這時為 了實現這些樣式規則的重用，同時也為了方便管理樣式規則，則需要將CSS樣式直接寫在HTML文檔的style標籤內

內聯樣式：當一個HTM L文檔中的某個標籤樣式與 其他標籤樣式不同或該文檔中的標籤樣式與父標籤樣式不統一時，講CSS樣式寫在HTML文檔某個標籤的style標籤屬性的屬性值中

CSS樣式優先順序

選取器優先順序： id選取器>類別選取器>標籤選取器，且選取器優先順序不考慮選取器的先後順序

樣式插入方式優先順序：如果按照一般插入CSS樣式的順序（即先使用link插入外部樣式表，再使用style標籤插入內部樣式表，最後再在style標籤屬性中插入內聯樣式）來說，優先順序內聯樣式>內部樣式表>外部樣式表

常用CSS樣式屬性

邊框樣式屬性
border-width屬性：用於為元素的所有邊框設定寬度或單獨的為各邊邊框設定寬度
注意：如果不設定border-style屬性或將其設定為none或hidden屬性值，則border-width屬性不會起作用，這時邊框寬度實際上會重設為0
border-style屬性：用於設定元素所有邊框的樣式，或者單獨為各邊設定邊框樣式，該屬性有多個值（none預設值，定義無邊框；hidden與none相同；dotted定義點狀邊框；dashed定義虛線；solid定義實線）
注意：只有當值不為none或hidden時才能出現
border-color屬性：用於設定一個元素所有邊框的顏色或為四個邊框分別設定不同的顏色
注意：把border-style屬性聲明到border-color屬性之前，元素需先獲得邊框再改變其顏色
邊框簡寫屬性：
注意：1.把邊框的寬度，樣式和顏色設定到一個聲明中，需要按照寬度，樣式，顏色的順序進行設定，允許不設定其中某個值
2.使用border設定邊框屬性時，border-width，border-style，border-color的值只能取一種

border:2px solid greenyellow;border-bottom:2px solid orange;

輪廓線樣式屬性：輪廓線是在標籤邊框邊緣繪製一條線，該線不會佔據空間，也不一定是矩形，主要起到突出標籤的作用
outline-color樣式屬性：設定輪廓線的顏色，使用該樣式屬性時必須設定outline-style樣式屬性的屬性值不能為none，否則看不到效果
outlin-style樣式屬性：設定輪廓線的樣式，該屬性有多個值（none預設值，定義無輪廓；dotted定義點狀輪廓；dashed定義虛線輪廓；solid定義實線輪廓）
outline-width樣式屬性：設定輪廓線的寬度，使用該樣式屬性時必須設定outline-style樣式屬性的屬性值不能為none，否則看不到效果（如果outline-style為none，寬度實際上會重設為0）
outlilne樣式屬性：用於在一個聲明中設定所有的輪廓線樣式屬性（即顏色，樣式，寬度），且該樣式屬性設定屬性值時不需要設定所有輪廓線樣式屬性所對應的屬性值，但需按照outline-color，outline-style，outline-width的順序進行排列，中間用空格隔開

內容溢出樣式屬性：
overflow樣式屬性：當標籤中的內容溢出標籤時，用於設定如何處理溢出的內容，該屬性有多個值：visible預設值，所溢出內容不會被修剪，會呈現在元素框之外；scroll所溢出內容會被修剪，但瀏覽器會顯示捲軸以便查看其餘的內容；auto如果所溢出內容被修剪，瀏覽器會顯示捲軸以便查看其餘的內容
overflow-x樣式屬性：當標籤中的內容x方向溢出標籤時，用於設定如何處理溢出的內容
overflow-y樣式屬性：當標籤中的內容y方向溢出標籤時，用於設定如何處理溢出的內容

背景樣式
background-color樣式屬性：設定標籤背景顏色，該樣式屬性設定的背景顏色會填充背景的內容，內邊距和邊框地區，擴充到標籤邊框的外邊界，但不包括外邊距
background-image樣式屬性：設定標籤背景圖片，該樣式屬性有多個屬性值：url（’URL’）指向圖片的路徑；none預設值，不顯示背景圖片
background-repeat樣式屬性：設定標籤背景圖片重複模式，該樣式屬性有多個屬性值：repeat預設值，背景圖片將在水平和垂直方向重複；repeat-x背景圖片將在水平方向重複；repeat-y背景圖片將在垂直方向重複；no-repeat背景圖片將僅顯示一次
background-attachment樣式屬性：設定標籤背景圖片是否隨著
頁面其餘部分的滾動而滾動，該樣式屬性有多個屬性值：scroll預設值，背景圖片會隨著頁面其餘部分的滾動而滾動；fixed當頁面的其餘部分滾動時，背景圖片不會移動
background-position樣式屬性：隨著標籤背景圖片的位置
background-size樣式屬性：設定單張背景圖片的尺寸，第一個值設定寬度，第二個值設定高度，如果只設定一個值，則第二個值會被設定為auto
background樣式屬性：用於在一個聲明中設定所有的背景樣式屬性，且該樣式屬性設定屬性值時不需要設定所有背景樣式屬性所對應的屬性值且設定的屬性值沒有順序要求

字型樣式
font-style樣式屬性：設定字型的風格（normal預設值，顯示標準的字型風格；italic顯示斜體的字型風格）
font-variant樣式屬性：設定是否以小型大寫字母的字型顯示文本（normal預設值，顯示標準的字型；small-caps顯示小型大寫字母的字型）
font-weight樣式屬性：設定字型的粗細（normal預設值，定義標準的字元；bold定義粗體字元；bolder定義更粗的字元；lighter定義更細的字元；值px直接設定）
font-size樣式屬性：設定字型大小
font-family樣式屬性：設定字型系列，使用逗號分割每種字型，如果瀏覽器不支援第一個字型則會嘗試第二個字型；如果字型系列中的所有字型都不支援，則使用瀏覽器預設支援的字型
font樣式屬性：用於在一個聲明中設定所有的字型樣式屬性，且該樣式屬性設定屬性值時不需要設定所有字型樣式屬性所對應的屬性值，但需要按照font-style、font-variant、font-weight、font-size/line-height和font-family順序進行排列，中間用空格隔開。
注意：1.font樣式屬性至少要指定字型大小和字型系列；
2.沒有font-color樣式屬性，如果要設定字型的顏色需要使用color樣式屬性；

文本樣式
letter-spacing樣式屬性：設定字元間距，樣式屬性值可以為負，但這時字元之間更加擁擠
line-height樣式屬性：設定行間距（即行高），不能為負值
text-align樣式屬性：設定標籤內文本的水平對齊，該屬性有多個值：left把文本排到左邊；right把文本排到右邊；center把文本排到中間；justify實現左右對齊文字效果
text-transform樣式屬性：設定文本的大小寫，該屬性有多個值：none預設值，定義帶有小寫字母和大寫字母的標準的文本；capitalize文本中的每個單字首大寫；uppercase定義僅有大寫字母；lowercase定義僅有小寫字母
text-indent樣式屬性：設定文字區塊中首行文本的縮排，如果樣式屬性值為負值，則首行會被縮排到左邊
text-decoration樣式屬性：設定文本裝飾（比如是否有底線及劃線顯示的位置），該屬性有多個值：none預設值，定義標準的文本；underline定義文本下的一條線；overline定義文本上的一條線；line-through定義穿過文本的一條線

列表樣式
list-style-type樣式屬性：設定清單項目標記的類型
list-style-position樣式屬性：設定清單項目標記相對於清單項目內容的位置，該屬性有多個值：inside清單項目標記放置在文本以內；outside預設值，保持標記位於文本的左側，清單項目標記放置在文本以外
list-style-image樣式屬性：將清單項目標記設定為指定的圖片
list-style樣式屬性：用於在一個聲明中設定所有的所有的列表樣式屬性，且該樣式屬性設定屬性值時不需要設定所有列表樣式屬性所對應的屬性值，但需要按照list-style-type、list-style-position和list-style-image順序進行排列，中間用空格隔開

超連結樣式
CSS 偽類用於向某些選取器添加特殊效果，偽類使用文法：

選取器:偽類{    樣式屬性聲明1;    ...}

CSS中常用的偽列如下：
：link 向未被訪問的連結添加樣式
：visited 向已被訪問的連結添加樣式
：hover 當滑鼠懸浮在標籤上時向標籤添加樣式
：active 向被啟用的標籤添加樣式
：focus 向擁有鍵盤輸入焦點的標籤添加樣式
注意：如果:link，:visited，:hover和:active一起使用，為了產生預期的效果，在 CSS 定義中需按照:link、:visited，:hover，:active的順序進行

游標樣式屬性
cursor樣式屬性用於設定游標的顯示形狀，該屬性有多個屬性值，其中pointer使游標呈現為指示連結的指標