WEB前端-CSS-選擇器&常用樣式/屬性
CSS 層疊樣式表
CSS（Cascading Style Sheets）是一種用來表現HTML（標準通用標記語言）或者XML（標準通用標記語言的一個子集）等檔案樣式的計算機語言。
關於更詳細的CSS介紹可參考此連線。本篇只記錄最常用的幾點內容。
存在形勢
css一共有三中常見的存在形勢：
1、元素內聯：
在html的body段中，直接在標籤頭部屬性塊引入
<div style=‘key1:value1;key2:value2;’>元素內聯</div>
2、頁面嵌入：
在html的head段中的style塊，集中引入
<head>
<style type="text/css">
</style>
</head>3、外部引入：
將css單獨寫入一個檔案，並將整個檔案進入html中
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
</head>css就是對html程式碼的body段中的各種標籤進行裝飾的語言，那麼要做到精確裝飾每一個標籤需要做的的是：
1、定位：找到對應的標籤；
2、樣式：通過修改對應的屬性來進行畫素級的精確佈局和頁面美化；
選擇器
選擇器就是css用來定位的工具。
1、標籤選擇器：
<style> div{ background-color:red; } </style>
標籤選擇器，會對指定的標籤型別進行樣式裝飾。
2、id選擇器：
<style>#i5{ background-color:red; } </style>
<body>
<div id='i5' > </div>
</body>id選擇器，會去body塊中的標籤中找對應的id屬性為“#”後面的id號的標籤進行裝飾；
3、class選擇器：
.bd{ background-color:red; }
<div class='bd'> </div>class 選擇器是最常用的一種選擇器。
4、關聯選擇器：
<head>
div table tbody tr td{ background-color:red; }
</head>
<body>
<div>
<table>
<tbody>
<tr>
<td> 最終被裝飾的是這個標籤行</td>
</tr>
</tbody>
</table>
</div>
</body>顧名思義，就是根據前面前面的關聯選擇器是多個選擇器名字，排在後面的選擇器對應的標籤依次被包含在前面選擇器對應的標籤塊中；
5、組合選擇器：
input,div,p{ background-color:red; }
6、屬性選擇器：
input[type='text']{ width:100px; height:200px; }
就是在選擇時，精確到標籤的屬性級，對屬性名進行對應。
css常用樣式&屬性
width：寬度，可用畫素設定固定寬度，也可以用百分比；
width：200px
width：100%
height：高度，一般使用像設定，或者不設，讓其根據內容的多少自適應；
瀏覽器有寬度，但是高度理論上可以無限，因此width可以使用百分比，而高度不可以
font字型
size:設定大小，以px為單位；
weight：粗細，100-800不等，可以自行測試；
family：設定字型
font-size:14px;
font-weight:400;
font-family: "Microsoft YaHei",tahoma,arial,"Hiragino Sans GB","\5b8b\4f53",sans-serif;background 背景
background-color 背景色
背景色有三種設定方式：
background-color:red;
background-color:#ff0000;
background-color:rgb(43 23 0);background-image 背景影象
background-repeat(no-repeat/repeat-x/repeat-y)
background-image:url(http://www.text.org/picture/picture.jpg)
backgrpund-repeat:no-repeatno-repeat：不重複
repeat-x：只在x軸上重複
repeat-y：只在y軸上重複
background-position：背景影象移動位置
多個屬性可以同時設定：
<div>style="background: #f8f8f8 url(image/5.png) -105px -212px no-repeat; height: 80px;"</div>border ：框體
border:1px solid red;1畫素、實線 紅色 的邊框；
框體除了solid實線，還有dashed 、double 等，可以自己嘗試
input標籤是自帶1px的邊框，也可以通過設定0px來讓input的預設邊框消失；
大家可以試試以下這個程式碼，可以用border做出箭頭的效果：
<div style=" width:0;border-bottom: 15px solid red;border-left:15px solid deeppink;border-right:15px solid yellow; border-top:15px solid transparent"></div>margin ：外邊距
margin：2px 20px 30px 0；
padding：內邊距
padding：0 8px 0 px；
css的邊距設定順序是順時針走的，也就是：top 、right、bottom、left
display 展示效果：
block（塊級） ：可以試html的內聯標籤加上塊級屬性；
inline（內聯） ：可以試html的塊級標籤加上內聯的屬性；
inline-block（既具有內聯又有塊級屬性的效果） ：是一個html標籤兼具兩種屬性；
none（失效）--可以用在隱藏某一層圖層的效果；
original（預設）
cursor：當滑鼠移到次樣式裝飾的標籤時滑鼠的形狀會發生不同改變
pointer
help
wait
move
crosshair
以下為偽造超連結的例子,其他的樣式大家可以自己測試
<span style="cursor:pointer;">偽超連結</span>
position：相對位移
有三種形式:
fixed：固定在螢幕某個位置，並且不隨滾動條移動而移動；
absolute：固定在螢幕某個位置，但是隨滾動條移動；
relative：本身木太大用處，一般跟absolute配合；
relative-absolute：relative在某個標籤中定位，然後設定absolute的標籤就可以相對於relative的標籤來進行設定位移；
float：浮動
可以理解為 使當前圖層上浮於外部標籤的圖層，效果會是當前圖層遮蓋住底層圖層；
float：left；
float：right；
為了將浮動的圖層跟底層圖層合在一起需要在外層標籤的樣式中標註：
clear：both；
可以理解為清除浮動，或者圖層合併；
這裡有一個小案例：
position：absolute
top：46px；
left：200px；
right：10px；
bottom：0；
overfloat：auto/hide；bottom:0和overfloat:auto 結合可以實現，噹噹前小框體的內容超出顯示器的螢幕高度時，會在當前框體內出現滾動條，而其他位置的框體不動；
透明度
有兩種設定方式，透明的程度從0~1，以十分位的小時來控制，具體效果大家可以自己測試；
opacity:0.6
background:rgba(0,0,0,.6)其他
：hover 當滑鼠移動至此標籤時，圖層發生的變化，相當於一個條件判斷或者觸發器；
：after 結合float使用，可以代替clear ：both；
：before 結合float使用，可以代替clear ：both；
visibility: hidden：佔位不顯示內容；這裡是相對於display:none的失效效果的補充。
text-align: center;內容居中；
推薦一個常用符號大全：font awesome，主流網站的小圖示都是引用這個第三方包的，下載下包之後，可以放到app的同級目錄解壓，並在html中應用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<link rel="stylesheet" href="plugins/font-awesome-4.6.3/css/font-awesome.css"/>
<style>
.b3{
width:0;
border-top:6px solid gray;
border-right:6px solid gray;
border-bottom: 6px solid transparent;
border-left:6px solid transparent;
}
</style>
</head>
<body>
<i style="color:red;" class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-american-sign-language-interpreting" aria-hidden="true"></i>
<div class="b3">
</div>
</body>
</html>最後給大家附上w3c的學習手冊。