Y分鐘學CSS

時間 2019-11-11

標籤分鐘 css 欄目 CSS 简体版

原文原文鏈接

早期的web沒有樣式，只是單純的文本。經過CSS，能夠實現網頁樣式和內容的分離。css

簡單來講，CSS能夠指定HTML頁面上的元素所使用的樣式。html

和其餘語言同樣，CSS有不少版本。最新的版本是CSS 3. CSS 2.0兼容性最好。web

你可使用dabblet來在線測試CSS的效果。segmentfault

註釋

註釋使用/*和*/包裹。瀏覽器

/* 註釋 */

選擇器

通常而言，CSS的聲明語句很是簡單。測試

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

選擇器用於指定頁面上的元素。字體

針對頁面上的全部元素。ui

* { color:red; }

假定頁面上有這樣一個元素this

<div class='some-class class2' id='someId' attr='value' />

你能夠經過類名來指定它。url

.some-class { }

給出全部類名：

.some-class.class2 { }

標籤名

div { }

#someId { }

因爲元素包含attr屬性，所以也能夠經過這個來指定：

[attr] { font-size:smaller; }

以及有特定值的屬性：

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

經過屬性的值的開頭指定：

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

經過屬性的值的結尾來指定：

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

經過屬性的值的部分來指定：

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

你能夠把這些所有結合起來，注意不一樣部分間不該該有空格，不然會改變語義。

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

你也能夠經過父元素來指定。

某個元素是另外一個元素的直接子元素：

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

或者經過該元素的祖先元素

div.some-parent .class-name {}

注意，去掉空格後語義就不一樣了。你能說出哪裏不一樣麼？

div.some-parent.class-name {}

你能夠選擇某元素前的相鄰元素:

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

某元素以前的同級元素（相鄰或不相鄰）：

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

僞類容許你基於頁面的行爲指定元素（而不是基於頁面結構）。

例如，當鼠標懸停在某個元素上時：

:hover {}

已訪問過的連接：

:visited {}

未訪問過的連接：

:link {}

當前焦點的input元素：

:focus {}

屬性

單位

width: 50%; /* 百分比 */
font-size: 2em; /* 當前字體大小的兩倍 */
width: 200px; /* 像素 */
font-size: 20pt; /* 點 */
width: 5cm; /* 釐米 */
width: 50mm; /* 毫米 */
width: 5in; /* 英尺 */

顏色

background-color: #F6E;  /* 短16位 */
background-color: #F262E2; /* 長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"; /* 使用雙引號包裹含空格的字體名稱 */
font-family: "Courier New", Trebuchet, Arial; /* 若是第一個
                         字體沒找到，瀏覽器會使用第二個字體，一次類推 */

使用

CSS文件使用 .css 後綴。

<!-- 你須要在文件的 <head> 引用CSS文件 -->
<link rel='stylesheet' type='text/css' href='filepath/filename.css' />

<!-- 你也能夠在標記中內嵌CSS。不過強烈建議不要這麼幹。 -->
<style>
   選擇器 { 屬性:值; }
</style>

<!-- 也能夠直接使用元素的style屬性。
這是你最不應乾的事情。 -->


<div style='property:value;'>
</div>

優先級

同一個元素可能被多個不一樣的選擇器指定，所以可能會有衝突。

假定CSS是這樣的：

/*A*/
p.class1[attr='value']

/*B*/
p.class1 {}

/*C*/
p.class2 {}

/*D*/
p {}

/*E*/
p { property: value !important; }

而後標記語言爲：

<p style='/*F*/ property:value;' class='class1 class2' attr='value'>
</p>

那麼將會按照下面的順序應用風格：

E 優先級最高，由於它使用了 !important，除非頗有必要，儘可能避免使用這個。
F 其次，由於它是嵌入的風格。
A 其次，由於它比其餘指令更具體。
C 其次，雖然它的具體程度和B同樣，可是它在B以後。
接下來是 B。
最後是 D。

兼容性

CSS2 的絕大部分特性兼容各類瀏覽器和設備。如今 CSS3 的兼容性也愈來愈好了。可是兼容性問題仍然是須要留意的一個問題。

QuirksMode CSS是關於這方面最好的資源。

擴展閱讀

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

1. Y分鐘學C#
2. Y 分鐘學 Dart
3. Y 分鐘學 Elixir
4. Y分鐘學Bash
5. Y分鐘學Common Lisp
6. Y分鐘學clojure宏
7. Y分鐘Erlang
8. X分鐘速成Y （其中Y=Python3）
9. 5分鐘學會 CSS Grid 佈局
10. 數學概率之z=x+y和z=x-y和z=x/y的分佈
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• CSS 指南 - 網站建設指南
• Git五分鐘教程
• Tomcat學習筆記（史上最全tomcat學習筆記）

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。