CSS工做原理

時間 2019-12-21

標籤 css 原理欄目 CSS 简体版

原文原文鏈接

文檔流

文檔流，就是HTML元素會按照它們各自在標記中出現的前後順序，依次從頁面上方「流向」下方。css

元素

顯示元素

塊級元素
相互堆疊在一塊兒沿頁面向下排列，每一個元素分別佔一行。塊級元素盒子會擴展到與父元素同寬，全部塊級元素的父元素都是body，而它的寬度默認與瀏覽器的窗口同樣寬（固然有少許邊距）。html
行內元素
相互並列，只有在空間不足以並列的狀況下才會折到下一行顯示。行內元素盒子會「收縮包裹」其內容，而且會盡量包緊。html5

可替換元素和不可替換元素

可替換元素
可替換元素就是瀏覽器根據元素的標籤和屬性，來決定元素的具體顯示內容。替換元素通常有內在尺寸，因此具備widht和height，能夠設定。瀏覽器

好比：<img src="logo.png">，沒有指定img的width和height，就按照內在尺寸顯示，也能夠經過設置width和height來顯示圖片。字體

不可替換元素
大多數元素是不可替換元素，即其內容直接表現給瀏覽器。搜索引擎

文檔添加樣式的三種方法

行內樣式
行內樣式是寫在html標籤上的style，好比：url

<div style="font-size: 12px; color: red;">inline css styling</div>

嵌入樣式
嵌入的css樣式是防在html文檔的head元素中，好比：code

<head>
    <style type="text/css">
        div {
            font-size: 12px;
            color: red;
        }
    </style>
</head>

連接樣式
將樣式表文件引到當前文檔中，好比：orm

<link rel="stylesheet" type="text/css" href="style.css">

樣式表中連接其餘樣式
@import url(css/style2.css)
@import指令必須出如今樣式表中其餘樣式以前，不然@import引用的樣式表不會被加載。

CSS命名慣例

CSS規則由選擇符和聲明兩部分組成，其中選擇符用於指出規則所要選擇的元素，聲明則又由兩部分組成：屬性和值。屬性指出要影響元素哪方面的樣式，值就是屬性的一個新狀態。htm

p {color: red;}
p：選擇符
{color: red;}：聲明
color：屬性
red：值

對這個基本結構，有三種方法進行擴展：

多個聲明包含在一條規則裏

p {color: red; font-size: 12px; font-weight: bold;}

多個選擇符組合在一塊兒

h1, h2, h3 {color: red; font-weight: bold;}

多條規則應用給一個選擇符

h1, h2, h3 {color: red; font-weight: bold;}
h3 {font-style: italic;}

特定元素選擇符

上下文選擇符：就是一組以空格分隔的標籤名，用於選擇做爲指定祖先元素後代的標籤。

article p {font-size: 14px;}
只有article後代的p元素纔會應用後面的樣式。

* *特殊的上下文選擇符*
    * 子選擇符 >  
    標籤1 > 標籤2，標籤2必須是標籤1的子元素。 section > h2 {font-weight: bold;}
    * 緊鄰同胞選擇符 +  
    標籤1 + 標籤2，標籤2必須緊跟在其同胞標籤1的後面。 h2 + p {font-size: 14px;}
    * 通常同胞選擇符 ~  
    標籤1 ~ 標籤2，標籤2必須跟（不必定緊跟）在其同胞標籤1後面。 h2 ~ a {color: red;}
    * 通用選擇符 \*  
    匹配任何一個元素。 * {margin: 0; padding: 0;}

ID和類選擇符
同一個頁面中的每個id屬性都必須只能用一次。

同一個頁面中相同的類能夠有多個，類的目的是爲了標識一組具備相同特徵的元素。

<div id="nav" class="logo "></div>

#nav {
    width: 100%;
}
.logo {
    width: 80px;
    height: 80px;
}

屬性選擇符
- 屬性名選擇符
  標籤名[屬性名]
選擇任何帶有屬性名的標籤名。img[title] {border: 1px solid green;}
- 屬性值選擇符
  標籤名[屬性名="屬性值"]
選擇任何帶有值爲屬性值的屬性名的標籤名。img[title="flower"] {border: 1px solid red;}
在html5中屬性值的引號可加可不加

僞類

僞類這個叫法源自它們與類類似，但實際上並無類會附加到標記中的標籤上。僞類分兩種：UI僞類和結構化僞類。

UI僞類
UI（User Interface，用戶界面）僞類會在HTML元素處於某個狀態時，爲該元素應用CSS樣式。
1. 連接僞類
2. 連接還未點擊
visited 連接已經點擊過
hover 鼠標懸停在連接上
active 連接正在被點擊
```
a:link {color: red;}
a:visited {color: blue;}
a:hover {color: green;}
a:active {color: yellow;}
```
1. :focus僞類
  表單中的文本字段獲取焦點時
```
input:focus {border: 1px solid red;}
```
1. :target僞類
  若是用戶點擊一個指向頁面中其餘元素的連接，則那個元素就是目標（target），能夠用:target僞類選中它。
例如：用戶點擊連接轉向ID爲more的元素時，爲該元素添加紅色背景。
```
<a href="#more">more information</a>
<p id="more">This is the information</p>
```
```
#more:target {background: red;}
```
結構化僞類
結構化僞類會在標記中存在某種結構上的關係時，爲相應元素應用CSS樣式。
1. :first-child 和 :last-child
  :first-child表明一組同胞元素中的第一個元素，而:last-child則表明最後一個。
2. :nth-child
  :nth-child(n)， n表明一個數值，一組同胞元素中第n個元素。

僞元素

僞元素就是你的文檔中如有實無的元素。

::first-letter
選中首字母

p::first-letter {font-size: 300%;}

::first-line
能夠選中文本段落（通常狀況下是段落）的第一行

p::first-line {font-variant: small-caps;}

::before 和 ::after僞元素
可用於在特定元素前面和後面添加特殊內容。

<p class="age">18</p>

.age::before {content: "Age: ";}
.age::after {content: " years.";}

搜索引擎不會取得僞元素的信息（由於它在標記中並不存在）。所以，不要經過僞元素添加你想讓搜索引擎索引的重要內容。

繼承

CSS中的元素會繼承其祖先元素中一部分CSS屬性的值。
字體和文本樣式是能夠繼承的。

層疊

層疊，就是層疊樣式表中的層疊，是一種樣式在文檔層次中逐層疊加的過程，目的是讓瀏覽器面對某個標籤特定屬性值的多個來源，肯定最終使用哪一個值。

瀏覽器層疊各個來源樣式的順序：

瀏覽器默認樣式表
用戶樣式表
做者連接樣式表（按照它們連接到頁面的前後順序）
做者嵌入樣式
做者行內樣式

層疊規則：

層疊規則一：找到應用給每一個元素和屬性的全部聲明。
層疊規則二：按照順序和權重排序。
層疊規則三：按特指度排序。

標記規則：
優先級順序：ID、類、元素（標籤）名
好比：
div .nav             特指度：0 1 1
div ul.nav .item    特指度：0 2 2
#nav li.item         特指度：1 1 1
div#nav li.item     特指度：1 1 2
比較時從特指度高向特指度低方向比較

層疊規則四：順序決定權重。
若是兩條規則都影響某元素的同一屬性，並且它們的特指度也相同，則位置最靠下（或後聲明）的規則勝出。
注：!import的優先級最高

規則聲明

文本值
全部CSS的屬性都有文本值。如：visibility屬性有visible和hidden值。

數字值
數字值用於描述元素的各類長度。數字值主要分兩類：絕對值和相對值。

絕對值	單位縮寫
英寸	in
釐米	cm
毫米	mm
點	pt
皮卡	pc
像素	px

相對值	單位縮寫
Em	em
Ex	ex
百分比	%

顏色值

1. 顏色名，如red
2. 十六進制顏色（#RRGGBB或#RGB），如#ff803a
3. RGB顏色值（R， G， B），如rgb(255, 255, 255)
4. RGB百分比值（R%，G％，B％），如100%, 0%, 0%
5. HSL（色相，飽和度%，亮度%），如HSL(0, 0%, 0%)
6. Alpha通道，1表示徹底不透明，0表示徹底透明

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。