CSS樣式的簡單使用手冊（學習筆記，還算詳細）
一.選擇器：
1. id選擇器
通過
<style>
Td{
Color:red;
}
Or(特定的ID製作樣式)
#td1{
Color:green;
}
</style>
<p>nihao<p>
<p id=”p1”>wohao<p>
2. 類選擇器
<style>
.red{
Color:red;
}
Or(指定某個標籤的class樣式)
Tr.red{
Color:red;
}
</style>
<p class:”red”>nihao<p>
<tr class:”red”>
</tr>
二：常用CSS屬性
1.1 背景顏色與背景圖片
背景顏色：Background-color；
背景圖片設定：background-image:url(“”)；
背景圖片的重複：background-repeat
repeat; 水平垂直方向都重複 ；
repeat-x; 只有水平方向重複 ；
repeat-y; 只有垂直方向重複 ；
no-repeat; 無重複；
背景平鋪：background-size: contain;
1.2文字文字的修飾(刪除線、下劃線、字元間距等)
上劃線：h1 {text-decoration: overline}
刪除線：h2 {text-decoration: line-through}
下劃線：h3 {text-decoration: underline}
閃亮：h4 {text-decoration:blink}
無效果：.a {text-decoration: none}
行間距：
.p{
line-height:200%;
}
字元間距:.
p{
letter-spacing:2;
}
首行縮排： text-indent:50;
大小寫：
uppercase 全部大寫
capitalize 首字母大寫
lowercase 全部小寫
空白格：
p.n {white-space:normal}
p.p {white-space:pre}
normal 預設。多個空白格或者換行符會被合併成一個空白格
pre 有多少空白格，顯示多少空白格，相當於pre標籤,如果長度超出父容器也不會換行。
pre-wrap 有多少空白格，顯示多少空白格，相當於pre標籤,如果長度超出父容器，會換行。
nowrap 一直不換行，直到使用br
1.3 字型設定
字型大小：
font-size:30px;
p.big{
font-size:30px;
}
字型風格：
font-style:
normal 標準字型
alic 斜體
字型粗細：
屬性 font-weight
normal 標準粗細
bold 粗一點
設定字型檔
font-family: 黑體
p.f4{
font-family:黑體;
}
宣告在一起：font:italic bold 30px "Times New Roman";
順序依次為：1.風格(normal italic) 2.粗細(normal bold) 3.尺寸 4.字型檔
1.4 滑鼠樣式
滑鼠樣式：cursor:crosshair;具體樣式可百度，效果為滑鼠移動至的樣式效果。
1.5 表格樣式
屬性:table-layout
automatic; 單元格的大小由td的內容寬度決定
fixed; 單元格的大小由td上設定的寬度決定
1.6 邊框、內外邊距(border,padding,margin)
1.6.1 邊框(border)
*. 樣式屬性：border-style
solid: 實線
dotted:點狀
dashed:虛線
ouble:雙線
.solid{
border-style:solid;
}
*. 顏色屬性：border-color
值：red,#ff0000,rgb(255,0,0)
*. 寬度屬性：border-width
值：數字
*. 一起使用
屬性：border
值：顏色 風格 寬度
border:1px dotted LightSkyBlue;
*. 只有一個方向顯示邊框：
border-top-style:solid;
border-top-color:red;
border-top-width: 50px;
1.6.2 內外邊框padding、margin
內邊距：padding
外邊距：margin
深刻理解這張圖就會使用內外邊距的使用了：
例如：一個寬500的DIV裡有一個文字，想設定他距離左邊100。應該這樣：將原來的DIV寬度-100。然後padding-left：100.即可實現效果。
Padding: 指的是元素裡的內容與邊框之間的距離
Margin：指的是元素邊框和元素邊框之間的距離
1.7 超連結的樣式
超連結狀態有4種
link - 初始狀態，從未被訪問過
visited - 已訪問過
hover - 停於超鏈的上方
active - 滑鼠左鍵點選下去，但是尚未彈起的時候
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
此屬性也可以放在DIV等標籤中使用，div:hover{background-color:red}滑鼠放在div上背景顏色顯示紅色效果。
1.8 隱藏display與visibility
使用display:none; 隱藏一個元素，這個元素將不再佔有原空間 “坑” 讓出來了
使用 visibility:hidden;隱藏一個元素，這個元素繼續佔有原空間，只是“看不見”
1.9 引用CSS檔案與優先順序
引用css檔案：
<link rel="stylesheet" type="text/css" href="css/style.css">
優先順序：
如果樣式上增加了!important，則優先順序最高，甚至高於style屬性
color:green !important;
三. 佈局 擺放位置與位置調換
3.1 絕對定位與相對定位隨意調換DIV位置 position
①絕對定位：position: absolute;通過指定left,top絕對定位一個元素，參照物是上一個定位的元素（使用了position的），如果沒有，則就是body了。
<p style="position: absolute; left:0px;top: 50px;z-index: 2;"> 1111111111<p/>
②如果絕對定位的父容器div，並沒有定位。 所以它的”最近的一個定位了的父容器” 即body
③通過絕對定位可以把一個元素放在另一個元素上，這樣位置就重複了。
重複了，就存在一個誰掩蓋誰的問題。 這個時候就可以使用
z-index屬性， 當z-index的值越大，就表示放上面，z-index:越小就表示放下面。
④絕對定位的位置是基於最近的一個定位了的父容器，會把原來應該在的坑刪除，重新定位到設定的位置。
⑤相對位置：position: relative;相對於這個DIV本身應該在的位置做出移動。
⑥<div style="position: relative; left:50px;top: 50px;bottom:2px;">
與絕對定位不同的是，相對定位不會把該元素從原文件刪除掉，而是在原文件的位置的基礎上，移動一定的距離
3.2 浮動 float
①浮動：float:left、float:right;左浮動與右浮動
②右浮動：浮動後，原來的“坑”就讓出來了。
並且是在原來的高度的基礎上，向右浮動。跑到同一高度最右邊
③左浮動：向左浮動後，會把“坑”讓出來，這個時候下面的文字就會過來試圖佔這個坑，但是，發現 “浮動的文字”並沒有走，結果，就只好排在它後面了
④DIV不換行：
<div style="float: left;"><pre>選單一 </pre></div>
......
也可以通過設定成內聯塊實現不換行：display:inline
3.3 Display顯示方式介紹：
display:none; 使得被選擇的元素隱藏，並且不佔用原來的位置
display:block; 表示設定為塊級元素
塊級元素會自動在前面和後面加上換行，並且在其上的width和height也能夠生效
Span是內聯元素，設定span為display：block後，span也會自動換行，並且寬高會生效。
display:inline; 表示內聯元素
內聯元素前後沒有換行，並且在其上的width和height也無效。 其大小由其中的內容決定
可以將div設定成inline，之後div就不會換行，高寬也不會生效了。
內聯-塊級 inline-block
內聯是不換行，但是不能指定大小
塊級時能指定大小，但是會換行
有時候，需要元素處於同一行，同時還能指定大小，這個時候，就需要用到了。
將div設定成：display:inline-block.並設定高寬，這樣既能在同一列，又能設定寬度了。
.
3.4 上下左右側居中等亂七八糟篇
①居中：align:center or text-align:center
②一直貼在DIV的最下方：
外部div使用相對位置，內部div使用絕對位置，bottom為0；則貼在了外div的最下面。
截圖好像釋出不出來，尷尬....
大家前端設計的都比我美。哈哈