css層疊樣式表，級聯樣式，簡稱才是樣式表
實現了內容和表示的分離
css和html之間的關係
html是負責網頁的結構
css 是負責構建html元素的樣式
css作用：
1.以統一的方式實現樣式的定義
2.提高頁面樣式的可重用性和可維護性
內聯樣式（行內樣式）：
內部樣式：在head標籤中
外部樣式表：
繼承性層疊性
優先順序！improtant：最高許可權：使用方法：屬性名稱： 值！improtant
通用選擇器：*{}
標籤選擇器：標籤名{}
類選擇器：.class名{}
id選擇器：id名{}
群主選擇器：選擇器1，選擇器2{}
後代選擇器：div span{}（空格）
子代選擇器：div>span{}
兄弟選擇器：div~span{}
相鄰選擇器：div+span{}
偽類選擇器: :hover {} (懸停）
優先順序：元素< 類=偽類height：高度
min-height：最小高度
max-height：最大高度
width：寬度
min-width：最小寬度
max-width：最大寬度
line-height：行高
使用尺寸屬性限制元素的大小時，如果內容所需要的空間大小大於元素本身，會導致溢位的效果
語法：overflow:
overflow-x: 處理橫向溢位
overflow-y: 處理縱向溢位
屬性值：
1. visible：預設效果 溢位可見
2. hidden：溢位隱藏
3. scroll：滾動，元素會出現滾動條當內容溢位的時候，滾動條可用
4. auto：自動（自適應） 內容溢位的時候會出現滾動條沒有溢位的時候是不出現的
box-shadow屬性值：
h-shadow：(必填) 陰影的水平偏移距離 正數的 右邊 負數 左偏移
v-shadow：(必填) 垂直的偏移距離 + 下 - 上
blur：模糊距離 必須是正數
color：顏色
spread：陰影的大小
inset值： 將預設的**影變成內陰影
作用： 繪製元素周圍的一條線，位於邊框外的
屬性：outline-width: 10px;
outline-style: solid;
outline-color: yellow;
outline: none;
outline: 1px solid red;
/*背景顏色background-color: #000000 英文單詞 transparent（透明色）
注意：背景顏色會填充到元素的內容區域、內邊距區域 和 邊框區域*/
/*背景顏色*/
background-color
: red;
/*背景
預設的效果平鋪
;/*修改平鋪
repeat:預設的平鋪
repeat-x ：水平平鋪
repeat-y：垂直平鋪
no-repeat：不平鋪
* */
background-repeat
:repeat;
/*背景的尺寸
cover :覆蓋 撐滿整個元素
value1 value2 單位是px
value% value% 採用當前元素的寬度和高度的百分比進行縮放
* * */
background-size
: 50% 50%;
/*背景的固定
fixed: 背景固定
* */
background-attachment
: scroll;
/*背景的定位 * */
position：定位
margin：外邊距（上下會重疊）
border：邊框
padding：內邊距
內容：1349×150（centent）
實際寬度：margin+border+padding+centent(標準盒子)
margin+centent(border+padding+centent)(ie盒子)
box-sizing: border-box; 將標準的盒子模型轉換成ie6的盒子模型
漸變：兩種或者多種顏色間平滑過渡的效果
各格主流瀏覽器的主流版本，都可以支援漸變的
對於不支援漸變的瀏覽器 可以嘗試增加 瀏覽器的字首 會實現顯示
瀏覽器的字首
firefox：火狐瀏覽器 -moz-
chrome：谷歌瀏覽器 -webkiit-
safari：蘋果自帶瀏覽器 -webkiit-
opera 歐朋 ：-o-
ie：-ms- （ie的部分版本支援）
字首的載入位置
如果瀏覽器不支援屬性的話，則將字首載入到屬性名稱前
如果瀏覽器支援屬性，但是不支援屬性值 將字首加到屬性值的前面
所謂定位，實際上就是定義元素框相對其正常位置，應該出現在哪兒。
簡單說： 定位就是改變元素的頁面上的預設的位置
定位的分類
普通流定位（元素預設的定位方式）
浮動定位 脫離文字
相對定位 不脫離文字
絕對定位（多利用子覺父相）脫離文字
固定定位 脫離文字
/*浮動定位 */
float
: left;
float
: right;
/*相對定位 */
position：relative;
/*絕對定位 */
position：absolute;
/*固定定位 */
position：fixed;
浮動定位的概述
如果我將元素設定了浮動定位那麼具備以下幾個特點：
浮動元素脫離了普通的文件流不佔據頁面空間的其他沒有浮動的元素會自動上前部位
浮動元素會停靠在父級元素的左邊或者右邊，或者停靠在其他已經浮動的元素的邊緣上
浮動元素只會在當前行內浮動
浮動元素依然位於父元素內
讓多個元素在一行內顯示
語法：float： left（左浮動） right（右浮動） none（預設，無浮動的效果）
清除浮動：
浮動引發的特殊效果：
1.父級元素的寬度不夠的時候，浮動的子元素會的最後乙個會被自動換行
2.元素一旦浮動起來之後，那麼寬度將變成自適應（非人為指定的情況下）
3.元素一旦浮動起來後，那麼將變成塊級元素尤其對行內元素影響最大
4.文字元素和行內元素，行內塊元素會採用環繞方式排列，是不會被浮動元素壓在底下的胡巧妙的避開浮動元素。
浮動元素對父元素帶來的影響
由於浮動元素脫離了文件流所以導致不佔據父元素頁面空間
解決問題：
直接給父級元素設定高度
弊端：必須要知道父級準確的高度
設定父級元素的浮動
弊端：對後續的元素會有影響
設定父級元素overflow hidden或auto
弊端：如果子級溢位的話 會一起被隱藏
在父元素中追加乙個空元素（子元素）並且設定他clear：both
visibility屬性和display
display：none ：隱藏元素
visibility（顯示/隱藏的）取值：
visible ：預設的可見的
hidden ：隱藏 依然佔據頁面空間
collapse ：使用在**元素上 刪除一行和一列的時候不影響**的整體布局
diplay 和 visibility 區別在哪兒
display：none
不占有之前的位置 脫離了文件流
visibility
占有之前的位置，不脫離文件流導致空間依然存在
opacity屬性
作用：改變元素的透明度
取值：0.0-1 0 全透明 1 不透明
改變游標的屬性
屬性 cursor
取值：default：預設的
pointer：小手
crosshair：+
text：文字 i
wait：等待
help：幫助
CSS基本屬性
一 visibility屬性 display none 隱藏元素 visibility 顯示 隱藏的 取值 1 visible 預設的可見的 2 hidden 隱藏 依然佔據頁面空間 3 collapse 使用在 元素上 刪除一行和一列的時候不影響 的整體布局 diplay 和 visibility...
CSS基本屬性
background 背景 background color 背景色 background image 背景 background repeat 背景圖平鋪方式 簡寫 background gray url xx.png no repeat 背景色，背景，平鋪方式 font 字型 font styl...
CSS基本屬性（三）
css基本屬性3 transition 復合屬性 檢索或設定物件變換時的過渡。檢索或設定物件中的參與過渡的屬性 none 不指定過渡的css屬性 all 所有可以進行過渡的css屬性 自定義屬性 指定要進行過渡的css屬性 檢索或設定物件過渡的持續時間 時長 指定物件過渡的持續時間 單位s秒 檢索或...