CSS第一小節(jié)第一天

CSS基礎(chǔ)入門(mén)

什么是CSS匪蝙?

CSS 指層疊樣式表 (Cascading Style Sheets)

CSS通常稱(chēng)為CSS樣式表或?qū)盈B樣式表(級(jí)聯(lián)樣式表)围小,主要用于設(shè)置HTML頁(yè)面中的文本內(nèi)容(字體、大小、對(duì)齊方式等)瞬痘、圖片的外形(寬高蒿秦、邊框樣式筝蚕、邊距等)以及版面的布局等外觀顯示樣式卦碾。

CSS以HTML為基礎(chǔ)铺坞,提供了豐富的功能起宽,如字體洲胖、顏色、背景的控制及整體排版等坯沪,而且還可以針對(duì)不同的瀏覽器設(shè)置不同的樣式绿映。

CSS就是控制頁(yè)面布局和樣式

CSS的版本:2.1→3.0

類(lèi)比例子:奶油蛋糕、畫(huà)畫(huà)

HTML和CSS的關(guān)系:

HTML 結(jié)構(gòu)層 負(fù)責(zé)從 語(yǔ)義的角度搭建頁(yè)面結(jié)構(gòu)

CSS 樣式層 負(fù)責(zé)從 審美的角度美化頁(yè)面

JavaScript 行為層 負(fù)責(zé)從 交互的角度提升用戶(hù)體驗(yàn)

如何編寫(xiě)CSS

ul>li>a[href="#"]? ? >? 表示父子關(guān)系? [href="#"]表示a標(biāo)簽 添加屬性


生成結(jié)果如圖


小括號(hào)可以讓a標(biāo)簽和li標(biāo)簽成一組然后乘以3..

ul>(li>a[href="#"])*3 ? 結(jié)果如下圖


引入CSS的方式

所有的標(biāo)簽都有一個(gè)默認(rèn)樣式腐晾,我們稱(chēng)為瀏覽器樣式叉弦,或者默認(rèn)樣式

默認(rèn)樣式 優(yōu)先級(jí)最低

行內(nèi)樣式

所有的標(biāo)簽共有的屬性 id name style

行內(nèi)樣式,是通過(guò)在標(biāo)簽中設(shè)置style屬性來(lái)達(dá)到實(shí)現(xiàn)控制標(biāo)簽的樣式的效果藻糖。例如


Style屬性中淹冰,可以設(shè)置多條的CSS樣式。

內(nèi)嵌樣式

在head標(biāo)簽中巨柒,嵌套一個(gè)style標(biāo)簽樱拴,在style標(biāo)簽中可以書(shū)寫(xiě)CSS的樣式內(nèi)容。

Style標(biāo)簽有一個(gè)屬性type屬性洋满,默認(rèn)值就是 text/css,可以省略

注意:寫(xiě)完標(biāo)簽/選擇器寫(xiě)完要加一個(gè)空格,寫(xiě)完{,要加空格,屬性名和冒號(hào)之間不要有空格,冒號(hào)后面和屬性值之間輸入時(shí)盡量加空格,最后的分號(hào)后面,也要加空格,方便閱讀代碼.

注釋用:

/* ? */


background-color: red ?背景色

外部樣式,外聯(lián)樣式

是最常用的樣式

通過(guò)link標(biāo)簽引入css樣式文件

<link rel="stylesheet" href="a.css"/>

type屬性:只有一個(gè)選項(xiàng)晶乔,“text/css",指定當(dāng)前為css文本文件

rel:指定當(dāng)前HTML文件與CSS文件的關(guān)系是樣式表牺勾。href:指定外聯(lián)樣式表的路徑

導(dǎo)入樣式:@import正罢,導(dǎo)入樣式會(huì)導(dǎo)致,css文件不能并行下載驻民。不推薦使用翻具。

導(dǎo)入樣式的書(shū)寫(xiě)必須在所有的css規(guī)則書(shū)寫(xiě)之前

行內(nèi)樣式和內(nèi)嵌樣式不推薦使用,臨時(shí)使用可以,推薦使用外聯(lián)


導(dǎo)入樣式:@import,導(dǎo)入樣式會(huì)導(dǎo)致回还,css文件不能并行下載裆泳。不推薦使用

導(dǎo)入樣式import必須卸載所有其他樣式設(shè)置之前

CSS文件中也可以導(dǎo)入css文件

CSS語(yǔ)法

換行不敏感,空格不敏感?

屬性和屬性值最好寫(xiě)到一行,盡量不要換行.大小寫(xiě)不敏感,盡量寫(xiě)小寫(xiě)

多條CSS聲明 屬性值,盡量分多行寫(xiě)

CSS案例

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市懦趋,隨后出現(xiàn)的幾起案子晾虑,更是在濱河造成了極大的恐慌,老刑警劉巖仅叫,帶你破解...
    沈念sama閱讀 211,884評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件帜篇,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡诫咱,警方通過(guò)查閱死者的電腦和手機(jī)笙隙,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,347評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)坎缭,“玉大人竟痰,你說(shuō)我怎么就攤上這事签钩。” “怎么了坏快?”我有些...
    開(kāi)封第一講書(shū)人閱讀 157,435評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵铅檩,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我莽鸿,道長(zhǎng)昧旨,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,509評(píng)論 1 284
  • 正文 為了忘掉前任祥得,我火速辦了婚禮兔沃,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘级及。我一直安慰自己乒疏,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,611評(píng)論 6 386
  • 文/花漫 我一把揭開(kāi)白布饮焦。 她就那樣靜靜地躺著怕吴,像睡著了一般。 火紅的嫁衣襯著肌膚如雪追驴。 梳的紋絲不亂的頭發(fā)上械哟,一...
    開(kāi)封第一講書(shū)人閱讀 49,837評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音殿雪,去河邊找鬼暇咆。 笑死,一個(gè)胖子當(dāng)著我的面吹牛丙曙,可吹牛的內(nèi)容都是我干的爸业。 我是一名探鬼主播,決...
    沈念sama閱讀 38,987評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼亏镰,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼扯旷!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起索抓,我...
    開(kāi)封第一講書(shū)人閱讀 37,730評(píng)論 0 267
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤钧忽,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后逼肯,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體耸黑,經(jīng)...
    沈念sama閱讀 44,194評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,525評(píng)論 2 327
  • 正文 我和宋清朗相戀三年篮幢,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了大刊。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,664評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡三椿,死狀恐怖缺菌,靈堂內(nèi)的尸體忽然破棺而出葫辐,到底是詐尸還是另有隱情,我是刑警寧澤伴郁,帶...
    沈念sama閱讀 34,334評(píng)論 4 330
  • 正文 年R本政府宣布耿战,位于F島的核電站,受9級(jí)特大地震影響蛾绎,放射性物質(zhì)發(fā)生泄漏昆箕。R本人自食惡果不足惜鸦列,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,944評(píng)論 3 313
  • 文/蒙蒙 一租冠、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧薯嗤,春花似錦顽爹、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,764評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至玻褪,卻和暖如春肉渴,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背带射。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,997評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工同规, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人窟社。 一個(gè)月前我還...
    沈念sama閱讀 46,389評(píng)論 2 360
  • 正文 我出身青樓券勺,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親灿里。 傳聞我的和親對(duì)象是個(gè)殘疾皇子关炼,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,554評(píng)論 2 349

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

  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,737評(píng)論 1 92
  • CSS定義: CSS 指層疊樣式表 (Cascading Style Sheets) CSS通常稱(chēng)為CSS樣式表或...
    顯然2017閱讀 857評(píng)論 0 8
  • 最近在看html基礎(chǔ)匣吊,好吧儒拂,寫(xiě)點(diǎn)筆記,比較low見(jiàn)諒色鸳,反正我自己看懂就行了 CSS基礎(chǔ) 1社痛、css簡(jiǎn)介 casca...
    小龍是只貓閱讀 591評(píng)論 0 1
  • 轉(zhuǎn)載請(qǐng)聲明 原文鏈接地址 關(guān)注公眾號(hào)獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
    程序員poetry閱讀 16,524評(píng)論 32 459
  • 01 前幾天褥影,朋友說(shuō)道,自從畢業(yè)之后咏雌,就再也沒(méi)有靜下心來(lái)看書(shū)了凡怎。工作很忙很累校焦,事情很多,仿佛總放不下手頭的事情统倒,靜...
    紅妹愛(ài)折騰閱讀 554評(píng)論 0 1