CSS全稱為“層疊樣式表 (Cascading Style Sheets)
- 主要用于定義樣式，如要文字大小、顏色、字體加粗等。
/* 注釋文字 */
p {
font-size:12px !important; /* 最高權限 */
color:red;
font-weight:bold;
}
- css 樣式由選擇符和聲明組成，而聲明又由屬性和值組成，如下圖所示：
CSS代碼語法
-
selector: HTML 中的標簽就是，如*, head, body,h1,h2,p,a, table, image，或者ID 選擇器id #和 類選擇器class . - 聲明：在英文大括號
{ }中的的就是聲明，屬性和值之間用英文冒號
CSS注釋代碼 /* 注釋文字 */
插入外部css樣式
<link href="style.css" rel="stylesheet" type="text/css" />
直系子選擇器 >，選擇food中的li直系子元素
.food>li{border:1px solid red;}
包含(后代)選擇器 空格 選擇first類中所有的span
.first span{color:red;}
Font 聲明
font-family:"Microsoft Yahei"; / * 字體 */
font-size:16px/1em; /*
字體大小, px 是像素，em是可縮放單位，
等同于當前文檔申明的像素大小，
如果當前文檔寫了 font-size: 12px，
那么1em就是12px.
然后文檔內的子標簽中所有的1em 都為12px
*/
color: "335566"/ "356"; / * 字體顏色 */
font-weight: bold/16px; /* 粗體 */
font-style:italic; /* 斜體 */
text-decoration:underline; line-through; /*下劃線, 刪除線*/
text-indent:2em; /* 縮進 */
line-height:1.5em; /*行間距（行高), 當此屬性與Height相同時，文字垂直對齊*/
letter-spacing:50px; /* 文字間隔或者字母間隔 */
word-spacing:50px; /* 英文單詞之間的間距*/
text-align:left/center/right; /* **塊狀元素**中的文本、圖片設置居中樣式 */
元素分類
block 塊狀元素、內聯元素(又叫inline 行內元素)和inline-block內聯塊狀元素。
- ** block 塊狀元素**:
-
display: block將元素設置為塊元素 - 每個塊級元素都從新的一行開始 (占一行，在不設置flow的情況下)
- 高度、寬度（在不設置情況下為父無不100%）、行高以及頂和底邊距都可設置
- 常用的塊狀元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>
-
- inline 行內元素：
-
display: inline將元素設置為內聯元素 - 和其他元素都在一行
- 元素的高度、寬度及頂部和底部邊距不可設置；
-
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
- inline-block 內聯塊狀元素有：
-
display:inline-block將元素設置為內聯元素 - 和其他元素都在一行上
- 元素的高度、寬度、行高以及頂和底邊距都可設置。
<img>、<input> - 當 元素設置 任一以下屬性時，
display會自動變為inline-block- position : absolute
- float : left 或 float:right
塊元素的盒模型
div 盒模型
border: 1px solid red;
width:200px;
height: 200px
padding:20px; /* 內填充 上、右、下、左(順時針) */
margin:10px; /* 外邊距 上、右、下、左(順時針) */
css布局模型
- 流動模型（Flow）, 默認的網頁布局模式
- 塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分布
- 內聯元素都會在所處的包含元素內從左到右水平分布顯示
- 浮動模型 (Float)
- 塊狀元素這么霸道都是獨占一行，如果現在我們想讓兩個塊狀元素并排顯示, 設置元素浮動就可以實現這一愿望。
div{
width:200px;
height:200px;
border:2px red solid;
float:left; /*如果不設置此屬性，div將占一行顯示，而不能和其他元素并列*/
}
```
3. 層模型（Position: absolute, relative, fixed）
* `position: absolute` 這條語句的作用將元素從文檔流中拖出來，然后使用`left`、`right`、`top`、`bottom`屬性相對于**其最接近的一個具有定位屬性的父包含塊**進行**絕對定位**。如果不存在這樣的包含塊，則相對于body元素，即相對于瀏覽器窗口
*`position: relative` 相對于移動以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定
* 結合 `absolute` 來使用，如果把父元素設置為 `position: relative`，然后把子元素設置為 `position: absolute`, 就可以把子元素放在父元素內任何位置
* `fixed`：表示固定定位，與absolute定位類型類似，但它的相對移動的坐標是視圖（屏幕內的網頁窗口）,用來放頭部菜單或者側邊廣告欄
___
##### 水平居中設置
1. **inline 行內元素**, 如文字，通過給父元素加`text-align:center` 來設置水平居中
2. **block 定寬塊狀元素**, 必須要同時設置 `width` 和 `margin: auto` 來使塊元素水平居中
3. **block 不定寬塊狀元素** 不定寬塊狀元素例如不確定的圖像，導航菜單之類的塊狀元素如果需要居中的話
* 加入 [table](http://www.imooc.com/code/292) 標簽
* 設置 [display: inline](http://www.imooc.com/code/2049) 方法：與第一種類似，顯示類型設為 行內元素，進行不定寬元素的屬性設置
``` html
<head>
<style>
.container{text-align:center;}
.container li{display:inline;}
</style>
</head>
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
- 通過給父元素設置 float，然后給父元素設置 position:relative 和 left:50%，子元素設置 position:relative 和 left: -50% 來實現水平居中
.container{
float:left;
position:relative;
left:50%
}
.container ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;
}
