CSS百寶箱
CSS 能夠對網頁中元素位置的排版進行畫素級精確控制，支援幾乎所有的字型字號樣式，擁有對網頁物件和模型樣式編輯的能力。CSS為HTML標記語言提供了一種樣式描述，定義了其中元素的顯示方式。CSS在Web設計領域是一個突破。利用它可以實現修改一個小的樣式更新與之相關的所有頁面元素。
樣式插入引用
外部樣式表：
<link rel="stylesheet" type="text/css" href="xxxxxxx.css">
新增條件（瀏覽器螢幕最大寬度沒有超過640畫素時使用）
<link media="only screen and (max-width:640px)" rel="stylesheet" type="text/css" href="x.css">
內容樣式表：
>| 去掉style標籤，可以將其內容儲存成css檔案，然後使用上面的外部樣式表方式進行引用
>| 確定深度：使用空格分隔，可以實現層級關係
>| 確定廣度：使用逗號分隔，可以實現多個共用樣式
1 <style type="text/css">
2/*標籤樣式，元素選擇器*/
3span{
4border: 9px dotted green;
5}
6/*id索引樣式，id選擇器*/
7#dong_id p{
8border: 1px solid red;
9}
10/*class索引樣式，類選擇器*/
11.dong_cl1,.dong_cl2{
12font-size: 9px;
13}
14/*屬性選擇器 如：<p dong="" >zz</p>*/
15[dong]{
16color: red;
17}
18/*屬性和值選擇器 如：<span dong="dongxiaodong">xx</span>*/
19[dong=dongxiaodong]{
20color: green;
21}
22 </style>
新增條件（瀏覽器螢幕最大寬度沒有超過640畫素時使用）對應有min-width,多個條件合併可以使用and進行連線
1 @media screen and (max-width:640px){
2body{
3background-color: red;
4}
5div{
6}
7 }
內聯樣式表：
直接在標籤中新增style屬性
<div style="width: 150px;height: 50px;">dongxiaodong</div>
樣式顯示規則：
就近原則，越離得近的優先順序越高，如內聯樣式的優先順序是最高的,但是如果使用【!important;】表示最高優先順序，如：【background-color: red !important;】
樣式集合：
【width:80%;height:50px;】寬高設定
【min-height: 50px;min-height: 50px;】最小寬高，對應有最大寬高(max)
【padding: 10px;】內邊距設定，有對應的上、下、左、右各值設定
【margin:100px】外邊距設定，上下左右外邊距，也有單獨的上下左右設定，如：margin-left
【float:left】浮動在左邊，另外值有right
【clear: both】清除浮動，因為一經浮動，接下來的標籤會自動跟隨，所以可以在接下來標籤中清除浮動，值有分左、右、左右都。在父級div包裹不了浮動的子內容時可以在最後使用【<div style="clear: both;"></div>】
【border: 1px dashed #00FDE9;】設定邊框，引數（大小，樣式，顏色），其中樣式有 直線（solid) 虛線（dashed）
【border-radius: 50%;】圓角效果，可以使背景、邊框、圖片圓角化
【text-align:center;】水平居中
【line-height: 100px;】垂直居中，引數為整個高度,解釋：其是設定行高
【margin: 0px auto;】佈局居中，適用於<body>及其一級子標籤，解釋：上下為外邊距為零，左右外邊距自適應。
【opacity: 0.2;】透明度設定，1為原圖
【cursor: grab;】滑鼠放至時顯示的滑鼠樣式，有多值
【visibility: hidden;】設定為佔位隱藏，其他值：可見（visible）
【display: inline;】將塊級標籤(div)變成內聯標籤（span）
【display: block;】與上效果相反
【display: none;】不佔位隱藏
【display:inline-block】使標籤佔據整行（高度），可以設定寬高
【overflow: auto;】div標籤中非浮動內容超出大小則出現滾動條
【overflow: hidden;】div標籤中非浮動內容超出大小則隱藏超出內容
文字相關：
1 /*顏色*/
2 color: red;
3
4 /*文字位置 值有：leftright center */
5 text-align:center;
6
7 /*文字大小*/
8 font-size: 30px;
9
10 /*文字縮排或突出的字元（漢字也為1）,引數可為正負值*/
11 text-indent: 2em;
12
13 /*單詞樣式，每個首字母大寫：capitalize，全部大寫：uppercase ,全部小寫：lowercase*/
14 text-transform:inherit;
15
16 /*陰影效果 引數：（背景居左距離， 居上距離，清晰度，顏色）*/
17 text-shadow: 5px 5px 2px #0000FF;
18
19 /*自動換行實現，更加寬度進行自動換行*/
20 width: 10px;
21 text-wrap:normal;
22
23 /*設定字型*/
24 /*定義字型，設定字型*/
25 @font-face{
26font-family:dongfont; /*字型名字*/
27src: url(font/邯鄲-韓鵬毛遂體.TTF);
28 }
29 /*使用字型*/
30 .pp1{
31
32font-family:dongfont,"宋體","楷體";/*多個字型設定*/
33
34 }
35 /*字型樣式，斜體（italic）*/
36 font-style:italic;
37
38 /*加粗*/
39 font-weight:bold;
背景相關：
1 /*背景顏色*/ 2 background-color: red; 3 4 /*背景圖片*/ 5 background-image:url(img/0.jpg) ; 6 7 /*設定背景圖片是否可重複*/ 8 /*repeat-x 縱向重複， repeat-x 橫向重複，no-repeat 不重複*/ 9 background-repeat:repeat; 10 11 /*固定背景圖片，不連結滾動條*/ 12 background-attachment:fixed; 13 14 /*寬高自適應，100%填充*/ 15 background-size:100% 100%; 16 17 /*設定圖片位置，整體居左，圖片居中*/ 18 background-position: right center; 19 20 /*背景移動*/ 21 background-position-x:0px; 22 background-position-y:-10px;
滑鼠操控：
1 /*未被點選*/
2 span:link{
3font-size: 20px;
4 }
5 /*已被點選*/
6 span:visited{
7font-size: 50px;
8color: red;
9 }
10 /*滑鼠放至在其上*/
11 span:hover{
12font-size: 5px;
13 }
14 /*正在被點選*/
15 span:active{
16font-size: 100px;
17 }
<a>標籤：
text-decoration: none;/*設定無下劃線*/
列表項標籤相關：
1 ul li{
2/*各種有序或者無序的字元*/
3list-style:lower-greek;
4
5/*設定圖片*/
6list-style-image: url("img/kkfei.png");
7
8}
9 li{
10/*設定列表在一行顯示*/
11display:inline;
12
13}
表格標籤相關：
1 table,td,th{
2
3/*設定邊框，引數（大小，樣式，顏色）*/
4/*其中樣式有 直線（solid) 虛線（dashed）*/
5border: 1px dashed #00FDE9;
6}
7 table{
8/*合併兩個挨著的邊框線*/
9border-collapse: collapse;
10
11/*設定表格整體寬高*/
12width: 500px; height: 500px;
13
14/*表格內容居中*/
15text-align: center;
16}
邊框輪廓相關：
方法一：
1 /*設定邊框，引數（大小，樣式，顏色）*/ 2 /*其中樣式有 直線（solid) 虛線（dashed）*/ 3 border: 1px dashed #00FDE9; 4 5 border-bottom: 1px dotted red;//只顯示底部邊框
方法二：
1 /*虛線（dashed）,實線（solid）,雙實線（double）,立體（ridge）等等*/ 2 outline-style:double; 3 /*顏色*/ 4 outline-color: red; 5 /*大小,寬度*/ 6 outline-width: 10px;
方法三：
1 /*上下左右整體設計*/ 2 border-style: dotted; 3 4 /*單獨設定一邊（上）*/ 5 border-top-style: double; 6 border-top-color: red; 7 border-top-width: 10px;
邊框陰影：
/*引數：（背景居左距離， 居上距離，透明度，顏色）*/ box-shadow:5px 1px 100px #FF0000;
佈局及偏移量：
1 /*relative：相對佈局，內容嵌與頁面中*/ 2 /*absolute:絕對佈局，內容浮於頁面頂層*/ 3 /*fixed:基於絕對佈局的，不繫結滾動條*/ 4 position:fixed; 5 /*向左偏移,向上偏移*/ 6 left: 300px; top: 20px; 7 /*排序，如果重合時，該值大則較頂端顯示*/ 8 z-index: 10;
例：實現內容浮動固定在瀏覽器視窗的右下方
1 position: fixed; /*浮動*/ 2 right: 10px;/*右偏移*/ 3 bottom: 20px;/*左偏移*/
例：實現內部定位
<div style="position: relative"> <span style="position: absolute;right: -10px;bottom:10px">我是文字</span> </div>
效果樣式
效果：
1 /*移動，引數（x,y)*/ 2 transform: translate(200px,200px); 3 4 /*旋轉，引數（角度）*/ 5 transform:rotate(50deg); 6 7 /*縮放，引數（寬倍數，高倍數）*/ 8 transform:scale(5,0.5); 9 10 /*傾斜，引數（x軸，y軸）*/ 11 transform: skew(5deg,0deg); 12 13 /*3D旋轉*/ 14 transform:rotateX(20deg); 15 transform:rotateY(30deg); 16 transform:rotateZ(10deg);
過渡效果：
1 img{
2width: 200px;
3height: 200px;
4/*需要使用動畫效果的效果屬性定義*/
5/*當定義的效果屬性應外部因素改變原值時，將自動進入執行動畫*/
6transition-property: width,height,transform;
7/*動畫時長*/
8transition-duration: 2s,10s,6s;
9/*動畫時間曲線*/
10transition-timing-function:ease-in-out;
11/*開始時間延時*/
12transition-delay: 0.5s;
13
14}
15/*效果屬性值改變*/
16img:hover{
17width: 500px;
18height: 500px;
19transform:rotate(360deg)
20
21 }
動畫：
1 div
2 {
3 width:100px;
4 height:100px;
5 background:red;
6 position:relative;
7
8 /*規定需要繫結到選擇器的 keyframe 名稱*/
9 animation-name: dongan;
10 /*規定完成動畫所花費的時間，以秒或毫秒計*/
11 animation-duration: 5s;
12 /*規定動畫的速度曲線*/
13 animation-timing-function:ease-in-out;
14 /*規定在動畫開始之前的延遲*/
15 animation-delay: 1s;
16 /*規定動畫應該播放的次數,引數可為具體的次數或者一直執行（infinite）*/
17 animation-iteration-count:infinite;
18 /*規定是否應該輪流反向播放動畫*/
19 animation-direction: alternate;
20 }
21
22 @keyframes dongan
23 {
24 /*顏色和大小的改變，有漸變效果*/
25 0% {left:0px;}
26 50% {left:700px;width: 50px;}
27 80% {left:200px;background:green;}
28 100% {left:0px;}
29
30 }
分欄顯示
1 /*分欄的數量*/ 2 column-count: 4; 3 /*分欄線與下一欄的間距*/ 4 column-gap: 10px; 5 /*分欄線的樣式，引數（大小，線樣式，顏色*/ 6 column-rule: 1px dashed #FF00FF;