day22-CSS3-基礎(chǔ)一
一幸缕、CSS基礎(chǔ)
1.什么是CSS
- CSS又叫層疊樣式表(簡稱樣式表，目前使用的CSS3)
- CSS是web標(biāo)準(zhǔn)中的表現(xiàn)標(biāo)準(zhǔn)疫铜，它負(fù)責(zé)的是網(wǎng)頁中內(nèi)容的樣式和布局
2.怎么寫CSS
- 1)語法
- 選擇器{屬性名1:屬性值1;屬性名2:屬性值2;...}
- 2)說明
- 選擇器{}：通過選擇器選中需要添加樣式的標(biāo)簽算吩；在內(nèi)聯(lián)樣式中不用寫
- 屬性：屬性名和屬性值之間用冒號(hào)連接碍沐，多個(gè)屬性之間用分號(hào)隔開；屬性名不是自己命名激涤，必須是CSS提供的屬性拟糕，學(xué)習(xí)CSS主要就是學(xué)CSS中的屬性；屬性值如果是表示大小的數(shù)字：必須加單位(px-像素昔期，em-空格數(shù)已卸，50%-百分比)；顏色值：顏色的英文單詞硼一、#6位16進(jìn)制顏色值累澡、rgb(0-255,0-255,0-255)、rgba(r,g,b,透明度)般贼；透明度：0-1
- 3)常用屬性
- 根據(jù)樣式表寫的位置愧哟，將樣式表分為：內(nèi)聯(lián)樣式、內(nèi)部樣式哼蛆、外部樣式
- a.內(nèi)聯(lián)樣式：將樣式表寫在標(biāo)簽的style屬性中蕊梧，只能作用于一個(gè)標(biāo)簽
- b.內(nèi)部樣式：將樣式表寫在style標(biāo)簽中，可以作用于當(dāng)前整個(gè)html中的標(biāo)簽
- c.外部樣式：將樣式表寫在CSS文件中腮介，然后再在html文件中通過link導(dǎo)入肥矢，可以作用于所有頁面的所有標(biāo)簽
- 優(yōu)先級：內(nèi)聯(lián)的優(yōu)先級最高；內(nèi)部和外部樣式表看誰后寫叠洗，誰優(yōu)先級高
二甘改、CSS選擇器
1.元素選擇器/標(biāo)簽選擇器
- 直接將標(biāo)簽名作為選擇器，選中所有指定的標(biāo)簽
- 例如：a{}-選中所有a標(biāo)簽
2.id選擇器
- 在標(biāo)簽的id屬性值前加#作為一個(gè)選擇器灭抑，選中id值是指定值的標(biāo)簽(注意：一個(gè)html中id必須是唯一的)
- 例如：#a{}-選中id值為a的標(biāo)簽
3.class選擇器
- 在標(biāo)簽的class屬性值前加.作為選擇器十艾，選中所有class屬性值是指定值的標(biāo)簽
- 例如：.a{}-選中class屬性是a的所有標(biāo)簽
- 注意：一個(gè)html中多個(gè)標(biāo)簽可以擁有一個(gè)class值，同一個(gè)標(biāo)簽也可以同時(shí)擁有多個(gè)class值(多個(gè)class值之間用空格隔開)
4.群組選擇器
- 將多個(gè)選擇器用逗號(hào)隔開腾节，選中每個(gè)獨(dú)立選擇器選中的所有標(biāo)簽
- 例如：a,p{}-選中所有的a標(biāo)簽和p標(biāo)簽
5.1.包含選擇器(包含關(guān)系中不一定是直接包含忘嫉，間接包含也能選中)
- 將多個(gè)選擇器用空格隔開，從前往后一層一層的找案腺，找到最后一個(gè)選擇器選中的標(biāo)簽
- 例如：div #d1 p{}-選中所有在div標(biāo)簽中的id是d1的標(biāo)簽中的p標(biāo)簽
5.2.包含選擇器(包含關(guān)系必須是直接包含)
- 將多個(gè)選擇器用>隔開庆冕，從前往后一層一層的找，找到最后一個(gè)選擇器選中的標(biāo)簽
6.通配符選擇器
- 直接將*作為選擇器劈榨，選中當(dāng)前頁面中所有的標(biāo)簽
- 一般用來選中所有標(biāo)簽關(guān)閉所有默認(rèn)的間隙(margin访递、padding)
7.選擇器的權(quán)重
- 權(quán)重值越大優(yōu)先級越高，但是內(nèi)聯(lián)樣式表優(yōu)先級永遠(yuǎn)是最高的
- 元素選擇器：0001(1)
- class選擇器：0010(2)
- id選擇器：0100(4)
- 群組選擇器：看單獨(dú)每個(gè)選擇器的權(quán)重
- 包含選擇器：單獨(dú)每個(gè)選擇器的權(quán)重和
8.偽類選擇器
- 普通選擇器選中的是某一個(gè)標(biāo)簽鞋既，偽類選擇器是選中標(biāo)簽的狀態(tài)
- 1)語法-普通選擇器:類型
- 2)說明
- 普通選擇器就是所有能夠選中標(biāo)簽的選擇器
- 類型決定了被選中的狀態(tài)
- 3)常見的偽類選擇器
- link：選中初始狀態(tài)力九，一般只針對a標(biāo)簽有效耍铜；a標(biāo)簽的初始狀態(tài)指的是a標(biāo)簽關(guān)聯(lián)連接
- visited：成功訪問后的狀態(tài)，一般只針對a標(biāo)簽有效
- hover：鼠標(biāo)懸停在標(biāo)簽上時(shí)對應(yīng)的狀態(tài)跌前，可以作用于所有可見的標(biāo)簽
- active：在標(biāo)簽上按住鼠標(biāo)不放時(shí)對應(yīng)的狀態(tài)棕兼，可以作用于所有可見的標(biāo)簽
- 注意：除了a標(biāo)簽以外別的標(biāo)簽的link無效；直接選中標(biāo)簽選中的是這個(gè)標(biāo)簽的所有的狀態(tài)抵乓；使用偽類選擇器時(shí)候需要遵守'愛恨原則'伴挚，LoVe HAte
