H5逆戰(zhàn)202主講人：Ghostbackground-color：背景顏色background-image：背景圖片background-repeat：背景圖片的平鋪方式background-position：背景圖片的位置background-attachment：背景圖隨滾動(dòng)條的移動(dòng)方式

練習(xí)：利用滾動(dòng)條移動(dòng)方式實(shí)現(xiàn)視覺差網(wǎng)頁CSS背景樣式border-style：邊框的樣式border-width：邊框的大小border-color：邊框的顏色

注：針對(duì)某一條邊進(jìn)行單獨(dú)設(shè)置

練習(xí)：利用邊框?qū)崿F(xiàn)三角形CSS邊框樣式font-family：字體類型

英文字體：Arial,'TimesNewRoman'

中文字體：微軟雅黑,宋體

中文字體的英文名稱

微軟雅黑:'MicrosoftYaHei'

宋體:SimSun

CSS文字樣式

襯線體與非襯線體

注意事項(xiàng)

1.設(shè)置多字體方式 2.引號(hào)的問題

CSS文字樣式font-size：字體大小

默認(rèn)大小

寫法

注：字體大小一般為偶數(shù)。

CSS文字樣式屬性取值字體大小

xx-small最小x-small較小small小medium

正常(默認(rèn)值)large大x-large較大xx-large最大font-weight：字體粗細(xì)

兩種模式

寫法

font-style：字體樣式

兩種模式

color：字體顏色

練習(xí)：通過文字修飾完成個(gè)人簡介

CSS文字樣式text-decoration：文本裝飾

取值

添加多個(gè)

text-transform：文本大小寫

取值

CSS段落樣式text-indent：文本縮進(jìn)

首行縮進(jìn) em單位

text-align：文本對(duì)齊方式

取值

CSS段落樣式line-height：定義行高

定義

默認(rèn)

取值

CSS段落樣式letter-spacing：定義字間距

word-spacing:定義詞間距(針對(duì)英文)

強(qiáng)制折行:(針對(duì)英文) 1.word-break:break-all;(非常強(qiáng)烈的折行) 2.word-wrap:break-word;(不是那么強(qiáng)烈的折行)

練習(xí)：完善個(gè)人簡介

CSS段落樣式一個(gè)CSS屬性只控制一種樣式，叫做單一樣式。

一個(gè)CSS屬性控制多種樣式，叫做復(fù)合樣式。

復(fù)合樣式

background border font

注：盡量不要混寫，如果非要混寫，那么一定要先寫復(fù)合樣式再寫單一樣式。

CSS復(fù)合樣式

ID選擇器

css:#elem{} html:id=“elem”

注： 1.在一個(gè)頁面中，ID值是唯一的。 2.命名規(guī)范，

字母_-數(shù)字（命名的第一位不能是數(shù)字）。 3.命名方式，駝峰式、下劃線式、短線式。

CSS選擇器

CLASS選擇器

css:.elem{} html:class=“elem”

注： 1.class選擇器是可以復(fù)用的。 2.可以添加多個(gè)class樣式。 3.多個(gè)樣式的時(shí)候，樣式的優(yōu)先級(jí)根據(jù)CSS決定，而不是class屬性中的順序。 4.標(biāo)簽+類的寫法

CSS選擇器標(biāo)簽選擇器

css:div{} html:<div>

群組選擇器

css:div,p,span{}

通配選擇器

*{}CSS選擇器層次選擇器

后代:MN

父子:M>N

兄弟:M~N

相鄰:M+NCSS選擇器屬性選擇器

CSS選擇器選擇器說明M[attr]M元素選擇指定為attr屬性的集合M[attr=value]M元素選擇指定為attr屬性和value值的集合M[attr*=value]M元素選擇指定為attr屬性并且包含值為value的集合M[attr^=value]M元素選擇指定為attr屬性并且起始值為value的集合M[attr$=value]M元素選擇指定為attr屬性并且結(jié)束值為value的集合M[attr1][attr2]M元素選擇滿足多個(gè)屬性的集合偽類選擇器

CSS偽類用于向某些元素添加特殊的效果。一般用于初始樣式添加不上的時(shí)候，用偽類來添加。

:link、:visited、:hover、:active

注： 1.linkvisited只能給a標(biāo)簽加，hover和active可以給所有的標(biāo)簽加。 2.如果四個(gè)偽類都生效，一定要注意順序:LVHA。 3.一般網(wǎng)站只這樣去設(shè)置：a{}a:hover{}。

CSS選擇器偽類選擇器

:after、:before

:checked、:disabled :focus

CSS選擇器偽類選擇器

:nth-of-type()、:nth-child():first-of-type、:first-child:last-of-type、:last-child :only-of-type、:only-child

CSS選擇器文字相關(guān)的樣式可以被繼承

布局相關(guān)的樣式不能被繼承

注：inherit值

CSS樣式繼承相同樣式優(yōu)先級(jí)

當(dāng)設(shè)置相同樣式時(shí)，后面的優(yōu)先級(jí)較高，但不建議出現(xiàn)重復(fù)設(shè)置樣式的情況。

內(nèi)部樣式與外部樣式

內(nèi)部樣式與外部樣式優(yōu)先級(jí)相同，如果都設(shè)置了相同樣式，那么后寫的引入方式優(yōu)先級(jí)高。

單一樣式優(yōu)先級(jí)

style行間>id>class>tag>*>繼承

CSS優(yōu)先級(jí)

!important

提升樣式優(yōu)先級(jí)，非規(guī)范方式，不建議使用。

標(biāo)簽+類與單類

群組優(yōu)先級(jí)

群組選擇器與單一選擇器的優(yōu)先級(jí)相同，靠后寫的優(yōu)先級(jí)高。

CSS優(yōu)先級(jí)層次優(yōu)先級(jí)

1.權(quán)重比較

2.約分比較

CSS優(yōu)先級(jí)

注： 1.背景顏色會(huì)填充到margin以內(nèi)的區(qū)域。 2.文字會(huì)在content區(qū)域。 3.padding不能出現(xiàn)負(fù)值，margin是可以出現(xiàn)負(fù)值。CSS盒子模型

box-sizing

box-sizing屬性允許您以特定的方式定義匹配某個(gè)區(qū)域的特定元素。取值為content-box（默認(rèn)值）|border-box。

CSS盒子模型

margin疊加

當(dāng)給兩個(gè)盒子同時(shí)添加上下外邊距的時(shí)候，就會(huì)出現(xiàn)疊加的問題。這個(gè)問題，只在上下有，左右是沒有這個(gè)疊加問題的。

解決方案：

1.BFC規(guī)范 2.想辦法只給一個(gè)元素添加間距。

CSS盒子模型

margin傳遞

margin傳遞的問題只會(huì)出現(xiàn)在嵌套的結(jié)構(gòu)中，且只有margin-top會(huì)有傳遞的問題，其它三個(gè)方向是沒有傳遞問題的。

解決方案：

1.BFC規(guī)范 2.給父容器加邊框。 3.margin換成padding。

CSS盒子模型

margin自適應(yīng)居中

不設(shè)置content的現(xiàn)象

練習(xí)：創(chuàng)建多個(gè)嵌套的盒子

CSS盒子模型按類型

block:塊

inline:內(nèi)聯(lián)

inline-block:內(nèi)聯(lián)塊

標(biāo)簽分類按顯示

替換元素:瀏覽器根據(jù)元素的標(biāo)簽和屬性，來決定元素的具體顯示內(nèi)容。

非替換元素:將內(nèi)容直接告訴瀏覽器，將其顯示出來。

標(biāo)簽分類

display

block inline inline-block none

注：display:none與visibility:hidden區(qū)別

顯示框類型塊標(biāo)簽可以嵌套內(nèi)聯(lián)標(biāo)簽

塊標(biāo)簽不一定能嵌套塊標(biāo)簽

內(nèi)聯(lián)標(biāo)簽不能嵌套塊標(biāo)簽

a標(biāo)簽是一個(gè)例外

標(biāo)簽嵌套規(guī)范

overflow visible:默認(rèn) hidden scroll auto x軸、y軸

溢出隱藏

opacityrgbacursor default:默認(rèn)

自定義鼠標(biāo)樣式

透明度與手勢(shì)

min-width、max-widthmin-height、max-height

注：強(qiáng)化對(duì)百分比單位的理解

最大、最小寬高有些標(biāo)簽有默認(rèn)樣式，有些標(biāo)簽沒有默認(rèn)樣式。沒有默認(rèn)樣式：

div、