CSS
構(gòu)成：選擇器以及一條或多條聲明 - 選擇器 {樣式}
基礎(chǔ)標(biāo)簽：?jiǎn)蝹€(gè)選擇器組成的
1.標(biāo)簽選擇器：把某一類標(biāo)簽全部選擇出來(lái)
2.類選擇器：.類名 {} 樣式點(diǎn)定義导街，結(jié)構(gòu)類(class)調(diào)用斧散，一個(gè)或多個(gè)，開(kāi)發(fā)最常用
.red {color: red;} ul>li.red
background-color背景顏色
多類名：
.red {color: pink;}
.font35 {font-size: 35px;}
<div class="red font35">劉德華</div>
3.id選擇器：#類名{} 樣式#定義，結(jié)構(gòu)id調(diào)用，只能調(diào)用一個(gè)，別人切勿使用
4.通配符選擇器：*{} 所有標(biāo)簽
復(fù)合選擇器：復(fù)合選擇器是建立在基礎(chǔ)選擇器之上搂漠，對(duì)基本選擇器進(jìn)行組合形成的。
1.后代選擇器：
ol li a {} / .nav li a {}
2.子選擇器：最近一級(jí)子元素
ol>li
3.并集選擇器（重要）：可以選擇多組標(biāo)簽兽赁，同時(shí)為他們定義想要同的樣式
元素1状答，元素2{樣式元素}
4.偽類選擇器：用于向某寫(xiě)選擇器添加特殊的效果，比如給鏈接添加特殊效果
? 鏈接偽類：a：link? 選擇所有未被訪問(wèn)的鏈接
? ? a：visited? 選擇所有已被訪問(wèn)的鏈接
? ? a：hover? 當(dāng)鼠標(biāo)經(jīng)過(guò)是改變
? ? a：active? 選擇的是鼠標(biāo)正在按下還沒(méi)有彈起
? 注意事項(xiàng)：為了確保生效刀崖，按照l(shuí)ink-visited-hover-active的順序
5.focus偽類選擇器：獲取焦點(diǎn)的表單元素
? input:focus { background-color: pink; }
字體屬性：定義字體系列惊科、大小、粗細(xì)亮钦、和文字樣式
大泄萁亍：font-size 單位px
粗細(xì)：font-weight （normal默認(rèn)、bold/700蜂莉、數(shù)字）<strong>
文字樣式：font-style （normal默認(rèn)蜡娶、italic傾斜）<em>
字體的復(fù)合屬性：
font: font-style font-weight font-size/line-height font-family;不可顛倒順序
font:italic 700 16px 'microsoft yahei'
文本屬性：定義文本的外觀，文本的顏色映穗、對(duì)齊窖张、裝飾、縮進(jìn)蚁滋、行間距
文本顏色：color
對(duì)齊文本：text-align設(shè)置文本內(nèi)容的水平對(duì)齊
text-align： center宿接、lift默認(rèn)、right辕录；
裝飾文本：text-decoration 添加下劃線睦霎、刪除線、上劃線等
none默認(rèn)走诞、underline下劃線副女、overline上劃線、line-through刪除線
可以把超鏈接下的下劃線去掉蚣旱，用none
文本縮進(jìn)：text-indent 文本的第一行首行縮進(jìn)多少距離 2em? 首行縮進(jìn)兩個(gè)字符
行間距：line-height
引入方式
1.內(nèi)部樣式表：是寫(xiě)到html頁(yè)面內(nèi)部碑幅，單獨(dú)放到一個(gè)style標(biāo)簽中
2.行內(nèi)樣式表：在元素標(biāo)簽內(nèi)部的style屬性中設(shè)定CSS樣式，適合于修改簡(jiǎn)單樣式
3.外部樣式表：新建一個(gè)后綴名為.css的文件在里面寫(xiě)樣式
? 在html頁(yè)面中使用<link>標(biāo)簽引入<link rel="stylesheet" href="css文件的URL">
元素顯示模式：元素（標(biāo)簽）以什么方式進(jìn)行顯示
塊元素：自己獨(dú)占一行 div姻锁、h1-6枕赵、p、ul位隶、ol拷窜、li等
行元素：一行可以顯示多個(gè)
行內(nèi)塊元素
元素顯示模式轉(zhuǎn)換：display：block/inline/inline-block；
CSS背景：
1.背景顏色：background-color：涧黄；
2.背景圖片：background-image：url（）篮昧；
3.背景平鋪：background-repeat：no-repeat；
4.背景圖片位置：background-position：x笋妥，y懊昨；
5.背景圖像固定：background-attachment:scroll/fixed
6.復(fù)合寫(xiě)法：background:顏色 圖片地址 平鋪 滾動(dòng) 位置；
7.背景顏色半透明：background：rgba（）春宣；
權(quán)重：繼承或者*<元素選擇器<類選擇器酵颁，偽類選擇器<ID選擇器<行內(nèi)樣式<嫉你！important
盒子模型：
邊框：border邊框粗細(xì)，邊框樣式躏惋，邊框顏色
border-width? 粗細(xì)
border-style? none無(wú)solid實(shí)線邊框dashed虛線邊框dotted點(diǎn)線邊框
border-color? 顏色
border:1px solod red;? 沒(méi)有順序
border-collapse:collapse;? 合并相鄰的邊框
邊框會(huì)改變盒子大小
內(nèi)邊距：
padding 邊框和內(nèi)容之間的距離
padding會(huì)影響盒子大小幽污，如果盒子本身沒(méi)有指定寬度和高度，不會(huì)撐開(kāi)
外邊距：
margin 盒子和盒子之間的距離
外邊距可以讓塊級(jí)盒子水平居中：盒子必須指定了寬度簿姨、左右外邊距有設(shè)置為auto
外邊距合并 1.可以為父元素定義上邊框2.可以為父元素定義內(nèi)邊距3.overflow：hidden
清除內(nèi)外邊距 *{padding：0距误；margin：0；}
去掉li前面的圓點(diǎn)：list-style：none
圓角邊框：border-radius：length扁位；
盒子陰影：box-shadow：h-shadow v-shadow blur spread color inset准潭；
字體陰影：text-shadow：h-shadow v-shadow blur color
浮動(dòng)：float 脫標(biāo) 浮動(dòng)的盒子不在保留原先的位置
語(yǔ)法：選擇器{filot：none/left/right;}
清除浮動(dòng)：
1. .clear {clear：both；}標(biāo)簽必須是塊元素
2. overflow：hidden域仇； 給父盒子加
3.偽元素 給父元素添加
.clearfix:after {
? content:"";
? display:block;
? height: 0;
? clear:both;
? visibility:hidden;
}
.clearfix {
? *zoom:1;
}
4.雙偽元素 給父元素添加
.clearfix:before,
.clearfix:after {
? content:"";
? display:table;
}
.clearfix:after {
? clear:both;
}
.clearfix {
? *zoom:1;
}
定位：
定位=定位模式+邊偏移
定位模式：position：static/relative/absolute/fixed
邊偏移：top/bottom/left/right
相對(duì)定位 position：relative 移動(dòng)后保留位置 相對(duì)于原來(lái)自己的位置移動(dòng)
絕對(duì)定位 position：absolute 相對(duì)于祖先元素來(lái)移動(dòng) 以最近一級(jí)有定位的為準(zhǔn) 移動(dòng)后不保留原來(lái)位置
子絕父相：父級(jí)需要占有位置刑然，因此是相對(duì)定位，滋賀子不需要占有位置殉簸，則是絕對(duì)定位闰集。
固定定位：position：fixed 以瀏覽器可視窗口為參照 不占有原先的位置
粘性定位：選擇器{position：sticky；} 占有原先的位置
定位疊放次序：z-index
絕對(duì)定位的盒子居中：走瀏覽器的50%般卑，在用margin走盒子的負(fù)一半
元素的顯示于隱藏：
1.display屬性：none隱藏對(duì)象 block除了轉(zhuǎn)換為塊級(jí)武鲁，還有顯示對(duì)象 脫標(biāo)
2.visibility：visibility顯示 hidden 隱藏 不脫標(biāo)
3.overflow溢出：hidden不顯示超出部分 scroll溢出部分實(shí)現(xiàn)滾動(dòng)條 auto 需要的時(shí)候添加滾動(dòng)條
