導(dǎo)入外部css樣式表的方法
使用link標(biāo)簽導(dǎo)入外部css樣式表
<link rel="stylesheet" href="css/demo01.css">
在樣式表中import(導(dǎo)入)外部樣式表
@import url("/crazy-html5/06css/css/demo01.css");使用內(nèi)部樣式表
內(nèi)部樣式表只能作用于某一個(gè)網(wǎng)頁，定義方式為在head頭部添加style標(biāo)簽，在style標(biāo)簽中即可添加頁面樣式。
<head> <style> table { background: #003366; } </style></head>選擇器知識(shí)點(diǎn)
元素屬性選擇器
1）普通標(biāo)簽選擇器
table:{background:red;}
2）含有某個(gè)屬性的標(biāo)簽
div[id]{background:red;}表示含有id屬性的div元素
3）含有某個(gè)屬性并且屬性值為特定值的標(biāo)簽
div[id=aaa]{background:red;}表示含有id屬性，并且id=aaa的div元素
4）含有某個(gè)屬性并且屬性值以特定值開頭的元素
div[id=^aaa]{background:red;}表示含有id屬性，并且id的值是以aaa開頭的div元素
5）含有某個(gè)屬性并且屬性值以特定值結(jié)尾的元素
div[id=$c]{background:red;}表示含有id屬性，并且id的值是以c結(jié)尾的div元素
ID選擇器
id選擇器，指定id為特定值的元素，比如#mydiv表示的是id為mydiv值的元素，id選擇器前面要添加符號(hào)#
Class選擇器
類選擇器是匹配class值的元素，選擇器前面必須添加符號(hào).，比如.myclass表示的是所有class值為myclass的元素。
類選擇器可以結(jié)合元素選擇器使用，比如p.important{color:red;}必須同時(shí)符合兩個(gè)選擇器條件的元素才能生效。
包含選擇器、后代選擇器
后代選擇器可以選擇作為某元素后代的元素，例如：h1 em{color:red},這個(gè)規(guī)則會(huì)把作為h1元素后代的em元素的文本變?yōu)榧t色，其他em文本不會(huì)被這條規(guī)則作用。
子選擇器
和后代選擇器類似，但是只會(huì)作用于元素的某直系后代。例如h1>strong{color:red;}是作用于h1元素中第一層級(jí)strong元素上，其他層級(jí)不受影響
相鄰兄弟選擇器
如果需要選擇緊接在另一個(gè)元素后的元素，而且兩者有相同的父元素，可以使用相鄰兄弟選擇器，例如h1+p{margin-top:50px;}選擇緊接在h1元素后出現(xiàn)的段落，h1與p元素?fù)碛邢嗤母冈?/p>
選擇器分組
同時(shí)作用于多個(gè)元素的選擇器，例如h2,p{color:gray;}會(huì)同時(shí)作用于h2元素與p元素。
*為通配符選擇器，可與任何元素匹配
偽元素選擇器
1）:first-line{color:red;}文本首行設(shè)置特殊樣式
2）:first-letter{color:red;}文本首字母設(shè)置特殊樣式
:after、:before未選擇器
:before{}可與在元素內(nèi)容的前面插入內(nèi)容，內(nèi)容可用content指定，
:after{}可與在元素內(nèi)容的后面插入內(nèi)容，內(nèi)容可用content指定，比如
p:before{ content:url("img.png");}after、before可與配合quotes使用，quotes可與設(shè)置嵌套引用的引號(hào)類型
<style> div>div { quotes: "《" "》" } div>div::before{ content: open-quote; } div>div::after{ content:close-quote; }</style>after、before配合計(jì)數(shù)器使用
可與利用計(jì)數(shù)器在文本前面添加多級(jí)編號(hào)，這個(gè)可以專門開篇文章了，這里不再詳述。
偽類選擇器
1 :root選擇器匹配文檔根元素
2 :first-child指定當(dāng)元素是其父級(jí)的第一個(gè)子級(jí)的樣式
3 :last-child指定當(dāng)元素是其父級(jí)的最后一個(gè)子級(jí)的樣式
4 :nth-child(n)指定當(dāng)元素是其父級(jí)的第n個(gè)子級(jí)的樣式
n為odd時(shí)匹配當(dāng)元素是其父級(jí)奇數(shù)個(gè)子級(jí)的樣式
n為even時(shí)匹配當(dāng)元素是其父級(jí)偶數(shù)個(gè)子級(jí)的樣式
n為m*n+p時(shí)，匹配當(dāng)元素是其父級(jí)符合第m*n+p個(gè)子級(jí)的樣式
5 :nth-last-child(n)指定當(dāng)元素是其父級(jí)的倒數(shù)第n個(gè)子級(jí)的樣式
6 :only-child指定當(dāng)元素是其父級(jí)唯一子元素時(shí)生效
7 :empty指定空元素的樣式
元素狀態(tài)的偽類選擇器
1 :hover當(dāng)鼠標(biāo)指針位于元素上的樣式
2 :focus獲得焦點(diǎn)的元素的樣式
3 :enabled啟用的元素的樣式
4 :disabled禁用的元素的樣式
5 :checked被選中的元素的樣式(checkbox,radio)
6 ::selection被用戶選取的部分元素樣式
7 :not(selector)選擇不是這個(gè)選擇器的樣式
8 :target選擇當(dāng)前活動(dòng)的 #news 元素，一般配合錨點(diǎn)使用
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持VeVb武林網(wǎng)！
新聞熱點(diǎn)
疑難解答
圖片精選
