CSS是 Cascading Style Sheets 的首字母縮寫，意思是層疊樣式表。目的是爲了讓網頁元素的樣式更加豐富，也爲了讓網頁的內容和樣式能拆分開，CSS由此思想而誕生，有了CSS，html中大部分表現樣式的標籤就廢棄不用了，html只負責文檔的結構和內容，表現形式完全交給CSS，html文檔變得更加簡潔。
目錄
1、基本語法及引用方法
1.1基本語法
css的基本定義方法是：
選擇器 { 屬性:值; 屬性:值; 屬性:值;}
選擇器是將樣式和頁面元素關聯起來的名稱，屬性是希望設置的樣式屬性每個屬性有一個或多個值。選擇器有很多種，下面有介紹。
例如：
div{ width:100px; height:100px; color:red }
1.2三種引用方法
- 內聯式 ：通過標籤的style屬性，在標籤上直接寫樣式。
<div style="width: 100%;color: red;font-size: 16px;font-weight: bold;font-style: normal;font-family: '微軟雅黑';line-height: 34px">
HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文本標記語言，超文本指的是超鏈接，標記指的是標籤，是一種用來製作網頁的語言，這種語言由一個個的標籤組成，用這種語言製作的文件保存的是一個文本文件，文件的擴展名爲html或者htm，一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標籤描述內容將文件渲染成網頁，顯示的網頁可以從一個網頁鏈接跳轉到另外一個網頁。</div>
- 嵌入式：通過style標籤，在網頁上創建嵌入的樣式表。
<style type="text/css" >
div{color:red;
font-size:20px;
font-family:'Microsoft Yahei';
line-height:40px;
}
</style>
- 外聯式：通過link標籤，鏈接到外部樣式表到頁面中。如下面例子中在對應文件夾下新建main.css，將樣式寫入其中。
<link rel="stylesheet" type="text/css" href="css/main.css">
CSS的引入方式和JS很類似，有些網站爲了增加首頁的加載速度，會把首頁的CSS和JS採用嵌入式。
2、css文本設置
常用的應用文本的css樣式：
-
color 設置文字的顏色，如： color:red;
-
font-size 設置文字的大小，如：font-size:12px;
-
font-family 設置文字的字體，如：font-family:'微軟雅黑';
-
font-style 設置字體是否傾斜，如：font-style:'normal'; 設置不傾斜，font-style:'italic';設置文字傾斜 normal（標準） italic（斜體字體樣式） oblique（傾斜字體樣式）
-
font-weight 設置文字是否加粗，如：font-weight:bold; 設置加粗 font-weight:normal 設置不加粗 normal（標準 400） bold（粗體字體 700）bolder（跟粗的字體） lighter（更細的字體）
-
font 同時設置文字的幾個屬性，寫的順序有兼容問題，建議按照如下順序寫： font：是否加粗 字號/行高 字體；如： font:normal 12px/36px '微軟雅黑';
-
line-height 設置文字的行高，如：line-height:24px;
-
text-decoration 設置文字的下劃線，如：text-decoration:none; 將文字下劃線去掉 none（默認值）underline（文本下劃線）overline（文本上劃線）line-through（文本刪除線）
-
text-indent 設置文字首行縮進，如：text-indent:24px; 設置文字首行縮進24px
-
text-align 設置文字水平對齊方式，如text-align:center 設置文字水平居中 left（排列在左側，默認值）right（排列在右邊） center（排列在中間）justify（實現兩端對齊文本效果）
文本水平居中 text-align:center ，那垂直中間呢？小技巧：讓文本行高等於父級盒子高度，這樣文字就會垂直居中。
3、顏色表示法
css顏色值主要有三種表示方法：
1、顏色名錶示，比如：red 紅色，gold 金色
2、rgb表示，比如：rgb(255,0,0)表示紅色
3、16進制數值表示，比如：#ff0000 表示紅色，這種可以簡寫成 #f00
CSS3中增加了新的顏色表示法，添加了透明度的概念
rgba（新的顏色值表示法）
1、盒子透明度表示法：opacity:0.1;filter:alpha(opacity=10)（兼容IE）;
2、rgba(0,0,0,0.1) 前三個數值表示顏色，第四個數值表示顏色的透明度
<style type="text/css" media="screen">
.box1{
background-color: red;
width: 100px;
height: 100px;
margin-top: 20px;
font:bold 14px/100px 'Microsoft Yahei';
color: #fff;
text-align: center;
}
.box2{
background-color: #ff0000;
width: 100px;
height: 100px;
margin-top: 20px;
font:bold 14px/100px 'Microsoft Yahei';
color: #fff;
text-align: center;
}
.box3{
background-color: rgb(255,0,0);
/*透明度0.5 （兼容IE）*/
opacity:0.5;
filter:alpha(opacity=10);
width: 100px;
height: 100px;
margin-top: 20px;
font:bold 14px/100px 'Microsoft Yahei';
color: #fff;
text-align: center;
}
.box4{
background-color: rgba(255,0,0,0.5);
width: 100px;
height: 100px;
margin-top: 20px;
font:bold 14px/100px 'Microsoft Yahei';
color: #fff;
text-align: center;
}
</style>
</head>
<body>
<div class="box1">顏色名</div>
<div class="box2">16進制</div>
<div class="box3">rgb</div>
<div class="box4">rgba</div>
</body>
顏色漸變
CSS3中加入了顏色漸變，參見https://www.runoob.com/css3/css3-gradients.html。
比較常用的是透明度線性漸變：
<style>
#grad1 {
width:200px;
height: 100px;
background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 標準的語法（必須放在最後） */
}
</style>
</head>
<body>
<h3>線性漸變 - 透明度</h3>
<p>爲了添加透明度，我們使用 rgba() 函數來定義顏色結點。rgba() 函數中的最後一個參數可以是從 0 到 1 的值，它定義了顏色的透明度：0 表示完全透明，1 表示完全不透明。</p>
<div id="grad1"></div>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持漸變。</p>
4、選擇器
常用的選擇器有如下幾種：
4.1、標籤選擇器
標籤選擇器，此種選擇器影響範圍大，建議儘量應用在層級選擇器中。
舉例：
*{margin:0;padding:0}
div{color:red}
<div>....</div> <!-- 對應以上兩條樣式 -->
<div class="box">....</div> <!-- 對應以上兩條樣式 -->
4.2、id選擇器
通過id名來選擇元素，元素的id名稱不能重複，所以一個樣式設置項只能對應於頁面上一個元素，不能複用，id名一般給程序使用，所以不推薦使用id作爲選擇器。
舉例：
#box{color:red}
<div id="box">....</div> <!-- 對應以上一條樣式，其它元素不允許應用此樣式 -->
4.3、類選擇器
通過類名來選擇元素，一個類可應用於多個元素，一個元素上也可以使用多個類，應用靈活，可複用，是css中應用最多的一種選擇器。
舉例：
.red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px}
<div class="red">....</div>
<h1 class="red big mt10">....</h1>
<p class="red mt10">....</p>
4.4、層級選擇器
主要應用在選擇父元素下的子元素，或者子元素下面的子元素，可與標籤元素結合使用，減少命名，同時也可以通過層級，防止命名衝突。
舉例：
.box span{color:red}
.box .red{color:pink}
.red{color:red}
<div class="box">
<span>....</span>
<a href="#" class="red">....</a>
</div>
<h3 class="red">....</h3>
4.5、組選擇器
多個選擇器，如果有同樣的樣式設置，可以使用組選擇器。
舉例：
.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}
<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>
4.6、僞類及僞元素選擇器
常用的僞類選擇器有hover，表示鼠標懸浮在元素上時的狀態，僞元素選擇器有before和after,它們可以通過樣式在元素中插入內容。一般a標籤用的比較多。
.box1:hover{color:red}
.box2:before{content:'行首文字';}
.box3:after{content:'行尾文字';}
<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>
CSS3中新增了一些選擇器，實現起來更加靈活，詳見XXX
5、盒子模型
5.1 盒子模型解釋
元素在頁面中顯示成一個方塊，類似一個盒子，CSS盒子模型就是使用現實中盒子來做比喻，幫助我們設置元素對應的樣式。盒子模型示意圖如下：
把元素叫做盒子，設置對應的樣式分別爲：盒子的邊框(border)、盒子內的內容和邊框之間的間距(padding)、盒子與盒子之間的間距(margin)。
5.2 設置邊框
設置一邊的邊框，比如頂部邊框，可以按如下設置：
border-top-color:red; /* 設置頂部邊框顏色爲紅色 */
border-top-width:10px; /* 設置頂部邊框粗細爲10px */
border-top-style:solid; /* 設置頂部邊框的線性爲實線，常用的有：solid(實線)
dashed(虛線) dotted(點線); */
上面三句可以簡寫成一句：
border-top:10px solid red;
設置其它三個邊的方法和上面一樣，把上面的'top'換成'left'就是設置左邊，換成'right'就是設置右邊，換成'bottom'就是設置底邊。
四個邊如果設置一樣，可以將四個邊的設置合併成一句：
border:10px solid red;
5.3 設置內間距padding
設置盒子四邊的內間距，可設置如下：
padding-top：20px; /* 設置頂部內間距20px */
padding-left:30px; /* 設置左邊內間距30px */
padding-right:40px; /* 設置右邊內間距40px */
padding-bottom:50px; /* 設置底部內間距50px */
上面的設置可以簡寫如下：
padding：20px 40px 50px 30px; /* 四個值按照順時針方向，分別設置的是 上 右 下 左
四個方向的內邊距值。 */
padding後面還可以跟3個值，2個值和1個值，它們分別設置的項目如下：
padding：20px 40px 50px; /* 設置頂部內邊距爲20px，左右內邊距爲40px，底部內邊距爲50px */
padding：20px 40px; /* 設置上下內邊距爲20px，左右內邊距爲40px*/
padding：20px; /* 設置四邊內邊距爲20px */
5.4 設置外間距margin
外邊距的設置方法和padding的設置方法相同，將上面設置項中的'padding'換成'margin'就是外邊距設置方法。
5.5 盒子模型的尺寸
按照下面代碼製作頁面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子的真實尺寸</title>
<style type="text/css">
.box01{width:50px;height:50px;background-color:gold;}
.box02{width:50px;height:50px;background-color:gold;border:50px
solid #000}
.box03{width:50px;height:50px;background-color:gold;border:50px
solid #000;padding: 50px;}
</style>
</head>
<body>
<div class="box01">1</div>
<br />
<div class="box02">2</div>
<br />
<div class="box03">3</div>
</body>
</html>
通過上面的頁面得出結論：盒子的width和height設置的是盒子內容的寬和高，不是盒子本身的寬和高，盒子的真實尺寸計算公式如下：
- 盒子寬度 = width + padding左右 + border左右
- 盒子高度 = height + padding上下 + border上下
5.6 關於margin設置的一些問題
margin相關技巧
1、設置元素水平居中： margin:x auto;（一般是指塊元素）
2、margin負值讓元素位移及邊框合併
外邊距合併
外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。解決方法如下：
1、使用這種特性
2、設置一邊的外邊距，一般設置margin-top
3、將元素浮動或者定位
margin-top 塌陷
在兩個盒子嵌套時候，內部的盒子設置的margin-top會加到外邊的盒子上，導致內部的盒子margin-top設置失敗，解決方法如下：
1、外部盒子設置一個邊框
2、外部盒子設置 overflow:hidden
3、使用僞元素類：
.clearfix:before{
content: '';
display:table;
}
如何消除margin-top塌陷的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css" media="screen">
.con{
width: 300px;
height: 300px;
background-color: gold;
/* margin-top: 30px;*/
/*如何消除margin-top的塌陷問題*/
/*第一種設置外部盒子的邊框*/
/*border:1px solid gold;*/
/*第二種設置外部盒子overflow:hidden*/
/*overflow: hidden;*/
}
.box{
width: 200px;
height: 100px;
background-color: gray;
/*margin: 50px auto;*/
margin-top: 50px;
}
/*第三種使用僞元素類*/
/* .clearfix:before{
content: '';
display:table;
}*/
</style>
</head>
<body>
<div class="con clearfix">
<div class="box"></div>
</div>
</body>
</html>
6、css元素溢出
當子元素的尺寸超過父元素的尺寸時，需要設置父元素顯示溢出的子元素的方式，設置的方法是通過overflow屬性來設置。
overflow的設置項：
1、visible 默認值。內容不會被修剪，會呈現在元素框之外。
2、hidden 內容會被修剪，並且其餘內容是不可見的，此屬性還有清除浮動、清除margin-top塌陷的功能。
3、scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其餘的內容。
4、auto 如果內容超過父元素尺寸時，則瀏覽器會顯示滾動條以便查看其餘的內容。
5、inherit 規定應該從父元素繼承 overflow 屬性的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素溢出</title>
<style type="text/css" media="screen">
.con{
width: 500px;
height: 200px;
border:1px solid #333;
overflow: auto;
}
.box{
width: 400px;
height: 300px;
background-color: gray;
margin: auto ;
}
</style>
</head>
<body>
<div class="con">
<div class="box">當子元素的尺寸超過父元素的尺寸時，需要設置父元素顯示溢出的子元素的方式，設置的方法是通過overflow屬性來設置。
overflow的設置項：
1、visible 默認值。內容不會被修剪，會呈現在元素框之外。
2、hidden 內容會被修剪，並且其餘內容是不可見的，此屬性還有清除浮動、清除margin-top塌陷的功能。
3、scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其餘的內容。
4、auto 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其餘的內容。
5、inherit 規定應該從父元素繼承 overflow 屬性的值。</div>
</div>
</body>
</html>