一.css引入方法:行內式、嵌入式、匯入式、鏈結式。
1、行內式。
即:在標籤的style屬性中設定css樣式。
例子:行內式
2、嵌入式
即:將頁面各種元素的設定集中寫在標籤裡。
例子:
3、匯入式
即:將乙個外部css檔案引入css檔案或html檔案,注意此方法既能在css檔案裡使用也能夠在html的標籤之間使用。
4、鏈結式
即:將乙個外部css檔案引入html檔案
例子:
二、選擇器
1、id選擇器
根據html元素的id屬性選擇元素。
例子:css: #div1 /* 選中id為div1的html元素 */
html: 我是id為div1的div元素
2、class選擇器
根據html的class屬性選擇元素。
例子:css: .left
html 我是class="left"的div元素
3、標籤選擇器
根據html標籤選擇元素
例子:css: div
html: 我是乙個div元素
4、復合選擇器
4.1 交集選擇器
例子:css: p.special /* 選中class="special"的p元素 */
html:
我是乙個p
/* 不會被選中 */
我是乙個class="special"的元素
/* 選中該行 */
4.2 並集選擇器
例子:css: .special,div,p
html:
我是乙個class屬性為span的元素
我是乙個div元素
我是乙個p元素
以上三行html**都會被選中。
4.3 後代選擇器
後代選擇器:選中所有後代元素
例子:css: .special p
html:
我是.special裡的p元素
/* 會被選中 */
我是.special裡的p元素
/* 會被選中 */
我也是乙個p
/* 不會被選中 */
直接後代選擇器
即:選擇直接子後代
css: .special>p
我是.special裡的p元素
/* 會被選中 */
我是.special裡的p元素
/* 不會被選中,因為不是直接子元素,是孫子元素了 */
我也是乙個p
/* 不會被選中,非子元素 */
五、屬性選擇器
css: a[title] //選中含有title屬性的a元素
我是第乙個a標籤 //會被選中,含有title屬性
我是第二個a標籤 //不會被選中,沒有title屬性
a[title="a1"] //選中title屬性=a1的元素
我是第乙個a標籤 //會被選中,含有title,並且title=a1
我是第二個a標籤 //不會被選中,沒有title屬性
我是第乙個a標籤 //不會被選中,title不=a1
其他屬性符號:a[title~='a1'] 選中 選中title屬性中包含a1的元素,注意a與其他值要有空格
a[title^='a1'] 選中 選中title屬性以a1開頭的元素
a[title$='a1'] 選中 選中title屬性以a1結束的元素
a[title*='a1'] 選中選中title屬性中包含a1的元素
a[title|='a1'] 選中或 選中title屬性中包含"a1-"開頭或等於"a1"的元素,常用於選擇src="logo-1","logo-2"等屬性。
六、相鄰兄弟選擇器"+"
css: span + p
html:
我是乙個span
我是乙個p
我也是乙個p
六、css的繼承特性
子元素會繼承父元素中的樣式
css: p
bhtml: 我是p元素
顯示結果為:我是p元素
可以看到b繼承了下劃線樣式,同時改變了顏色。(注:下劃線仍然是紅色) 這樣就可以實現css樣式的共用。
六、css層疊特性
各個選擇器優先順序排行:
行內樣式》id選擇器》class選擇器》標籤選擇器
當連個選擇器優先順序相同時,寫在前面》寫在後面。如:此時p1樣式優先
七、偽類
a:link /* 未訪問的鏈結 */
a:visited /* 已訪問的鏈結 */
a:hover /* 滑鼠移動到鏈結上 */
a:active /* 選定的鏈結 */
p:first-child
:active 向被啟用的元素新增樣式。
:focus 向擁有鍵盤輸入焦點的元素新增樣式。
:hover 當滑鼠懸浮在元素上方時,向元素新增樣式。
:link 向未被訪問的鏈結新增樣式。
:visited 向已被訪問的鏈結新增樣式。
:first-child 向元素的第乙個子元素新增樣式。
:lang 向帶有指定 lang 屬性的元素新增樣式。
八、偽元素
:first-letter 向文字的第乙個字母新增特殊樣式。
:first-line 向文字的首行新增特殊樣式。 此偽類只能用於塊級元素。
:before 在元素之前新增內容。
:after 在元素之後新增內容。
前端基礎(二 CSS 引入方式 CSS選擇器)
css選擇器 使用內聯樣式時,將樣式寫在中,放在.html檔案的中。div style 使用外部樣式時,將樣式寫在單獨的.css檔案中,將該檔案引入至.html檔案中,將引入語句寫在.html檔案的中。stylesheet href test.css test.css div假設有如下html di...
CSS概念,引入,選擇器
層疊樣式表,定義如何顯示html元素.不推薦使用此方式 結構 和 樣式的 雜糅會影響後期的維護 style color red hello world.將css樣式集中寫在網頁的標籤對的標籤對中 head meta charset utf 8 title title title style p st...
CSS選擇器之基礎選擇器
選擇器 選擇符 就是根據不同需求把不同的標籤選出來這就是選擇器的作用。簡單來說,就是選擇標籤用的。標籤選擇器 又稱元素選擇器,指用html標籤作為選擇器,為頁面中某類標籤設定css樣式。缺點 不能差異化設定樣式,只能選擇全部的當前標籤。語法 基礎選擇器之標籤選擇器title 標籤選擇器 寫上標籤名 ...