一、CSS簡介
- 定義：層疊樣式表（Cascading Style Sheets）贞岭，也叫級聯(lián)樣式表绎速。
- 作用：用來美化html標簽的皮获，相當于給網(wǎng)頁化妝。
二纹冤、選擇器介紹
選擇器是一個選擇誰的過程洒宝；
寫法：選擇器{屬性:值;}，寫在head標簽中萌京；
常見屬性：
| 屬性 | 解釋 |
|---|---|
| width:200px | 寬 |
| height:200px | 高 |
| background-color：red | 背景顏色 |
| font-size:24px | 文字大小 |
| text-align:left/center/right | 內(nèi)容的水平對齊方式 |
| text-indent:2em | 首行縮進 |
| color:red | 文本顏色 |
2.1.基礎(chǔ)選擇器
標簽選擇器:
- 標簽{屬性：值;}
<head>
<style>
p{
color: red;
font-size: large;
background-color: green;
}
</style>
</head>
- 顏色表示方式
- 直接寫顏色的名稱
- 十六進制顯示顏色：
- 使用rgb表示：#rgb雁歌、#rrggbb、rgb(127,240,12)知残；
- 使用rgba表示：a代表透明度靠瞎，0表示不透明。
類選擇器（重點）
- 給具體的類設(shè)置樣式求妹；
- 寫法：
.自定義類名{屬性:值; 屬性:值;}乏盐；
<head>
<style>
.article{
background-color: aqua;
font-size: larger;
}
.paragraph{
color: yellow;
}
</style>
</head>
-
誰調(diào)用對誰生效； - 一個標簽可以調(diào)用多個類選擇器制恍，寫法:
<p class="類選擇器1 來選擇器2">...</p>;
<div class="article paragraph">上片寫臨別時戀戀不舍的情緒父能。“寒蟬凄切净神，對長亭晚何吝，驟雨初歇【槲ǎ”這三句說爱榕，在深秋時節(jié)的一一種濃重的凄涼氣氛。下寂傷感</div>
- 多個標簽可以調(diào)用同一個類選擇器坡慌；
- 類選擇器命名規(guī)則：不能以數(shù)字開頭黔酥；不能使用特殊符號（下劃線除外）；不建議使用漢字來定義類名洪橘；不建議使用屬性或?qū)傩缘闹祦矶x類名絮爷。
ID選擇器
- 寫法：在style中定義，
#自定義名稱{屬性:值;}梨树； - 使用時用法：
<div id="自定義名稱"></div> - 一個ID選擇器在一個頁面中只能使用一次，如果使用多次就不符合w3c規(guī)范岖寞，js調(diào)用會出錯;
- 一個標簽只能調(diào)用一個ID選擇器抡四；
- 一個標簽可以同時調(diào)用ID選擇器和類選擇器。
通配符選擇器（認識）
- 寫法：
*{屬性:值;}
<head>
<style>
*{
color: red;
font-size: 20px;
}
</style>
</head>
- 不推薦使用：
- 給所有的標簽都是用相同的樣式；
- 增加瀏覽器和服務(wù)器負擔指巡。
2.2.復(fù)合選擇器
- 兩個或者兩個以上的基礎(chǔ)選擇器通過不同的方式連接在一起淑履。
交集選擇器
- 寫法：
標簽+類選擇器/ID選擇器{屬性:值;} - 特點：既要滿足使用了某個標簽，還要滿足使用了類選擇器/ID選擇器藻雪。
<head>
<style>
.style1{
background-color: yellow;
}
div.style1{
font-size: 40px;
}
</style>
</head>
后代選擇器（最重要）
- 寫法：選擇器+空格+選擇器+空格+選擇器{屬性:值;}
- 可以無限制隔代秘噪；
- 只要能代表標簽，標簽勉耀、類選擇器指煎、ID選擇器可以自由組合。
<head>
<style>
.style2{
color: #ff0000;
}
span .style2 p{
color: black;
}
</style>
</head>
子代選擇器(使用不多)
- 寫法：選擇器>選擇器(屬性:值;)便斥；
- 直接下一代至壤，不可以跳級。
并集選擇器
- 寫法：用
,將標簽枢纠、ID選擇器像街、類選擇器相連{屬性:值;}。
快捷方式：
-
div.ppp + tab--><div class="ppp"></div>
三晋渺、文本屬性镰绎、屬性連寫/簡寫和字體表達式
3.1.文本屬性
- 文本風格：font-style:normal/italic；
- 文字粗細：font-weight:700木西，值從100-900畴栖，從700開始加粗(700相當于bold)，不推薦使用bold户魏；
- 文字大惺浑：font-size:10px；
- 行高：line-height叼丑；
- 文字字體：font-family:微軟雅黑/宋體关翎；
3.2.屬性連寫
- 寫法：
font:font-style font-weight font-size/line-height font-family
例：font:italic 700 30px/45px 微軟雅黑
- 前兩個順序可以調(diào)換，其它順序不可以調(diào)換鸠信；
- 其中文字大小和字體為必寫項纵寝；
3.3.字體表達式
| 字體名稱 | 英文名稱 | Unicode編碼 |
|---|---|---|
| 宋體 | SimSun | \5B8B\4F53 |
| 黑體 | SimHei | \9ED1\4F53 |
| 微軟雅黑 | microsoft yahei | \5FAE\8F6F\96C5\9ED1 |
- 開發(fā)時盡量使用Unicode編碼，如果不記得星立，在使用時可以通過如下方式獲取到：
- ①瀏覽器按下f12爽茴；
- ②點擊console；
- ③輸入escape(""微軟雅黑)绰垂；
- ④最后將得到的字符中的%改成反斜杠即可室奏。
四、樣式表三種寫法(css書寫位置)
- 內(nèi)嵌式寫法：寫在head標簽中
- 只作用于當前文件劲装，沒有真正實現(xiàn)結(jié)構(gòu)和表現(xiàn)分離胧沫；
- 外鏈式寫法：寫在head標簽中
- 寫法：
<link rel="stylesheet" href="xxx.css">; - 作用范圍是當前站點昌简，范圍廣，真正實現(xiàn)了結(jié)構(gòu)表現(xiàn)分離的效果绒怨；
- 寫法：
- 行內(nèi)樣式表(用的不多)
- 寫法：
<p style="color: red;font-size: 14px;background-color: yellow;">交罰款了的</p> - 作用范圍僅限于當前標簽纯赎，范圍小，結(jié)構(gòu)表現(xiàn)混在一起南蹂，不推薦使用犬金。
- 寫法：
五、標簽分類（顯示方式）非常重要
5.1.塊元素
- 典型代表：div六剥、h1-h6晚顷、p、ul仗考、li...
- 特點：
- 獨占一行音同；
- 可以設(shè)置寬高；
- 嵌套(包含)下秃嗜，子塊元素的寬度沒有定義時权均，子塊元素的寬度默認和父塊元素寬度一致。
5.2.行內(nèi)元素
- 典型代表：span锅锨、a叽赊、strong、em必搞、ins必指、del...
- 特點：
- 和其它內(nèi)容在同一行顯示；
- 不能直接定義寬高恕洲；
- 寬高為內(nèi)容撐開的寬高塔橡。
5.3.行內(nèi)塊級標簽(內(nèi)聯(lián)元素)
- 典型代表：input、img霜第；
- 特點：
- 可以在同一行顯示葛家；
- 可以設(shè)置寬高。
顯示方式轉(zhuǎn)換
- 塊元素轉(zhuǎn)行內(nèi)元素：
- 寫法：
display:inline; - 此時再對原來的塊元素設(shè)置寬高無效泌类；
- 寫法：
- 行內(nèi)元素轉(zhuǎn)塊元素：
- 寫法：
display:block; - 此時可以對原來的行內(nèi)元素設(shè)置寬高癞谒，可以設(shè)置對齊方式。
- 寫法：
- 塊元素和行內(nèi)元素轉(zhuǎn)行內(nèi)塊元素
- 寫法：
display:inline-block; - 此時塊元素和行內(nèi)元素都可以設(shè)置寬高了刃榨。
- 寫法：
六弹砚、css三大特性
- 層疊性：當多個樣式作用于同一個(同一類)標簽時，樣式會發(fā)生沖突枢希，后面的代碼總是層疊前面的代碼桌吃，顯示后面代碼的結(jié)果；
- 繼承性：
- 繼承性發(fā)生的前提是包含關(guān)系(嵌套關(guān)系)苞轿；
- 文字的所有屬性都可以繼承：
- 文字風格
- 字體粗細
- 文字大小
- 行高
- 字體
- 文字顏色茅诱；
- 特殊情況：
- h系列不能繼承文字大形鳌；
- a標簽不能繼承文字顏色让簿；
- 優(yōu)先級
- 總結(jié)：
默認樣式<標簽選擇器<類選擇器<ID選擇器<行內(nèi)樣式表<!important；可以假設(shè)給每個樣式賦值(權(quán)重)：默認樣式(0)<標簽選擇器(1)<類選擇器(10)<ID選擇器(100)<行內(nèi)樣式(1000)<!important(1000以上)秀睛； - 優(yōu)先級特點：
- 繼承的權(quán)重為0尔当；
- 權(quán)重會疊加。
- 總結(jié)：
七蹂安、鏈接偽類
-
a:link{屬性:值;}和a{屬性:值;}在超鏈接狀態(tài)下效果是一樣的椭迎，有些瀏覽器對前者兼容性不是很好，后者用的比較多田盈； - ①a:link{屬性:值;}畜号，鏈接的默認狀態(tài)；
- ②a:visited{屬性:值;}允瞧，鏈接訪問之后的狀態(tài)简软；
- ③a:hover{屬性:值;}，鼠標放到鏈接上顯示的狀態(tài)述暂；
- ④a:active{屬性:值;}痹升，鏈接激活狀態(tài)(長按鏈接時的狀態(tài))；
- ⑤a:focus{屬性:值;}畦韭，獲取焦點時的狀態(tài)疼蛾。
- 注：如果一個a標簽同時出現(xiàn)多個偽類時，要嚴格按照上面①~⑤的順序?qū)懀?/li>
- 文本修飾：
- text-decoration:none/underline/line-through(刪除線);
八艺配、背景
8.1.背景屬性
- 背景顏色：
background-color:red察郁；
- 背景圖片：
background-image:url(xxx.png)； - 背景平鋪：
background-repeat:repeat/no-repeat/repeat-x/repeat-y转唉，默認沿x軸平鋪沿y軸平鋪皮钠； - 背景定位：
background-position:left/right/center/top/bottom- 方位值只寫一個時，另外一個默認居中酝掩；
- 寫2個方位值時鳞芙，順序沒有要求；
- 寫兩個具體值時期虾，第一個值是水平方向原朝，第二個值是垂直方向。
- 是否滾動：
background-attachment:scroll/fixed镶苞； - 注意點：如果background-position和background-attachment:fixed連用喳坠，就會以瀏覽器為參考，不過這一點基本不會用到茂蚓。
8.2.背景屬性連寫
background:background-color url("xxx.png") repeat position scroll- 背景屬性連寫沒有順序要求壕鹉，當有repeat剃幌、position、scroll等相應(yīng)屬性時url不能為空晾浴，其它情況下各屬性可以為空负乡。
8.3.如果背景圖片過大，而又想展示所有圖片
-
background-size:100%;脊凰； - 還可以通過
background-size:300px 200px;具體值來制定背景圖片大小抖棘。
練習
- 搜索框；
- 鏈接列表狸涌；
- 購物車：一張圖片切省，默認顯示購物車(上半部分)，當鼠標放到圖片上時顯示登錄(下半部分);
- 五彩導(dǎo)航：文字居中顯示帕胆，鼠標停留在某一個按鈕時朝捆，按鈕顏色進行相應(yīng)變換；
- 補充：去除無序列表的小圓點懒豹，在style里面設(shè)置li標簽選擇器:
li{
list-style:none;
}
九芙盘、行高
- 行高是基線與基線的距離；
- 瀏覽器默認文字大屑呔琛：16px何陆；
- 行高 = 文字高度 + 上下邊距；
- 一行文字行高和父元素高度一致的時候豹储，文字垂直居中顯示贷盲；
- 行高單位：
| 單位 | 文字大小 | 值 |
|---|---|---|
| px | 20px | 20px |
| em | 20px | 2em=40px |
| % | 20px | 150%=30px |
| 2 | 20px | 40px |
- 總結(jié)：單位除了像素以外，行高都是與文字大小的乘積剥扣。
| 行高單位 | 父元素文字大小 | 子元素文字大小 | 行高 |
|---|---|---|---|
| 40px | 20px | 30px | 40px |
| 2em | 20px | 30px | 40px |
| 150% | 20px | 30px | 30px |
| 2 | 20px | 30px | 60px |
- 總結(jié)：em和%的行高是和父元素文字大小的乘積巩剖；不帶單位時，行高是和子元素文字大小的乘積钠怯；行高以像素為單位佳魔，就是定義的行高值。使用時晦炊，推薦使用以像素為單位鞠鲜。
十、盒子模型重點
10.1.邊框border
-
border-top-style:solid/dotted/dashed:線型(實線/點線/虛線)断国； -
border-top-color:邊框顏色贤姆； -
border-top-width:線寬； - 邊框?qū)傩赃B寫：
border-top:solid red 7px;稳衬，沒有順序要求霞捡，線型為必寫項； - 四個邊框相同的寫法：
border:dotted red 2px薄疚；
10.2.邊框合并
border-collapse:collapse;- 練習：
- 表單邊框的合并;
- 表單控件(當聚焦到用戶名輸入框時碧信，背景變成紅色);
| 屬性名 | 操作 |
|---|---|
| 輪廓線 | outline-style:none 取消輪廓線 |
| 獲取焦點 | :focus 獲取鼠標光標狀態(tài) |
| 表單邊框 | border:0 none 取消表單邊框(加0赊琳，兼容性更好) |
| label標簽 | <label for="ID名"> 友好性 |
- 說明：
- 當取消輸入框邊框時，聚焦到輸入框時砰碴，仍然有邊框躏筏，這時的邊框叫做輪廓線；
- 改變焦點狀態(tài)：
.類名:focus{屬性:值;}呈枉； -
<label for="xxx">用戶名</label><input id="xxx">寸士，作用：點擊漢字時，獲取光標焦點碴卧；
10.3.內(nèi)邊距
-
padding-left、padding-top乃正； - 簡寫:
-
padding:10px;:上下左右都是10px住册； -
padding:10px 20px;:上下為10px，左右為20px瓮具； -
padding:10px 20px 30px;:上10px荧飞，左右20px，下30px名党； -
padding:10px 20px 30px 40px;：上10px叹阔，右20px，下30px传睹，左40px耳幢；
-
- 內(nèi)邊距會撐大盒子；盒子寬度=定義的寬度+左右內(nèi)邊距+左右邊距寬度欧啤；
- 繼承的盒子一般不會被撐大：嵌套(包含)的盒子睛藻，如果子盒子沒有定義寬度（寬度會繼承父盒子，但是高度不會邢隧，默認高度為0）店印，給子盒子設(shè)置左右內(nèi)邊距，一般不會撐大子盒子倒慧。
- 練習：新浪首頁導(dǎo)航條按摘；
- 內(nèi)容居中對齊：
text-align:center;盒子居中對齊：margin:0 auto;。
10.4外邊距
margin-top纫谅、margin-bottom- 外邊距連寫：
-
margin:20px,上下左右炫贤； -
margin:20px 30px,上下20，左右30系宜； -
margin:20px 30px 40px,上20照激，左右30，下40盹牧； -
margin：20px 30px 40px 50px,上 右 下 左俩垃；
-
- 垂直方向外邊距合并：相鄰的兩個盒子励幼，如果在垂直方向上都設(shè)置距另一個盒子的距離，會取值比較大的那一個口柳；
- 外邊距塌陷：嵌套的盒子苹粟，直接給子盒子設(shè)置垂直方向外邊距的時候，會發(fā)生外邊距塌陷跃闹，解決方案
- 給父盒子設(shè)置邊框嵌削；(不推薦使用)
- 給父盒子設(shè)置
overflow:hidden;(觸發(fā)了bfc)
- 練習：
- 行業(yè)動態(tài)；
- 愛寵知識網(wǎng);
- 個人資料望艺；
- 行內(nèi)元素可以設(shè)置左右的內(nèi)外邊距苛秕，設(shè)置上下內(nèi)外邊距會被忽略。
十一找默、浮動重要
文檔流(標準流)：元素自上而下艇劫，自左而右，塊元素獨占一行惩激，行內(nèi)元素在一行上顯示店煞，碰到父元素的邊框時換行；
-
浮動布局：
- float:left/right风钻；
- 特點：
- 元素浮動之后不占據(jù)原來的位置（脫標）顷蟀；
- 浮動的盒子在一行上顯示；
- 行內(nèi)元素浮動之后轉(zhuǎn)換為行內(nèi)塊元素（不推薦使用骡技，轉(zhuǎn)行內(nèi)塊元素最好使用
display:inline-block）鸣个；
- 浮動的作用：
- 文本繞圖（文字環(huán)繞圖片）：文字和浮動元素沒有層疊關(guān)系，文字不參與浮動布朦；
- 制作導(dǎo)航毛萌；
- 網(wǎng)頁布局；
-
練習：
- 簡單導(dǎo)航初體驗喝滞；
- 上合導(dǎo)航阁将；
- 網(wǎng)頁布局；
- 網(wǎng)頁布局二右遭；
- （補：行內(nèi)元素可以定義左右內(nèi)邊距做盅，不能定義上下內(nèi)邊距，定義上下內(nèi)邊距時不準）
-
清除浮動
- 清除浮動不是不使用浮動窘哈，而是清除浮動所產(chǎn)生的不良影響（當父盒子沒有定義高度吹榴，嵌套的盒子浮動之后，下邊的元素發(fā)生位置錯誤）滚婉，清除浮動使用關(guān)鍵字
clear:left/right/both;,工作中使用的最多的是clear:both;图筹； - 清除浮動方法：
- 額外標簽法：在最后一個浮動元素后添加標簽：
<div style="clear:both"></div>,但是工作中一般不使用這樣的方法； - 給父級元素使用
overflow:hidden（bfc），有弊端：當內(nèi)容出了盒子远剩，就會被裁剪掉扣溺； - 偽元素清除浮動，使用最多瓜晤，最完美：
- 額外標簽法：在最后一個浮動元素后添加標簽：
- 清除浮動不是不使用浮動窘哈，而是清除浮動所產(chǎn)生的不良影響（當父盒子沒有定義高度吹榴，嵌套的盒子浮動之后，下邊的元素發(fā)生位置錯誤）滚婉，清除浮動使用關(guān)鍵字
<style>
.clearfix:after{
content:".";
display:block;
height:0;
line-height:0;
visibility:hidden;
clear:both;
}
/*兼容IE*/
.clearfix{
zoom:1;
}
</style>
浮動元素的父元素調(diào)用clearfix清除浮動锥余。
十二、css初始化和overflow屬性
- css初始化：為了考慮到瀏覽器的兼容性問題痢掠，其實不同瀏覽器對有些標簽的默認值是不同的驱犹，如果沒有對css初始化往往會出現(xiàn)瀏覽器之間的頁面差異椭员。
- overflow介紹：
overflow：visible/hidden/scroll/auto,overflow屬性規(guī)定當內(nèi)容溢出元素框時發(fā)生的事情
| 屬性值 | 說明 |
|---|---|
| visible | 默認值宣蠕，內(nèi)容不會被裁剪，會呈現(xiàn)在元素框之外 |
| hidden | 內(nèi)容會被裁剪荣堰，超出的內(nèi)容是不可見的 |
| scroll | 如果內(nèi)容溢出淹辞，會被裁剪荠医。無論內(nèi)容是否溢出，瀏覽器總是會顯示滾動條以便查看其余的內(nèi)容 |
| auto | 如果內(nèi)容溢出元素框被裁剪桑涎，則瀏覽器會顯示滾動條以便查看其余的內(nèi)容；如果內(nèi)容沒有溢出兼贡，不會顯示滾動條 |
- 需求：文字要求只顯示一行攻冷，超出一行用
...表示：white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
十三、定位重要
定位方向：left/right/top/bottom/具體數(shù)值遍希；
靜態(tài)定位：
position:static;等曼，靜態(tài)定位，就是默認值凿蒜、文檔流（標準流）禁谦；-
絕對定位：
position:absolute;- 特點：
- 元素使用絕對定位之后不占據(jù)原來的位置（脫標）；
- 元素使用絕對定位之后废封，位置從瀏覽器出發(fā)州泊；
- 嵌套的盒子：父盒子沒有使用定位，子盒子使用絕對定位漂洋，子盒子位置從瀏覽器出發(fā)遥皂；
- 嵌套的盒子：父盒子、子盒子都是用絕對定位刽漂，子盒子位置從父盒子出發(fā)演训；
- 給行內(nèi)元素使用絕對定位之后，轉(zhuǎn)換為行內(nèi)塊元素（不推薦使用贝咙，推薦使用
display:inline-block;）样悟；
- 特點：
補：
z-index:2;調(diào)整元素的層疊順序，默認值從0-999，值越大窟她，元素就越靠上陈症；-
相對定位：
position:relative;- 特點：
- 使用相對定位，位置從自身出發(fā)礁苗；
- 還占據(jù)原來的位置爬凑；
-
子絕父相，子元素的位置從父元素出發(fā)试伙； - 行內(nèi)元素使用相對定位不能轉(zhuǎn)行內(nèi)快嘁信。
- 特點：
-
固定定位：
position:fixed;- 固定定位之后，不占據(jù)原來的位置（脫標）疏叨；
- 元素使用固定定位之后潘靖，位置從
瀏覽器出發(fā)； - 行內(nèi)元素使用固定定位之后蚤蔓，會轉(zhuǎn)化為行內(nèi)塊（不推薦使用卦溢，推薦使用
display:inline-block;）；
-
練習：
- 導(dǎo)航秀又；
- 固定定位单寂。
十四、定位的盒子居中顯示
-
margin:0 auto;只對標準流有效吐辙； - 定位的盒子居中(脫標情況)：先向右走父元素盒子的一半宣决，再向左走子盒子的一半：
left:50%;
margin-left:-元素寬度一半;
- 練習：
- 順豐盒子；
小知識點/注意點補充：
標簽包含規(guī)范(嵌套規(guī)范)
- div可以包含所有標簽昏苏；
- p標簽不能包含div尊沸、h等標簽,p一般可以包含行內(nèi)元素，不能包含塊元素贤惯；
- h標簽可以包含p洼专、div等標簽；
- 行內(nèi)元素盡量包含行內(nèi)元素孵构，行內(nèi)元素不要包含塊元素屁商。
規(guī)避脫標流
- 提倡盡量使用文檔流(標準流)；
- 標準流解決不了的使用浮動颈墅；
- 浮動解決不了的使用定位棒假。
- 補：auto意思是盡量取最大的距離，
margin-left:auto;：意思是靠右排列精盅。
圖片和文字垂直居中對齊
- vertical-align對inline-block最敏感帽哑，默認屬性是和基線對齊
vertical-align:baseline;其它取值有：middle、top叹俏、bottom妻枕。
css可見性
-
overflow：hidden;：溢出隱藏； -
visibility:hidden;：隱藏元素，隱藏之后還占據(jù)原來的位置屡谐； -
display:none;：隱藏元素述么，隱藏之后不占據(jù)原來的位置； -
display:block;：元素可見愕掏。 -
display:none;和display:block;經(jīng)常配合js使用度秘。
內(nèi)容移除
- 第一種方法使用
text-indent:-5000px;; - 第二種方法：
.box{
width:300px;
height:0;
padding-top:100px;
overflow:hidden;
}
屬性選擇器（要認識）
<style type="text/css">
input[type="button"][class]{
width:100px;
height:100px;
background:green;
}
</style>
firework的使用
- 顯示輔助線：視圖>標尺>從標尺拉線>按shift即可測量；
- 清除輔助線：
- 直接將線拉回標尺饵撑；
- 視圖>輔助線>清除剑梳；
- 放大鏡：z；放大鏡狀態(tài)下alt+鼠標左鍵：縮谢恕垢乙；
- 抓手：空格；
