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案例