CSS樣式表
1內(nèi)聯(lián)樣式(行內(nèi)樣式)? 其他標(biāo)簽不受影響
2內(nèi)部樣式?? html 里面 定義?? style? 可以 實(shí)現(xiàn)代碼重用
3 外部樣式 引用css文件
llink ?? @import “ xxx.css”
1繼承性? 2 層疊性 3優(yōu)先級(jí)? (!impotant)
css 特征? 繼承性 重疊性? 優(yōu)先級(jí)
css? 基礎(chǔ)選擇器
通用選擇器?????????? 元素選擇器???????? 類選擇器(類名? 不能用 數(shù)字開(kāi)頭) ?? ? .XXX{} ? ?? 分類選擇器 ? ID 選擇器 ?? 群組選擇器(隔開(kāi)的選擇器列表)
*{
}
后代選擇器?? 子帶選擇器(必須是父子關(guān)系)
--------------------------------------------------------------------------------------------------------
偽類選擇器
尚未訪問(wèn)鏈接的樣式 ? ? ? ? ? ? ? ? ? ? ? ?? 點(diǎn)擊中的樣式
a:link{ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? a:active{ ? ? ? ? ? ? ? ? ? ? }
}
點(diǎn)擊過(guò)后?
a:visited{
}
---------------------------------------------------------------------------------------------------------------
display none 是全隱藏? 并且不占據(jù)高度了
overflow hidden? 超出部分隱藏
-------------------------------------------------------------------------------------------------------------------
/*設(shè)置滾動(dòng)條的寬度*/
ul::-webkit-scrollbar{
width:10px;
}
/*設(shè)置滾動(dòng)條軌道的樣式*/
ul::-webkit-scrollbar-track{
background-color:brown;
}
/*設(shè)置滾動(dòng)條滾動(dòng)的顏色*/
ul::-webkit-scrollbar-thumb{
background-color:chartreuse;
}
------------------------------------------------------------------------------------------------------------
邊框????? border : ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? 邊框倒角 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? 邊框陰影
? ? ? 設(shè)置四個(gè)邊框 寬度 樣式 顏色???????????????? border-radius= 50%(圓形) ? ? ? ? ? ? ? ? ? ?box-shadow:5px 5px 5px 10px red;
? ? ? border:width style color;
? ? ? border:1px solid black;
-------------------------------------------------------------------------------------------------------------
盒模型
外邊距?? ? ? ? ? ? ? 內(nèi)邊距????????? 邊框???????? 寬度 ? ?? 高度?
margin????????????? padding?????? border??????? width?????? height
---------------------------------------------------------------------------------------------------------------------
背景圖片????
backgroung???? - color? -image (顏色? 背景圖片)
background?? -size? (背景圖片的尺寸)
-------------------------------------------------------------------------------------------------------------------------------
漸變?
1線性漸變(直線變)????????????? 重復(fù)漸變 repeating
linear-gradient
2 經(jīng)性漸變(圓形變)
radial-gradient
---------------------------------------------------------------------------------------------------------------------------------
字體
font-family
字體的大小?????? 字體的顏色???????? 首行文本縮進(jìn)
font-size?????????? color???????????????? text-indent : value ;
-------------------------------------------------------------------------------------------------------------------------------------
顯示
dispiay?????? non'e? 隱藏
display??? block?? 顯示
讓 行內(nèi)元素 像塊級(jí)元素一樣去顯示
讓 塊級(jí)元素 隱藏 再顯示出來(lái)
------------------------------------------------------------------------------------------------------------------------------------------
浮動(dòng)定位
1、普通流定位????? ? 2社牲、絕對(duì)定位?????????? 3相對(duì)定位 ??????????????? 5片林、固定定位
? static???????????????????????? ? ? absolute? ? ? ? ? ?? relative ? ? ? ? ? ? ? ? ? ?? fixed
需要修改元素出現(xiàn)的位置時(shí)
-----------------------------------------------------------------------------------------------------------------------------------------------------
? 3燕差、浮動(dòng)
?? flow??? left??? right
????? 浮動(dòng)元素外邊緣不會(huì)超過(guò)父元素的邊框
? ??? 浮動(dòng)元素默認(rèn)不會(huì)重疊
? ?? 浮動(dòng)只能左右浮動(dòng)蒜魄,不能上下浮動(dòng)
???? 所有元素設(shè)置為浮動(dòng)元素的話涡相,默認(rèn)將轉(zhuǎn)換為塊級(jí)元素
???? overflow:hidden;(消除浮動(dòng))