css概述
CSS:層疊樣式表(Cascading Stytle Sheets)贞间，用來修飾(美化)HTML網(wǎng)頁的一門技術贿条。使用CSS來設置樣式，可以將設置樣式的CSS代碼和展示數(shù)據(jù)的HTML代碼進行分離增热。并且還可以實現(xiàn)代碼的復用整以，增強網(wǎng)頁的展示能力。
1.元素的類型劃分
- 塊級元素：默認情況下獨占一行的元素
(h1,hr,p,ul,ol,table,form,div...) - 行內(nèi)元素：默認情況下峻仇，多個元素可以顯示在同一行
(span,a,br,b,strong,img,del,u,input,select,textarea...)
2.引入css
-
通過標簽上的style屬性引入CSS樣式
<!--
1.通過標簽上的style屬性給div設置樣式
邊框:1px solid red
字體大小 40px
背景顏色為 pink
-->
<span style="border: 1px solid red;font-size: 40px;background-color: pink">span111</span>
這種方式可以快速為某些標簽設置css樣式公黑。但這種方式設置樣式不推薦大量使用，會造成頁面結構的混亂摄咆，不利于后期的維護及擴展凡蚜。
<html>
<span style="border: 1px solid red;font-size: 40px;background-color: pink">span111</span>
</html>
-
通過head標簽內(nèi)部的style標簽引入CSS樣式
<!--
2.通過style標簽給span設置樣式如下
邊框: 2px solid cyan
字體大小: 35px
字體加粗
-->
<style type="text/css">
/* ****** CSS樣式 ****** */
span{
border: 2px solid cyan;
font-size: 35px;
font-weight: bolder;
}
</style>
這種方式是將所有的css代碼集中在一個style標簽內(nèi)部統(tǒng)一進行管理，實現(xiàn)了將展示數(shù)據(jù)的HTML代碼和設置樣式的CSS代碼進行了初步分離吭从。
-
通過鏈接引入外部的CSS文件來引入CSS樣式
<!--
3.通過link標簽引入外部的css文件朝蜘，樣式如下：
邊框: 2px solid blue;
字體大小: 30px;
字體為黑體
-->
<link rel="stylesheet" type="text/css" href="css/demo.css">
這種方式是將所有的css代碼放在一個獨立的文件中進行統(tǒng)一管理，真正的實現(xiàn)了html代碼和css代碼的分離涩金。
4.css選擇器
所謂的選擇器就是在HTML中幫助我們選擇標簽進行修飾的技術谱醇。
1.基本選擇器
標簽名(元素名)選擇器：
- 根據(jù)元素的名稱來選擇指定名稱的元素進行樣式的修飾.
- 格式：元素名{css屬性}
/* 1.標簽名選擇器
將所有span標簽的背景顏色設置為#DDA0DD, 設置字體大小為24px暇仲，字體加粗
*/
span{
background-color: #DDA0DD;
font-size: 24px;
font-weight: bold;
}
class選擇器
- 通過標簽上通用的屬性class，可以為標簽指定所屬的類(組)副渴，所有class值相同的元素則為一組(類)奈附，可以通過class屬性的值選擇這一組的標簽，為這一組的標簽統(tǒng)一設置樣式煮剧。
- 格式：.類名{css屬性...}
/* 2.類選擇器
(1)將所有的span（但是不包括div和p標簽下的span）的背景顏色設置為#8FBC8F, 字體顏色為綠色
(2)將div1下的span和內(nèi)容為"span111"的span字體顏色設置blue, 背景顏色設置為#F0E68C
*/
.s1{
background-color: #8FBC8F;
color: #F0E68C;
}
.s2{
background-color: #F0E68C;
color: blue;
}
id選擇器
- 通過標簽上通用的屬性id斥滤，可以為標簽設置唯一的標識(ID的值在整個HTML中是獨一無二的)，可以通過id的值選中指定的元素.
- 格式：#id值{css屬性...}
/* 3.id選擇器
用id選擇器將第一個p標簽設置字體加粗,首行文本縮進20px.
*/
#p1{
font-weight: bold;
text-indent: 20px;
}
2.擴展選擇器
后代選擇器
- 在父選擇器選中元素的內(nèi)部轿秧，選中指定的所有后代元素
- 格式：父選擇器 后代元素選擇器{ css屬性… }
/* 將div下所有的span標簽的字體大小設置為22px, 背景顏色設置為#DDA0DD*/
#d1 span{/* 選中ID值為d1元素內(nèi)所有span元素*/
font-size: 22px;
background-color: #DDA0DD;
}
子元素選擇器
- 在父選擇器選中元素的內(nèi)部中跌，選中指定的所有子元素
- 格式：父選擇器>子元素選擇器{ css屬性… }
/* 將div下所有的span子元素標簽的字體大小設置為16px, 背景顏色設置為#DEB887*/
#d1>span{/* 選中ID值為d1元素內(nèi)所有span子元素*/
font-size:16px;
background-color: #DE8887;
}
分組選擇器
- 將多個選擇器選中的元素合并在一起統(tǒng)一設置樣式。
- 格式：選擇器1,選擇器2, … 選擇器n{ css屬性… }
/* 將span1菇篡、span2和p標簽下的span的背景顏色設置為 #F4A460*/
.c1,.c2,#p1 span{
background-color: #F4A460;
}
屬性選擇器
- 根據(jù)屬性選中符合條件的元素來設置樣式
- 格式：選擇器[屬性條件．．]{ css屬性 }
/*(1)將所有有class屬性的元素的邊框設置為2px漩符、實線、紅色.
(2)將所有的type="text"的<input>標簽的背景顏色設置為red, 設置字體首行縮進10px*/
*[class]{
border: 2px solid red;
}
input[type='text']{
background-color: red;
text-indent: 10px;
}
相鄰兄弟選擇器
- 相鄰兄弟指的是如果兩個元素具有相同的父元素驱还，并且緊挨著嗜暴，這兩個元素就是相鄰兄弟元素∫轶。可以通過相鄰兄弟選擇器選中A元素后面的B元素闷沥。
- 格式：大哥+小弟{ css屬性… }
- 大哥~小弟{css屬性...}
/* 將id為p1元素后面相鄰的p元素的背景顏色設置為 #DB7093*/
#p1+p{
background-color:#DB7093;
}
/*選中id為div1后面所有的span元素*/
#div1~span{
}
偽元素選擇器
- 根據(jù)元素的狀態(tài)選中指定的元素。
/*(1)當鼠標移入div下的a標簽上時, 為其設置如下狀態(tài): 字體為blue, 字體大小為28px. 邊框: 1px solid red, 并且文本內(nèi)容沒有下劃線.
(2)給div下的第一個a元素設置背景顏色為 lightgreen.*/
div a:hover{
color: blue;
font-size: 28px;
border: 1px solid red;
text-decoration: none
}
div a:first-child{
background: lightgreen;
}
5.盒子模型
所謂的盒子模型指的是咐容，可以將HTML頁面中所有的元素都看成一個一個的盒子(或者是框)舆逃，盒子與盒子之間的距離，包括盒子的邊框以及盒子邊框和盒子內(nèi)容的距離都可以使用相應屬性來表示戳粒。
盒子模型.gif
margin(外邊距)
- 元素與元素之間的距離
- 垂直外邊距的合并現(xiàn)象: 如果兩個元素在垂直方向的外邊距相遇時, 將會有合并的現(xiàn)象, 合并后的結果是, 取兩個外邊距之中的較大者來作為兩個元素的外邊路狮！
- 如何讓塊級元素居中顯示:
margin: 0px auto;
border(邊框)
padding(內(nèi)邊距)
元素的實際寬度=元素設置的寬度+元素的左右邊框?qū)挾?左右內(nèi)邊距+左右外邊距
元素的實際高度=元素設置的高度+元素的上下邊框?qū)挾?上下內(nèi)邊距+上下外邊距
6.常用css屬性
- 置元素是否顯示以及如何顯示(元素的顯示方式)
- 塊級元素：display的值默認為block
(1)
7.內(nèi)容補充
顏色
- 顏色名稱, 比如: red, green, blue
- rgb三基色, 比如: rgb(255, 0, 0) , rgb(0, 255, 0) , rgb(0, 0, 255)
- XXXXXX, 比如: #FF0000, #00FF00, #0000FF
