一、什麼是CSS
CSS全稱層疊樣式表,主要用於修改html標籤的樣式
二、CSS書寫位置?
行內樣式表:在標籤的開始標籤中使用style屬性來書寫該標籤的樣式屬性
內部樣式表:在head標籤中使用style標籤來描述樣式,並且使用選擇器將樣式設置到某個或者某些標籤之上,內部樣式表解決了同一個頁面中的樣式重用問題
外部樣式表:將css樣式定義到一個css文件中,在html頁面中可以通過引入該css文件來使用該文件中定義的樣式,在css文件中書寫樣式不需要寫style標籤,在需要使用樣式的html頁面中使用link標籤引入外部的css樣式表,例如:
<link rel="stylesheet" href="css/style.css" />
本文配套練習代碼，點擊下載
三、選擇器的分類
- 標籤選擇器:
語法:標籤名稱{css樣式屬性}
作用:對頁面中所有的同種標籤添加樣式
- 類選擇器:
語法:.選擇器名稱{css樣式屬性}
作用:將標籤的class屬性設置爲類選擇器名稱,該標籤就可以擁有類選擇器的樣式,
標籤的class屬性可以同時設置多個選擇器名稱
- id選擇器:
語法:#選擇器名稱{css樣式屬性}
作用:將標籤的id屬性設置爲id選擇器名稱,該標籤就可以擁有id選擇器的樣式
選擇器優先級:id選擇器>類選擇器>標籤選擇器
屬性篩選:在選擇器後面可以使用[屬性名稱=屬性值]篩選滿足屬性條件的這一部分標籤,主要用於設置input標籤的各種樣式
- 複合選擇器:
語法:選擇器1,選擇器2,....{樣式屬性}
作用:同時給多個選擇器設置相同的樣式
- 全局選擇器:
語法:*{樣式屬性}
作用:給頁面中所有的標籤設置樣式屬性
- 層級選擇器:
語法:選擇器A 選擇器B...{樣式屬性}
作用:在滿足選擇器A的條件的標籤內部查找滿足選擇器B的條件的標籤
四、css的常用樣式
- 文字樣式:
font-family:字體屬性
color:字體顏色
字體顏色可以用三種方式來表達。
1.顏色對應的英文
2.16進制的顏色
3.RGB顏色 語法:color:rgb(數字,數字,數字)
font-size:字體大小
font-weight:設置文字的粗細
font-style:設置文字風格(斜體)
text-decoration:文本修飾(上劃線，下劃線，中劃線)
text-align:水平方向上的文字對齊(left，center，right)
line-height:定義一行文字的高度,可以將行高設置爲與高度相等實現文字垂直居中 的效果
- 列表屬性:
list-style:設置列表項修飾風格，通常設置爲none去掉列表項的修飾
- 背景屬性:
background-color:背景顏色
背景顏色可以用四種方式來表達。
1.顏色對應的英文
2.16進制的顏色
3.RGB顏色 語法:color:rgb(數字,數字,數字)
4.RGBA顏色 語法:background-color:rgba(數字,數字,數字,透明度0-1之間)
background-image:背景圖片 背景圖片不會跟隨標籤的高寬進行縮放
語法:background-image:url(圖片地址)
background-repeat:設置背景圖片是否平鋪已經平鋪的方向
可選值:repeat，no-repeat，repeat-x，repeat-y
background-position:設置背景圖片的位移
五、盒子模型
任意一個標籤在網頁中都是以盒子模型來顯示和佈局的
任何一個標籤都會包含4個部分分別是內容、內邊距、邊框、外邊距
- 調整內容的大小:
height:調整內容的高度
width:調整內容的寬度
注意:只有塊級標籤能夠直接調整內容的高寬,行級標籤高寬是隨着內容的大小隨動的,不能直接調整,可以通過display="inline-block"屬性將標籤的 顯示方式修改爲行 級塊,修改之後行級標籤任然不會換行但是可以調整高寬
- 調整內邊距的大小:
padding:調整內邊距的大小
常見用法:
padding:10px 將上右下左四個方向的的內邊距都調整爲10px
padding:10px 5px 將上下內邊距設置爲10px 左右內邊距設置爲5px
padding:10px 20px 30px 40px 依次將上右下左四個內邊距進行設置
padding-left:設置左內間距的大小
padding-right:設置右內間距的大小
padding-top:設置上內間距的大小
padding-bottom:設置左內間距的大小
- 調整外邊距的大小:
margin:調整外邊距的大小
常見用法:
margin:10px 將上右下左四個方向的外邊距調整爲10px
margin:10px 5px 將上下外邊距設置爲10px 左右外邊距設置爲5px
margin:10px 20px 30px 40px 依次將上右下左四個外邊距進行設置
margin-left:設置左外間距的大小
margin-right:設置右外間距的大小
margin-top:設置上外間距的大小
margin-bottom:設置下外間距的大小
- 邊框:
border:調整4條邊框大小、樣式、顏色
border-color:調整四條邊框的顏色
border-style:調整四條邊框的樣式
border-width:調整四條邊框的大小
border-top:調整上邊框的大小、樣式、顏色
border-top-color:調整上邊框的顏色
border-top-style:調整上邊框的樣式
border-top-width:調整上邊框的大小
border-bottom:調整下邊框的大小、樣式、顏色
border-bottom-color:調整下邊框的顏色
border-bottom-style:調整下邊框的樣式
border-bottom-width:調整下邊框的大小
border-left:調整左邊框的大小、樣式、顏色
border-left-color:調整左邊框的顏色
border-left-style:調整左邊框的樣式
border-left-width:調整左邊框的大小
border-right:調整右邊框的大小、樣式、顏色
border-right-color:調整右邊框的顏色
border-right-style:調整右邊框的樣式
border-right-width:調整右邊框的大小
- 定位屬性:
position:調整標籤的定位方式
可選的定位方式有:absolute(絕對定位) relative(相對定位) fixed(固定定位)
- 絕對定位:
在設置position="absolute"之後,可以通過top,left,bottom,right4個屬性來設置標籤距離它的參照物 之間的間距
絕對定位的標籤會脫離文檔流,意思是絕對定位的標籤不會影響到其他標籤的佈局,其他標籤不 會影響到絕對定位標籤的佈局
絕對定位標籤的參照物是上級的擁有絕對定位屬性的標籤,如果該標籤的所有上級標籤都沒有絕對定位屬 性,最終會使用body作爲參照物
- 相對定位:
在設置position="relative"之後,可以通過top,left,bottom,right4個屬性來設置該標籤相對於原本位 置產生的位移
相對定位的標籤不會脫離文檔流,網頁在對標籤進行佈局時,依然會將相對定位的標籤計算在內,但是無論 相對定位的標籤如何位移,佈局始終是以標籤的原位置進行計算的
- 固定定位:
在設置position="fixed"之後,可以通過top,left,bottom,right4個屬性來設置標籤相對於瀏覽器窗口 的距離,無論網頁如何滾動,標籤始終會保持與瀏覽器窗體的距離不變
固定定位會脫離文檔流,不會影響其它標籤的佈局。
- 其它常用屬性:
- float:浮動屬性 取消塊級標籤的換行
給標籤添加浮動屬性之後有兩個效果
1.標籤會上升到上面一級的水平面
2.取消塊級標籤本身獨佔一行的特性
- clear:取消浮動 clear標籤取消左側標籤或者是右側標籤的浮動效果
clear屬性只能作用於標籤本身
clear屬性可選值left、right、both作用是當前標籤在佈局時，不考慮左側、右側、左右浮動標籤對自身的影響
opacity:設置標籤半透明度(包括背景和內容)
display:可選值有 none、inline-block、block
none 隱藏標籤不會佔據位置
inline-block 行級塊
block 塊級
- visibility: 可選值 hidden、visible
hidden 隱藏會佔據標籤的位置
visivle 顯示
cursor:當鼠標移動到標籤上時,改變鼠標指針樣式
overflow:針對於超出容器的內容的處理方式 可選值 auto、scroll、hidden
六、超鏈接的僞類樣式
超鏈接具有4種狀態,link visited hover active
超鏈接僞類樣式可以用於設置超鏈接在這4種狀態下各自的樣式
語法:
選擇器:link{}
選擇器:visited{}
選擇器:hover{}
選擇器:active{}
4種僞類樣式一定要按照上述順序編寫,如果不想改變某個狀態的樣式,可以缺省