柚子快報(bào)激活碼778899分享：前端 CSS3基本語(yǔ)法
柚子快報(bào)激活碼778899分享：前端 CSS3基本語(yǔ)法
文章目錄
一、CSS引入方式二、選擇器1、標(biāo)簽選擇器2、類選擇器3、id選擇器4、通配符選擇器
三、字體操作1、字體大小2、字體粗細(xì)3、字體樣式（是否傾斜）4、字體修改常見字體系列
修改字體系列語(yǔ)法
四、文本操作1、文本縮進(jìn)2、文本水平對(duì)齊方式3、文本修飾4、文本水平居中總結(jié)**text-align： center;**5、文本水平居中方法margin
五、行高font連寫
六、顏色常見取值七、選擇器進(jìn)階1、后代選擇器2、子代選擇器3、并集選擇器4、交集選擇器
八、簡(jiǎn)寫語(yǔ)法（emmet語(yǔ)法）九、hover偽類選擇器十、背景相關(guān)背景屬性的連寫
十一、元素顯示模式1、塊級(jí)元素2、行內(nèi)塊元素3、元素顯示模式轉(zhuǎn)化
拓展、HTML嵌套規(guī)范
一、CSS引入方式
內(nèi)嵌式
s
t
y
l
e
style
style放在
h
e
a
d
head
head中外聯(lián)式 類似分文件編寫，需要使用
l
i
n
k
link
link語(yǔ)法引用
.
c
s
s
.css
.css文件
行內(nèi)式 不推薦
二、選擇器
1、標(biāo)簽選擇器
2、類選擇器
3、id選擇器
一般與js搭配使用
4、通配符選擇器
找到所有的標(biāo)簽
三、字體操作
1、字體大小
2、字體粗細(xì)
常用：
普通 normal加粗 bold
3、字體樣式（是否傾斜）
普通 normal傾斜 italic
4、字體修改
常見字體系列
sans-serif 無(wú)襯線字體serif 襯線字體monospace 等寬字體
修改字體系列語(yǔ)法
渲染規(guī)則： （1）從左往右按順序查找，找到第一個(gè)電腦有的字體使用 （2）如果都不支持，則按最后的字體系列默認(rèn)值使用注意 如果字體名稱中存在多個(gè)單詞，推薦使用引號(hào)包裹。
四、文本操作
1、文本縮進(jìn)
em指font-size大小
2、文本水平對(duì)齊方式
注意： 若需要給文本水平居中，text-align需要給文本的父元素設(shè)置。
3、文本修飾
underline 下劃線line-through 刪除線overline 上劃線none 無(wú)裝飾線 注意： 開發(fā)中會(huì)使用text-decoration: none;清除a標(biāo)簽?zāi)J(rèn)的下劃線
4、文本水平居中總結(jié)text-align： center;
能讓哪些元素水平居中： （1）文本 （2）span標(biāo)簽、a標(biāo)簽 （3）input標(biāo)簽、img標(biāo)簽注意： 如果需要讓以上元素水平居中，需要給以上元素的父元素設(shè)置
5、文本水平居中方法margin
是將div、p、h（大盒子）水平居中的方法
margin： 0 auto;
注意： （1）想讓誰(shuí)水平居中，就給誰(shuí)里面設(shè)置 （2）margin：0 auto一般針對(duì)于有固定寬度的盒子，大盒子沒有設(shè)置固定寬度，此時(shí)會(huì)默認(rèn)占滿父元素的寬度。
五、行高
控制行間距
注意 （1）使用line-height：文字父元素高度，可以使得單行文本垂直居中。 （2）line-height：1；可以消除上下間距
font連寫
六、顏色常見取值
關(guān)鍵詞rbg表示法： 紅綠藍(lán)三原色，每一項(xiàng)取值范圍0~255rbga表示法： 紅綠藍(lán)三原色+a表示透明度，取值范圍0~1十六進(jìn)制表示法
七、選擇器進(jìn)階
1、后代選擇器
語(yǔ)法 選擇器1 選擇器2{CSS}結(jié)果： 在選擇器1找到的標(biāo)簽的兒子、孫子……中，找到所有滿足選擇器2的標(biāo)簽
2、子代選擇器
語(yǔ)法 選擇器1>選擇器2{CSS}結(jié)果 在選擇器1所找到的標(biāo)簽的子代中，找到滿足選擇器2的標(biāo)簽
3、并集選擇器
語(yǔ)法 選擇器1，選擇器2{CSS}結(jié)果 找到同時(shí)滿足任意一個(gè)選擇器的元素
4、交集選擇器
語(yǔ)法 選擇器1選擇器2{CSS}結(jié)果 找到同時(shí)滿足兩個(gè)選擇器的元素
八、簡(jiǎn)寫語(yǔ)法（emmet語(yǔ)法）
九、hover偽類選擇器
選中鼠標(biāo)懸停在元素上的狀態(tài)，設(shè)置樣式語(yǔ)法 選擇器 ： hover{CSS}
十、背景相關(guān)
background-color 背景顏色background-image 背景圖片background-repeat 背景平鋪 （1）repeat x，y方向都平鋪 （2）no-repeat 不平鋪 （3）repeat-x 沿著水平方向平鋪 （4）repeat-y 沿著垂直方向平鋪background-position 背景位置 可使用方位名詞或者數(shù)字+px
背景屬性的連寫
background: clor image repeat position
十一、元素顯示模式
1、塊級(jí)元素
屬性： display：block顯示特點(diǎn)： （1）獨(dú)占一行 （2）寬度是父元素的寬度，高度由內(nèi)容撐開 （3）可以設(shè)置寬高
2、行內(nèi)塊元素
屬性： display：inline-block顯示特點(diǎn)： （1）一行可顯示多個(gè) （2）可以設(shè)置寬高
3、元素顯示模式轉(zhuǎn)化
拓展、HTML嵌套規(guī)范
塊級(jí)元素基本可以任意嵌套元素，但是： 特殊的，p標(biāo)簽中不可以嵌套塊級(jí)元素
柚子快報(bào)激活碼778899分享：前端 CSS3基本語(yǔ)法
推薦閱讀
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點(diǎn)和立場(chǎng)。
轉(zhuǎn)載請(qǐng)注明，如有侵權(quán)，聯(lián)系刪除。
Vevor工具出海棧
