1. 概述
css是英文Cascading Style Sheets的縮寫,稱為層疊樣式表，用於對頁面進行美化。
存在方式有三種：元素內聯、頁面嵌入和外部引入，比較三種方式的優缺點。
語法：style = 'key1:value1;key2:value2;'
- 行內式：
在標簽中使用 style='xx:xxx;'單獨加在某個標簽上，style增加其他屬性需要以分號分隔；
<div style="background-color:darkgrey; height: 100px; width:100px">我是div</div>
- 嵌入式：
在頁面中嵌入 < style type="text/css"> </style >塊
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background-color:darkgrey;
height: 100px;
width:100px;
}
</style>
</head>
- 鏈接式：
將.css文件引入到HTML文件中，創建一個.css文件，將css文件放入link標簽中
<head> <meta charset="UTF-8"> <title>Title</title> <link href="mystyle.css" rel="stylesheet" type="text/css"/> </head>
- 導入式：
將一個獨立的.css文件引入HTML文件中，導入式使用CSS規則引入外部CSS文件，<style>標記也是寫在<head>標記中.
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
@import"mystyle.css"; #此處要注意.css文件的路徑
</style>
</head>
注意：import 會先解析頁面所有信息，先不會渲染頁面，等待所有信息加載后再渲染頁面，如果加載慢會出現無渲染頁面，導致用戶體驗不好，推薦使用嵌入式和鏈接式。
2. CSS選擇器
2.1 基礎選擇器
2.1.1 通用元素選擇器
通用元素選擇器，匹配任何元素
*{
color: darkgrey;
}
2.1.2 標簽選擇器
匹配所有使用XX標簽的元素；
例如，需要選擇所有標簽為div的元素設置樣式
div{
color: grey;
background-color: antiquewhite;
}
2.1.3 class選擇器
.info 或E.info ：class屬性選擇器，匹配所有class屬性中包含info的元素，class屬性可以重復，即多個class屬性相同的元素；
.cs1{
color: grey;
background-color: antiquewhite;
}
<div class="cs1">我是div1標簽</div>
<div class="cs1">我是div2標簽</div>
<p class="cs1">我是p標簽</p>
<!-- 以上三個標簽都會變成.cs1的樣式 -->
2.1.4 id選擇器
#info或E#info :id屬性選擇器，匹配所有id屬性等於info的元素。只匹配id等於info的元素
#cs1{
color: grey;
background-color: antiquewhite;
}
<div id="cs1">我是div1標簽</div>
<div class="cs1">我是div2標簽</div>
<!-- 以上標簽，只有id=cs1的標簽會變成#cs1的樣式-->
2.2 組合選擇器
2.2.1 多元素選擇器
E,F：多元素選擇器，同時匹配所有E標簽元素或F標簽元素，E和F之間用逗號分隔。
div,p{
color: grey;
background-color: antiquewhite;
}
<div id="cs1">我是div1標簽</div>
<p class="cs1">我是p標簽</p>
<span>我是span</span>
<!-- 以上標簽，除span標簽，即div和p標簽都會變成設置的樣式-->
2.2.2 后代元素選擇器
E F：后代元素選擇器，匹配所有屬於E標簽元素后代的F標簽元素，即所有類似形式的所有后代，子子孫孫，E和F之間用空格分隔。
div p{
color: grey;
background-color: antiquewhite;
}
<div id="cs1">
<p class="cs1">我是p1標簽</p>
<div class="cs3">
<p class="cs1">我是p2標簽</p>
<div class="cs2">
<p id="cs1">我是p3標簽</p>
</div>
</div>
</div>
<!-- 以上標簽，p1、p2、p3均會變成設置的樣式 -->
<!-- 擴展：可以結合基礎選擇器使用，例如div #cs1，div .cs1等 -->
2.2.3 子元素選擇器
E > F ：子元素選擇器，匹配所有E元素的子元素F，只匹配到子元素，子元素的子元素匹配不到。
<style>
#outer123>.c1{
color: aqua;
}
</style>
<div id="outer123">
<p class="c1">p1.....</p>
<div class="c2">
<p class="c1">p2....</p>
</div>
</div>
<!-- 以上標簽，p1會變成設置的樣式，p2不會變，即兒子輩的會變，兒子輩的后代不會變-->
2.2.4 毗鄰元素選擇器
E + F:毗鄰元素選擇器，匹配所有緊隨E元素之后的同級元素F ，即只匹配挨着的下一個F元素，如不相鄰也不起作用。
<style>
#outer123+.c1{
color: aqua;
}
</style>
<p class="c1">p1....</p>
<div id="outer123"></div>
<p class="c1">p2.....</p>
<div class="c1">div1...</div>
<!-- 以上標簽，p1不會變更樣式，p2為挨着的下一個class=c1的元素，所以p2會變更樣式，
div1的class屬性也滿足但並未挨着id=outer的元素，故不起作用
2.3 屬性選擇器
根據屬性進行篩選匹配，只有第一個input標簽匹配上對應的樣式。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input[name="James"]{width: 20px;height: 20px;}
</style>
</head>
<body>
<input type="text" name="James">
<input type="text">
<input type="password">
</body>
<!--只有第1個input可以匹配上style-->
3. 常用屬性
3.1 顏色屬性
color：
①英文單詞形式，例如：red，yellow
②編碼形式，例如：#cc3399，如雙重可簡寫#c39
③基調顏色透明度設置，例如：rgb（255,255,255,0.5），red、green、blue三色透明度設置,最后一個值設置透明度
3.2 字體屬性
font-size: 20px/50%/larger 設置字體大小；
font-family:'Lucida Bright' 文本的字體系列；
font-weight: lighter/bold/border/ 字體的粗細；
font-style:normal/oblique/italic 文本的字體樣式；
3.3 背景屬性
font-family: Verdana, Arial, Helvetica, sans-serif; ">background-image: 背景圖片；
background-repeat：平鋪方式，no-repeat 不平鋪，repeat 平鋪滿；
background-size: 圖片大小設置，auto；
background-position：center 上下左右居中；left center左側上下居中；top，bottom，right類似；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 100px;"></div>
<div style="background-image: url(icon_18_118.png);background-repeat:no-repeat;height: 20px;width:20px;border: 1px solid red;"></div>
</body>
</html>
3.4 文本屬性
text-align：center 文本居中
line-height：xxpx；行高 ，針對文本處理
width：xxpx；寬 %50
height：xxpx；高 %50
text-indent：xxpx 首行縮進，基於父元素
letter-spacing：xxpx；字母與字母之間距離
word-spacing：xxpx ；單詞之間距離
direction：rt1
text-transform：capitalize；將單詞首字母大寫
min-height:設置默認最小高度
height：auto！important 以此樣式為准
vertical-align：xxpx;垂直居中
opacity：0.3 透明度
3.5 CSS樣式邊框
border-style：solid；邊框樣式
border-color：red；邊框顏色
border-width：1px；邊框寬度
border-radius：20%；邊框變成圓角
| 在一個聲明中設置所有的邊框屬性。 |
|
| 在一個聲明中設置所有的下邊框屬性。 |
|
| 設置下邊框的顏色。 |
|
| 設置下邊框的樣式。 |
|
| 設置下邊框的寬度。 |
|
| 設置四條邊框的顏色。 |
|
| 在一個聲明中設置所有的左邊框屬性。 |
|
| 設置左邊框的顏色。 |
|
| 設置左邊框的樣式。 |
|
| 設置左邊框的寬度。 |
|
| 在一個聲明中設置所有的右邊框屬性。 |
|
| 設置右邊框的顏色。 |
|
| 設置右邊框的樣式。 |
|
| 設置右邊框的寬度。 |
|
| 設置四條邊框的樣式。 |
|
| 在一個聲明中設置所有的上邊框屬性。 |
|
| 設置上邊框的顏色。 |
|
| 設置上邊框的樣式。 |
|
| 設置上邊框的寬度。 |
|
| 設置四條邊框的寬度。 |
|
| 在一個聲明中設置所有的輪廓屬性。 |
|
| 設置輪廓的顏色。 |
|
| 設置輪廓的樣式。 |
|
| 設置輪廓的寬度。 |
|
| 定義邊框左下角的形狀。 |
|
| 定義邊框右下角的形狀。 |
|
| 簡寫屬性，設置所有 border-image-* 屬性。 |
|
| 規定邊框圖像區域超出邊框的量。 |
|
| 圖像邊框是否應平鋪(repeated)、鋪滿(rounded)或拉伸(stretched)。 |
|
| 規定圖像邊框的向內偏移。 |
|
| 規定用作邊框的圖片。 |
|
| 規定圖片邊框的寬度。 |
|
| 簡寫屬性，設置所有四個 border-*-radius屬性。 |
|
| 定義邊框左上角的形狀。 |
|
| 定義邊框右下角的形狀。 |
|
| box-decoration-break |
|
| 向方框添加一個或多個陰影。
|
3.6 CSS樣式浮動
正常文檔流：將元素（標簽）在進行排版布局時按照從上到下、從左到右的順序分布排版的流；
脫離文檔流：將元素從文檔流中取出，進行覆蓋，其他元素會按文檔流中不存在該元素重新布局；
float 浮動標簽屬性（非完全脫離）：
假如某個div元素A是浮動的，如果A元素上一個元素也是浮動的，那么A元素會跟隨在上一個元素的后邊(如果一行放不下這兩個元素，那么A元素會被擠到下一行)；如果A元素上一個元素是標准流中的元素，那么A的相對垂直位置不會改變，也就是說A的頂部總是和上一個元素的底部對齊。
注意：當初float被設計的時候就是用來完成文本環繞的效果，所以文本不會被擋住，這是float的特性，即float是一種不徹底的脫離文檔流方式。
float：left，right，both
清除浮動： clear : none | left | right | both
none : 默認值。允許兩邊都可以有浮動對象
left : 不允許左邊有浮動對象
right : 不允許右邊有浮動對象
both : 不允許有浮動對象
<style>
#div4{
border:solid 1px lavender;
background-color: rebeccapurple;
height: 100px;
}
#div1{
background-color: darkolivegreen;
height: 100px;
width: 980px;
margin: auto;
}
#div2{
border-left: solid 1px lavender;
height: 100px;
width: 100px;
background-color: darkgray;
float: left;
}
#div3{
border-left: solid 1px lavender;
height: 100px;
width: 100px;
background-color: darkgray;
float: left;
}
#clear{
clear:both;
}
</style>
<div id="div4">
<div id="div1">
<div id="div2">div2</div>
<div id="div3">div3</div>
</div>
<div id="clear"></div>
</div>
注：div2和div3使用float浮動起來，如想將div4的樣式顯示出來，需增加一個clear標簽將架子撐起來，清除浮動
清除浮動第二種方法，overflow：hidden 將溢出的信息隱藏
overflow：auto;不光隱藏並出現滾動條。
3.7 CSS樣式display
塊級標簽和行內標簽相互轉換
<body>
<div style="background-color: red;display: inline">塊級</div>
<span style="background-color: #2459a2;display: block">行內</span>
</body>
注：display:inline 轉換為行內標簽；display：block轉換為塊級標簽；另還有display：none不顯示
行內標簽：無法設置高度，寬度，padding margin 塊級標簽：設置高度，寬度，padding margin
<body>
<span style="background-color: #2459a2;display: inline-block;height: 50px;width: 70px">行內</span>
<div style="background-color: red;display: inline">塊級</div>
</body>
注：display:inline-block 既有inline的屬性（默認自己有多少占多少）又有block的屬性（可以設置高度、寬度、padding、margin）
3.8 CSS樣式邊距
外邊距margin
<body>
<div style="border: 2px solid red;height: 70px;">
<div style="background-color: green;height: 50px;
margin-top: 25px;"></div>
</div>
</body>
內邊距padding
<body>
<div style="border: 2px solid red;height: 70px;">
<div style="background-color: green;height: 50px;
padding-top: 25px;"></div>
</div>
</body>
4 其他
4.1 position
4.1.1 介紹
Position 屬性：規定元素的定位類型。即元素脫離文檔流的布局，在頁面的任意位置顯示。
1、主要的值：
①absolute ：絕對定位；脫離文檔流的布局，遺留下來的空間由后面的元素填充。定位的起始位置為最近的父元素(postion不為static)，否則為Body文檔本身。
②relative ：相對定位；不脫離文檔流的布局，只改變自身的位置，在文檔流原先的位置遺留空白區域。定位的起始位置為此元素原先在文檔流的位置。
③fixed ：固定定位；類似於absolute，但不隨着滾動條的移動而改變位置。
④static ：默認值；默認布局。
2、輔助屬性：
position屬性只是使元素脫離文檔流，要想此元素能按照希望的位置顯示，就需要使用下面的屬性(position:static不支持這些)：
①left ： 表示向元素的左邊插入多少像素，使元素向右移動多少像素。
②right ：表示向元素的右邊插入多少像素，使元素向左移動多少像素。
③top ：表示向元素的上方插入多少像素，使元素向下移動多少像素。
④bottom ：表示向元素的下方插入多少像素，使元素向上移動多少像素。
上面屬性的值可以為負，單位：px 。
4.1.2 定位方式
- position:absolute
絕對定位的元素的位置相對於最近的已定位父元素，如果元素沒有已定位的父元素，那么它的位置相對於<html>；
Absolutely定位使元素的位置與文檔流無關，因此不占據空間。
Absolutely定位的元素和其他元素重疊。
- positon:relative
相對定位元素的定位是相對其正常位置。
可以移動的相對定位元素的內容和相互重疊的元素，它原本所占的空間不會改變。
一般與absolute配合使用；
- position:fixed
元素的位置相對於瀏覽器窗口是固定位置。
即使窗口是滾動的它也不會移動：
4.2 hover
適用於光標（鼠標指針）指向一個元素，但此元素未被激活時的樣式.
4.3 overflow
overflow屬性指定如果內容溢出一個元素的框，會發生什么。
| visible |
默認值。內容不會被修剪，會呈現在元素框之外。 |
| hidden |
內容會被修剪，並且其余內容是不可見的。 |
| scroll |
內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。 |
| auto |
如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。
|
4.4 z-index
z-index 屬性指定一個元素的堆疊順序。
擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。
注意： z-index 進行定位元素(position:absolute, position:relative, or position:fixed)。
4.5 opacity
設置一個div元素的透明度級別：0-1