資訊專欄INFORMATION COLUMN
摘要：通過，可以實現網頁樣式和內容的分離。注釋注釋使用和包裹。針對頁面上的所有元素。其次，因為它比其他指令更具體。兼容性的絕大部分特性兼容各種瀏覽器和設備。但是兼容性問題仍然是需要留意的一個問題。是關于這方面最好的資源。
早期的web沒有樣式，只是單純的文本。通過CSS，可以實現網頁樣式和內容的分離。
簡單來說，CSS可以指定HTML頁面上的元素所使用的樣式。
和其他語言一樣，CSS有很多版本。最新的版本是CSS 3. CSS 2.0兼容性最好。
你可以使用dabblet來在線測試CSS的效果。
注釋注釋使用/*和*/包裹。
/* 注釋 */選擇器
一般而言，CSS的聲明語句非常簡單。
選擇器 { 屬性: 值; /* 更多屬性...*/ }
選擇器用于指定頁面上的元素。
針對頁面上的所有元素。
* { color:red; }
假定頁面上有這樣一個元素
你可以通過類名來指定它。
.some-class { }
給出所有類名：
.some-class.class2 { }
標簽名
div { }
id
#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 后綴。
優先級
同一個元素可能被多個不同的選擇器指定，因此可能會有沖突。
假定CSS是這樣的：
/*A*/
p.class1[attr="value"]
/*B*/
p.class1 {}
/*C*/
p.class2 {}
/*D*/
p {}
/*E*/
p { property: value !important; }
然后標記語言為：
那么將會按照下面的順序應用風格：
E 優先級最高，因為它使用了 !important，除非很有必要，盡量避免使用這個。
F 其次，因為它是嵌入的風格。
A 其次，因為它比其他指令更具體。
C 其次，雖然它的具體程度和B一樣，但是它在B之后。
接下來是 B。
最后是 D。
兼容性CSS2 的絕大部分特性兼容各種瀏覽器和設備。現在 CSS3 的兼容性也越來越好了。 但是兼容性問題仍然是需要留意的一個問題。
QuirksMode CSS是關于這方面最好的資源。
擴展閱讀CSS優先級詳解
CSS兼容性列表
理解 CSS 的 z-index 屬性
原文 Learn X in Y minutes, where X=css
翻譯 SegmentFault
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/110840.html
摘要：前言上篇主要是理論的概述，本篇會多些實踐，來講講的基礎用法，并包含一些基礎三角函數的應用，推薦沒有基礎的朋友閱讀，熟悉的朋友可以跳過。完整實例一個會跟蹤鼠標位置的箭頭三角函數上下運動終于順利過渡到三角函數的話題笑。 前言 上篇主要是理論的概述，本篇會多些實踐，來講講canvas的基礎用法，并包含一些基礎三角函數的應用，推薦沒有canvas基礎的朋友閱讀，熟悉的朋友可以跳過。 本人能力...
摘要：前言上篇主要是理論的概述，本篇會多些實踐，來講講的基礎用法，并包含一些基礎三角函數的應用，推薦沒有基礎的朋友閱讀，熟悉的朋友可以跳過。完整實例一個會跟蹤鼠標位置的箭頭三角函數上下運動終于順利過渡到三角函數的話題笑。 前言 上篇主要是理論的概述，本篇會多些實踐，來講講canvas的基礎用法，并包含一些基礎三角函數的應用，推薦沒有canvas基礎的朋友閱讀，熟悉的朋友可以跳過。 本人能力...
摘要：筆記說明重學前端是程劭非前手機淘寶前端負責人在極客時間開的一個專欄，每天分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入的專欄學習原文有的語音，如有侵權請聯系我，郵箱。 筆記說明 重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以...
閱讀 2984·2023-04-26 00:23
閱讀 3399·2021-09-13 10:28
閱讀 2178·2021-08-31 14:18
閱讀 2884·2019-08-30 15:54
閱讀 1938·2019-08-30 15:43
閱讀 1276·2019-08-29 16:56
閱讀 2799·2019-08-29 14:16
閱讀 2053·2019-08-28 17:51
