CSS中:root偽類和html選擇器都可以用來定位 HTML 文檔的根元素，雖然它們看起來非常相似，但它們還是有一些不同之處。

選擇器優(yōu)先級(jí)不同

從優(yōu)先級(jí)來說，:root偽類 比 html選擇器的優(yōu)先級(jí)高，通過如下代碼：

:root {
  background-color: red;
}

html {
  background-color: blue;
}

最終你會(huì)看到頁面的背景色是紅色，而不是藍(lán)色。

使用場(chǎng)景不同

由于CSS也是為SVG和XML設(shè)計(jì)的，因此可以在其它類型的文檔中使用:root定位根文檔元素。對(duì)于html 選擇器卻只能在瀏覽器網(wǎng)頁文檔中使用，也就是說root不在乎宿主環(huán)境，在各種文檔類型中都是指根元素。

與HTML相似，在SVG中 :root和svg都指相同的元素，但是:root選擇器將具有更高的優(yōu)先級(jí)。

如下實(shí)例：

:root {
  fill: red;
}
 
svg {
  fill: bule;
}

svg 顯示紅色，而不是藍(lán)色。

、什么是CSS3

如何學(xué)習(xí)

SEO搜索引擎優(yōu)化

0. CSS是什么
0. Cascading Sheet層疊級(jí)聯(lián)樣式表，表現(xiàn)，網(wǎng)頁美化
1. CSS發(fā)展史：CSS1.0 CSS2.0 DIV + CSS HTML和CSS結(jié)構(gòu)分離 CSS 2.1 CSS3.0
1. CSS怎么用
2. CSS選擇器
3. 美化網(wǎng)頁
4. 盒子模型
5. 浮動(dòng)
6. 定位
7. 網(wǎng)頁動(dòng)畫（菜鳥教程）

二、快速入門

規(guī)范：在<style></style>中寫CSS代碼

CSS的注釋是/**/

選擇器 {

聲明1;

聲明2；

}

在CSS文件里不用寫<style>標(biāo)簽

CSS的優(yōu)勢(shì)：

0. 內(nèi)容和表現(xiàn)分離
1. 網(wǎng)頁結(jié)構(gòu)表現(xiàn)統(tǒng)一可以復(fù)用
2. 樣式十分豐富
3. 建議使用獨(dú)立于html的css文件
4. 利用SEO，容易被搜索引擎搜索

三、CSS的三種導(dǎo)入方式

0. 行內(nèi)樣式，在標(biāo)簽元素中編寫一個(gè)style屬性，編寫樣式即可
1. <h1 style="color:red">我是標(biāo)題</h1>有多個(gè)屬性用;分開
2. 內(nèi)部樣式
3. 在<style></style>中的
4. 外部樣式
5. 寫在外部CSS文件的
6. 優(yōu)先級(jí)：就近原則，誰里這個(gè)元素最近
7. 拓展：外部樣式兩種寫法
8. 鏈接式：屬于HTML的
9. 在head中<link rel="stylesheet" href="path">
10. 好處就是結(jié)構(gòu)和樣式一起渲染出來
11. 導(dǎo)入式：屬于CSS2.1
12. <style>
    @import url("path");
    </style>
13. 缺點(diǎn)就是先渲染結(jié)構(gòu)，在渲染樣式

四、選擇器

作用：選擇頁面上的某一個(gè)或者某一類元素

1.基本選擇器

0. 標(biāo)簽選擇器
1. 標(biāo)簽 {
   key:value;
   }
   標(biāo)簽1，標(biāo)簽2，.... {
   
   }
2. 類選擇器 class
3. <style>
   .類的名稱 {
   
   }
   </style>
   好處是可以多個(gè)標(biāo)簽復(fù)用類，選擇所有class屬性一致的標(biāo)簽，可以有多個(gè)用空格隔開
4. id選擇器
5. <style>
   #id名稱 {
   
   }
   </style>
   id必須保證全局唯一，一個(gè)id只能一個(gè)標(biāo)簽使用
6. 優(yōu)先級(jí)：id > class > 標(biāo)簽

2.高級(jí)選擇器

0. 層次選擇器
0. 后代選擇器：后代選擇器用于選取某元素的后代元素
1. 父元素 后代元素 {
   
   }
2. 子選擇器：子元素選擇器（Child selectors）只能選擇作為某元素直接/一級(jí)子元素的元素
3. body>p {
   
   }
4. 相鄰兄弟選擇器：相鄰兄弟選擇器（Adjacent sibling selector）可選擇緊接在另一元素后的元素，且二者有相同父元素
5. div+p
   {
   background-color:yellow;
   }
6. 通用選擇器：選取所有指定元素之后的相鄰兄弟元素
7. div~p
   {
   background-color:yellow;
   }

3.結(jié)構(gòu)偽類選擇器

偽類：就是有一些條件

1.選擇第一個(gè)子元素

ul li:first-child {

}

2.選擇最后一個(gè)子元素

ul li:last-child {

}

3.選擇當(dāng)前元素的父級(jí)元素的子元素的第一個(gè)，且是p，在本例中。這個(gè)是按照類型進(jìn)行選擇

p:nth-child(1) {

}

4.選中父元素下的p元素的第二個(gè)，這個(gè)是按照順序選擇

p:nth-of-type(1) {

}

4.屬性選擇器

屬性選擇器的格式
1.屬性名：存在id屬性的元素 a[id]{

}
2.屬性名=屬性值：a[id=first]{

}
注意：=是絕對(duì)等于   *=是包含這個(gè)元素
3.a中href中以http開頭的 a[href^=http]{

}
注意：可以使用正則表達(dá)式

五、美化網(wǎng)頁

1.為什么要美化

0. 有效的傳遞界面信息
1. 美化網(wǎng)頁吸引用戶
2. 凸顯頁面的主題
3. 提高用戶的體驗(yàn)

span標(biāo)簽：重點(diǎn)要突出的字使用span標(biāo)簽括起來

2.字體樣式

1.字體    font-family:字體1, 字體2,...;
2.字體大小  font-size:20px;
3.字體粗細(xì)  font-wigth:bold或者使用數(shù)字最大是900;
4.字體的顏色 color:顏色;
5.字體風(fēng)格  font-style:italic;
綜合寫法：
font:字體粗細(xì), 字體大小/字體行高, 字體, 字體顏色, 字體的;

3.文本樣式

1. 顏色   color
2. 文本對(duì)齊方式   text-slign:center;
3. 首行縮進(jìn) text-indent:2em;//1em代表一個(gè)字符
4. 行高   line-height:200px;行高和塊的高度一致，就可以上下居中
5. 下劃線  text-decoration: underline;
6. 中劃線  text-decoration: line-through;
7. 上劃線  text-decoration: overline;
8. 超鏈接偽類    
    a{
        默認(rèn)顏色
    }
    a:hover {
        鼠標(biāo)觸及的顏色
    }
    a:active {
        鼠標(biāo)點(diǎn)擊未釋放的顏色
    }
9. 文本陰影 text-shadow:顏色 水平偏移 垂直偏移 模糊半徑;

4.列表樣式

<style>
    li {
        list-style:nonoe;  //列表去掉點(diǎn)
    }
</style>

5.背景圖像應(yīng)用及漸變

背景圖片

background-image:url("path");
默認(rèn)是平鋪的
background-repeat: ;
background-position:x y;
綜合寫法：
background:背景顏色 url("") x方向位置 y方向位置 平鋪 

背景顏色漸變

六、盒子模型

1.什么是盒子

• margin：外邊距
• padding：內(nèi)邊距
• border：邊框
• 注意：body默認(rèn)會(huì)有一個(gè)外邊距

2.邊框

0. 邊框的粗細(xì)
1. 邊框的顏色
2. 邊框的樣式

<style>
    form{
     border: 1px red solid;   
    }
</style>

3.外邊距

綜合寫法：
margin:上 下 左 右;
外邊距的妙用：居中元素
margin:0 auto;居中 前提：外面的元素是個(gè)塊元素，塊元素有固定的寬度 

內(nèi)邊距一樣

盒子的計(jì)算方式，你這個(gè)元素到底多大?

元素的大小=margin +border + 內(nèi)容的寬度

4.圓角邊框

border-radius: 左上 右上 右下 左下;

5.陰影

box-shadow:陰影樣子, x偏移量, y偏移量, 模糊半徑, 陰影顏色;

七、浮動(dòng)

1.標(biāo)準(zhǔn)文檔流

自上而下的排布

行內(nèi)元素可以被包含在塊級(jí)元素中，反之不可以

2.display

0. block轉(zhuǎn)換成塊元素
1. inline-block行內(nèi)快元素，保持塊元素的性質(zhì)，但是可以內(nèi)聯(lián)，在一行
2. inline行內(nèi)元素
3. none不顯示元素

3.浮動(dòng)

1.浮動(dòng)：會(huì)使元素向左或向右移動(dòng)，其周圍的元素也會(huì)重新排列。

元素的水平方向浮動(dòng)，意味著元素只能左右移動(dòng)而不能上下移動(dòng)。

一個(gè)浮動(dòng)元素會(huì)盡量向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂?/span>

浮動(dòng)元素之后的元素將圍繞它。

浮動(dòng)元素之前的元素將不會(huì)受到影響。

如果圖像是右浮動(dòng)，下面的文本流將環(huán)繞在它左邊：

2.相鄰的浮動(dòng)元素：如果你把幾個(gè)浮動(dòng)的元素放到一起，如果有空間的話，它們將彼此相鄰。

3.清除浮動(dòng)：元素浮動(dòng)之后，周圍的元素會(huì)重新排列，為了避免這種情況，使用 clear 屬性。clear 屬性指定元素兩側(cè)不能出現(xiàn)浮動(dòng)元素。這樣既有浮動(dòng)的效果，也有塊元素的效果

clear:right;右側(cè)不允許有浮動(dòng)
clear:left;左側(cè)不允許有浮動(dòng)
clear:both;兩側(cè)都不允許有浮動(dòng)

float:right;右浮動(dòng)
float:left;左浮動(dòng)

4.父級(jí)元素邊框塌陷

浮動(dòng)后，元素不在父級(jí)元素里

解決方案：

0. 增加父級(jí)元素的高度
1. 在浮動(dòng)元素后增加一個(gè)空的div標(biāo)簽，清除浮動(dòng)
2. overflow，解決溢出問題，在父級(jí)元素中增加一個(gè)overflow屬性‘
3. 在父類添加一個(gè)偽類，:after
4. #father：after {
   content: '';
   diaplay: block;
   clear: both;
   }

5.對(duì)比

• display
• 方向不可控制
• float
• 浮動(dòng)起來，會(huì)脫離文檔標(biāo)準(zhǔn)流，所以要解決父級(jí)元素邊框塌陷問題

八、定位

1.相對(duì)定位

相對(duì)于自己原來的位置，進(jìn)行偏移

position: relative;
top: -20px;
botom: 20px;
left: 20px;
right: 20px;

相對(duì)定位的話，他原來的位置會(huì)被保留，不會(huì)脫離標(biāo)準(zhǔn)文檔流

2.絕對(duì)定位

0. 父級(jí)元素沒有定位的前提下，相對(duì)于瀏覽器定位
1. 父級(jí)元素有定位時(shí)，相對(duì)與父級(jí)元素

position: absolute;
top: 20px;
bottom: 20px;
left: 20px;
right: 20px;

絕對(duì)定位后，他不在文檔標(biāo)準(zhǔn)流，原來的位置不保留

3.固定定位

position: fixed;
top: 10px;
bottom: 10px;
left: 20 px;
right: 20px;

相對(duì)于瀏覽器的位置，固定不動(dòng)

4.z-index

就是把圖層置頂、置地

opacity:0.5;設(shè)置透明度

filter:alpha(opacity=0.5);

九、動(dòng)畫

什么是CSS3動(dòng)畫

• 動(dòng)畫是使元素從一種樣式逐漸變化為另一種樣式的效果。
• 您可以改變?nèi)我舛嗟臉邮饺我舛嗟拇螖?shù)。
• 請(qǐng)用百分比來規(guī)定變化發(fā)生的時(shí)間，或用關(guān)鍵詞 "from" 和 "to"，等同于 0% 和 100%。
• 0% 是動(dòng)畫的開始，100% 是動(dòng)畫的完成。
• 示例：
• @keyframes myfirst
  {
  0% {background: red;}
  25% {background: yellow;}
  50% {background: blue;}
  100% {background: green;}
  }
  
  @-webkit-keyframes myfirst /* Safari 與 Chrome */
  {
  0% {background: red;}
  25% {background: yellow;}
  50% {background: blue;}
  100% {background: green;}
  }

1.創(chuàng)建動(dòng)畫

@keyframes規(guī)則是創(chuàng)建動(dòng)畫，規(guī)則內(nèi)指定一個(gè)CSS樣式和動(dòng)畫將逐步從目前的樣式更改為新的樣式

示例：

@keyframes myfirst {
from {background: red;}
to {background: yellow;}
}

2.把動(dòng)畫綁定到一個(gè)選擇器上

使用@keyframes創(chuàng)建動(dòng)畫，把他綁定到一個(gè)選擇器上，否則動(dòng)畫不會(huì)有效果，指定至少把這兩個(gè)CSS3的動(dòng)畫屬性綁定向一個(gè)選擇器：
1.規(guī)定動(dòng)畫名稱
2.規(guī)定動(dòng)畫的時(shí)長(zhǎng)  不指定時(shí)長(zhǎng)，動(dòng)畫無效，因?yàn)槟J(rèn)的時(shí)長(zhǎng)為0

示例：

把myfirst動(dòng)畫綁定到div元素上，動(dòng)畫時(shí)長(zhǎng)5秒
div {
    animation: myfirst 5s;
}

3.CSS3動(dòng)畫的屬性

十、過度

1.過度

CSS3中，我們?yōu)榱颂砑幽撤N效果可以從一種樣式轉(zhuǎn)變到另一個(gè)的時(shí)候

2.如何工作

CSS3 過渡是元素從一種樣式逐漸改變?yōu)榱硪环N的效果。

要實(shí)現(xiàn)這一點(diǎn)，必須規(guī)定兩項(xiàng)內(nèi)容：

• 指定要添加效果的CSS屬性
• 指定效果的持續(xù)時(shí)間。

示例：

div {
transition: width 2s;
}

3.多項(xiàng)改變

div {
transition: width 2s, height 2s transfrom 2s;
}

4.過度屬性

十一、CSS32D轉(zhuǎn)換

1.轉(zhuǎn)換

CSS3 轉(zhuǎn)換可以對(duì)元素進(jìn)行移動(dòng)、縮放、轉(zhuǎn)動(dòng)、拉長(zhǎng)或拉伸。

2.如何工作

轉(zhuǎn)換的效果是讓某個(gè)元素改變形狀，大小和位置。

3.2D轉(zhuǎn)換

1.translate(): translate()方法，根據(jù)左(X軸)和頂部(Y軸)位置給定的參數(shù)，從當(dāng)前元素位置移動(dòng)。

示例：

div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}

2.rotate()：在一個(gè)給定度數(shù)順時(shí)針旋轉(zhuǎn)的元素。負(fù)值是允許的，這樣是元素逆時(shí)針旋轉(zhuǎn)。

示例：

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

3.scale()：該元素增加或減少的大小，取決于寬度（X軸）和高度（Y軸）的參數(shù)

示例:

-ms-transform:scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 標(biāo)準(zhǔn)語法 */

4.skew(): 包含兩個(gè)參數(shù)值，分別表示X軸和Y軸傾斜的角度，如果第二個(gè)參數(shù)為空，則默認(rèn)為0，參數(shù)為負(fù)表示向相反方向傾斜。

• skewX(<angle>);表示只在X軸(水平方向)傾斜。
• skewY(<angle>);表示只在Y軸(垂直方向)傾斜。

示例：

div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}

4.3D轉(zhuǎn)換

1.rotateX()：圍繞其在一個(gè)給定度數(shù)X軸旋轉(zhuǎn)的元素。

示例：

div
{
    transform: rotateX(120deg);
    -webkit-transform: rotateX(120deg); /* Safari 與 Chrome */
}

2.rotateY()：圍繞其在一個(gè)給定度數(shù)Y軸旋轉(zhuǎn)的元素。

示例：

div
{
    transform: rotateY(130deg);
    -webkit-transform: rotateY(130deg); /* Safari 與 Chrome */
}

3.轉(zhuǎn)換屬性

十二、彈性盒子

1.flex是什么

• flex是彈性布局，是一種非常流行的web頁面快速布局解決方案
• flex可以實(shí)現(xiàn)子元素在父元素中自動(dòng)伸縮，特別適合移動(dòng)端布局

2.flex術(shù)語

• 項(xiàng)目必須沿著主軸排列，所以布局的時(shí)候，第一件事就是確定好主軸
• 起始線與結(jié)束線，就是主軸的起點(diǎn)和終點(diǎn)，也就是兩端
• 交叉軸，依賴于主軸存在，不能單獨(dú)存在，垂直于主軸

3.容器屬性

4.項(xiàng)目屬性

5.創(chuàng)建flex容器和flex項(xiàng)目

• 給一個(gè)元素添加display: flex; 創(chuàng)建flex塊級(jí)容器，內(nèi)部的子元素自動(dòng)成為flex項(xiàng)目
• 或者給一個(gè)元素添加display: inline-flex; 創(chuàng)建flex行內(nèi)容器， 內(nèi)部子元素自動(dòng)成為flex項(xiàng)目

6.設(shè)置容器主軸方向與多行容器

1.創(chuàng)建容器屬性

1.flex-direction屬性值

2.flex-wrap屬性值

3.flex-flow屬性值

flex-flow: 主軸方向 多行容器

2.容器中項(xiàng)目對(duì)齊方式

1.主軸項(xiàng)目對(duì)齊方式 justify-content屬性

主軸上要有剩余空間對(duì)齊才有效

2.交叉軸上的項(xiàng)目對(duì)齊方式align-items

注意

• 單行容器中，交叉軸上只有一個(gè)項(xiàng)目，所有剩余空間不需要在項(xiàng)目間分配
• 因此沒有像主軸對(duì)齊的三個(gè)屬性：space-between，spcae-around，space-evenly

3.多行容器的項(xiàng)目對(duì)齊方式

屬性：align-content

注意：多行容器中，交叉軸上可能會(huì)有多個(gè)項(xiàng)目，剩余空間在項(xiàng)目之間分配才有意義

多行容器也只是只有一個(gè)主軸和一個(gè)交叉軸，只是在主軸上放不下了換行形成的

3.單個(gè)項(xiàng)目對(duì)齊方式

1.設(shè)置單個(gè)項(xiàng)目在交叉軸上的對(duì)齊方式

屬性：align-self

• 如果項(xiàng)目設(shè)置了高度，則stretch值無效
• baseline：除非全部 項(xiàng)目與基線對(duì)齊，否則效果與起始線對(duì)齊是相同的

4.單個(gè)項(xiàng)目的排列順序

1.屬性order

用來調(diào)整每個(gè)項(xiàng)目在主軸上排列順序

屬性值為0，默認(rèn)值按書寫順序顯式，屬性值為值越大越靠后顯示

5.單個(gè)項(xiàng)目的放大/縮小因子

1.設(shè)置項(xiàng)目在主軸 上的放大因子

flex-grow屬性

• 在主軸上存在剩余空間是，flex-grow才有效
• 該屬性的值，成為放大因子
• 常見屬性
• 0 默認(rèn)值，不放大，保持原值
• n 放大因子，正整數(shù)

2.設(shè)置項(xiàng)目在主軸上的縮小因子

flex-shrink屬性

• 在主軸上空間容納不下所有項(xiàng)目時(shí)，flex-shrink才有意義
• 該屬性的值名稱為最小因子，
• 1 默認(rèn)值，允許縮小適應(yīng)主軸空間變化
• 0 不縮小，保持原始大小
• n縮小因子，正整數(shù)

3.設(shè)置項(xiàng)目在主軸上的計(jì)算計(jì)準(zhǔn)尺寸

flex-basis屬性

• 再分配多余空間之前，項(xiàng)目暫居的主軸空間
• 瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間
• 該屬性會(huì)覆蓋項(xiàng)目原始大小
• 該屬性會(huì)被項(xiàng)目最小高度/最小寬度值覆蓋
• auto 默認(rèn)值項(xiàng)目原始大小
• px像素
• %百分比

優(yōu)先級(jí)：項(xiàng)目大小<flex-basis<min-width/height