免費(fèi)AI編程助手
css
2018-02-24 15:18 更新
X分鐘速成Y
其中 Y=css
源代碼下載：?learncss-cn.css
早期的web沒有樣式，只是單純的文本。通過CSS，可以實(shí)現(xiàn)網(wǎng)頁樣式和內(nèi)容的分離。
簡(jiǎn)單來說，CSS可以指定HTML頁面上的元素所使用的樣式。
和其他語言一樣，CSS有很多版本。最新的版本是CSS 3. CSS 2.0兼容性最好。
你可以使用dabblet來在線測(cè)試CSS的效果。
/* 注釋 */
/* ####################
## 選擇器
####################*/
/* 一般而言，CSS的聲明語句非常簡(jiǎn)單。 */
選擇器 { 屬性: 值; /* 更多屬性...*/ }
/* 選擇器用于指定頁面上的元素。
針對(duì)頁面上的所有元素。 */
* { color:red; }
/*
假定頁面上有這樣一個(gè)元素
<div class='some-class class2' id='someId' attr='value' />
*/
/* 你可以通過類名來指定它 */
.some-class { }
/* 給出所有類名 */
.some-class.class2 { }
/* 標(biāo)簽名 */
div { }
/* id */
#someId { }
/* 由于元素包含attr屬性，因此也可以通過這個(gè)來指定 */
[attr] { font-size:smaller; }
/* 以及有特定值的屬性 */
[attr='value'] { font-size:smaller; }
/* 通過屬性的值的開頭指定 */
[attr^='val'] { font-size:smaller; }
/* 通過屬性的值的結(jié)尾來指定 */
[attr$='ue'] { font-size:smaller; }
/* 通過屬性的值的部分來指定 */
[attr~='lu'] { font-size:smaller; }
/* 你可以把這些全部結(jié)合起來，注意不同部分間不應(yīng)該有空格，否則會(huì)改變語義 */
div.some-class[attr$='ue'] { }
/* 你也可以通過父元素來指定。*/
/* 某個(gè)元素是另一個(gè)元素的直接子元素 */
div.some-parent > .class-name {}
/* 或者通過該元素的祖先元素 */
div.some-parent .class-name {}
/* 注意，去掉空格后語義就不同了。
你能說出哪里不同么？ */
div.some-parent.class-name {}
/* 你可以選擇某元素前的相鄰元素 */
.i-am-before + .this-element { }
/* 某元素之前的同級(jí)元素（相鄰或不相鄰） */
.i-am-any-before ~ .this-element {}
/* 偽類允許你基于頁面的行為指定元素（而不是基于頁面結(jié)構(gòu)） */
/* 例如，當(dāng)鼠標(biāo)懸停在某個(gè)元素上時(shí) */
:hover {}
/* 已訪問過的鏈接*/
:visited {}
/* 未訪問過的鏈接*/
:link {}
/* 當(dāng)前焦點(diǎn)的input元素 */
:focus {}
/* ####################
## 屬性
####################*/
選擇器 {
/* 單位 */
width: 50%; /* 百分比 */
font-size: 2em; /* 當(dāng)前字體大小的兩倍 */
width: 200px; /* 像素 */
font-size: 20pt; /* 點(diǎn) */
width: 5cm; /* 厘米 */
width: 50mm; /* 毫米 */
width: 5in; /* 英尺 */
/* 顏色 */
background-color: #F6E; /* 短16位 */
background-color: #F262E2; /* 長(zhǎng)16位 */
background-color: tomato; /* 顏色名稱 */
background-color: rgb(255, 255, 255); /* rgb */
background-color: rgb(10%, 20%, 50%); /* rgb 百分比 */
background-color: rgba(255, 0, 0, 0.3); /* rgb 加透明度 */
/* 圖片 */
background-image: url(/path-to-image/image.jpg);
/* 字體 */
font-family: Arial;
font-family: "Courier New"; /* 使用雙引號(hào)包裹含空格的字體名稱 */
font-family: "Courier New", Trebuchet, Arial; /* 如果第一個(gè)
字體沒找到，瀏覽器會(huì)使用第二個(gè)字體，一次類推 */
}使用
CSS文件使用?.css?后綴。
<!-- 你需要在文件的 <head> 引用CSS文件 -->
<link rel='stylesheet' type='text/css' href='filepath/filename.css' />
<!-- 你也可以在標(biāo)記中內(nèi)嵌CSS。不過強(qiáng)烈建議不要這么干。 -->
<style>
選擇器 { 屬性:值; }
</style>
<!-- 也可以直接使用元素的style屬性。
這是你最不該干的事情。 -->
<div style='property:value;'>
</div>優(yōu)先級(jí)
同一個(gè)元素可能被多個(gè)不同的選擇器指定，因此可能會(huì)有沖突。
假定CSS是這樣的：
/*A*/
p.class1[attr='value']
/*B*/
p.class1 {}
/*C*/
p.class2 {}
/*D*/
p {}
/*E*/
p { property: value !important; }然后標(biāo)記語言為：
<p style='/*F*/ property:value;' class='class1 class2' attr='value'>
</p>那么將會(huì)按照下面的順序應(yīng)用風(fēng)格：
E?優(yōu)先級(jí)最高，因?yàn)樗褂昧?!important，除非很有必要，盡量避免使用這個(gè)。F?其次，因?yàn)樗乔度氲娘L(fēng)格。A?其次，因?yàn)樗绕渌噶罡唧w。C?其次，雖然它的具體程度和B一樣，但是它在B之后。- 接下來是?
B。 - 最后是?
D。
兼容性
CSS2 的絕大部分特性兼容各種瀏覽器和設(shè)備。現(xiàn)在 CSS3 的兼容性也越來越好了。 但是兼容性問題仍然是需要留意的一個(gè)問題。
QuirksMode CSS是關(guān)于這方面最好的資源。
擴(kuò)展閱讀
以上內(nèi)容是否對(duì)您有幫助：
更多建議：