CSS 是指層疊樣式表 (Cascading Style Sheets)，樣式定義如何顯示html，用於對頁面進行美化。
css樣式的存放位置有三種：
- 第一種，直接寫在html標簽里：
<div style="background-color: #5bc0de;height: 20px;width: 50px">div</div> #屬性之間用；分隔
- 第二種，在html的head里面設置全局樣式，body的標簽里引用。可以寫在管理-設置-定制css代碼中
<head> <style> #head里面定義樣式 .testcss{ #以點開頭 background-color: pink; font-size: 20px; } </style> </head> <body> <div class="testcss">testcss div</div> #標簽里引用testcss樣式 </body>
- 第三種，鏈接方式，寫在一個css文件里，引用該文件
- css文件 newcss.css
.abc{ color:red; font-size: 20px; } -
html文件
<head> <link rel="stylesheet" href="newcss.css"> #鏈接引用css文件 </head> <body> <div class="abc">link abc css div</div> </body>
- css文件 newcss.css
css選擇器
1. 標簽選擇器
給某一類標簽定義某種樣式，該類標簽都會使用這種樣式
<head> <style> h1{ #給h1標簽定義的樣式 color: red; font-size: 30px; } div{ #給div標簽定義的樣式 color:green; font-size: 20px; } input[type="text"]{ #input的text屬性加樣式 color: palevioletred; width: 300px; } </style>
2. class選擇器
在style里面定義一個.cssname{css樣式} 在標簽里用class="cssname"來引用
<head> <style> .testcss{ background-color: pink; font-size: 20px; } #在body里的標簽里使用 <div class="testcss">testcss div</div>
3. id選擇器
定義一個#idname樣式，在標簽里用id="idname"來使用這個標簽
<style> #i1{ color: deepskyblue; font-size: 40px; } #標簽里面使用 <span id="i1">i1 span</span>
4. 層級選擇器
標簽里嵌套着標簽，對嵌套的標簽加樣式。下一級用空格表示
style{ div span { color: yellow; font-size: 30px; } } #標簽里面應用 <div> <span>div span</span> #用到了樣式 </div> <div>div</div> #無變化
5. 組合選擇器
多個選擇器，用同一個樣式，用逗號分隔
div,p,.c1,#id1 { color: red; font-size: 30px; } #標簽里應用 <div>div</div> <p>p</p> <span class="c1">span</span> <div id="id1">div</div>
注意：如果同時有多個選擇器，那么瀏覽器是根據權值來判斷使用哪種css樣式的，權值高的就使用哪種css樣式。
標簽選擇器的權值為1，class選擇符的權值為10，ID選擇符的權值最高為100。
<style> div{color: red;} .c1{color: blue;} 應用： <div class="c1">div</div> #顯示是藍色，因為div標簽的權重小於class的權重
常用的css樣式
<div style="font-family: 微軟雅黑;font-size: 18px;font-weight: bolder;font-style: italic;">字體設置</div> #字體 #字體大小 #加粗 #斜體
background 背景設置
背景顏色
<span style="background-color: yellow;">span</span> #背景顏色
設置背景顏色為黃顏色span
背景圖片
<div style="background-image: url(1.png); #背景圖片
height: 100px;
background-repeat: no-repeat; # 不重復平鋪，repeat-x沿着x軸平鋪，repeat-y沿y軸平鋪
background-position: right;"> #top，bottom，right，center等
</div>
背景-簡寫屬性
background: #00FF00 url(bgimage.gif) no-repeat fixed top;
順序是：
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
border 邊框
<div style="border: 5px dotted red"> #寬度 #實線虛線(dotted，solid）#邊框顏色
border邊框 div
</div>
display 塊級標簽和行內標簽互相轉換
inline 轉換成行內標簽
block 轉換成塊級標簽
none 不顯示
<div style="background-color: hotpink;display: inline;">div</div>
<span style="background-color: grey;display: block">span</span>
span
cursor 鼠標移到上面顯示的標識
<span style="cursor: pointer">pointer</span>
<span style="cursor: wait;">wait</span>
<span style="cursor: move">move</span>
<span style="cursor: text">text</span>
<span style="cursor: help;">help</span>
移動鼠標試試： pointer wait move text help
float 浮動
浮動的原本作用是為了實現文字環繞效果。
如果定義兩個div放在一起，那么默認是上下兩行擺放。要想兩個標簽放一行里 需要在兩個div標簽里加上float
<div>
<div style="background-color: hotpink;float: left;width: 20%">div1</div> #向左浮動，寬度20%（相對於父標簽div而言）
<div style="background-color: yellow;float: left;">div2</div> #向左浮動
<div style="background-color: deepskyblue;float: right;width: 10%">div3</div> #向右浮動
</div>
一旦子類標簽都用到float，那么父類標簽不會被子類里的撐起來，如下，雖然在父類里設置了背景色，但是並沒有用到子類中空白部分
<div style="background-color: palegreen;width: 500px">
<div style="background-color: hotpink;float: left;width: 20%">div1</div>
<div style="background-color: yellow;float: left;">div2</div>
<div style="background-color: deepskyblue;float: right;width: 10%">div3</div>
</div>
清除浮動： 在底部使用cleara:both 方法，使父類標簽里的樣式顯示出來
<div style="background-color: palegreen;width: 500px">
<div style="background-color: hotpink;float: left;width: 20%">div1</div>
<div style="background-color: yellow;float: left;">div2</div>
<div style="background-color: deepskyblue;float: right;width: 10%">div3</div>
<div style="clear: both"></div>
</div>
position
fixed 固定在瀏覽器窗口某個地方，不會隨着滾動條移動。
<div style="position: fixed;right: 10px; bottom:10px; color: red">返回頂部</div>
#固定 #距離窗口右邊10px 距離底部10px #字體顏色
舉個栗子：常見的“返回頂部”。首先在博客設置里定義css樣式如下：
#back-to-top { position: fixed; right: 10px; bottom: 10px; background-color: green; }
然后在標簽里使用該樣式，加一個超鏈接
<span id="back-to-top"><a href="#top">fixed返回頂部</a></span>
absolute 絕對位置，只一次固定在窗口的一個位置，滾動條拉走，就看不到了。把頁面拖到最上方看左上角->
絕對定位的元素的位置相對於最近的已定位父元素，如果元素沒有已定位的父元素，那么它的位置相對於<html>
<div style="position: absolute;left: 0;bottom: 50%;color: purple;">absolute</div>
relative 相對位置， 相對定位元素的定位是相對其正常位置。relative本身不產生效果，跟absolute搭配使用才有效果。
absolute本來是針對整個窗口的，但是如果想只針對某一個div固定，那么可以在父標簽加一個relative使用：
<div style="position: relative;background-color: yellow;height: 100px;width: 100px"> #父標簽用relative <div style="position: absolute;color:blue;right: 0;bottom: 0;">absolute</div> #里層用absolute，位置相對於父標簽 </div>
opacity
透明度。 opacity的值在0-1之間。值越小越透明。0完全透明
z-index
指定元素的堆疊順序。值越大的在越上層
<div style="position: relative;background-color: green;width: 200px;height: 100px;"> <div style="position: absolute;background-color: blue;top:0;right: 0;bottom: 10px;left: 0;z-index: 2;opacity: 0.4;"></div> <div style="position: absolute;background-color: black;top:0;right: 0;bottom: 0;left: 0;color: red;z-index: 1">看不見我看不見我</div>
#這兩個div。z-index越大的就會越靠上面一層。所以藍色那層在黑色上面。黑色那一層的字會被蓋住。設置opacity之后，藍色變透明。透過藍色能看到后面一層的字
</div>
css盒模型 mbpc
Margin(外邊距) ：清除邊框外的區域，外邊距是透明的。
Border(邊框) ：圍繞在元素(內容)和內邊距外的邊框。
Padding(內邊距) ：清除內容周圍的區域，內邊距是透明的。
Content(內容) ：即element框，實際內容。
margin 外邊距
<div style="border: 2px solid black;height: 70px;width: 150px"> <div style="background-color: pink;height: 50px;width: 130px; margin-top: 30px;margin-left: 20px"></div> #在div外面加邊距 </div>
padding 內邊距
<div style="border: 2px solid black;height: 70px;width: 150px"> <div style="background-color: green;height: 50px;width: 130px;padding-top: 20px"></div> </div>