成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

Y分鐘學(xué)CSS

Hydrogen / 2062人閱讀

摘要：通過(guò)，可以實(shí)現(xiàn)網(wǎng)頁(yè)樣式和內(nèi)容的分離。注釋注釋使用和包裹。針對(duì)頁(yè)面上的所有元素。其次，因?yàn)樗绕渌噶罡唧w。兼容性的絕大部分特性兼容各種瀏覽器和設(shè)備。但是兼容性問(wèn)題仍然是需要留意的一個(gè)問(wèn)題。是關(guān)于這方面最好的資源。

早期的web沒(méi)有樣式，只是單純的文本。通過(guò)CSS，可以實(shí)現(xiàn)網(wǎng)頁(yè)樣式和內(nèi)容的分離。

簡(jiǎn)單來(lái)說(shuō)，CSS可以指定HTML頁(yè)面上的元素所使用的樣式。

和其他語(yǔ)言一樣，CSS有很多版本。最新的版本是CSS 3. CSS 2.0兼容性最好。

你可以使用dabblet來(lái)在線測(cè)試CSS的效果。

注釋

注釋使用/*和*/包裹。

/* 注釋 */
選擇器

一般而言，CSS的聲明語(yǔ)句非常簡(jiǎn)單。

選擇器 { 屬性: 值; /* 更多屬性...*/ }

選擇器用于指定頁(yè)面上的元素。

針對(duì)頁(yè)面上的所有元素。

* { color:red; }

假定頁(yè)面上有這樣一個(gè)元素

你可以通過(guò)類(lèi)名來(lái)指定它。

.some-class { }

給出所有類(lèi)名：

.some-class.class2 { }

標(biāo)簽名

div { }

id

#someId { }

由于元素包含attr屬性，因此也可以通過(guò)這個(gè)來(lái)指定：

[attr] { font-size:smaller; }

以及有特定值的屬性：

[attr="value"] { font-size:smaller; }

通過(guò)屬性的值的開(kāi)頭指定：

[attr^="val"] { font-size:smaller; }

通過(guò)屬性的值的結(jié)尾來(lái)指定：

[attr$="ue"] { font-size:smaller; }

通過(guò)屬性的值的部分來(lái)指定：

[attr~="lu"] { font-size:smaller; }

你可以把這些全部結(jié)合起來(lái)，注意不同部分間不應(yīng)該有空格，否則會(huì)改變語(yǔ)義。

div.some-class[attr$="ue"] { }

你也可以通過(guò)父元素來(lái)指定。

某個(gè)元素是另一個(gè)元素的直接子元素：

div.some-parent > .class-name {}

或者通過(guò)該元素的祖先元素

div.some-parent .class-name {}

注意，去掉空格后語(yǔ)義就不同了。你能說(shuō)出哪里不同么？

div.some-parent.class-name {}

你可以選擇某元素前的相鄰元素:

.i-am-before + .this-element { }

某元素之前的同級(jí)元素（相鄰或不相鄰）：

.i-am-any-before ~ .this-element {}

偽類(lèi)允許你基于頁(yè)面的行為指定元素（而不是基于頁(yè)面結(jié)構(gòu)）。

例如，當(dāng)鼠標(biāo)懸停在某個(gè)元素上時(shí)：

:hover {}

已訪問(wèn)過(guò)的鏈接：

:visited {}

未訪問(wèn)過(guò)的鏈接：

: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; /* 顏色名稱(chēng) */
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)包裹含空格的字體名稱(chēng) */
font-family: "Courier New", Trebuchet, Arial; /* 如果第一個(gè)
                         字體沒(méi)找到，瀏覽器會(huì)使用第二個(gè)字體，一次類(lèi)推 */
使用

CSS文件使用 .css 后綴。
優(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)記語(yǔ)言為：

那么將會(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之后。

接下來(lái)是 B。

最后是 D。

兼容性

CSS2 的絕大部分特性兼容各種瀏覽器和設(shè)備?，F(xiàn)在 CSS3 的兼容性也越來(lái)越好了。 但是兼容性問(wèn)題仍然是需要留意的一個(gè)問(wèn)題。

QuirksMode CSS是關(guān)于這方面最好的資源。

擴(kuò)展閱讀

CSS優(yōu)先級(jí)詳解

CSS兼容性列表

理解 CSS 的 z-index 屬性

原文 Learn X in Y minutes, where X=css
翻譯 SegmentFault

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/110840.html

相關(guān)文章

  • 【30分鐘學(xué)完】canvas動(dòng)畫(huà)|游戲基礎(chǔ)(2)：從零開(kāi)始畫(huà)畫(huà)

    摘要：前言上篇主要是理論的概述，本篇會(huì)多些實(shí)踐，來(lái)講講的基礎(chǔ)用法，并包含一些基礎(chǔ)三角函數(shù)的應(yīng)用，推薦沒(méi)有基礎(chǔ)的朋友閱讀，熟悉的朋友可以跳過(guò)。完整實(shí)例一個(gè)會(huì)跟蹤鼠標(biāo)位置的箭頭三角函數(shù)上下運(yùn)動(dòng)終于順利過(guò)渡到三角函數(shù)的話題笑。 前言 上篇主要是理論的概述，本篇會(huì)多些實(shí)踐，來(lái)講講canvas的基礎(chǔ)用法，并包含一些基礎(chǔ)三角函數(shù)的應(yīng)用，推薦沒(méi)有canvas基礎(chǔ)的朋友閱讀，熟悉的朋友可以跳過(guò)。 本人能力...

    anyway 評(píng)論0 收藏0

  • 【30分鐘學(xué)完】canvas動(dòng)畫(huà)|游戲基礎(chǔ)(2)：從零開(kāi)始畫(huà)畫(huà)

    摘要：前言上篇主要是理論的概述，本篇會(huì)多些實(shí)踐，來(lái)講講的基礎(chǔ)用法，并包含一些基礎(chǔ)三角函數(shù)的應(yīng)用，推薦沒(méi)有基礎(chǔ)的朋友閱讀，熟悉的朋友可以跳過(guò)。完整實(shí)例一個(gè)會(huì)跟蹤鼠標(biāo)位置的箭頭三角函數(shù)上下運(yùn)動(dòng)終于順利過(guò)渡到三角函數(shù)的話題笑。 前言 上篇主要是理論的概述，本篇會(huì)多些實(shí)踐，來(lái)講講canvas的基礎(chǔ)用法，并包含一些基礎(chǔ)三角函數(shù)的應(yīng)用，推薦沒(méi)有canvas基礎(chǔ)的朋友閱讀，熟悉的朋友可以跳過(guò)。 本人能力...

    Baoyuan 評(píng)論0 收藏0

  • 重學(xué)前端學(xué)習(xí)筆記（二十六）--CSSOM

    摘要：筆記說(shuō)明重學(xué)前端是程劭非前手機(jī)淘寶前端負(fù)責(zé)人在極客時(shí)間開(kāi)的一個(gè)專(zhuān)欄，每天分鐘，重構(gòu)你的前端知識(shí)體系，筆者主要整理學(xué)習(xí)過(guò)程的一些要點(diǎn)筆記以及感悟，完整的可以加入的專(zhuān)欄學(xué)習(xí)原文有的語(yǔ)音，如有侵權(quán)請(qǐng)聯(lián)系我，郵箱。 筆記說(shuō)明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開(kāi)的一個(gè)專(zhuān)欄，每天10分鐘，重構(gòu)你的前端知識(shí)體系，筆者主要整理學(xué)習(xí)過(guò)程的一些要點(diǎn)筆記以及感悟，完整的可以...

    antz 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<