css基礎用法，常見屬性

CSS： 層疊樣式表。主要用于設定HTML頁面中的文本内容（字型、大小、對齊方式等）、圖檔的外形（寬高、邊框樣式、邊距等）以及版面的布局等外觀顯示樣式。

CSS文法： CSS執行個體由選擇器，以及一條或多條聲明（屬性）兩部分組成。每個聲明（屬性）可以有一個或多個值。屬性和值被冒号分開。CSS聲明以分号;結束，聲明以大括号{}括起來。

CSS注釋： 支援使用進行注釋

CSS引入： 三種。外部樣式表、内部樣式表、内聯樣式。

CSS選擇器

1.通配符選擇器：以選取所有标簽。

2.标簽選擇器：使用标簽名選取該标簽名的所有标簽。

3.id選擇器：id選擇器以"#“來定義。一個元素隻能有一個ID

4.類選擇器：類選擇器以”."來定義。class選擇器有别于id選擇器，class屬性可以在多個标簽中使用。也支援一個标簽中有多個class屬性值（用空格隔開）。

5.後代選擇器：兩個元素之間用空格隔開，并且選中的是元素所有層級的後代

6.子代選擇器：兩個元素之間用>隔開，隻能選擇子元素

7.并集選擇器：并集選擇器中間用逗号隔開，支援任意其他選擇器，多個元素要求豎着寫

8.僞類選擇器：僞類選擇器表示的是同一個标簽，根據其不同的種狀态，有不同的樣式。例如标簽有點選前和點選後兩種狀态。

/ 讓超連結點選之前 /

a:link {

color: red;

}

/ 讓超連結點選之後 /

a:visited {

color: orange;

}

/ 滑鼠懸停，放到标簽上的時候 /

a:hover {

color: green;

}

/ 滑鼠點選連結，但是不松手的時候（激活） /

a:active {

color: black;

}

/ 輸入框擷取焦點時 */

input:focus {

background-color: palegoldenrod;

}

字型相關屬性：可以用CSS設定的四種主要的字型屬性：family(字型族)、style(樣式)、size(大小)和weight(粗細)。字型一般直接設定在body上用于控制整個頁面。

font-style：設定文本的字型樣式（正常normal、斜體italic、傾斜oblique）

文本相關屬性：

color：文本顔色。

text-align：設定文本的水準對齊方式。左對齊(left)、右對齊(right）、居中(center)和兩端對齊(justify)。

line-height：行高

word-spacing：設定文本字間距

letter-spacing：設定單詞和字元間距

text-transform：設定文本轉換。無、首寫字母大寫、大寫和小寫。

text-decoration：設定文本裝飾。下劃線、删除線、上劃線、閃爍等。

text-indent：設定首行文本縮進距離。

背景屬性：

background-color：設定背景顔色

background-image：設定背景圖檔

background-repeat：設定背景圖檔重複/平鋪方式

background-position：設定背景圖檔定位

background-attachment：設定背景圖檔是否固定或者随着頁面的其餘部分滾動

background-size：設定背景圖檔大小

background：複合寫法。任意屬性都可以省略。

元素顯示模式： 在CSS中，根據元素顯示模式的不同元素标簽被 分為了兩類。

行内元素（inline-level）、塊級元素（block-level）。

行内元素：行内元素就是不會獨占一行的元素，行内元素不能設定寬度和高度。它的寬度和高度會随着文本的改變而該改變。内部不能填寫塊級元素。例如：<span> <buis> <strong> <em> <ins> <del>等;

塊級元素：塊級元素就是會獨占一行的元素，塊級元素可以設定寬度和高度，如果沒有設定寬度和高度，預設父元素一樣寬，高度則為0。例如：<p> <div> <h> <ul> <ol> <dl> <li> <dt> <dd>等。
           

行内塊元素：由于我們有的時候不僅要設定元素的寬度和高度，同時也希望元素不會獨占一行，這時就出現了行内塊級元素（inline-block）。同一行的行内塊級元素會有空白間隔。例如等。

轉換CSS元素的顯示模式：設定元素的display屬性。inline（行内）、block（塊級）、inline-block（行内塊級）

CSS三大特性：CSS的三個特性是指層疊性、繼承性以及優先級。

層疊性：相同權重的樣式存在，根據這些樣式書寫的先後順序來決定，處于最後面的CSS樣式将會覆寫前面的CSS樣式。

繼承性：子标簽會繼承父标簽的某些樣式，如文本顔色和字号。

對于字型、字号、顔色、行距等文本類屬性具有繼承性

并不是所有的CSS屬性都可以繼承，如邊框、外邊距、内邊距、背景、定位、元素高度等與塊級元素相關的屬性都不具有繼承性。

優先級：

繼承 < 元素選擇器 < 類選擇器/僞類選擇器 < ID選擇器 < 行内樣式 < !important

繼承樣式的權重為0：

行内樣式優先：應用style屬性的元素，其行内樣式的權重非常高，可以了解為遠大于100。總之，他擁有比上面提高的選擇器都大的優先級。

就近原則：權重相同時，遵循就近原則。也就是說靠近元素的樣式具有最大的優先級，或者說排在最後的樣式優先級最大

!important指令：CSS定義了一個!important指令，該指令被賦予最大的優先級。

權重會疊加，但是永遠不會進位。

權重疊加問題： 每種選擇器的權重見下方表格。樣式繼承的權重為0，複合選擇器使權重疊加，權重之間不能越界，11個類也沒有id的權重大

選擇器 權重

0000 0000

标簽選擇器 0001

類選擇器與僞類選擇器 0010

ID選擇器 0100

行内樣式 1000

!important　　 +∞