CSS

CSS

選擇器

類選擇器

.class

ID選擇器

#idName

相同點(diǎn)可以應(yīng)用于任何元素

區(qū)別

ID選擇器為唯一表示,只能出現(xiàn)一次

類選擇器:不同元素之間可以用同一類名

子選擇器

應(yīng)用于第一代元素 標(biāo)識(shí)符? >

.className>元素標(biāo)簽{

}

應(yīng)用于后代所有元素? 標(biāo)識(shí)符 空格

.className元素標(biāo)簽{

}

應(yīng)用于后代所有元素 標(biāo)識(shí)符 *

*元素標(biāo)簽{

}

偽類標(biāo)簽

常用a:hover

標(biāo)簽的權(quán)值為1,類選擇符的權(quán)值為10患雇,ID選擇符的權(quán)值最高為100

還有一個(gè)權(quán)值比較特殊--繼承也有權(quán)值但很低,有的文獻(xiàn)提出它只有0.1胞得,所以可以理解為繼承的權(quán)值最低。

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*/

元素

在CSS中屹电,html中的標(biāo)簽元素大體被分為三種不同的類型:塊狀元素阶剑、內(nèi)聯(lián)元素(又叫行內(nèi)元素)和內(nèi)聯(lián)塊狀元素

常用的塊狀元素有:(display:block)


      塊級(jí)元素特點(diǎn):

      1危号、每個(gè)塊級(jí)元素都從新的一行開始牧愁,并且其后的元素也另起一行。(真霸道外莲,一個(gè)塊級(jí)元素獨(dú)占一行)

      2猪半、元素的高度、寬度偷线、行高以及頂和底邊距都可設(shè)置磨确。

      3、元素寬度在不設(shè)置的情況下声邦,是它本身父容器的100%(和父元素的寬度一致)乏奥,除非設(shè)定一個(gè)寬度。

      常用的內(nèi)聯(lián)元素有:(display:inline)?

      內(nèi)聯(lián)元素特點(diǎn):

      1翔忽、和其他元素都在一行上英融;

      2、元素的高度歇式、寬度及頂部和底部邊距不可設(shè)置;

      3胡野、元素的寬度就是它包含的文字或圖片的寬度材失,不可改變。

      常用的內(nèi)聯(lián)塊狀元素有:(display:inline-block)

      內(nèi)聯(lián)塊狀元素特點(diǎn):

      同時(shí)具備內(nèi)聯(lián)元素硫豆、塊狀元素的特點(diǎn)

      1龙巨、和其他元素都在一行上笼呆;

      2、元素的高度旨别、寬度诗赌、行高以及頂和底邊距都可設(shè)置。

      盒子模型

      盒子邊框?qū)傩?/p>

      1秸弛、border-style(邊框樣式)常見樣式有:

      dashed(虛線)| dotted(點(diǎn)線)| solid(實(shí)線)铭若。

      2、border-color(邊框顏色)

      3递览、border-width(邊框?qū)挾龋?/p>

      高度寬度

      左邊界+左邊框+左填充+內(nèi)容寬度+右填充+右邊框+右邊界叼屠。

      div{

      ? ? width:200px;? //內(nèi)容寬度

      ? ? padding:20px;//填充(top,right,bottom,left)

      ? ? (border-bottom,top,right,left):1px(solid dashed dotted)red;//邊框

      ? ? (margin-bottom,top,right,left):10px;? //邊界

      }

      css布局模型

      1、流動(dòng)模型(Flow)

      流動(dòng)(Flow)是默認(rèn)的網(wǎng)頁布局模式绞铃。也就是說網(wǎng)頁在默認(rèn)狀態(tài)下的 HTML 網(wǎng)頁元素都是根據(jù)流動(dòng)模型來分布網(wǎng)頁內(nèi)容的镜雨。

      在流動(dòng)模型下,內(nèi)聯(lián)元素都會(huì)在所處的包含元素內(nèi)從左到右水平分布顯示

      2、浮動(dòng)模型(Float)

      實(shí)現(xiàn)兩個(gè)塊狀元素并排顯示 float:left,right.bottom,top

      3儿捧、層模型(Layer)(圖層)

      層模型有三種形式:

      1荚坞、絕對(duì)定位(position: absolute)

      2、相對(duì)定位(position: relative)

      3菲盾、固定定位(position: fixed)

      HTML文檔可以說由節(jié)點(diǎn)構(gòu)成的集合颓影,三種常見的DOM節(jié)點(diǎn):(document object model)

      1. 元素節(jié)點(diǎn):上圖中、亿汞、

      等都是元素節(jié)點(diǎn)瞭空,即標(biāo)簽。

      2. 文本節(jié)點(diǎn):向用戶展示的內(nèi)容疗我,如

    • ...
    • 中的JavaScript咆畏、DOM、CSS等文本吴裤。

      3. 屬性節(jié)點(diǎn):元素屬性旧找,如標(biāo)簽的鏈接屬性。

      鼠標(biāo)事件

      o’clock = 點(diǎn)擊事件麦牺;

      onmouseonver = 鼠標(biāo)經(jīng)過事件

      onmouseout = 鼠標(biāo)移開事件

      on focus = 光標(biāo)聚焦事件

      nobler = 失焦事件

      unselect = 內(nèi)容選定事件

      unchange = 文本框內(nèi)容改變事件

      unload = 加載事件

      on unload = 卸載事件

      最后編輯于
      ?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
      • 序言:七十年代末钮蛛,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子剖膳,更是在濱河造成了極大的恐慌魏颓,老刑警劉巖,帶你破解...
        沈念sama閱讀 216,692評(píng)論 6 501
      • 序言:濱河連續(xù)發(fā)生了三起死亡事件吱晒,死亡現(xiàn)場(chǎng)離奇詭異甸饱,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
        沈念sama閱讀 92,482評(píng)論 3 392
      • 文/潘曉璐 我一進(jìn)店門叹话,熙熙樓的掌柜王于貴愁眉苦臉地迎上來偷遗,“玉大人,你說我怎么就攤上這事驼壶∈贤悖” “怎么了?”我有些...
        開封第一講書人閱讀 162,995評(píng)論 0 353
      • 文/不壞的土叔 我叫張陵热凹,是天一觀的道長泵喘。 經(jīng)常有香客問我,道長碌嘀,這世上最難降的妖魔是什么涣旨? 我笑而不...
        開封第一講書人閱讀 58,223評(píng)論 1 292
      • 正文 為了忘掉前任,我火速辦了婚禮股冗,結(jié)果婚禮上霹陡,老公的妹妹穿的比我還像新娘。我一直安慰自己止状,他們只是感情好烹棉,可當(dāng)我...
        茶點(diǎn)故事閱讀 67,245評(píng)論 6 388
      • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著怯疤,像睡著了一般浆洗。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上集峦,一...
        開封第一講書人閱讀 51,208評(píng)論 1 299
      • 那天伏社,我揣著相機(jī)與錄音,去河邊找鬼塔淤。 笑死摘昌,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的高蜂。 我是一名探鬼主播聪黎,決...
        沈念sama閱讀 40,091評(píng)論 3 418
      • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼备恤!你這毒婦竟也來了稿饰?” 一聲冷哼從身側(cè)響起,我...
        開封第一講書人閱讀 38,929評(píng)論 0 274
      • 序言:老撾萬榮一對(duì)情侶失蹤露泊,失蹤者是張志新(化名)和其女友劉穎喉镰,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體惭笑,經(jīng)...
        沈念sama閱讀 45,346評(píng)論 1 311
      • 正文 獨(dú)居荒郊野嶺守林人離奇死亡梧喷,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
        茶點(diǎn)故事閱讀 37,570評(píng)論 2 333
      • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了脖咐。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片铺敌。...
        茶點(diǎn)故事閱讀 39,739評(píng)論 1 348
      • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖屁擅,靈堂內(nèi)的尸體忽然破棺而出偿凭,到底是詐尸還是另有隱情,我是刑警寧澤派歌,帶...
        沈念sama閱讀 35,437評(píng)論 5 344
      • 正文 年R本政府宣布弯囊,位于F島的核電站,受9級(jí)特大地震影響胶果,放射性物質(zhì)發(fā)生泄漏匾嘱。R本人自食惡果不足惜,卻給世界環(huán)境...
        茶點(diǎn)故事閱讀 41,037評(píng)論 3 326
      • 文/蒙蒙 一早抠、第九天 我趴在偏房一處隱蔽的房頂上張望霎烙。 院中可真熱鬧,春花似錦蕊连、人聲如沸悬垃。這莊子的主人今日做“春日...
        開封第一講書人閱讀 31,677評(píng)論 0 22
      • 文/蒼蘭香墨 我抬頭看了看天上的太陽尝蠕。三九已至,卻和暖如春载庭,著一層夾襖步出監(jiān)牢的瞬間看彼,已是汗流浹背。 一陣腳步聲響...
        開封第一講書人閱讀 32,833評(píng)論 1 269
      • 我被黑心中介騙來泰國打工囚聚, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留靖榕,地道東北人。 一個(gè)月前我還...
        沈念sama閱讀 47,760評(píng)論 2 369
      • 正文 我出身青樓靡挥,卻偏偏與公主長得像序矩,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子跋破,可洞房花燭夜當(dāng)晚...
        茶點(diǎn)故事閱讀 44,647評(píng)論 2 354

      推薦閱讀更多精彩內(nèi)容

      • 本文主要是起筆記的作用簸淀,內(nèi)容來自慕課網(wǎng). 認(rèn)識(shí)CSS樣式 CSS全稱為“層疊樣式表 (Cascading Styl...
        0o凍僵的企鵝o0閱讀 2,641評(píng)論 0 30
      • 一 外部式css樣式 (也可稱為外聯(lián)式)就是把css代碼寫一個(gè)單獨(dú)的外部文件中,這個(gè)css樣式文件以“.css...
        KunMitnic閱讀 939評(píng)論 0 1
      • 一.CSS描述 CSS全稱為“層疊樣式表(Cascading Style Sheets)”毒返,它主要是用于定義HTM...
        snowy_sunny閱讀 1,075評(píng)論 0 4
      • CSS全稱為“層疊樣式表 (Cascading Style Sheets)”租幕,它主要是用于定義HTML內(nèi)容在瀏覽器...
        百作不死的學(xué)習(xí)閱讀 1,164評(píng)論 0 7
      • 1.不怕麻煩,堅(jiān)持用谷歌和維基百科拧簸,還有g(shù)mail劲绪。最終養(yǎng)成習(xí)慣。這會(huì)讓我避開無數(shù)的坑。用百度簡直是對(duì)自己智商的侮...
        龍卷風(fēng)227閱讀 617評(píng)論 0 5