- 做者:陳大魚頭
- github: KRISACHAN
在上一篇【Hello CSS】
的序章CSS起源中介紹了CSS
的誕生緣由以及發展歷史,瞭解了CSS
的存在乎義。從正篇篇開始將會正式開始介紹CSS
這門語言的特色與功能。本篇則主要介紹CSS
的語法與CSS
是如何工做的。css
CSS
規則主要由兩部分組成:選擇器(selector)
與聲明(declarations)
。html
選擇器(selector)
是開發者但願改變樣式的HTML
元素。html5
聲明(declarations)
則是開發者制定的但願HTML
改變的元素規則,能夠是一條或多條。git
每條聲明(declarations)
由一個屬性(property)
和一個值(value)
組成。github
屬性(property)
是開發者但願設置的樣式屬性(style attribute)
。api
值(value)
爲屬性的具體內容。瀏覽器
屬性與值之間由冒號
隔開,聲明與聲明直接由分號
隔開。微信
CSS中的註釋以 /*
開始並以 */
結束。dom
/* selector {property: value} */
h1 {color:red; font-size:14px;}
複製代碼
上面這行代碼的做用是將 h1 元素內的文字顏色定義爲紅色,同時將字體大小設置爲 14 像素。ide
這是基本規則,具體規則請看CSS 基礎語法。
每一個HTML元素都有初始的樣式,可是也能夠通過開發者書寫而改變樣式規則。
HTML
的元素樣式修改有如下的書寫規則。
<head>
標籤內部)<!DOCTYPE html>
<html>
<head>
<style> h1 {color:red; font-size:14px;} </style>
</head>
<body>
</body>
</html>
複製代碼
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 style="color:red; font-size:14px;"></h1>
</body>
</html>
複製代碼
<!-- style.css -->
h1 {color:red; font-size:14px;}
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1></h1>
</body>
</html>
複製代碼
一個at-rule就是一個CSS語句,以
@
開頭,後接標識符
,最後以;
結束。
@charset
用於定義樣式表中使用的字符編碼。它必須寫在樣式表的最開頭且前面不可有別的字符。
/* @charset "<charset>"; */
@charset "UTF-8";
複製代碼
@import
用於導入外部CSS樣式表
文件。
/* @import url; */
/* @import url list-of-media-queries; */
@import 'custom.css';
@import url("fineprint.css") print;
複製代碼
@namespace
是用來定義使用在CSS樣式表
中的XML
命名空間的@規則。
/* @namespace <namespace-prefix>? [ <string> | <url> ]; */
@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);
複製代碼
@media
用於定義在一個或多個設備類型、具體特色和環境的媒體查詢來應用樣式。
/* @media */
@media screen and (min-width: 900px) {
h1 {
color:red;
font-size:14px;
}
}
複製代碼
@page
用於在打印文檔時修改某些CSS屬性。@page
規則只能修改margin
、orphans
、widow
和 page breaks of the document
,對其餘屬性的修改是無效的。
/* * @page <page-selector-list> { * <page-body> * } */
@page {
size: 10in 20in;
margin: 10% 20%;
}
複製代碼
@keyframs
經過定義動畫序列中的關鍵幀來控制CSS動畫
不一樣步驟的狀態。
/* @keyframes */
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
複製代碼
@supports
用來檢測規則組的規則是否生效。規則與@media
相似
/* * @supports <supports_condition> { * <specific rules> * } */
@supports (display: flex) {
div {
display: flex;
}
}
複製代碼
@viewport
用於設置視口(viewport)
的特性。
/* * @viewport { * <group-rule-body> * } */
@viewport {
min-width: 640px;
max-width: 800px;
}
@viewport {
zoom: 0.75;
min-zoom: 0.5;
max-zoom: 0.9;
}
@viewport {
orientation: landscape;
}
複製代碼
@counter-style
用於自定義counter
的樣式
/* * @counter-style <counter-style-name> { * <group-rule-body> * } */
@counter-style circled-alpha {
system: fixed;
symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
suffix: " ";
}
.items {
list-style: circled-alpha;
}
複製代碼
@font-face
用於給網頁指定文本字體。
/* * @font-face { * <group-rule-body> * } */
@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}
body { font-family: "Bitstream Vera Serif Bold", serif }
複製代碼
@document
若是知足條件組的條件,則規則生效(推延至 CSS Level 4 規範)
/* * @document name(guide) { * <group-rule-body> * } */
@document url(http://www.w3.org/),
url-prefix(http://www.w3.org/Style/),
domain(mozilla.org),
regexp("https:.*") {
/* 該條CSS規則會應用在下面的網頁: + URL爲"http://www.w3.org/"的頁面. + 任何URL以"http://www.w3.org/Style/"開頭的網頁 + 任何主機名爲"mozilla.org"或者主機名以".mozilla.org"結尾的網頁 + 任何URL以"https:"開頭的網頁 */
/* make the above-mentioned pages really ugly */
body {
color: purple;
background: yellow;
}
}
複製代碼
注:上面的@規則屬性並不是完整,還有少許相關的沒有列出,須要詳細列表的能夠翻閱MDN
在講CSS
的工做流程以前,首先來簡單看看頁面的渲染機制。
頁面渲染可分爲下面5個步驟:
HTML
來建立DOM tree
;CSS
來建立CSSOM tree;
DOM
跟CSSOM
來合併render tree;
render tree
來佈局;render tree
。以上即是頁面渲染的過程。
從上面的頁面渲染流程能夠知道瀏覽器在解析了HTML
跟CSS
以後便開始合併渲染,簡單來講就是繪製帶有樣式的HTML
規則。
CSS
的工做流程就是把CSS
規則定義到DOM tree
上。
HTML
與CSS
具體解析規則屬於編譯原理
的內容,在這裏就不做展開了。可是有在CSS
工做的過程當中有兩個詞值得注意的就是重排(reflow)跟重繪(repaint)。
render tree
的從新構建叫重排。也就是當頁面佈局或者DOM
元素的幾何屬性發生變化時,就會發生瀏覽器重排。如下5種狀況便會引起瀏覽器迴流:
DOM
元素的增刪;DOM
元素的位置、尺寸以及引發尺寸變化的內容改變;resize
事件發生時。render tree
中隻影響外觀而不影響風格的屬性改變就叫重繪。例如color
與background-color
的改變。注:後面的文章會仔細講解重排(reflow)跟重繪(repaint)以及相關的性能問題與優化。
【Hello CSS】
是以CSS
基礎概念爲主題的系列文章,旨在幫助你們更深入地瞭解而且提升CSS
在各位開發者心目中的地位。因爲魚頭我水平有限,文筆有限,若是各位在文章中發現有任何不合理,不正確的地方,還煩不吝指出,我會很是感謝的;若是經過文章有任何想法或疑問,也但願各位能積極留言,咱們互相探討;若是經過本系列文章有所收穫,這就讓魚頭我喜不自勝了!