CSS第二次筆記

1.CSS復(fù)合選擇器

為了使目標(biāo)元素標(biāo)簽的選擇更加準(zhǔn)確和精細(xì),通常由兩個(gè)或則多個(gè)基礎(chǔ)選擇器沐旨,通過(guò)不同的方式組合而成的復(fù)合選擇器來(lái)定位目標(biāo)元素森逮。常見(jiàn)的并集選擇器有以下幾種:

1.1交集選擇器

又兩個(gè)選擇器構(gòu)成,前者為標(biāo)簽磁携,后者為該標(biāo)簽所對(duì)應(yīng)的類(lèi)名選擇器褒侧,兩個(gè)選擇器使用"."來(lái)鏈接,不能出現(xiàn)空格谊迄。使用較少

1.2并集選擇器

由多個(gè)選擇器通過(guò)逗號(hào)連接而成闷供,通常用于有相同的CSS樣式時(shí),可以使用并集選擇器

1.3后代選擇器

用來(lái)選擇元素或者元素組的后代统诺,其寫(xiě)法為歪脏,外層標(biāo)簽在前,要選擇的內(nèi)層標(biāo)簽在后粮呢,中間用空格隔開(kāi)婿失,當(dāng)標(biāo)簽發(fā)生嵌套時(shí),內(nèi)層標(biāo)簽即為外層標(biāo)簽的后代啄寡。

1.4子元素選擇器

只能選擇某個(gè)元素子元素的元素豪硅,其寫(xiě)法為父級(jí)標(biāo)簽在前,子級(jí)標(biāo)簽在后挺物,中間使用>進(jìn)行連接懒浮,注意符號(hào)左右各保留一個(gè)空格

子元素選擇器和后代選擇器的區(qū)別:子元素選擇器中的子只包括第一級(jí)的后代,即只包含兒子识藤,而后代選擇器的后代包括所有的后代砚著。

2.標(biāo)簽顯示模式(display)

在網(wǎng)頁(yè)中表現(xiàn)的顯示方式主要有以下幾種:

2.1塊級(jí)元素(display:block)

常見(jiàn)的塊級(jí)元素有:標(biāo)題標(biāo)簽眯牧,段落標(biāo)簽,列表赖草。表格学少,以及div等

2.2行內(nèi)元素(display:inline)

常見(jiàn)的行內(nèi)元素有:<a>/<strong>/<b>/<em>/<i>/<del>/<s>/<ins>/<u>/<span>等

2.3行內(nèi)塊元素(display:inline-block)

常見(jiàn)的行內(nèi)塊元素:img、input秧骑、td等

行內(nèi)塊元素的特點(diǎn):相鄰的行內(nèi)塊元素可以在同行顯示版确、默認(rèn)寬度為其內(nèi)容的寬度,其寬高乎折,內(nèi)外邊距都可以控制绒疗。

2.4塊級(jí)元素與行內(nèi)元素的區(qū)別

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

塊級(jí)元素獨(dú)立占一行,新的塊級(jí)元素總是從新的一行開(kāi)始骂澄、塊級(jí)元素的寬高吓蘑,內(nèi)外邊距都可以控制、其寬度為設(shè)置時(shí)是默認(rèn)寬度的100%坟冲,可以容納內(nèi)聯(lián)元素和其他塊級(jí)元素

(2)行內(nèi)元素的特點(diǎn):

相鄰的行內(nèi)元素在同一行上磨镶、默認(rèn)寬度為內(nèi)容的寬度、不能設(shè)置其寬高健提,但是水平方向的內(nèi)外邊距可以設(shè)置琳猫,垂直方向無(wú)效、行內(nèi)元素只能容納文本或則其他行內(nèi)元素

3.CSS偽類(lèi)

偽類(lèi)可以用于文檔狀態(tài)的改變私痹、動(dòng)態(tài)的事件等脐嫂,最常見(jiàn)的是放鼠標(biāo)經(jīng)過(guò)元素時(shí),對(duì)應(yīng)元素發(fā)生了相應(yīng)的變化紊遵。

常用的偽類(lèi)元素有以下幾種:

3.1 ?:link ---->用于未被訪問(wèn)過(guò)的鏈接

3.2 ?:hover ?----->有鼠標(biāo)指針懸停與上面的狀態(tài)

3.3 ? :visited ----->表示已被訪問(wèn)過(guò)的鏈接狀態(tài)

3.4 ?:avtive ?------>表示鏈接被激活時(shí)的狀態(tài)

3.5 ? :focus ?------->表示鍵盤(pán)獲得焦點(diǎn)元素

注意:鏈接偽類(lèi)账千,使用時(shí)要按照以下順序:link-----> visitied---->hover? ----->active

3.6 ?鏈接中常用的文本修飾屬性:text-decoration

text-decoration其屬性值有:none 沒(méi)有任何裝飾

underline:添加下劃線

line-through ?:添加刪除線

over-line :添加上劃線

4.CSS引入方式

CSS的引入方式有三種:外鏈?zhǔn)剑瑑?nèi)嵌式暗膜,內(nèi)聯(lián)樣式

外鏈?zhǔn)剑涸贖TML文本中引入外部的CSS文件匀奏,其語(yǔ)法格式如下:<link ref="stylesheet" href="引入CSS文件的路徑" ? type="text/css" >

內(nèi)嵌式:直接在HTML文檔中書(shū)寫(xiě)CSS樣式,放在HTML的head中桦山,其語(yǔ)法格式為:<style type="text/css">選擇器{屬性1:屬性值1 攒射;屬性2:屬性值2;屬性3:屬性值3.....}<style/>

內(nèi)聯(lián)樣式:直接在標(biāo)簽內(nèi)部書(shū)寫(xiě)CSS樣式,其語(yǔ)法格式如下:

<標(biāo)簽 style = "屬性1:屬性值1恒水;屬性2:屬性值2会放;屬性3:屬性值3....."><標(biāo)簽/>

5.CSS三大特性:層疊性,繼承性钉凌,優(yōu)先級(jí)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末咧最,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌矢沿,老刑警劉巖滥搭,帶你破解...
    沈念sama閱讀 219,188評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異捣鲸,居然都是意外死亡瑟匆,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,464評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門(mén)栽惶,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)愁溜,“玉大人,你說(shuō)我怎么就攤上這事外厂∶嵯螅” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 165,562評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵汁蝶,是天一觀的道長(zhǎng)渐扮。 經(jīng)常有香客問(wèn)我,道長(zhǎng)掖棉,這世上最難降的妖魔是什么墓律? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,893評(píng)論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮啊片,結(jié)果婚禮上只锻,老公的妹妹穿的比我還像新娘玖像。我一直安慰自己紫谷,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,917評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布捐寥。 她就那樣靜靜地躺著笤昨,像睡著了一般。 火紅的嫁衣襯著肌膚如雪握恳。 梳的紋絲不亂的頭發(fā)上瞒窒,一...
    開(kāi)封第一講書(shū)人閱讀 51,708評(píng)論 1 305
  • 那天,我揣著相機(jī)與錄音乡洼,去河邊找鬼崇裁。 笑死,一個(gè)胖子當(dāng)著我的面吹牛束昵,可吹牛的內(nèi)容都是我干的拔稳。 我是一名探鬼主播,決...
    沈念sama閱讀 40,430評(píng)論 3 420
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼锹雏,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼巴比!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 39,342評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤轻绞,失蹤者是張志新(化名)和其女友劉穎采记,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體政勃,經(jīng)...
    沈念sama閱讀 45,801評(píng)論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡唧龄,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,976評(píng)論 3 337
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了奸远。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片选侨。...
    茶點(diǎn)故事閱讀 40,115評(píng)論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖然走,靈堂內(nèi)的尸體忽然破棺而出援制,到底是詐尸還是另有隱情,我是刑警寧澤芍瑞,帶...
    沈念sama閱讀 35,804評(píng)論 5 346
  • 正文 年R本政府宣布晨仑,位于F島的核電站,受9級(jí)特大地震影響拆檬,放射性物質(zhì)發(fā)生泄漏洪己。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,458評(píng)論 3 331
  • 文/蒙蒙 一竟贯、第九天 我趴在偏房一處隱蔽的房頂上張望答捕。 院中可真熱鬧,春花似錦屑那、人聲如沸拱镐。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,008評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)沃琅。三九已至,卻和暖如春蜘欲,著一層夾襖步出監(jiān)牢的瞬間益眉,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,135評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工姥份, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留郭脂,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,365評(píng)論 3 373
  • 正文 我出身青樓澈歉,卻偏偏與公主長(zhǎng)得像展鸡,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子闷祥,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,055評(píng)論 2 355

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

  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案娱颊? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,754評(píng)論 1 92
  • 轉(zhuǎn)載請(qǐng)聲明 原文鏈接地址 關(guān)注公眾號(hào)獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
    程序員poetry閱讀 16,558評(píng)論 32 459
  • 1.CSS基本概念 1.1 CSS的定義 CSS(Cascading Style Sheets)層疊樣式表傲诵,主要用...
    寥寥十一閱讀 1,836評(píng)論 0 6
  • 我寧愿相信這是上天注定的緣分。雖然會(huì)有一些坎坷和困難箱硕,只要咬緊牙關(guān)拴竹,總會(huì)度過(guò)。
    杜一一閱讀 106評(píng)論 1 1
  • 大概是四年前吧幕与!遇見(jiàn)了他,最不可能相戀镇防、也是最想去試試的人啦鸣! 一米八的個(gè)子,長(zhǎng)相帥氣卻不是花美男的類(lèi)型来氧!給人很踏實(shí)...
    一個(gè)原住民閱讀 291評(píng)論 0 1