2020-07-20

CSS學(xué)習(xí)

1. 繼承

標(biāo)簽未設(shè)置的屬性會(huì)繼承父標(biāo)簽設(shè)置了的屬性,父標(biāo)簽未設(shè)置屬性會(huì)繼承父標(biāo)簽的父標(biāo)簽的屬性钱磅,以此類(lèi)推梦裂。

2. 選擇器

div p 選擇 <div> 元素內(nèi)部的所有 <p> 元素。
div>p 選擇父元素為 <div> 元素的所有 <p> 元素盖淡。
div+p 選擇緊接在 <div> 元素之后的所有 <p> 元素年柠。
[target=_blank] 選擇 target="_blank" 的所有元素。
[title~=flower] 選擇 title 屬性包含單詞 "flower" 的所有元素褪迟。
[lang|=en] 選擇 lang 屬性值以 "en" 開(kāi)頭的所有元素冗恨。
input:focus 選擇獲得焦點(diǎn)的 input 元素。

3. CSS樣式

背景

background-attachment:fixed 背景隨著滾動(dòng)條滾動(dòng)
background-repeat 背景是否重復(fù)

文字

text-indent:首行縮進(jìn)
如果有要求除首行或者標(biāo)題等不縮進(jìn)味赃,其他縮進(jìn)則可以:

h1{
text-indent : -2em;
}
div{
padding-left : 2em;
}
<div>
<h1>標(biāo)題</h1>
<p>文字</p>
<p>文字</p>
</div>

text-transform:改變字母大小寫(xiě)
text-shadow:文字陰影(屬性1:表示向右平移的距離掀抹,屬性2:表示向下平移的距離,屬性3:表示模糊度心俗,屬性4:陰影顏色)
word-wrap:文字換行(可以規(guī)定寬度)
text-align:center 文字居中

偽類(lèi)

a:link 普通的未被訪問(wèn)的鏈接
a:visited 用戶已訪問(wèn)的鏈接
a:hover 鼠標(biāo)指針位于鏈接上方
a:active 鏈接被點(diǎn)擊的時(shí)刻
注意: 在CSS定義中傲武,a:hover 必須被置于 a:link 和 a:visited 之后,才是有效的。
注意: 在 CSS 定義中谱轨,a:active 必須被置于 a:hover 之后,才是有效的吠谢。
注意:偽類(lèi)的名稱不區(qū)分大小寫(xiě)土童。

p:first-child 匹配第一個(gè)<p>元素
p:before 在每個(gè)<p>元素之前插入內(nèi)容
p:after 在每個(gè)<p>元素之后插入內(nèi)容

表格

border-collapse: collapse 表格邊框折疊(由雙行變?yōu)閱涡校?br> colspan 是合并列,rowspan是合并行工坊,合并行的時(shí)候献汗,比如rowspan="2",它的下一行tr會(huì)少一列王污;合并列的時(shí)候 colspan="2"罢吃,此行的列會(huì)少一列

定位

position:static 默認(rèn)值
position:relative 相對(duì)布局,相對(duì)于其正常位置進(jìn)行定位
position:absolute 絕對(duì)布局,相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位
position:fixed 絕對(duì)布局,相對(duì)于瀏覽器窗口進(jìn)行定位

浮動(dòng)

clear:left 清除左浮動(dòng)
clear:right 清除右浮動(dòng)
clear:both 清除所有浮動(dòng)

盒子模型

外邊距會(huì)疊加,采用外邊距更長(zhǎng)的那段昭齐,浮動(dòng)元素不會(huì)疊加

兼容性

-ms- IE瀏覽器
-moz- 火狐瀏覽器
-webkit- Google Chrome瀏覽器
-webkit- Safari瀏覽器
-o- Opera瀏覽器
-xv- Opera瀏覽器

CSS動(dòng)畫(huà)

transform:translate(100px,200px); 延X(jué)軸向右平移100px尿招,延Y軸向下平移200px。
transform:rotate(45deg); 順時(shí)針旋轉(zhuǎn)45度阱驾。
transform:scale(1,2); 寬度不變就谜,高度變?yōu)樵瓉?lái)的2倍。
transform:skew(20deg,30deg); X軸傾斜20度里覆,Y軸傾斜30度丧荐。
transform:rotateX(60deg); 延X(jué)軸向平面里旋轉(zhuǎn)60度。
transform:rotateY(60deg); 延Y軸向平面里旋轉(zhuǎn)60度喧枷。
transition: width 1s linear 2s; 寬度過(guò)渡時(shí)間1s虹统,過(guò)渡方式 linear,等2s開(kāi)始
animation:anima 5s; 定義一個(gè)動(dòng)畫(huà)隧甚,名稱為anima车荔,完成時(shí)間5s

@keyframes anima{
0%{}//初始狀態(tài)
25%{}//動(dòng)畫(huà)演示到25%狀態(tài)
50%{}//動(dòng)畫(huà)演示到50%狀態(tài)
75%{}//動(dòng)畫(huà)演示到75%狀態(tài)
100%{}//動(dòng)畫(huà)演示到100%狀態(tài)
}
權(quán)值

標(biāo)簽的權(quán)值為1,類(lèi)選擇符的權(quán)值為10戚扳,ID選擇符的權(quán)值最高為100夸赫,繼承的權(quán)值最低可以看成0.1

p{color:red;} /*權(quán)值為1*/
p span{color:green;} /*權(quán)值為1+1=2*/
.warning{color:white;} /*權(quán)值為10*/
p span.warning{color:purple;} /*權(quán)值為1+1+10=12*/
#footer .note p{color:yellow;} /*權(quán)值為100+10+1=111*/
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市咖城,隨后出現(xiàn)的幾起案子茬腿,更是在濱河造成了極大的恐慌,老刑警劉巖宜雀,帶你破解...
    沈念sama閱讀 211,561評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件切平,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡辐董,警方通過(guò)查閱死者的電腦和手機(jī)悴品,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,218評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人苔严,你說(shuō)我怎么就攤上這事定枷。” “怎么了届氢?”我有些...
    開(kāi)封第一講書(shū)人閱讀 157,162評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵欠窒,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我退子,道長(zhǎng)岖妄,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,470評(píng)論 1 283
  • 正文 為了忘掉前任寂祥,我火速辦了婚禮荐虐,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘丸凭。我一直安慰自己福扬,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,550評(píng)論 6 385
  • 文/花漫 我一把揭開(kāi)白布惜犀。 她就那樣靜靜地躺著忧换,像睡著了一般。 火紅的嫁衣襯著肌膚如雪向拆。 梳的紋絲不亂的頭發(fā)上亚茬,一...
    開(kāi)封第一講書(shū)人閱讀 49,806評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音浓恳,去河邊找鬼刹缝。 笑死,一個(gè)胖子當(dāng)著我的面吹牛颈将,可吹牛的內(nèi)容都是我干的梢夯。 我是一名探鬼主播,決...
    沈念sama閱讀 38,951評(píng)論 3 407
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼晴圾,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼颂砸!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起死姚,我...
    開(kāi)封第一講書(shū)人閱讀 37,712評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤人乓,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后都毒,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體色罚,經(jīng)...
    沈念sama閱讀 44,166評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,510評(píng)論 2 327
  • 正文 我和宋清朗相戀三年账劲,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了戳护。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片金抡。...
    茶點(diǎn)故事閱讀 38,643評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖腌且,靈堂內(nèi)的尸體忽然破棺而出梗肝,到底是詐尸還是另有隱情,我是刑警寧澤铺董,帶...
    沈念sama閱讀 34,306評(píng)論 4 330
  • 正文 年R本政府宣布巫击,位于F島的核電站,受9級(jí)特大地震影響柄粹,放射性物質(zhì)發(fā)生泄漏喘鸟。R本人自食惡果不足惜匆绣,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,930評(píng)論 3 313
  • 文/蒙蒙 一驻右、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧崎淳,春花似錦堪夭、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,745評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至嚣镜,卻和暖如春爬迟,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背菊匿。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,983評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工付呕, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人跌捆。 一個(gè)月前我還...
    沈念sama閱讀 46,351評(píng)論 2 360
  • 正文 我出身青樓徽职,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親佩厚。 傳聞我的和親對(duì)象是個(gè)殘疾皇子姆钉,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,509評(píng)論 2 348