- HTML中引用CSS的方法總結。
- 行內式:在HTML標籤的style屬性中編寫CSS代碼,直接做用於「當前」的HTML元素。
<pstyle="color:#f0f;font-weight:bold;font-size:12px;">
</p>
- 嵌入式:在<head></head>中編寫CSS代碼,使用選擇器決定「一堆」元素的顯示效果。
<head>
<metacharset="utf-8">
<title></title>
<!--其餘head元素-->
<style>
p{color:red;}
</style>
</head>
- 連接式:使用<link></link>連接外部CS文件,能夠在多個網頁中共享樣式規則。
<linktype="text/css"rel="stylesheet"href="myCss.css">
- 導入式:使用@import指令,能夠基於已有的樣式文件擴充新的樣式規則。
<style>
@import"myStyle.css"
</style>
2.
CSS單位
3.顏色的描述
aqua淺綠色,black黑色,blue藍色,fuchsia紫紅色,gray灰色,green綠色,lime黃綠色,maroon橘紅色,navy深藍色,olive茶青色,purpose紫色,red紅色,sliver銀色,teal青色,white白色,yellow黃色
純紅色#ff0000,純綠色#00ff00,純藍色#0000ff。
0%,100%,0%,是純綠色;
0%,0%,100%,是純藍色。
3.經過給CSS規則添加前綴,能部分地解決瀏覽器兼容性問題。
前綴 「-moz」對應FireFox;
前綴「-ms-」,「-mso-」對應InternetExplorer;
前綴「-o-」對應Opera;
前綴「-webkit-」對應Chrome,Safari。
4.CSS選擇器
基本選擇器
a.標記(或標籤)選擇器,用於設定HTML文檔中指定標籤的顯示樣式。
b.類別選擇器,給特定的一組CSS代碼取名,而後就能夠將他們應用於多個不一樣的標籤。
c.ID選擇器,對於頁面中獨一無二的元素,如頁腳,能夠給其id屬性賦予一個獨一無二的值。
複合選擇器:
直接指定特定標記中特定類別或id的元素樣式。(注意:選擇器字符間不要有空格)
<pclass="p1">
這是第一段落,紅色字體
</p>
<pid="p2">
這是第二段落,藍色字體
</p>
<style>
p.p1{
/* 標記.類別選擇器*/
/* 選擇器字符間不要有空格*/
color:#FF0000;
}
p#p2{
/* 標記#id選擇器*/
color: rgb(0,0,255);
}
</style>
一次定義多個標籤或類別或id的樣式(注意:以逗號隔開各個選擇器)
<div>
本段文本位於div元素內
</div>
<pclass="p1">制定了p1樣式類的段落</p>
<pid="p2">制定了id的段落</p>
<style>
div,p.p1,p#p2{
color: cornflowerblue;
text-decoration: underline;
}
</style>
後代選擇器1
選擇嵌套在指定元素的內部元素的樣式(注意:以空格分開各個選擇器)
<style>
p em{
font-size:30px;
}
</style>
<p>
段落內:單詞的CSS以<em>標籤界定,在樣式表規則"p em"的做用下顯示爲:<em>CSS</em>
</p>
<span>
段落外:單詞的CSS以<em>標籤界定,不適用樣式表規則"p em"的做用下顯示爲:<em>CSS</em>
</span>
後代選擇器2
div>h2
只選擇h2元素,而且這些元素都是div的直接子元素
<style>
div>h2{
color: crimson;
}
#div1>h2{
text-decoration: line-through;
}
</style>
<divid="div1">
<p>content 1 of p</p>
<h2>content 1 of h2</h2>
<p>content 2 of p</p>
<div>
<h2>content 2 of h2 in the other div</h2>
</div>
</div>
- 兄弟選擇器
- h2+p,選擇p元素 ,此元素是h2的弟弟,且是緊挨的。
- h2~p,選出全部h2的「弟弟」,無論是否是緊挨着的
*{color:green;}
/*全部元素(的文本和邊框)都採用綠色做爲前景色 */
- p * {color:red} /*<P>包含的全部元素(的文本和邊框)都採用紅色做爲前景色 */
a[href]測試
a[href="index.html"]測試
img[alt~="UsedforTest"]測試
img[alt^="Just"]測試
img[alt$="st"]測試
img[alt*="UsedforTest"]測試
:focus實例
僞類選擇器支持not,div:not(.myP) 選擇全部div元素,其class屬性不是.myP
實例
還能夠連續使用多個not,div:not(.myClass1):not(.myclass2) 選擇全部div元素,其class屬性值不是.myClass1和.myClass2。
實例
還能夠使用其餘條件,div:not(id^="main") 選擇因此div元素,其id屬性值不是以main打頭的。
div:target 使用此選擇器,能夠自動依據url的目標,突出顯示特定的元素。
結構化選擇器,他與DOM密切相關
:root 選擇根元素<html>;
:empty 選擇空元素,如<p></p>;
:first-child 選擇的元素是其父元素的第一個子元素;
:last-child 選擇的元素是其父元素的最後一個子元素;
:first-of-type 選中指定元素類型的第一個兒子;
:last-of-type 選中指定元素類型的最後一個兒子;
:only-of-child 選中的元素是父元素的惟一兒子;
:only-of-type在父元素的全部兒子中,選擇那些只有一個元素的元素類型;
:nth-child(n) 選中第n個孩子;
:nth-last-child(n) 選中倒數第n個孩子;
:nth-of-type(n) 選中第n個元素類型;
:nth-last-of-type(n) 選中倒數第n個元素類型;
::first-letter和::first-line
::before和::after
CSS的繼承
- 沒有定義CSS規則的HTML元素,從它的父級元素中繼承樣式。
行內樣式 > id樣式 > 類別樣式 > 標籤樣式 →結論:特殊者勝出!