是什麼
CSS指層疊樣式表 (Cascading Style Sheets)
目的
- 給html加各種各樣的樣式
- html結構和CSS樣式分離
- 便於維護更新
組合
CSS語法
選擇器{屬性名:屬性值;屬性名:屬性值;}
說明：
一個CSS樣式包括選擇器和格式聲明語句
選擇器就是選擇給哪個html標籤加樣式
格式聲明語句包括屬性值:屬性名
格式聲明語句要用{}
屬性名w3c已經定義好，直接使用
屬性值不用雙引號
屬性值有單位通常是以px爲單位，通常情況下必須帶單位
CSS引入
- 行內樣式：通過在標籤中設置style屬性來達到實現控制標籤的樣式的效果。（臨時做測試用）
<h1 style="color: red;">傳智播客-前端與移動開發學院的CSS基礎視頻教程</h1>
2.內嵌樣式表：在head標籤中，嵌套一個style標籤，在style標籤中可以書寫CSS的樣式內容。（常用）
- 外部樣式表（常用）
語法： - 導入樣式表：管理CSS樣式
語法：@import url(XX.CSS)
注意：@import是CSS樣式標籤，所以必須放到CSS文件中，必須放到CSS樣式表的最上端
CSS選擇器
基本選擇器
①標籤選擇器：選擇給哪個標籤加樣式，自動指向該標籤
語法：標籤選擇器名{屬性:屬性值;}
body{ } p{ } div{ } table{ } td{ }
不用引用，把樣式自動套到對應的標籤，所有的對應標籤都加上該樣式
②類選擇器：給一類html標籤加樣式
語法：類選擇器名{屬性:屬性值;}
選擇器名是自己定義，要起得有意義
類用“.”來表示 ，例如：.myclass{ } .page_header{ } .login_content_input{ }
語法：<標籤 class=“選擇器名”></標籤>
必須引用，每一個標籤都有一個class屬性
注意：類選擇可以引用多次
③id選擇器：給特定的html標籤加樣式
語法：id選擇器名{屬性:屬性值;}
id用#來表示
選擇器名自定義，要起得有意義
語法：<標籤 id=“選擇器名”></標籤>
id必須得引用，引用的方法，每一個標籤都要id屬性。
注意：id只能引用一次，表示唯一，通常id給javascript用，不是用來設置樣式的，如果想設置樣式，用類選擇器。
④通用選擇器：（所有）給所有的標籤加樣式
語法：{屬性:屬性值;}
html,body,p,table,ul,li,ol……給所有的html標籤加樣式
某一個不行設，那麼就單設。
不是所有的瀏覽的瀏覽器都支持。Ie6版本不支持。
⑤複合選擇器
多元素選擇器：多個標籤共有的屬性和屬性值，放到一起
語法：選擇器，選擇器，選擇器……{共有的屬性:屬性值;}
後代元素選擇器：給html的後代標籤加樣式
語法：選擇器1 選擇器2 選擇器3{屬性:屬性值;}
選擇器1裏面的選擇器2
子元素選擇器：給html標籤的子標籤加樣式
格式：選擇器＞選擇器{屬性:屬性值;}
某個標籤裏面的第一層
CSS文本屬性
僞類：錨＜a>（內容必須做好鏈接）
a:link：未訪問的鏈接
a:visited：訪問過的鏈接
a:hover：鼠標移動鏈接上
a:active：單擊鼠標左鍵的那一時刻的樣式
文本屬性：
.font-size 文本的大小 例如 font-size:12px;
.font-weight 文本是否加粗 font-weight:bold//normal;
.font-style 文本是否傾斜 font-style:italic; 傾斜 font-style:normal;正常
.font-family 文字的字體 例如 font-family:隸書; 默認是宋體
.text-decoration 文本是否有線條 text-decoration:underline; 下劃線
text-decoration:overline; 上劃線 text-decoration:Iine-through; 刪除線
text-decoration:none; 當去掉所有的線條
.text-indent 文本首行縮進例如 text-indent:2em;
.color 文本的顏色 例如 color:red;
letter-spacing 字母和字母之間的距離 例如 letter-spacing:2px;
.word-spacing 單詞和單詞之間的距離 例如 word-spacing:2px;
.text-aIign 文本的對齊方式 left center right 例如 text-align:center;
CSS背景屬性
background-color 背景顏色 例如 background-color:#ff0000;
background-image 背景圖片 例如 background-image:url(圖片的路徑)
background-repeat背景圖片是否平鋪 no-repeat 不平鋪 repeat-x 橫向平鋪 repeat-y 縱向平鋪 repeat 橫向縱向都平鋪(默認)
background-attachment 背景附件,背景是否隨着上方的內容一起滾動
取值 fixed 背景固定 scroll 滾動
例如 background-attachment:fixed;
background-position 背景圖片的展開方式 例如 background-position:水平 垂直;
英文 水平 left center right 垂直 top center bottom
數值 正值 負值
例如 background-position:left top;
例如 background-position:0 0;(0對應left 0對應top)
例如 background-position:10px 20px;(距離左邊10px 距頂端20px)
可以簡寫
background:背景顏色 背景圖片 背景圖片是否平鋪 (附件) 水平 垂直;
注意 只有水平和垂直不能顛倒，其他的屬性值可以顛倒
CSS列表
去掉列表前面的項目符號 list-style-type:none; 可以簡寫爲 list-style:none;
用小圖代替列表前面的符號 list-style-image:url(圖片的地址)
CSS表格
合併表格邊框線 border-collapse:collapse;(table)
邊框線(html就可以加邊框線)
上邊框
1.border-top-color:顏色值; 上邊框的顏色
2.border-top-style:線型; 線型有 solid 實線 dashed 虛線 dotted 點狀線
3.border-top-width:粗細; 例如 border-top-width:2px;
簡寫爲 border-top:粗細 線型 顏色;
清除原有格式
*{
margin:0;
padding:0;
}
單行文字垂直居中 height=line-height;display:block;
CSS盒子模型
內容區 width和height
邊框 border
內邊距 padding 內容和邊框之間的距離
padding-top 數值 內容和上邊框之間的距離
padding-right 數值 內容和右邊框之間的距離
padding-bottom 數值 內容和下邊框之間的距離
padding-left 數值 內容和左邊框之間的距離
簡寫形式
padding:10px 20px 30px 40px; 上 10px 右 20px 下 30px 左 40px
padding:10px 20px 30px; 上 10px 左右 20px 下30px
padding:10px 30px; 上下 10px 左右 30px
padding:10px; 上右下左都是10px
外邊距 margin 邊框以外的距離
margin-top 數值 上邊框往外的距離
margin-right 數值 右邊框往外的距離
margin-bottom 數值 下邊框往外的距離
margin-left 數值 左邊框往外的距離
簡寫形式
margin:10px 20px 30px 40px; 上邊框以外的10px 右是20px 下 30px 左40px
margin:10px 20px 30px;上邊框以外的10px 左右是20px 下是30px
margin:10px 20px; 上下爲10px 左右爲20px
margin:10px; 上下左右都是10px
正常的文檔流 從上往下解讀代碼 div之間的間距取最大值
CSS網站佈局的思想
網站的結構就是兩部分（橫向和縱向）如果是縱向的就是正常的文檔流，設置內容器的寬度和高度，設置內容和邊框之間的距離padding，邊框往外的部分margin
如果橫向排列，我們就要使用浮動。
float:left;
float:right;
裏面有三個盒子 左 左 右 或者 左 左 左
浮動的特點
設置浮動的元素，不佔空間
設置浮動的元素層級高於普通元素
設置浮動之後，無論之前是否是塊元素，設置浮動之後一定是塊元素
如果在一行中的元素想橫向排列，都設置浮動就可以
通常情況下div裏面還有div（外面的div父盒子），盒子裏面還有盒子。
如何讓盒子在頁面水平居中
margin:xx auto; margin-left:auto;margin-right:auto;
CSS清除格式
清除所有的html標籤的格式，後期如果使用，再重新設置
*{margin:0;padding:0;}
body,div,table,p,ul,li,h1,h2,h3,h4,h5,F6,dd,dl,dt,l,b,a{margin:0;padding:0;}
CSS佈局流程
1. 清楚格式
2. 設置頁面屬性 body{font-size:14px;font-family:宋體;color:#000000;background-color:#e2e2e2;line-height:150%;}
3. 把整個頁面劃分結構
CSS行內元素和塊元素
行內元素 輸入充標籤之後，不是自己佔一行，行內元素的寬度和高度是由內容來決定，寬度和高度width height 不能用
CSS樣式是 display:inline;
span b l u strong a
塊元素 輸入充標籤之後，自己獨佔一行，可以設置width和height
CSS樣式是 display:block;
div p table ul li ol dl dt dd h1
塊轉換爲行內 display:inline;
行內轉化爲塊 display:block;
CSS溢出
overflow 當內容溢出，如何顯示
hidden 隱藏
auto 如果盒子裝不下，就會出現滾動條
scroll 無論是否能裝下都有滾動條邊框
CSS繼承
外層元素的樣式，會被裏面的元素所繼承
文本的屬性的可以繼承 font-size font-family font-weight text-decoration:none/underline; color:red
注意 自己有的屬性，不向外繼承，不會繼承父元素的屬性
CSS優先級
單個選擇器的優先級
標籤選擇器 < 類選擇器 < id選擇器 < 行內樣式表
複合選擇器的優先級 計算權重，寫的越精確，優先級越高
標籤選擇器 1
類選擇器 10
id選擇器 100
CSS清除浮動
clear:left;
clear:right;
clear:both;
方法一 在父盒子裏面的最下方加
方法二 瀏覽器的一個bug 一在父元素的樣式中加overflow:hidden; 可以讓父元素得到一個自然高
CSS盒子深入
最外面藍色的盒子內容區的寬度爲1000px，width=1000
紅盒子 width=500,border=2px,padding=5px,margin=10px
紅盒子總的寬度=內容區的寬度+邊框的寬度+padding+margin(左右)=534px
黑盒子width=400,border=2,padding=10px,margin=10px
400+2+2+10+10+10+10=444
藍盒子width>=紅盒子+黑盒子
注意：裏面所有的值加到一起一定不能大於父盒了的內容區的寬度
總的寬度=內容區的寬度width+border(左右)+padding(左右)+margin(左右)
CSS定位
position
座標 偏離目標元素（窗口）多遠的距離
座標的屬性
left 數值
right 數值
top 數值
bottom 數值
static 默認定位
fixed 固定定位
相對於瀏覽器窗口來進行定位
如果不設置定位座標，就在原來的位置
層級要比普通標籤高
如果結合定位座標，就是相對於目標位置的距離
設置固定定位之後，一定是塊元素
固定在右下角的位置
relative 相對定位
相對定位佔空間
如果不結合定位座標，就是在原來的位置
如果結合定位座標，相對於自身，作爲定位原點
層級要高於普通的元素
absolute 絕對定位
設置絕對定位，不佔空間
設置層級高於普通的元素
不結合定位座標，就是在原來的位置
絕對定位如果定位座標，以祖先元素（設置絕對定位，相對定位）作爲座標的參考
如果祖先沒有設置定位，一直上找到body，就以body來進行定位，相對於整個窗口來定位
CSS3
CSS2+新語法 對CSS2進行擴充 刪減 優化
選擇器
類選擇器 id選擇器 標籤選擇器
屬性選擇器
E——element 元素 data——屬性
<標籤 屬性=“屬性值”></標籤>——html元素
E[data] 選擇帶有data屬性的元素對象，給該元素對象加樣式
E[data=“one”] 選擇帶有data屬性是元素對象,並且屬性值等於one的加樣式
E[data^=“o”] 選擇帶有data屬性是元素對象,並且屬性值以o開頭的 ^開頭
E[data$=“e”] 選擇帶有data屬性是元素對象,並且屬性值以e結尾的 $結尾
E[data*=“n”] 選擇器帶有data屬性的元素對象,並且屬性值包含n *包含
寫在下面的代碼的優先級高於上面的
僞類結構
E——element元素
僞元素
設置文本的陰影
text-shadow:水平 垂直 模糊強調 顏色;
水平： 正值：右側 負值：左側
垂直： 正值：下 負值：上
可以有多組值，之間用逗號相隔。
設置盒子的陰影
box-shadow:水平 垂直 模糊強度 模糊尺寸 顏色 內外陰影inset；默認是外陰影但是如果是外陰影不加outset。
如果有多組值中間用逗號相隔
水平：正值是右側，負值是左側。
垂直：正值是下面，負值是上面。
盒子變成圓角
border-radius:左上 右上 右下 左下
圓：50%
設置半透明顏色
color:rgba(255,0,0,0.3)
background:rgba(0,0,0,0.6)
背景圖片的尺寸：
background-size:寬度 高度; 例如 background-size: 400px 500px;
background-size:cover; 背景圖片會把整個盒子（寬度和高度）都用背景覆蓋上
background-size:contain; 背景圖片會把盒子的寬度或高度覆蓋就停止