CSS的簡介：
1、CSS的定義：層疊樣式表。屬性和屬性值用冒號分隔開，以分號結尾(這些符號都是英文的)。
2、CSS得引入方式：
- 行內引入：<div style="這里寫樣式">我是一個塊級的標簽</div>
- 嵌入式：將CSS樣式表放到head中用<style>標簽包裹起來
<head> ... <style type="text/css"> ...此處寫CSS樣式 </style> </head>
- 導入式： 將一個獨立的.css文件引入HTML文件中，導入式使用@import 引入外部CSS文件，<style>標記也是寫在<head>標記中。 導入式會在整個網頁裝載完后再裝載CSS文件。
<head> ... <style type="text/css"> @import "My.css"; 此處注意.css文件的路徑 </style> </head>
- 鏈接式引入：將一個獨立的.css文件引入到HTML文件中，使用<link>標記寫在<head>標記中。 鏈接式會以網頁文件主體裝載前裝載CSS文件。
<head>
...
<link href="My.css" rel="stylesheet" type="text/css">
</head>
3、樣式的應用順序：
- 行內樣式優先級最高
- 針對相同的樣式屬性，不同的樣式屬性將以合並的方式呈現
- 相同樣式並且相同屬性，呈現方式在<head>中的順序決定，后面會覆蓋前面屬性
-
!important
指定樣式規則應用最優先
二、選擇器
基本選擇器：
1、通用元素選擇器：
* 表示應用到所有的標簽。
*{margin：0；padding：0；}
2、標簽選擇器
匹配所有使用 div 標簽的元素（可以匹配所有標簽）
div {color: yellow}
3、類選擇器
匹配所有class屬性中包含info的元素。
語法：.類名{樣式}（類名不能以數字開頭，類名要區分大小寫。）
.yanse{color:yellow}
<div class="yanse"/>我的div</div>
4、id選擇器
使用id屬性來調用樣式，在一個網頁中id的值都是唯一的（是W3C規范而不是規則，所以不會報錯）。
語法：#ID名{樣式}（ID名不能以數字開頭
#Mycolor {color: yellow}
<h3 id="Mycolor">H3</h3>
組合選擇器：
1、多元素組合選擇器
同時匹配兩個或多個標簽，用逗號隔開
p，a，div{color: yellow;}
<p>段落</p>
<a>link</a>
<div>kuai</div>
2、后代元素選擇器
匹配所有div標簽里嵌套的P標簽，之間用空格分隔。
div p {color: yellow;}
<div>
<p>pppppp</p>
<div>
<p>pppppp</p>
</div>
</div>
3、子代元素選擇器
匹配所有div標簽里嵌套的子P標簽，之間用>分隔。
div > p {color: yellow;}
<div>
<p>div</p>
<p>div</p>
</div>
4、毗鄰元素選擇器
匹配所有緊隨div標簽之后的同級標簽P，之間用+分隔（只能匹配一個）。
div + p {color: yellow;}
<div>div</div>
<p>ppp</p>
偽類選擇器：
1. link、hover、active、visited
- a:link（未訪問的鏈接狀態）,用於定義了常規的鏈接狀態。
- a:hover（鼠標放在鏈接上的狀態）,用於產生視覺效果。
- a:active（在鏈接上按下鼠標時的狀態）。
- a:visited（已訪問過的鏈接狀態）,可以看出已經訪問過的鏈接。
2. before、after
- P:before 在每個<p>元素的內容之前插入內容;
- P:after 在每個<p>元素的內容之后插入內容。
常用的屬性：
1. 顏色屬性：
color
- HEX（十六進制色：color: #FFFF00 --> 縮寫：#FF0）
- RGB（紅綠藍，使用方式：color:rgb(255,255,0)或者color:rgb(100%,100%,0%)）
- RGBA（紅綠藍透明度，A是透明度在0~1之間取值。使用方式：color:rgba(255,255,0,0.5)）
- HSL（CSS3有效,H表示色調，S表示飽和度，L表示亮度，使用方式：color:hsl(360,100%,50%)）
- HSLA（和HSL相似，A表示Alpha透明度，取值0~1之間。）
transparent
- 全透明，使用方式：color: transparent
opacity
- 元素的透明度，語法：opacity: 0.5;
- 屬性值在0.0到1.0范圍內，0表示透明，1表示不透明。
- filter濾鏡屬性（只適用於早期的IE瀏覽器，語法：filter:alpha(opacity:20);）。
2. 字體屬性:
font-style: 用於規定斜體文本
- normal 文本正常顯示
- italic 文本斜體顯示
- oblique 文本傾斜顯示
font-weight: 設置文本的粗細
- normal（默認）
- bold（加粗）
- bolder（相當於<strong>和<b>標簽）
- lighter （常規）
- 100 ~ 900 整百（400=normal，700=bold）
font-size: 設置字體的大小
- 默認值：medium
- <absolute-size>可選參數值：xx-small、 x-small、 small、 medium、 large、 x-large、 xx-large
- <relative-size>相對於父標簽中字體的尺寸進行調節。可選參數值：smaller、 larger
- <percentage>百分比指定文字大小。
- <length>用長度值指定文字大小，不允許負值。
font-family：字體名稱
- 使用逗號隔開多種字體（優先級從前向后，如果系統中沒有找到當前字體，則往后面尋找）
font：簡寫屬性
- 語法：font：字體大小/行高 字體;（字體要在最后）
3. 文本屬性:
white-space: 設置元素中空白的處理方式
- normal：默認處理方式。
- pre：保留空格，當文字超出邊界時不換行
- nowrap：不保留空格，強制在同一行內顯示所有文本，直到文本結束或者碰到br標簽
- pre-wrap：保留空格，當文字碰到邊界時換行
- pre-line：不保留空格，保留文字的換行，當文字碰到邊界時換行
direction: 規定文本的方向
- ltr 默認，文本方向從左到右。
- rtl 文本方向從右到左。
text-align: 文本的水平對齊方式
- left
- center
- right
line-height: 文本行高
- normal 默認
vertical-align: 文本所在行高的垂直對齊方式
- baseline 默認
- sub 垂直對齊文本的下標，和<sub>標簽一樣的效果
- super 垂直對齊文本的上標，和<sup>標簽一樣的效果
- top 對象的頂端與所在容器的頂端對齊
- text-top 對象的頂端與所在行文字頂端對齊
- middle 元素對象基於基線垂直對齊
- bottom 對象的底端與所在行的文字底部對齊
- text-bottom 對象的底端與所在行文字的底端對齊
text-indent: 文本縮進
letter-spacing: 添加字母之間的空白
word-spacing: 添加每個單詞之間的空白
text-transform: 屬性控制文本的大小寫
- capitalize 文本中的每個單詞以大寫字母開頭。
- uppercase 定義僅有大寫字母。
- lowercase 定義僅有小寫字母。
text-overflow: 文本溢出樣式
- clip 修剪文本。
- ellipsis 顯示省略符號...來代表被修剪的文本。
- string 使用給定的字符串來代表被修剪的文本
text-decoration: 文本的裝飾
- none 默認。
- underline 下划線。
- overline 上划線。
- line-through 中線。
text-shadow：文本陰影
- 第一個參數是左右位置
- 第二個參數是上下位置
- 第三個參數是虛化效果
- 第四個參數是顏色
- text-shadow: 5px 5px 5px #888;
word-wrap：自動換行
- word-wrap: break-word;
4. 背景屬性
背景顏色
background-image 設置圖像為背景
- url("http://images.cnblogs.com/cnblogs_com/suoning/845162/o_ns.png"); 圖片地址
- background-image:linear-gradient(green,blue,yellow,red,black); 顏色漸變效果
background-position 設置背景圖像的位置坐標
- background-position: center center; 圖片置中，x軸center，y軸center
- 1px -195px 截取圖片某部分，分別代表坐標x，y軸
background-repeat 設置背景圖像不重復平鋪
- no-repeat 設置圖像不重復，常用
-
round 自動縮放直到適應並填充滿整個容器
- space 以相同的間距平鋪且填充滿整個容器
background-attachment 背景圖像是否固定或者隨着頁面的其余部分滾動
background 簡寫
- background: url("o_ns.png") no-repeat 0 -196px;
-
background: url("o_ns.png") no-repeat center bottom 15px;
-
background: url("o_ns.png") no-repeat left 30px bottom 15px;
5. 列表屬性
list-style-type: 列表項標志的類型
- none 去除標志
- decimal-leading-zero; 02.
- square; 方框
- circle; 空心圓
- upper-alph; & disc; 實心圓
list-style-image：將圖象設置為列表項標志
list-style-position：列表項標志的位置
- inside
- outside
list-style：縮寫
頁面布局：
1. 邊框
border-style：邊框樣式
- solid 默認，實線
- double 雙線
- dotted 點狀線條
- dashed 虛線
border-color：邊框顏色
border-width：邊框寬度
border-radius：圓角
- 1個參數：四個角都應用
- 2個參數：第一個參數應用於 左上、右下；第二個參數應用於 左下、右上
- 3個參數：第一個參數應用於 左上；第二個參數應用於 左下、右上；第三個參數應用於右下
- 4個參數：左上、右上、右下、左下（順時針
border: 簡寫
- border: 2px yellow solid;
box-shadow：邊框陰影
- 第一個參數是左右位置
- 第二個參數是上下位置
- 第三個參數是虛化效果
- 第四個參數是顏色
- box-shadow: 10px 10px 5px #888;
盒子模型:
padding:用於控制內容與邊框之間的距離;
margin: 用於控制元素與元素之間的距離;
| padding、margin | 表示上右下左都應用 |
| padding-top、margin-top | 上 |
| padding-right、margin-right | 右 |
| padding-bottom、margin-bottom | 下 |
| padding-left、margin-left | 左 |
一個參數，應用於四邊。
兩個參數，第一個用於上、下，第二個用於左、右。
三個參數，第一個用於上，第二個用於左、右，第三個用於下。
當我們寫html的時候；在我們寫body與瀏覽器之間還存在一塊的空白區域
body{
margin：0；
}
3. display
- none 不顯示。
- block 顯示為塊級元素。
- inline 顯示為內聯元素。
- inline-block 行內塊元素（會保持塊元素的高寬）。
- list-item 顯示為列表元素。
4. visibility
- visible 元素可見
- hidden 元素不可見
- collapse 當在表格元素中使用時，此值可刪除一行或一列，不會影響表格的布局。
5. float 浮動
讓一行顯示兩個或多個塊級標簽，會脫離文檔流；如果浮動起來的標簽的父級標簽沒有內容；那么父標簽將消失；
- none
- left 左浮動
- right 右浮動
clear 清除浮動：
- none : 默認值。允許兩邊都可以有浮動對象
- left : 不允許左邊有浮動對象
- right : 不允許右邊有浮動對象
- both : 不允許兩邊有浮動對象
6. clip 剪裁圖像
rect 剪裁定位元素：
- auto 默認值，無剪切
- 上-右-下-左（順時針）的順序提供四個偏移值
- 區域外的部分是透明的
- 必須指定 position:absolute;
例：clip:rect(0px,60px,200px,0px);
7. overflow 設置當對象的內容超過其指定高度及寬度時如何顯示內容
- visible 默認值，內容不會被修剪，會呈現在元素框之外。
- hidden 內容會被修剪，並且其余內容是不可見的。
- scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。
- auto 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。
8. position 規定元素的定位類型
| static |
默認值，沒有定位，遵從正常的文檔流 |
| relative | 相對定位元素，相對於其正常位置進行定位，遵從正常的文檔流 |
| absolute | 絕對定位元素，脫離正常文檔流 |
| fixed | 絕對定位元素，固定在瀏覽器某處 |
-
通過以下四種屬性進行定位：
- left
- top
- right
- bottom
- z-index
9. z-index 元素層疊順序
- z-index 僅在定位元素上有效（例：position:absolute;）
- 可以指定負數屬性值（例：-1;）
10. outline 邊框輪廓
- outline-width 輪廓寬度
- outline-color 輪廓顏色
- outline-style 輪廓樣式
11. zoom 縮放比例 ：
.zoom1 { zoom: 100%; } .zoom2 { zoom: 150%; } .zoom3 { zoom: 200%; }
12. cursor 鼠標的類型形狀
鼠標放在以下單詞上，There will be a miracle：
url: 自定義光標
13. transform、transition 動畫效果
transform 轉換，變形
- origin 定義旋轉基點（left top center right bottom 坐標值） transform-origin: 50px 50px; transform-origin: left;。
- rotate 旋轉 transform:rotate(50deg) 旋轉角度可以為負數，需要先定義origin。
- skew 扭曲 transform:skew(50deg,50deg) 分別為相對x軸傾斜,相對y軸傾斜。
- scale 縮放 transform:scale(2,3) 橫向放大2倍，縱向放大3倍；transform:scale(2) 橫豎都放大2倍。
- translate 移動 transform:translate(50px, 50px) 分別為相對x軸移動,相對y軸移動
Transition 平滑過渡
- transition-property： 變換的屬性（none(沒有屬性改變)、all(所有屬性改變)、具體屬性）
- transition-duration： 變換持續時間
- transition-timing-function： 變換的速率（ease:(逐漸變慢)、linear:(勻速)、ease-in:(加速)、ease-out:(減速)、ease-in-out:(加速然后減速)、cubic-bezier:(自定義時間曲線））
- transition-delay： 變換延遲時間
- transition： 縮寫