CSS層疊樣式表

一、css的語(yǔ)法

什么是css？

層疊樣式表
命名規(guī)則：

使用字母、數(shù)字或下劃線(xiàn)和減號(hào)構(gòu)成，不要以數(shù)字開(kāi)頭
格式：

選擇器{屬性:值;屬性:值;屬性:值;....}

其中選擇器也叫選擇符
CSS中注釋
```
/* ... */
```

二、在HTML中如何使用css樣式（html中嵌入css的方式）

1、內(nèi)聯(lián)方式（行內(nèi)樣式）

就是在HTML的標(biāo)簽中使用style屬性來(lái)設(shè)置css樣式
格式： <html標(biāo)簽 style="屬性:值;屬性:值;....">被修飾的內(nèi)容</html標(biāo)簽>

<p style="color:blue;font-family:隸書(shū)">在HTML中如何使用css樣式</p>
特點(diǎn)：僅作用于本標(biāo)簽

2、內(nèi)部方式（內(nèi)嵌樣式）

就是在head標(biāo)簽中使用<style type="text/css">....</style>標(biāo)簽來(lái)設(shè)置css樣式
格式：

 <style type="text/css">
    ....css樣式代碼
 </style>

特點(diǎn)：作用于當(dāng)前整個(gè)頁(yè)面

3、外部導(dǎo)入方式（外部鏈入）

3.1 （推薦）就是在head標(biāo)簽中使用`<link/>`標(biāo)簽導(dǎo)入一個(gè)css文件，在作用于本頁(yè)面，實(shí)現(xiàn)css樣式設(shè)置

格式：

<link href="文件名.css" type="text/css" rel="stylesheet"/>

3.2 還可以使用import在style標(biāo)簽中導(dǎo)入css文件。

格式:

<style type="text/css">
    @import "style.css";
</style>

特點(diǎn)：作用于整個(gè)網(wǎng)站

4、倆種導(dǎo)入方式的區(qū)別:

link屬于html，而@import則屬于css

@import 不能寫(xiě)在內(nèi)嵌樣式的上方否則樣式無(wú)效

格式：

不生效
 <style type="text/css">
     div{
         width:200px;
     }
     @import '1.css'
 </style>
 下面的寫(xiě)法生效
 <style type="text/css">
 div{
     width:200px;
 }
 </style>
 <style type="text/css">
     @import '1.css'
 </style>

加載順序區(qū)別

加載頁(yè)面時(shí)，link標(biāo)簽引入的 CSS 被同時(shí)加載；@import引入的 CSS 將在頁(yè)面加載完畢后被加載。
兼容性區(qū)別

@import是 CSS2.1 才有的語(yǔ)法，故只可在 IE5+ 才能識(shí)別；link標(biāo)簽作為 HTML 元素，不存在兼容性問(wèn)題。

他們的優(yōu)先級(jí)：當(dāng)樣式?jīng)_突時(shí)，就是采用就近原則，是值css屬性離被修飾的內(nèi)容最近的為主。

若沒(méi)有樣式?jīng)_突則采用疊加效果。

三、**css2的選擇符：

1、html選擇符（標(biāo)簽選擇器）

就是把html標(biāo)簽作為選擇符使用
如 p{....} 網(wǎng)頁(yè)中所有p標(biāo)簽采用此樣式

h2{....}  網(wǎng)頁(yè)中所有h2標(biāo)簽采用此樣式

2、class類(lèi)選擇符 (使用點(diǎn).將自定義名（類(lèi)名）來(lái)定義的選擇符)（類(lèi)選擇器P）

定義： .類(lèi)名{樣式....} 匿名類(lèi)

其他選擇符名.類(lèi)名{樣式....}
使用：<html標(biāo)簽 class="類(lèi)名">...</html標(biāo)簽>

.mc{color:blue;} /* 凡是class屬性值為mc的都采用此樣式 */

p .ps{color:green;} /只有p標(biāo)簽中class屬性值為ps的才采用此樣式/

注意：類(lèi)選擇符可以在網(wǎng)頁(yè)中重復(fù)使用

3、Id選擇符(ID選擇器)

定義： #id名{樣式.....}
使用：<html標(biāo)簽 id="id名">...</html標(biāo)簽>

注意：id選擇符只在網(wǎng)頁(yè)中使用一次

選擇符的優(yōu)先級(jí)：從大到小 [ID選擇符]->[class選擇符]->[html選擇符]->[html屬性]

4、關(guān)聯(lián)選擇符（包含選擇符）

格式：選擇符1 選擇符2 選擇符3 ...{樣式....}
例如： table a{....} /*table標(biāo)簽里的a標(biāo)簽才采用此樣式*/

h1 p{color:red} /*只有h1標(biāo)簽中的p標(biāo)簽才采用此樣式*/

5、組合選擇符（選擇符組）

格式：選擇符1,選擇符2,選擇符3 ...{樣式....}

h3,h4,h5{color:green;} /*h3、h4和h5都采用此樣式*/

6、*通配符（全局選擇器）

說(shuō)明：

通配符的寫(xiě)法是“*”，其含義就是所有元素。

用法：

常用來(lái)重置樣式

*{ padding:0; margin:0;}

7、偽類(lèi)選(偽元素)擇符：

格式：標(biāo)簽名:偽類(lèi)名{樣式....}

 a:link {color: #FF0000; text-decoration: none}         /* 未訪(fǎng)問(wèn)的鏈接 */

 a:visited {color: #00FF00; text-decoration: none}      /* 已訪(fǎng)問(wèn)的鏈接 */

 a:hover {color: #FF00FF; text-decoration: underline} /* 鼠標(biāo)在鏈接上 */

 a:active {color: #0000FF; text-decoration: underline} /* 激活鏈接 */

為了簡(jiǎn)化代碼，可以把偽類(lèi)選擇符中相同的聲明提出來(lái)放在a選擇符中；

例如：

a{color:red;} a:hover{color:green;} 表示超鏈接的三種狀態(tài)都相同，只有鼠標(biāo)劃過(guò)變顏色。

偽類(lèi)（Pseudo classes）是選擇符的螺栓，用來(lái)指定一個(gè)或者與其相關(guān)的選擇符的狀態(tài)

8、屬性選擇器：

...

9、其他偽類(lèi)選擇器

...

優(yōu)先級(jí):行內(nèi)->css3選擇器->id->class->html->html屬性

四、 CSS3中的選擇器

關(guān)系選擇器：

div>p 選擇所有作為div元素的子元素p
div+p 選擇緊貼在div元素之后p元素
div~p 選擇div元素后面的所有兄弟元素p

屬性選擇器：

[attribute]選擇具有attribute屬性的元素。
[attribute=value]選擇具有attribute屬性且屬性值等于value的元素。
[attribute~=value]選擇具有attribute屬性且屬性值為一用空格分隔的字詞列表，其中一個(gè)等于value的元素。
[attribute|=value]選擇具有att屬性且屬性值為以val開(kāi)頭并用連接符"-"分隔的字符串的E元素。

div[class|="a"]    class="a-test"

[attibute^=value]匹配具有attribute屬性、且值以valule開(kāi)頭的E元素
[attribute$=value]匹配具有attribute屬性、且值以value結(jié)尾的E元素
[attribute*=value]匹配具有attribute屬性、且值中含有value的E元素
瀏覽器兼容性問(wèn)題：
不用擔(dān)心瀏覽器兼容問(wèn)題，也不用考慮IE瀏覽器版本問(wèn)題。

CSS 偽類(lèi)用于向某些選擇器添加特殊的效果。

結(jié)構(gòu)性偽類(lèi)選擇器：

偽類(lèi)選擇器（簡(jiǎn)稱(chēng)：偽類(lèi)）通過(guò)冒號(hào)來(lái)定義，它定義了元素的狀態(tài)，如點(diǎn)擊按下，點(diǎn)擊完成等，通過(guò)偽類(lèi)可以為元素的狀態(tài)修改樣式。

::first-letter設(shè)置對(duì)象內(nèi)的第一個(gè)字符的樣式。
::first-line設(shè)置對(duì)象內(nèi)的第一行的樣式。
:before設(shè)置在對(duì)象前（依據(jù)對(duì)象樹(shù)的邏輯結(jié)構(gòu)）發(fā)生的內(nèi)容。
:after設(shè)置在對(duì)象后（依據(jù)對(duì)象樹(shù)的邏輯結(jié)構(gòu)）發(fā)生的內(nèi)容。

span:before{
    content: '必須存在的屬性';
    display: block;
    border:1px solid red;
}
span:after{
    content: '必須存在的屬性';
    display: block;
    border:1px solid red;
}

:lang(language)匹配使用特殊語(yǔ)言的E元素。

:first-of-type匹配同類(lèi)型中的第一個(gè)同級(jí)兄弟元素
:last-of-type匹配同類(lèi)型中的最后一個(gè)同級(jí)兄弟元素表示其父元素下的最后一個(gè)指定類(lèi)型的元素。

:only-of-type匹配同類(lèi)型中的唯一的一個(gè)同級(jí)兄弟元素

:only-child匹配父元素僅有的一個(gè)子元素

:first-child()匹配父元素的最后一個(gè)子元素
:last-child()匹配父元素的最后一個(gè)子元素其父元素的最后一個(gè)子元素，且這個(gè)元素是css指定的元素，才可以生效

:nth-child(n)匹配父元素的第n個(gè)子元素

:nth-last-child(n)匹配同類(lèi)型中的倒數(shù)第n個(gè)同級(jí)兄弟元素

實(shí)例：

li:nth-child(2n){color:#f00;} /* 偶數(shù) */
li:nth-child(2n+1){color:#000;} /* 奇數(shù) */

child和type區(qū)別:

child所指定的必須為第一個(gè)或者最后一個(gè) 否則不生效但是type可以

:root匹配元素在文檔的根元素。在HTML中，根元素永遠(yuǎn)是HTML
:empty匹配沒(méi)有任何子元素（包括text節(jié)點(diǎn)）的元素
:not(selector)匹配不含有selector選擇符的元素

.demo li:not(:last-child) {
   border-bottom: 1px solid #ddd;
}
上述代碼的意思是：給該列表中除最后一項(xiàng)外的所有列表項(xiàng)加一條底邊線(xiàn)

*狀態(tài)偽類(lèi)選擇器

:link 設(shè)置超鏈接a在未被訪(fǎng)問(wèn)前的樣式。
:visited 設(shè)置超鏈接a在其鏈接地址已被訪(fǎng)問(wèn)過(guò)時(shí)的樣式
:active 設(shè)置元素在被用戶(hù)激活（在鼠標(biāo)點(diǎn)擊與釋放之間發(fā)生的事件）時(shí)的樣式
*:hover 設(shè)置元素在其鼠標(biāo)懸停時(shí)的樣式
*:focus 設(shè)置元素在其獲取焦點(diǎn)時(shí)的樣式
:target 匹配相關(guān)URL指向的E元素將錨點(diǎn)跳轉(zhuǎn)的代碼進(jìn)行設(shè)置

#my_md:target{}

:enabled 匹配用戶(hù)界面上處于可用狀態(tài)的元素
:disabled 匹配用戶(hù)界面上處于禁用狀態(tài)的元素
:checked 匹配用戶(hù)界面上處于選中狀態(tài)的元素

實(shí)例：

input:checked + span {
   background: #f00;
}
<input type="radio"><span></span>
input:checked + span:after {
   content: " 我被選中了";
}
<input type="radio" name="colour-group" value="0" /><span></span>

::selection 設(shè)置對(duì)象被選擇時(shí)的樣式

實(shí)例：

p::selection{background:#000;color:#f00;}
<p>你選中這段文字后，看看它們的文本顏色和背景色，就能明白::selection的作用。</p>
只能定義被選擇時(shí)的background-color，color及text-shadow(IE11尚不支持定義該屬性)。

5.!important 應(yīng)用優(yōu)先權(quán)

.test {important
color: #f00 !important;
color: #000;
}

偽類(lèi)就是創(chuàng)建了一個(gè)假的類(lèi)名；偽元素就是創(chuàng)建了一個(gè)假的元素標(biāo)簽。

同樣舉例說(shuō)明偽元素（就是創(chuàng)建了假的元素）：如讓<p>啊啦啦啦</p>里面的啊變顏色
我們的一般做法是<p><span>啊</span>啦啦啦</p>然后span{color:red}
但是用偽元素就不用創(chuàng)建新元素span了,直接p::first-letter{color:red}就可以搞定了是不是很爽啊，相當(dāng)于創(chuàng)建了一個(gè)假的元素span然而實(shí)際并沒(méi)有創(chuàng)建

======================================================================================

五、CSS中常用的屬性：

1、color顏色屬性：

A. color 英文單詞

{color:red;}

B. 十六進(jìn)制

{color:#00FF00;}

C. HSL顏色: 通過(guò)對(duì)色調(diào)(H)、飽和度(S)、亮度(L)三個(gè)顏色通道的變化以及它們相互之間的疊加來(lái)得到各式各樣的顏色.

background-color: hsl(240,100%,50%);color:white；

D. HSLA顏色: 色調(diào)(H)、飽和度(S)、亮度(L)、透明度(A)；

background-color: hsla(0,100%,50%,0.2);

*E. RGB顏色: 紅(R)、綠(G)、藍(lán)(B)三個(gè)顏色通道的變化

background-color: rgba(200,100,0);

F. RGBA顏色: 紅(R)、綠(G)、藍(lán)(B)、透明度(A)

background-color: rgba(0,0,0,0.5);

*G. 圖片透明度的設(shè)置 img.opacity{ opacity:0.25;}

兼容IE8 filter:alpha(opacity=100);

2、字體屬性： font

font
*font-size: 字體大小：20px，60%基于父對(duì)象的百分比取值
*font-family：字體：宋體，Arial
font-style： normal正常；italic斜體； oblique傾斜的字體
*font-weight：字體加粗：bold
font-variant: small-caps 小型的大寫(xiě)字母字體
font-stretch: [了解]文字的拉伸是相對(duì)于瀏覽器顯示的字體的正常寬度（大部分瀏覽器不支持）。

<' font-style '>：指定文本字體樣式
<' font-variant '>：指定文本是否為小型的大寫(xiě)字母
<' font-weight '>：指定文本字體的粗細(xì)
<' font-size '>：指定文本字體尺寸
<' line-height '>：指定文本字體的行高 tvls
<' font-family '>：指定文本使用某個(gè)字體或字體序列
且font-size和font-family是不可忽略

3、文本屬性：

text-indent: 首行縮進(jìn)：2em text-indent:30px;
text-overflow：文本的溢出是否使用省略標(biāo)記（...）。clip|ellipsis（顯示省略標(biāo)記）
*text-align: 文本的位置：left center right
text-transform：對(duì)象中的文本的大小寫(xiě)：capitalize(首字母)|uppercase大寫(xiě)|lowercase小寫(xiě)
*text-decoration: 字體畫(huà)線(xiàn)：none無(wú)、underline下畫(huà)線(xiàn)，line-through貫穿線(xiàn)
text-decoration-line：[了解]文本裝飾線(xiàn)條的位置（瀏覽器不兼容）

*text-shadow: 文本的文字是否有陰影及模糊效果
vertical-align: 文本的垂直對(duì)齊方式 middle居中
direction：文字流方向。ltr | rtl

white-space:nowrap; /* 強(qiáng)制在同一行內(nèi)顯示所有文本*/

*letter-spacing: 文字或字母的間距
word-spacing：?jiǎn)卧~間距
*line-height：行高
*color：字體顏色
word-break:break-all;單詞換行

4、*邊框：

border:寬度 樣式 顏色;
border-color;
border-style; 邊框樣式：solid實(shí)現(xiàn)，dotted點(diǎn)狀線(xiàn)，dashed虛線(xiàn)
border-width:
border-left-color;
border-left-style;
border-left-width:
...
CSS3的樣式
border-radius：圓角處理
box-shadow: 設(shè)置或檢索對(duì)象陰影
三角
div{
    border: 14px solid #FFF;
    width:0;
    height: 0;
    border-bottom-color:red;
}

5、背景屬性：background

*background-color: 背景顏色
*background-image: 背景圖片
*background-repeat：是否重復(fù)，如何重復(fù)?(平鋪)
*background-position：定位

center：背景圖像橫向和縱向居中。
left：背景圖像在橫向上填充從左邊開(kāi)始。
right：背景圖像在橫向上填充從右邊開(kāi)始。
top：背景圖像在縱向上填充從頂部開(kāi)始。
bottom：背景圖像在縱向上填充從底部開(kāi)始。

background-attachment：[??t?t?m?nt] 是否固定背景，

scroll:默認(rèn)值。背景圖像是隨對(duì)象內(nèi)容滾動(dòng)
fixed:背景圖像固定

css3的屬性

*background-size: 背景大小，如 background-size:100px 140px;
多層背景：
background:url(test1.jpg) no-repeat scroll 10px 20px,url(test2.jpg) no-repeat scroll 50px 60px,url(test3.jpg) no-repeat scroll 90px 100px;
background-origin:content-box,content-box,content-box;
background-clip:padding-box,padding-box,padding-box;
background-size:50px 60px,50px 60px,50px 60px;

6、*內(nèi)補(bǔ)白（內(nèi)補(bǔ)丁）

padding：檢索或設(shè)置對(duì)象四邊的內(nèi)部邊距,如padding:10px; padding:5px 10px;
padding-top：檢索或設(shè)置對(duì)象頂邊的內(nèi)部邊距
padding-right：檢索或設(shè)置對(duì)象右邊的內(nèi)部邊距
padding-bottom：檢索或設(shè)置對(duì)象下邊的內(nèi)部邊距
padding-left：檢索或設(shè)置對(duì)象左邊的內(nèi)部邊距
box-sizing: border-box;

7、*外補(bǔ)白（外補(bǔ)丁）

margin：檢索或設(shè)置對(duì)象四邊的外延邊距,如 margin:10px; margin:5px auto;
margin-top：檢索或設(shè)置對(duì)象頂邊的外延邊距
margin-right：檢索或設(shè)置對(duì)象右邊的外延邊距
margin-bottom：檢索或設(shè)置對(duì)象下b邊的外延邊距
margin-left：檢索或設(shè)置對(duì)象左邊的外延邊距

8、Position定位

*position: 定位方式：absolute(絕對(duì)定位)、fixed(固定)（relative定位參考，可對(duì)內(nèi)部相對(duì)absolute定位）
*z-index: 層疊順序，值越大越在上方。
*top: 檢索或設(shè)置對(duì)象與其最近一個(gè)定位的父對(duì)象頂部相關(guān)的位置
right: 檢索或設(shè)置對(duì)象與其最近一個(gè)定位的父對(duì)象右邊相關(guān)的位置
bottom: 檢索或設(shè)置對(duì)象與其最近一個(gè)定位的父對(duì)象下邊相關(guān)的位置
*left: 檢索或設(shè)置對(duì)象與其最近一個(gè)定位的父對(duì)象左邊相關(guān)的位置

設(shè)置div相對(duì)于瀏覽器居中顯示

position:absolute;
left:0;
top:0;
bottom:0;
right: 0;
margin: auto;

9、Layout布局

    與display屬性不同，此屬性為隱藏的對(duì)象保留其占據(jù)的物理空間

clip: 檢索或設(shè)置對(duì)象的可視區(qū)域。區(qū)域外的部分是透d明的。 rect(上-右-下-左)

    如：clip:rect(auto 50px 20px auto);上和左不裁剪，右50，下20.

*overflow: 超出隱藏：hidden，visible：不剪切內(nèi)容
overflow-x：內(nèi)容超過(guò)其指定寬度時(shí)如何管理內(nèi)容: visible | hidden | scroll | auto
overflow-y：內(nèi)容超過(guò)其指定高度時(shí)如何管理內(nèi)容

圖片格式（了解）

png 常用的網(wǎng)絡(luò)傳輸格式，開(kāi)發(fā)中用的最多的格式 HTML常用，移動(dòng)開(kāi)發(fā)（Android，IOS，WP）,這個(gè)格式文件失真率低支持透明像素，相對(duì)來(lái)說(shuō)占用空間比較多
jpg 比較常用的圖片格式，壓縮性能比較高，不支持透明像素失真率比較高
gif 動(dòng)態(tài)圖片，不透明的，占用空間比較高
psd Photoshop的原圖，PS超級(jí)大，但是可以保留圖片原始所有資料
webp Google定義的，它集合了png和jpg的優(yōu)點(diǎn) 支持透明像素，空間占用低

盒子模型

css定義所有的元素都可以擁有像盒子一樣的外形和平面空間，即都包含邊框（border)、外邊距(margin)、內(nèi)邊距(padding)、內(nèi)容區(qū)(content)。
計(jì)算公式：
寬 =左右margin+左右border+左右padding+內(nèi)容width
高 =上下margin+上下border+上下padding+內(nèi)容height

怪異盒子模型

/* 切換盒子模型計(jì)算方式
 *
 *  從邊框左邊到邊框右邊之間的距離  才是width
 *      計(jì)算寬度非常方便
 *
 */
box-sizing: border-box;

新增CSS3選擇器及屬性只需在選擇器或?qū)傩郧凹由舷鄬?duì)應(yīng)的瀏覽器前綴即可

-webkit- Chrome
-moz- FF
-ms- IE
-o- Opera

10、用戶(hù)界面 User Interface

*cursor 鼠標(biāo)指針采用何種系統(tǒng)預(yù)定義的光標(biāo)形狀。pointer小手，url自定義

zoom 設(shè)置或檢索對(duì)象的縮放比例： normal|5倍|200%百分比
box-sizing 設(shè)置或檢索對(duì)象的盒模型組成模式。content-box | border-box

content-box： padding和border不被包含在定義的width和height之內(nèi)。
border-box： padding和border被包含在定義的width和height之內(nèi)。

resize 設(shè)置或檢索對(duì)象的區(qū)域是否允許用戶(hù)縮放，調(diào)節(jié)元素尺寸大小。

none：不允許用戶(hù)調(diào)整元素大小。
both：用戶(hù)可以調(diào)節(jié)元素的寬度和高度。
horizontal：用戶(hù)可以調(diào)節(jié)元素的寬度
vertical：用戶(hù)可以調(diào)節(jié)元素的高度。

outline 復(fù)合屬性：設(shè)置或檢索對(duì)象外的線(xiàn)條輪廓
outline-width設(shè)置或檢索對(duì)象外的線(xiàn)條輪廓的寬度
outline-style設(shè)置或檢索對(duì)象外的線(xiàn)條輪廓的樣式
outline-color設(shè)置或檢索對(duì)象外的線(xiàn)條輪廓的顏色
outline-offset設(shè)置或檢索對(duì)象外的線(xiàn)條輪廓偏移位置的數(shù)值
nav-index設(shè)置或檢索對(duì)象的導(dǎo)航順序。
nav-up設(shè)置或檢索對(duì)象的導(dǎo)航方向。
nav-right設(shè)置或檢索對(duì)象的導(dǎo)航方向。

11、表格相關(guān)屬性：

table-layout 設(shè)置或檢索表格的布局算法
border-collapse 設(shè)置或檢索表格的行和單元格的邊是合并在一起還是按照標(biāo)準(zhǔn)的HTML樣式分開(kāi) separate | collapse
border-spacing 設(shè)置或檢索當(dāng)表格邊框獨(dú)立時(shí)，行和單元格的邊框在橫向和縱向上的間距
caption-side 設(shè)置或檢索表格的caption對(duì)象是在表格的那一邊 top | right | bottom | left
empty-cells 設(shè)置或檢索當(dāng)表格的單元格無(wú)內(nèi)容時(shí)，是否顯示該單元格的邊框 hide | show

12、過(guò)渡 Transition:

transition 檢索或設(shè)置對(duì)象變換時(shí)的過(guò)渡效果
transition-property 檢索或設(shè)置對(duì)象中的參與過(guò)渡的屬性
transition-duration 檢索或設(shè)置對(duì)象過(guò)渡的持續(xù)時(shí)間
transition-timing-function 檢索或設(shè)置對(duì)象中過(guò)渡的類(lèi)型
transition-delay 檢索或設(shè)置對(duì)象延遲過(guò)渡的時(shí)間

13、動(dòng)畫(huà) Animation

animation 檢索或設(shè)置對(duì)象所應(yīng)用的動(dòng)畫(huà)特效
animation-name 檢索或設(shè)置對(duì)象所應(yīng)用的動(dòng)畫(huà)名稱(chēng)
animation-duration 檢索或設(shè)置對(duì)象動(dòng)畫(huà)的持續(xù)時(shí)間
animation-timing-function 檢索或設(shè)置對(duì)象動(dòng)畫(huà)的過(guò)渡類(lèi)型
animation-delay 檢索或設(shè)置對(duì)象動(dòng)畫(huà)延遲的時(shí)間
animation-iteration-count 檢索或設(shè)置對(duì)象動(dòng)畫(huà)的循環(huán)次數(shù)
animation-direction 檢索或設(shè)置對(duì)象動(dòng)畫(huà)在循環(huán)中是否反向運(yùn)動(dòng)
animation-play-state 檢索或設(shè)置對(duì)象動(dòng)畫(huà)的狀態(tài)
animation-fill-mode 檢索或設(shè)置對(duì)象動(dòng)畫(huà)時(shí)間之外的狀態(tài)

14、2D變換 2D Transform

transform 檢索或設(shè)置對(duì)象的變換
transform-origin 檢索或設(shè)置對(duì)象中的變換所參照的原點(diǎn)

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

CSS

CSS層疊樣式表

一、css的語(yǔ)法

二、在HTML中如何使用css樣式（html中嵌入css的方式）

1、內(nèi)聯(lián)方式（行內(nèi)樣式）

2、內(nèi)部方式（內(nèi)嵌樣式）

3、外部導(dǎo)入方式（外部鏈入）

3.1 （推薦）就是在head標(biāo)簽中使用<link/>標(biāo)簽導(dǎo)入一個(gè)css文件，在作用于本頁(yè)面，實(shí)現(xiàn)css樣式設(shè)置

3.2 還可以使用import在style標(biāo)簽中導(dǎo)入css文件。

4、倆種導(dǎo)入方式的區(qū)別:

三、**css2的選擇符：

1、html選擇符（標(biāo)簽選擇器）

2、class類(lèi)選擇符 (使用點(diǎn).將自定義名（類(lèi)名）來(lái)定義的選擇符)（類(lèi)選擇器P）

3、Id選擇符(ID選擇器)

4、關(guān)聯(lián)選擇符（包含選擇符）

5、組合選擇符（選擇符組）

6、*通配符（全局選擇器）

7、偽類(lèi)選(偽元素)擇符：

例如：

8、屬性選擇器：

9、其他偽類(lèi)選擇器

優(yōu)先級(jí):行內(nèi)->css3選擇器->id->class->html->html屬性

四、 CSS3中的選擇器

關(guān)系選擇器：

屬性選擇器：

結(jié)構(gòu)性偽類(lèi)選擇器：

child和type區(qū)別:

*狀態(tài)偽類(lèi)選擇器

5.!important 應(yīng)用優(yōu)先權(quán)

偽類(lèi)就是創(chuàng)建了一個(gè)假的類(lèi)名；偽元素就是創(chuàng)建了一個(gè)假的元素標(biāo)簽。

五、CSS中常用的屬性：

1、color顏色屬性：

2、字體屬性： font

3、文本屬性：

4、*邊框：

5、背景屬性：background

css3的屬性

6、*內(nèi)補(bǔ)白（內(nèi)補(bǔ)丁）

7、*外補(bǔ)白（外補(bǔ)丁）

8、Position定位

設(shè)置div相對(duì)于瀏覽器居中顯示

9、Layout布局

盒子模型

怪異盒子模型

新增CSS3選擇器及屬性只需在選擇器或?qū)傩郧凹由舷鄬?duì)應(yīng)的瀏覽器前綴即可

10、用戶(hù)界面 User Interface

11、表格相關(guān)屬性：

12、過(guò)渡 Transition:

13、動(dòng)畫(huà) Animation

14、2D變換 2D Transform

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

一、css的語(yǔ)法

二、在HTML中如何使用css樣式（html中嵌入css的方式）

1、內(nèi)聯(lián)方式（行內(nèi)樣式）

3、外部導(dǎo)入方式（外部鏈入）

3.1 （推薦）就是在head標(biāo)簽中使用`<link/>`標(biāo)簽導(dǎo)入一個(gè)css文件，在作用于本頁(yè)面，實(shí)現(xiàn)css樣式設(shè)置

3.2 還可以使用import在style標(biāo)簽中導(dǎo)入css文件。

4、倆種導(dǎo)入方式的區(qū)別:

1、html選擇符（標(biāo)簽選擇器）

2、class類(lèi)選擇符 (使用點(diǎn).將自定義名（類(lèi)名）來(lái)定義的選擇符)（類(lèi)選擇器P）

3、Id選擇符(ID選擇器)

6、*通配符（全局選擇器）

9、其他偽類(lèi)選擇器

偽類(lèi)就是創(chuàng)建了一個(gè)假的類(lèi)名；偽元素就是創(chuàng)建了一個(gè)假的元素標(biāo)簽。

五、CSS中常用的屬性：

1、color顏色屬性：

2、字體屬性： font

3、文本屬性：

4、*邊框：

5、背景屬性：background

6、*內(nèi)補(bǔ)白（內(nèi)補(bǔ)丁）

7、*外補(bǔ)白（外補(bǔ)丁）

8、Position定位

9、Layout布局

12、過(guò)渡 Transition:

13、動(dòng)畫(huà) Animation

14、2D變換 2D Transform