1.css與HTML的結合方式:
1.1 內聯樣式:<p style="">黑馬程序員</p>
這種直接在標籤中寫的css代碼稱爲內聯樣式
1.2 內嵌樣式:<style type:"text/css">
div{color:"red";}
</style>
這種在當前的html頁面中添加的css代碼稱爲內嵌樣式
1.3 鏈接外部樣式表:
<link rel="stylesheet" type="text/css" href=""/>
這種鏈接外部樣式表的方式是實際開發中常用的方式
這三種方式的優先級:內部關聯樣式表 > 外部樣式表 >內部樣式表 > 瀏覽器的默認設置
2. 內嵌樣式表覆蓋問題:
在內嵌樣式表中,後定義的選擇器會覆蓋先定義的選擇器
3. 基本選擇器的優先級:
ID選擇器 >類選擇器> 標籤名選擇器
4. 三種基本選擇器:
<div>第一個快</div>
<div class="div2">第二個</div> <div id="div3">第三個</div>
在css代碼中可以使用三種選擇器
4.1 div{color:"red";} 這種是標籤選擇器,可以對所有的標籤生效
.div2{color:"red";} 這是類選擇器,可以對class屬性爲div2的標籤生效
#div3{color:"red";} 這是id選擇器,可以對id爲div3的標籤生效,但是id爲div3的標籤只能有一個
5.擴展選擇器:
5.1 派生選擇器:
<font>我的中間有個span<span>我是font中的span</span>我的中間有個span</font>
如果還有其他的span標籤,要在css代碼中只選擇font中的span標籤的話,可以使用類選擇器或者id選擇器
還可以使用派生選擇器,代碼如下:
font span{ color:"red"}
5.2 組合選擇器
.div,span,#td{ color:"green" } 這種選擇器可以同時對多個標籤生效,
5.3 僞元素選擇器:
a : link{} 超鏈接未點擊的狀態
a : visited{} 超鏈接點擊後的狀態
a : hover{} 光標移上去時的狀態,其中這個標籤在其他的標籤中也經常使用,例如
div :hover{ color:"red"}表示當光標移動到div塊上時,div塊中的字體顏色變爲紅色
a : active{} 點擊超鏈接時的狀態,(點下去但沒有鬆開時的狀態)
6. 字體相關的屬性:font
常用屬性有:
6.1 font-style:風格
6.2 font-variant:異體
6.3 font-weight:粗細
6.4 font-size:大小
6.5 font-family:字體系列
或者是font ： 風格 異體 粗細 尺寸/行間距 字體系列
7. 文本類屬性:
text-align:表示字體的對齊方式
text-decoration:表示字體中的下劃線或上劃線或是貫穿線
direction:設置文本方向
text-indent:設置文本的首行縮進
line-height:設置行高
letter-spacing:字符間的間距
word-spacing:單詞的間距
text-transform:控制文本的大小寫
8. 背景屬性;
可以設置背景顏色/背景圖片/背景圖片是否重複/背景圖片的起始位置(參數可以是負數)/背景圖片是否可以滾動
9. 邊框屬性:
可以設置邊框的顏色,粗細,樣式
10. 內邊距: padding: 設置標籤裏的文本距離標籤的邊框的距離
11. 外邊據 : margin : 設置標籤距離其緊挨着的標籤的距離
12.列表屬性:可以對ol或ul標籤進行修飾:
list-style-type:採用css中默認的值
list-style-image:使用圖片作爲列表的標誌
list-style-position:設置列表標誌的位置是在列表裏面還是外面
13. 鼠標樣式:設置光標的顯示方式:
div{cursor: url("08.ico"),crosshair;}:如果圖片存在的話,光標會顯示爲圖片,如果光標不存在,就顯示爲圖片後面的顯示方式
如果不定義後面的顯示方式的話,那麼即使定義了圖片並且圖片存在,也不會顯示
14. 顯示樣式:
<div></div>
div{
display:inline;//display的作用:可以將塊標籤換爲行內標籤,可以將行內標籤換爲塊級標籤,如果屬性值爲none的話,不會顯示,
而且不會佔據網頁位置
visibility:hidden; 設置塊隱藏或可見,這個屬性設置隱藏,該塊不可見,但是仍然在網頁中佔據位置
}
15. 浮動屬性:
float:可以設置爲左浮,右浮或是不浮.
position: 設置元素的位置,如果值爲fixed,那麼元素就會一直出現在相對於瀏覽器窗口的位置
