前端學(xué)習(xí)筆記之--CSS(1)

什么是CSS肯夏??

? CSS:Cascading Style Sheets層疊樣式表/級聯(lián)樣式表乙各,簡稱樣式表。

.HTML與CSS的關(guān)系???? HTML:構(gòu)建網(wǎng)頁內(nèi)容 ???????? CSS:修飾網(wǎng)頁????????w3C建議盡量使用CSS屬性來取代HTML的屬性。

????使用CSS的方式

? ? ?1.?內(nèi)聯(lián)方式(行內(nèi)樣式)

? ??????特點(diǎn):將CSS樣式定義在HTML的開始標(biāo)記中

????????語法:<any style="CSS樣式的聲明"></any>

????????樣式聲明:由樣式屬性和值組成峭竣,CSS屬性名與其值之間用冒號連接苍在,多個樣式聲明之間用分號分割绝页。

????2.?內(nèi)部樣式

? ??????在網(wǎng)頁的頭元素中增加一對<style></style>,在<style></style>標(biāo)記中聲明該網(wǎng)頁的所有樣式。

????????語法:<head>????<style>???? 樣式規(guī)則????</style>????</head>

????????樣式規(guī)則:由選擇器和樣式聲明組成

? ??3.外部樣式(W3C建議使用這種方式)

????????獨(dú)立于任何網(wǎng)頁的位置處寂恬,聲明一個樣式文件(*.css),在css文件中保存樣式規(guī)則续誉。

? ? ? ? 語法: <link rel="stylesheet" href="CSS文件url">?

? ? ? ? 優(yōu)點(diǎn):1).?外部樣式可以解決多頁面樣式重復(fù)的問題????2).?有利于瀏覽器緩存,從而提高頁面響應(yīng)速度????3).?有利于代碼分離(HTML和CSS)初肉,更容易閱讀和維護(hù)

? ? CSS樣式特點(diǎn)

? ??????1.繼承性

????????????子元素繼承父元素的樣式(有層級關(guān)系)酷鸦。大部分的樣式可以直接被繼承。

? ? ? ? 2.層疊性

????????????可以為一個元素定義多個樣式規(guī)則,規(guī)則中的屬性不沖突時臼隔,可以同時都應(yīng)用到當(dāng)前元素上嘹裂。

????????3.優(yōu)先級????在樣式聲明有沖突時(重復(fù)),則按照樣式的優(yōu)先級來應(yīng)用樣式躬翁。

????????????瀏覽器默認(rèn)設(shè)置? ? <? ?樣式表(內(nèi)部樣式和外部樣式):就近原則 < 內(nèi)聯(lián)樣式? ? <????!important 規(guī)則

? ? CSS選擇器

? ? ?1.通用選擇器? ? *{樣式}

? ? ?2.元素選擇器? ? ? ?div{樣式}

? ? ?3.類選擇器? ? ?.class{樣式}?

? ? ?4.id選擇器? ? ? #id{樣式}

? ? ?5.屬性選擇器????根據(jù)屬性名和屬性值選中元素

? ? ?6.偽類選擇器????選中某些元素的某種狀態(tài)1)link:?超鏈接未訪問時的狀態(tài)2)visited:?超鏈接訪問過后的狀態(tài)3)hover:?鼠標(biāo)懸停狀態(tài)4)active:激活狀態(tài)焦蘑,鼠標(biāo)按下狀態(tài)

? ? ? ? 愛恨法則:link?>?visited?>?hover?>?active

? ? ?7.偽元素選擇器????before????after

? ??選擇器的組合? ? ?1.?并且????2.?后代元素?——?空格????3.?子元素?——?>????4.?相鄰兄弟元素?——?+????5.?后面出現(xiàn)的所有兄弟元素?——?~

? ? ?選擇器的并列多個選擇器,?用逗號分隔


屬性選擇器


偽類選擇器


偽元素選擇器選中的也是一個元素


選擇器組合

????????樣式的優(yōu)先級:? ? (?256進(jìn)制

????????????!important?? ???????????????infinity

? ??????????行間樣式? ?? ??????????????????1000?

? ??????????id? ??? ? ? ? ? ? ? ? ? ? ??????????100?

? ?????????class|屬性|偽類??? ??????? ?10

? ? ? ? ? ?標(biāo)簽選擇器|偽元素??? ??????1?

? ???????? 通配符? ? ? ? ? ? ? ? ? ? ? ? ? ? ?0

? ? CSS的部分樣式具有繼承性????跟文字內(nèi)容相關(guān)的屬性一般都能被繼承?

??? 8.?更多偽類選擇器? ?? ? ? ? ?

????????1).? ?first-child:選擇第一個子元素first-of-type盒发,選中子元素中第一個指定類型的元素?? ? ? ? ?

????????2).??last-child? ? ? ? ?

????????3).??nth-child ?????選中指定的第幾個子元素????even:關(guān)鍵字例嘱,等同于2n ????odd: 關(guān)鍵字,等同于2n+1? ? ? ? ?

????????4).??nth-of-type? ??選中指定的子元素中第幾個某類型的元素? ? ?

????9.?更多的偽元素選擇器? ? ? ? ?

????????1).??first-letter ?????選中元素中的第一個字母? ? ? ? ?

????????2).??first-line ???????選中元素中第一行的文字? ? ? ? ?

????????3).??selection ?????選中被用戶框選的文字?


? ? 屬性的計算過程

? ??????一個元素宁舰,從所有屬性都沒有值拼卵,到所有的屬性都有值,這個計算過程蛮艰,叫做屬性值計算過程

? ??

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末腋腮,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子壤蚜,更是在濱河造成了極大的恐慌即寡,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,682評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件袜刷,死亡現(xiàn)場離奇詭異聪富,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)著蟹,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,277評論 3 395
  • 文/潘曉璐 我一進(jìn)店門墩蔓,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人萧豆,你說我怎么就攤上這事奸披。” “怎么了涮雷?”我有些...
    開封第一講書人閱讀 165,083評論 0 355
  • 文/不壞的土叔 我叫張陵阵面,是天一觀的道長。 經(jīng)常有香客問我洪鸭,道長膜钓,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,763評論 1 295
  • 正文 為了忘掉前任卿嘲,我火速辦了婚禮颂斜,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘拾枣。我一直安慰自己沃疮,他們只是感情好盒让,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,785評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著司蔬,像睡著了一般邑茄。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上俊啼,一...
    開封第一講書人閱讀 51,624評論 1 305
  • 那天肺缕,我揣著相機(jī)與錄音,去河邊找鬼授帕。 笑死同木,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的跛十。 我是一名探鬼主播彤路,決...
    沈念sama閱讀 40,358評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼芥映!你這毒婦竟也來了洲尊?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,261評論 0 276
  • 序言:老撾萬榮一對情侶失蹤奈偏,失蹤者是張志新(化名)和其女友劉穎坞嘀,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體惊来,經(jīng)...
    沈念sama閱讀 45,722評論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡丽涩,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,900評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了唁盏。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片内狸。...
    茶點(diǎn)故事閱讀 40,030評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡检眯,死狀恐怖厘擂,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情锰瘸,我是刑警寧澤刽严,帶...
    沈念sama閱讀 35,737評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站避凝,受9級特大地震影響舞萄,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜管削,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,360評論 3 330
  • 文/蒙蒙 一倒脓、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧含思,春花似錦崎弃、人聲如沸甘晤。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,941評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽线婚。三九已至,卻和暖如春盆均,著一層夾襖步出監(jiān)牢的瞬間塞弊,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,057評論 1 270
  • 我被黑心中介騙來泰國打工泪姨, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留游沿,地道東北人。 一個月前我還...
    沈念sama閱讀 48,237評論 3 371
  • 正文 我出身青樓驴娃,卻偏偏與公主長得像奏候,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子唇敞,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,976評論 2 355

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

  • HTML 5 HTML5概述 因特網(wǎng)上的信息是以網(wǎng)頁的形式展示給用戶的蔗草,因此網(wǎng)頁是網(wǎng)絡(luò)信息傳遞的載體。網(wǎng)頁文件是用...
    阿啊阿吖丁閱讀 3,899評論 0 0
  • CSS 指層疊樣式表(Cascading Style Sheets)疆柔,是一種用來為結(jié)構(gòu)化文檔(如 HTML 文檔或...
    神齊閱讀 2,093評論 0 14
  • 概要 64學(xué)時 3.5學(xué)分 章節(jié)安排 電子商務(wù)網(wǎng)站概況 HTML5+CSS3 JavaScript Node 電子...
    阿啊阿吖丁閱讀 9,208評論 0 3
  • 瀏覽器與服務(wù)器的基本概念 瀏覽器(安裝在電腦里面的一個軟件) 作用: ①將網(wǎng)頁內(nèi)容渲染呈現(xiàn)給用戶查看咒精。 ②讓用戶通...
    云還灬閱讀 1,122評論 0 0
  • 本文主要是起筆記的作用,內(nèi)容來自慕課網(wǎng). 認(rèn)識CSS樣式 CSS全稱為“層疊樣式表 (Cascading Styl...
    0o凍僵的企鵝o0閱讀 2,646評論 0 30