css( cascading style sheets)層疊樣式表:給html里的骨架(標簽)穿衣服(屬性)。
style標簽:是CSS標簽。
css 3種寫法:
1)行內式:每個標簽都有一個style屬性,所以可以在標簽身上寫CSS屬性。免除了選擇器部分。
<div style=' k:v; k:v; k:v; '><div>
2)內嵌式:通過style標簽,放在head標簽中。
<style type='text/css'>
選擇器{
k:v;
k:v;
}
</style>
3)外鏈式:將屬性寫在css文件中,通過連接標簽link連接。工作中常用,復合W3C的理念。
<link type='text/css' rel='stylesheet' href='css路徑'/>
元素的顯示方式:
css中元素分為兩類:
一:獨占一行block:典型:div p h1-h6 ol ul li dl dt dd
獨占一行,可以設置寬高。
二:不換行的:
行內元素inline:典型:span a b u i strong del em ins s
一行內顯示,寬高不生效,自適應內容。
行內塊inline-block:典型:img input
即可認為設置寬高又可以在一行顯示。
元素之間顯示方式切換:修改display屬性
css代碼由2部分組成:
第一是選擇器:
一:基礎選擇器4類:
標簽選擇器:
類選擇器:.
id選擇器:#
通配符:*
二:復合選擇器:
后代選擇器:空格
并集選擇器:,
指定選擇器:標簽名.id/類 (權重最高,高手常用)
例如:div.box
div.#box
第二是屬性:鍵值對 (css學習的重點)
K:v;
css兩大特性
1.繼承性
作用:子元素可以繼承父元素的樣式。
什么樣的屬性才可以繼承:(經驗之談)
text-,font-,line-開頭的屬性都是可以繼承的color.也可以a除外。
具體應用:
在寫頁面之前我們會通過給body設置一個字體,來將頁面上所有的標簽都能夠繼承這個屬性。
特殊性:
- a標簽的顏色不能繼承,如果一定要修改a標簽的顏色直接作用在a標簽上面。
- h標簽的大小不能繼承,如果一定要修改h標簽的大小直接作用在h標簽上面。
2.層疊性
是瀏覽器處理沖突的一個特性。
作用:同一屬性后寫的會覆蓋先寫的,權重高的選擇器中的屬性會概掉權重低的。
優先級
!important>行內樣式>id選擇器>類選擇器>標簽選擇器>通配符>繼承**
變數:!important
注意:雖然important是一個變數,但是不能作用在繼承上。!important屬性無法繼承。
權重:
涉及權重的2點:選擇器和css書寫形式
作用:多個選擇器組合以后的優先級。
通俗簡便算法:
標簽選擇器:1兩;
類選擇器:1斤;
id選擇器:1噸;
復合選擇器:把個部分相加即可。
總結:
權重其它是優先級的算法
優先級是層疊表現
選擇器工作的一個原理:
選擇器在查找元素的時候不是從左往右找,而是從右往左找。