柚子快報(bào)激活碼778899分享：CSS常用屬性、屬性值
柚子快報(bào)激活碼778899分享：CSS常用屬性、屬性值
目錄
盒子（一般寫(xiě)在div中）：
選擇器：
基礎(chǔ)選擇器
復(fù)合選擇器
結(jié)構(gòu)偽類(lèi)選擇器：
nth-child(公式)
偽元素選擇器：
文字控制屬性名（寫(xiě)在選擇器中）
字體粗細(xì)（font-weight）的屬性值：
行高的組成：
修飾線（text-decoration）的屬性值：
顏色（color）的屬性值：
字體傾斜（font-style）的屬性值：
超鏈接標(biāo)簽a的四個(gè)狀態(tài)
背景屬性名
背景圖（bgi）屬性值
背景圖平鋪方式（bgr）屬性值
背景圖位置（bgp）屬性值
坐標(biāo)
關(guān)鍵字
注
背景圖縮放（bgz、bgs）的屬性值
背景圖固定（bga）的屬性值
背景的復(fù)合屬性（bg）
轉(zhuǎn)換顯示模式
了解
默認(rèn)情況下是塊級(jí)的標(biāo)簽
默認(rèn)情況下是行內(nèi)的標(biāo)簽
默認(rèn)情況下是行內(nèi)塊的標(biāo)簽
盒子模型：
內(nèi)邊距屬性寫(xiě)法
邊框線（bd）的屬性值
設(shè)置單方向邊框線
外邊框（margin）的屬性值
解決盒子被撐大問(wèn)題
清楚默認(rèn)樣式
盒子問(wèn)題
元素溢出：
外邊距問(wèn)題--合并與塌陷
行內(nèi)元素--垂直內(nèi)外邊距
盒子模型常用屬性
圓角屬性值
陰影屬性值：
盒子（一般寫(xiě)在div中）：
屬性名作用width寬度height高度background-color背景色
選擇器：
基礎(chǔ)選擇器
名稱(chēng)說(shuō)明格式標(biāo)簽選擇器選中同名標(biāo)簽設(shè)置相同樣式標(biāo)簽名：p{樣式}、img{樣式}……類(lèi)選擇器查找標(biāo)簽，差異化設(shè)置標(biāo)簽顯示效果定義：.類(lèi)名{樣式}；使用：class="類(lèi)名（注：沒(méi)有點(diǎn)）"id選擇器查找標(biāo)簽，差異化設(shè)置標(biāo)簽顯示效果，多有javaScript使用#名字（id名）；注：同一個(gè)id選擇器在一個(gè)頁(yè)面只能使用一次通配符選擇器查找頁(yè)面所以標(biāo)簽，設(shè)置相同樣式*{設(shè)置的樣式}
復(fù)合選擇器
名稱(chēng)用法描述語(yǔ)法注意事項(xiàng)后代選擇器選擇元素的后代元素父選 子選{CSS屬性}（父子間空格隔開(kāi)）后代選擇器選中所以后代子代選擇器選中某元素的最近子代元素（最近子級(jí)）父>子{CSS屬性}（父子間用>隔開(kāi)）并集選擇器選中多組標(biāo)簽設(shè)置相同屬性選擇器1，選擇器2……選擇器n{CSS屬性}（用逗號(hào)隔開(kāi)）交集選擇器選中同時(shí)滿(mǎn)足多個(gè)條件的元素選擇器1選擇器2{CSS屬性}（選擇器之間連寫(xiě)，沒(méi)有任何符號(hào)）如果交集選擇器中有標(biāo)簽選擇器，標(biāo)簽選擇器必須寫(xiě)在最前面?zhèn)晤?lèi)選擇器"偽類(lèi)"表示元素的狀態(tài)，選中元素的某個(gè)狀態(tài)設(shè)置樣式選擇器：hover{CSS屬性}（鼠標(biāo)懸停狀態(tài)）任何標(biāo)簽都可以設(shè)置鼠標(biāo)懸停狀態(tài)
結(jié)構(gòu)偽類(lèi)選擇器：
作用：根據(jù)元素的結(jié)構(gòu)關(guān)系查找元素
經(jīng)驗(yàn)：查找到的元素后可以加上{屬性}和其他選擇器一樣可以往{}中添加屬性
選擇器說(shuō)明X：first-child查找第一個(gè)X元素X：last-child查找最后一個(gè)X元素X：nth-child（n）查找第n個(gè)X元素（第一個(gè)元素n為1）
nth-child(公式)
注：
用于ul標(biāo)簽較多
必須是n才可以，其他變量沒(méi)作用
對(duì)于公式n+5/n-5而言：n是從0開(kāi)始計(jì)算（不會(huì)覆蓋first-child/last-child）
公式功能2n偶數(shù)標(biāo)簽2n+1；2n-1奇數(shù)標(biāo)簽5n找到5的倍數(shù)的標(biāo)簽n+5找到第五個(gè)以后的標(biāo)簽-n+5找到第5個(gè)以前的標(biāo)簽
偽元素選擇器：
作用：創(chuàng)建虛擬元素（偽元素），用來(lái)擺放裝飾性的內(nèi)容
注意：
必須設(shè)置content：" "屬性用來(lái)設(shè)置偽元素的內(nèi)容（內(nèi)容可留空）
偽元素默認(rèn)是行內(nèi)顯示模式
權(quán)重和標(biāo)簽選擇器相同
選擇器說(shuō)明X::before在X元素里面最前面添加一個(gè)偽元素X::after在X元素里面最后面添加一個(gè)偽元素
文字控制屬性名（寫(xiě)在選擇器中）
描述屬性名效果字體大小font-size文字尺寸（用px單位；且必須有單位，否則不生效）文字粗細(xì)font-weight400px不加粗，700px加粗行高line-height一般用于控制盒子內(nèi)的文字字體族font-family控制文字的字體形式字體復(fù)合屬性font復(fù)合屬性文本縮進(jìn)text-indent顯示自然段的開(kāi)頭兩個(gè)空格效果文本對(duì)齊text-alignleft（左）right（右）center（居中）修飾線text-decoration+屬性下滑線、刪除線、頂格線等修飾線顏色color字體傾斜font-style有些字體默認(rèn)為傾斜 效果
字體粗細(xì)（font-weight）的屬性值：
正常加粗關(guān)鍵字normalbold數(shù)字（開(kāi)發(fā)使用）400px700px
行高的組成：
行高=上間距+文本高度+下間距
修飾線（text-decoration）的屬性值：
屬性值效果none無(wú)underline下劃線line-through刪除線overline上劃線（頂格線）
顏色（color）的屬性值：
顏色的表達(dá)方式屬性值說(shuō)明使用場(chǎng)景顏色關(guān)鍵字顏色對(duì)于的單詞red、green、blue……學(xué)習(xí)測(cè)試rgbrgb（r，g，b）表示紅綠藍(lán)三原色，取值：0~255rgbargb（r，g，b，a）a表示透明度，取值：0~1開(kāi)發(fā)使用，實(shí)現(xiàn)透明色十六進(jìn)制#RRGGBB可以簡(jiǎn)寫(xiě)：相同兩個(gè)字母可以寫(xiě)一個(gè)開(kāi)發(fā)使用（可以用Pxcook測(cè)量）
字體傾斜（font-style）的屬性值：
屬性值效果normal正常italic傾斜
超鏈接標(biāo)簽a的四個(gè)狀態(tài)
選擇器作用：link訪問(wèn)前：visited訪問(wèn)后：hover鼠標(biāo)懸停時(shí)：active點(diǎn)擊時(shí)（激活）
備注：要使用這四個(gè)順序要按照l(shuí)ink、visited、hover、active的順序書(shū)寫(xiě)。
背景屬性名
描述屬性名背景色background-color背景圖background-image背景圖平鋪方式background-repeat背景圖位置background-position背景圖縮放background-size背景圖固定background-attachment背景圖復(fù)合屬性background
背景圖（bgi）屬性值
url（圖片路勁）；背景圖一般都是在盒子里面寫(xiě)的，所以要先寫(xiě)好盒子的寬高
背景圖平鋪方式（bgr）屬性值
屬性值效果no-repeat不平鋪（圖片出現(xiàn)在左上角）repeat平鋪（默認(rèn)效果）repeat-x水平方向平鋪repeat-y垂直方向平鋪
背景圖位置（bgp）屬性值
坐標(biāo)
水平方向位置 垂直方向位置（像素單位px，正負(fù)代表方向）
關(guān)鍵字
關(guān)鍵字位置left左側(cè)right右側(cè)center居中top頂部bottom底部
注
關(guān)鍵字取值方式可以顛倒取值順序
只取一個(gè)關(guān)鍵字時(shí)，另一個(gè)方向默認(rèn)居中；只取一個(gè)數(shù)字值時(shí)表示水平方向，垂直方向默認(rèn)居中
數(shù)字與關(guān)鍵字可以混用
背景圖縮放（bgz、bgs）的屬性值
方式屬性值效果關(guān)鍵字cover等比例縮放圖片以覆蓋背景區(qū)（可能會(huì)導(dǎo)致圖片溢出）；即覆蓋整個(gè)盒子contain等比例縮放圖片當(dāng)圖片的寬或高與盒子的寬或高相等時(shí)停止縮放，可能會(huì)導(dǎo)致盒子有露白百分比根據(jù)盒子尺寸計(jì)算圖片大小比較好用數(shù)字+單位
背景圖固定（bga）的屬性值
作用：背景圖不會(huì)隨著元素的內(nèi)容（盒子）滾動(dòng)。（盒子可以動(dòng)，圖片（被釘住了）不動(dòng)）
屬性值：fixed
背景的復(fù)合屬性（bg）
屬性值：背景色 背景圖 背景圖平鋪方式 背景圖位置 /背景圖縮放 背景圖固定（空格隔開(kāi)，不分順序）
背景圖的縮放要在前面加"/"符號(hào)
轉(zhuǎn)換顯示模式
屬性名：display
屬性值：
屬性值效果block塊級(jí)inline-block行內(nèi)塊inline行內(nèi)
顯示模式備注：
顯示模式類(lèi)型特點(diǎn)塊級(jí)元素獨(dú)占一行；寬度默認(rèn)是父級(jí)的100%；添加寬高屬性生效行內(nèi)元素一行可以顯示多個(gè)；設(shè)置寬高屬性不生效；寬高尺寸由內(nèi)容撐開(kāi)行內(nèi)塊元素一行可以顯示多個(gè)；設(shè)置寬高屬性生效；寬高尺寸由內(nèi)容撐開(kāi)
了解
默認(rèn)情況下是塊級(jí)的標(biāo)簽
標(biāo)簽名作用div用于組織內(nèi)容h標(biāo)題p段落hr水平線ol有序列表ul無(wú)序列表li列表項(xiàng)dl定義列表dt定義列表中的術(shù)語(yǔ)dd定義列表中的描述pre用于預(yù)格式化的文本blockquote引用article獨(dú)立的內(nèi)容塊figure用于自包含的內(nèi)容，通常與
默認(rèn)情況下是行內(nèi)的標(biāo)簽
標(biāo)簽名作用a超鏈接span文本的分組，沒(méi)有語(yǔ)義意義br換行i斜體文本b加粗文本u下劃線文本sub下標(biāo)文本sup上標(biāo)文本em強(qiáng)調(diào)文本（效果與i相同）strong強(qiáng)烈強(qiáng)調(diào)文本（效果與b相同）mark標(biāo)記文本small小號(hào)文本del刪除線ins插入文本（它本身并不直接提供下劃線的效果，但瀏覽器通常會(huì)給 標(biāo)簽添加一個(gè)文本下劃線）q短的引用time時(shí)間和日期var變量cite引用作品標(biāo)簽code代碼文本samp計(jì)算機(jī)輸出kbd鍵盤(pán)輸入dfn定義一個(gè)術(shù)語(yǔ)abbr用于縮寫(xiě)data表示數(shù)據(jù)值progress顯示任務(wù)進(jìn)度meter表示度量或已知范圍值wbr用于文本中可能用于需要換行的地方提供斷字
默認(rèn)情況下是行內(nèi)塊的標(biāo)簽
標(biāo)簽名作用input輸入數(shù)據(jù)img嵌入圖片buttom可點(diǎn)擊的按鈕select下拉選擇框textarea多行文本輸入label為表單元素定義標(biāo)簽video嵌入視頻audio嵌入音頻canvas繪制圖形iframe嵌入另一個(gè)文檔
盒子模型：
盒子模型的重要組成部分：
組成標(biāo)簽名內(nèi)容區(qū)域width&&height內(nèi)邊距padding（出現(xiàn)在內(nèi)容與盒子邊緣之間）（會(huì)撐大盒子）邊框線border（會(huì)撐大盒子）外邊距margin（出現(xiàn)在盒子的外面）（可用于拉開(kāi)兩盒子距離）
內(nèi)邊距屬性寫(xiě)法
屬性值：px
padding/padding-方位名詞（top、left、bottom、right）
padding多值寫(xiě)法：
上方初值，順時(shí)針取值，對(duì)位取值
取值個(gè)數(shù)示例含義一個(gè)值padding:1px；四個(gè)方向內(nèi)邊距都為1px四個(gè)值padding:1px 2px 3px 4px上：1px；右：2px；下：3px；左：4px三個(gè)值padding:1px 2px 3px上：1px；左右:2px；下3px兩個(gè)值padding:1px 2px上下：1px；左右:2px
邊框線（bd）的屬性值
屬性值線條樣式solid實(shí)線dashed虛線dotted點(diǎn)線
設(shè)置單方向邊框線
屬性名：border-方位名詞（top、right、left、bottom）
屬性值：邊框線粗細(xì)（像素值） 線條樣式 顏色（不區(qū)分順序）
外邊框（margin）的屬性值
與內(nèi)邊框border一樣
注意：
margin實(shí)現(xiàn)版心居中效果：
把margin的左右執(zhí)行寫(xiě)成auto（條件：盒子必須要有寬度）
解決盒子被撐大問(wèn)題
內(nèi)減模式：box-sizing:border-box（一般在清楚默認(rèn)樣式時(shí)就使用內(nèi)減模式了）
清楚默認(rèn)樣式
清除標(biāo)簽：
way_one:通配符選擇器選擇全部標(biāo)簽，margin、padding取值為0
* {
? ?margin:0；
? ?padding:0；
}
way_tow:并集選擇器選擇所有標(biāo)簽，margin、padding取值為0
標(biāo)簽1,標(biāo)簽2,標(biāo)簽3……標(biāo)簽n {
? ?margin:0；
? ?padding:0;
}
清除有序、無(wú)序列表方式list-style取值為none即可：
list-style:none;
盒子問(wèn)題
元素溢出：
屬性名：overflow（控制溢出元素的內(nèi)容顯示方式）
屬性值
屬性值效果hidden溢出隱藏scroll溢出滾動(dòng)（無(wú)論是否溢出都顯示滾動(dòng)條位置）auto溢出滾動(dòng)（溢出才顯示滾動(dòng)條位置）
外邊距問(wèn)題--合并與塌陷
合并現(xiàn)象：
垂直排列的兄弟元素，上下margin會(huì)合并，取兩個(gè)margin中的較大值生效
塌陷問(wèn)題：
原因：父子級(jí)的標(biāo)簽，子級(jí)添加上外邊距會(huì)產(chǎn)生塌陷問(wèn)題，導(dǎo)致父級(jí)一起向下移動(dòng)
解決方法：
取消子級(jí)margin，父級(jí)設(shè)置padding
父級(jí)設(shè)置overflow:hidden
父級(jí)設(shè)置border-top
行內(nèi)元素--垂直內(nèi)外邊距
行內(nèi)元素添加margin與padding，無(wú)法改變?cè)卮怪蔽恢脮r(shí)，給行內(nèi)元素添加line-height可以改變垂直位置
盒子模型常用屬性
屬性名功能border-radius實(shí)現(xiàn)圓角box-shadow實(shí)現(xiàn)陰影opacity實(shí)現(xiàn)透明度（不局限與顏色，范圍0~1，0表示透明，1不透明）
圓角屬性值
屬性值：像素值/百分比（屬性值是圓角半徑）
格式：從左上角順時(shí)針賦值，沒(méi)有取角的值與對(duì)角的值取值相同
正圓形狀：給正方形盒子設(shè)置圓角屬性值為盒子寬高的一半（50%）
正圓最大值為50%，超過(guò)50%就沒(méi)有效果了
膠囊形狀：給長(zhǎng)方形盒子設(shè)置圓角屬性值為盒子高度一半
陰影屬性值：
屬性值：x軸偏移量（必寫(xiě)） y軸偏移量（必寫(xiě)） 模糊半徑 顏色 內(nèi)外陰影
格式：box-shadow: 像素值 像素值 像素值 像素值 顏色 （inset）；
注：默認(rèn)是外陰影，內(nèi)陰影要加inset
柚子快報(bào)激活碼778899分享：CSS常用屬性、屬性值
好文推薦
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點(diǎn)和立場(chǎng)。
轉(zhuǎn)載請(qǐng)注明，如有侵權(quán)，聯(lián)系刪除。
Falabella時(shí)尚出海坊
