CSS（層疊樣式表）作用：規(guī)定HTML文檔的呈現(xiàn)形式（外觀和格式編排）。
CSS 是在HTML 4開(kāi)始使用的,是為了更好的渲染HTML元素而引入的脱盲。
添加CSS的三種方式
CSS 可以通過(guò)以下方式添加到HTML中:
- 內(nèi)聯(lián)樣式- 在HTML元素中使用"style"屬性
- 內(nèi)部樣式表 -在HTML文檔頭部 <head> 區(qū)域使用<style>元素 來(lái)包含CSS
- 外部引用 - 使用外部 CSS文件
一乾蛤、內(nèi)聯(lián)樣式
<!--內(nèi)聯(lián)樣式每界，嵌入在起始標(biāo)簽中-->
<p style="color: blue;margin-left: 20px;">This is a paragraph.</p>
<!--背景顏色-->
<body style="background-color: yellow">
<h2 style="background-color: red">這是一個(gè)很長(zhǎng)的標(biāo)題</h2>
<p style="background-color: green">這是一個(gè)段落</p>
</body>
<!--字體、字體顏色家卖、字體大小-->
<h1 style="font-family: verdana">這是一個(gè)標(biāo)題</h1>
<p style="font-family: arial;color: red;font-size: 20px;">這是一個(gè)段落</p>
<!--文本對(duì)齊方式-->
<h1 style="text-align: center;">居中對(duì)齊的標(biāo)題</h1>
二眨层、內(nèi)部樣式表
當(dāng)單個(gè)文件需要特別樣式時(shí)，就可以使用內(nèi)部樣式表上荡。你可以在<head> 部分通過(guò) <style>標(biāo)簽定義內(nèi)部樣式表:
<head>
<style type="text/css">
body {background-color: :yellow;}
p {color:red; font-family:cursive; font-size:20pt; }
</style>
</head>
三趴樱、外部樣式表
當(dāng)樣式需要被應(yīng)用到很多頁(yè)面的時(shí)候，外部樣式表將是理想的選擇榛臼。使用外部樣式表伊佃，你就可以通過(guò)更改一個(gè)文件來(lái)改變整個(gè)站點(diǎn)的外觀。
<!--當(dāng)前文件夾路徑-->
<link rel="stylesheet" type="text/css" href="mystyle.css">
<!--鏈接到“父”文件夾 ../../-->
<link rel="stylesheet" type="text/css" href="../mystyle.css">
<!--鏈接到子目錄文件夾-->
<link rel="stylesheet" type="text/css" href="Resource/mystyle.css">
使用外部樣式表的步驟：
1??第一步：編寫(xiě)CSS文件
span.css 文件：
樣式表沛善，設(shè)計(jì)好選擇器航揉，{…}內(nèi)寫(xiě)樣式聲明。
a {
background-color:grey;
color: white;
}
span {
border:thin black solid;
padding: 10px;
}
combined.css 文件：
- 從其他樣式表中導(dǎo)入樣式：在樣式表頂端使用
@import "styles.css";語(yǔ)句導(dǎo)入其他樣式表金刁。- 聲明樣式表的字符編碼帅涂；
@charset "UTF-8";
- 聲明樣式表的字符編碼帅涂；
@charset "UTF-8";
@import "styles.css";
span {
border:medium black dashed;
padding: 5px;
}
HTML5_Test.html 文件：
2??第二步：使用link元素導(dǎo)入外部樣式表。
<!DOCTYPE html>
<html>
<head>
<title>用全局屬性style定義樣式</title>
<!--rel: 說(shuō)明文檔與所關(guān)聯(lián)資源的關(guān)系類(lèi)型-->
<link rel="stylesheet" type="text/css" href="combined.css">
</head>
<body>
<a >Visti the Apress site </a>
<p>I Like <span>apples</span> and oranges.</p>
<a >Visit the w3c website</a>
</body>
</html>
rel 屬性值最全面的介紹參考：https://www.iana.org/assignments/link-relations/link-relations.xml
樣式的層疊和繼承
瀏覽器樣式（用戶代理樣式）
元素尚未設(shè)置樣式時(shí)瀏覽器應(yīng)用在它身上的默認(rèn)樣式：
類(lèi)似瀏覽器默認(rèn)的樣式：
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style type="text/css">
a {
color: blue;
text-decoration: underline;
}
</style>
</head>
<body>
<a >Visti the Apress site </a>
<p>I Like <span>apples</span> and oranges.</p>
<a >Visit the w3c website</a>
</body>
</html>
用戶樣式
瀏覽器允許用戶自定義自己的樣式表尤蛮。
Chrome 瀏覽器自定義樣式表位置：Default\User StyleSheets\Custom.css
樣式層疊順序
瀏覽器要顯示元素時(shí)求索一個(gè)CSS屬性值的次序：
- 元素內(nèi)嵌樣式（用元素的全局屬性style定義的樣式）媳友；
- 文檔內(nèi)嵌樣式（定義在style元素中的樣式）；
- 外部樣式（用link元素導(dǎo)入的樣式）产捞；
- 用戶樣式（用戶定義的樣式）醇锚；
- 瀏覽器樣式（瀏覽器應(yīng)用的默認(rèn)樣式）；
用重要樣式調(diào)整層疊次序
在樣式聲明后附上!important即可將對(duì)應(yīng)的屬性值標(biāo)記為重要坯临。
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style type="text/css">
a {
color: black !important;
text-decoration: underline;
}
</style>
</head>
<body>
<a >Visti the Apress site </a>
<p>I Like <span>apples</span> and oranges.</p>
<a >Visit the w3c website</a>
</body>
</html>
根據(jù)具體程度和定義次序解決同級(jí)樣式?jīng)_突
當(dāng)樣式的層次相等時(shí)焊唬，瀏覽器需要評(píng)估樣式的具體程度來(lái)判斷到底使用哪一個(gè)樣式，樣式的具體程度通過(guò)統(tǒng)計(jì)三類(lèi)特征得出：
- 樣式的選擇器中id值的數(shù)目看靠；
- 選擇器中類(lèi)和偽類(lèi)的數(shù)目赶促；
- 選擇器中元素和偽元素的數(shù)目；
如果樣式的具體程度完全相等挟炬，那么瀏覽器還會(huì)根據(jù)樣式的先后位置次序選擇使用樣式鸥滨。規(guī)則是后來(lái)者居上嗦哆。
示例：
| 選擇器 | 注釋 | 具體程度結(jié)果 |
|---|---|---|
| h1 | 只有一個(gè)元素 | 001 |
| h1.bule | 有一個(gè)元素，一個(gè)類(lèi) | 011 |
| #elixirs h1 | 一個(gè)id婿滓，一個(gè)元素 | 101 |
| p img | 兩個(gè)元素 | 002 |
繼承
如果瀏覽器在直接相關(guān)的樣式中找不到某個(gè)屬性的值老速，就會(huì)使用繼承機(jī)制。使用父元素的樣式屬性值凸主。
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style type="text/css">
p {
color:white;
background:grey;
border:medium solid black;
}
</style>
</head>
<body>
<a >Visti the Apress site </a>
<p>I Like <span>apples</span> and oranges.</p>
<a >Visit the w3c website</a>
</body>
</html>
注意到：以上文檔并沒(méi)有設(shè)置 span 元素的color屬性值烁峭，但是它從父元素p繼承了color值。
??并非所有的CSS屬性均可繼承：
與元素外觀（文字顏色秕铛、字體等）相關(guān)的樣式會(huì)被繼承；
與元素在頁(yè)面上的布局相關(guān)的樣式不會(huì)被繼承缩挑；
-
在樣式中使用
inherit可以強(qiáng)行實(shí)施繼承但两。<!DOCTYPE html> <html> <head> <title>Example</title> <style type="text/css"> p { color: white; background: grey; border: medium solid black; } span { border: inherit; } </style> </head> <body> <a >Visti the Apress site </a> <p>I Like <span>apples</span> and oranges.</p> <a >Visit the w3c website</a> </body> </html>?
瀏覽器特定廠商前綴
| 瀏覽器 | 廠商前綴 |
|---|---|
| Chrome、Safari | -webkit- |
| Opera | -o- |
| Firefox | -moz- |
| Internet Explorer | -ms- |
CSS屬性
選擇器屬性
基本選擇器和組合選擇器
/* 元素選擇器 */
p {
}
/* 類(lèi)選擇器 */
.MyClass {
}
div.MyClass {
}
/* ID 選擇器*/
#idName {
}
/* 屬性選擇器:[屬性=值] */
[href] {
}
/* 復(fù)合選擇器,并集:<選擇器>, <選擇器>, <選擇器> */
h1, h2 {
}
/* 后代選擇器：<選擇器> <選擇器> */
p span {
/* 匹配p元素的后代span元素供置，未必是直接子元素 */
}
/* 子元素選擇器：A > B */
body > * span, tr > th {
/* *號(hào)代表任意元素谨湘，body的任意子元素中的span元素 */
}
/* 相鄰兄弟選擇器：A + B */
p + a {
/* 選擇緊跟在某元素之后的元素 */
}
/*普通兄弟選擇器：A ~ B */
p ~ a {
/* 選擇某元素之后的元素，不僅限于緊跟的兄弟元素*/
}
偽選擇器
偽元素
參考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference
偽類(lèi)
參考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference
邊框和背景屬性
border 屬性
設(shè)置邊框的簡(jiǎn)寫(xiě)屬性芥丧。border可以用于設(shè)置一個(gè)或多個(gè)以下屬性的值： border-width, border-style, border-color紧阔。
參考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/border
border-width: 1px; /* <長(zhǎng)度值>|<百分?jǐn)?shù)>|thin|medium|thick */
border-style: dashed;
border-color: black;
/*簡(jiǎn)寫(xiě)屬性*/
/*border: [border-width ||border-style ||border-color |inherit] ;*/
border: 1px dashed black;
border-style 屬性
border-style 屬性描述了邊框的樣式。
參考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-style
/* border-style 示例 */
.b1 {border-style:none;}
.b2 {border-style:hidden;}
.b3 {border-style:dotted;} /*圓點(diǎn)*/
.b4 {border-style:dashed;} /*短的方形虛線*/
.b5 {border-style:solid;} /*實(shí)線*/
.b6 {border-style:double;} /*雙實(shí)線*/
.b7 {border-style:groove;} /*雕刻效果邊框*/
.b8 {border-style:ridge;} /*浮雕效果邊框*/
.b9 {border-style:inset;} /*陷入效果邊框*/
.b10 {border-style:outset;} /*突出效果邊框*/
outline 屬性
outline 屬性用來(lái)設(shè)置輪廓续担。
參考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/outline
- 輪廓不占據(jù)空間擅耽，它們被描繪于內(nèi)容之上。因此應(yīng)用輪廓不需要調(diào)整頁(yè)面布局物遇。
outline-width: 5px;
outline-style: solid;
outline-color: darkturquoise; /* 深藍(lán)色 */
/* 簡(jiǎn)寫(xiě)方式：寬度 | 樣式 | 顏色 */
outline: 5px solid darkturquoise;
盒模型屬性
CSS盒模型
- margin 是元素之間的空間乖仇。
- padding 是內(nèi)容和邊框之間的空間。
- border 邊框包圍著元素和內(nèi)邊距询兴，能把元素和周?chē)膬?nèi)容隔離開(kāi)來(lái)乃沙。
padding 屬性
padding 屬性可以設(shè)置元素的內(nèi)邊距。
padding 值的書(shū)寫(xiě)順序是：上右下左诗舰，即時(shí)鐘的順時(shí)針?lè)较颉?/p>
/*分別設(shè)置各個(gè)內(nèi)邊距*/
padding-top: 20px;
padding-right: 25px;
padding-bottom: 20px;
padding-left: 20px;
/* 應(yīng)用于四個(gè)邊 */
padding: 1em;
/* 垂直方向| 水平方向*/
padding: 5% 10%;
/* 頂部| 水平方向| 底部*/
padding: 1em 2em 2em;
/* 頂部| 右邊| 底部| 左邊*/
padding: 2px 1em 0 1em;
padding: inherit;
margin 屬性
參考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin
margin屬性為給定元素設(shè)置所有四個(gè)（上下左右）方向的外邊距屬性警儒。這是四個(gè)外邊距屬性設(shè)置的簡(jiǎn)寫(xiě)。四個(gè)外邊距屬性設(shè)置分別是： margin-top眶根， margin-right蜀铲， margin-bottom 和 margin-left 。指定的外邊距允許為負(fù)數(shù)汛闸。
/* 分別設(shè)置各個(gè)方向的外邊距 */
margin-top: 20px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
margin: 5%; /* 所有的邊都是 5% 的邊距 */
margin: 10px; /* 所有的邊都是 10像素 的邊距 */
margin: 1.6em 20px; /* 上和下邊是 1.6字距, 左和右是 20像素 邊距 */
margin: 10px 3% 1em; /* 上邊 10像素, 左和右 3%, 下邊 1字距 邊距 */
margin: 10px 3px 30px 5px; /* 上邊 10像素, 右邊 3像素, bottom 30px, left 5px margin */
margin: 1em auto; /* 上和下邊 1字距 邊距, 該盒子是水平居中的 */
margin: auto; /* 該盒子是水平居中的, 上下邊距為0 */
overflow 屬性
**overflow **屬性指定當(dāng)內(nèi)容溢出其塊級(jí)容器時(shí),是否剪輯內(nèi)容蝙茶，顯示滾動(dòng)條或顯示溢出的內(nèi)容。
參考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow
/* 單獨(dú)設(shè)置水平方向和垂直方向上的溢出值 */
overflow-x: auto;
overflow-y: auto;
/* 默認(rèn)值诸老。內(nèi)容不會(huì)被修剪隆夯，會(huì)呈現(xiàn)在元素框之外 */
overflow: visible;
/* 內(nèi)容會(huì)被修剪钳恕，并且其余內(nèi)容不可見(jiàn) */
overflow: hidden;
/* 內(nèi)容會(huì)被修剪，瀏覽器會(huì)顯示滾動(dòng)條以便查看其余內(nèi)容 */
overflow: scroll;
/* 由瀏覽器定奪蹄衷，如果內(nèi)容被修剪忧额，就會(huì)顯示滾動(dòng)條 */
overflow: auto;
/* 規(guī)定從父元素繼承overflow屬性的值 */
overflow: inherit;
float 屬性
參考：https://developer.mozilla.org/zh-CN/docs/CSS/float
float CSS屬性指定一個(gè)元素應(yīng)沿其容器的左側(cè)或右側(cè)放置，允許文本和內(nèi)聯(lián)元素環(huán)繞它愧口。該元素從網(wǎng)頁(yè)的正常流動(dòng)中移除睦番，盡管仍然保持部分的流動(dòng)性（與絕對(duì)定位相反）。
/* Keyword values */
float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;
/* Global values */
float: inherit;
float: initial;
float: unset;
clear 屬性
clear CSS 屬性指定一個(gè)元素是否可以在它之前的浮動(dòng)元素旁邊耍属，或者必須向下移動(dòng)(清除浮動(dòng)) 在它的下面托嚣。clear 屬性適用于浮動(dòng)和非浮動(dòng)元素。
clear: none; /* 元素不會(huì)向下移動(dòng)清除之前的浮動(dòng)厚骗。 */
clear: left; /* 元素被向下移動(dòng)用于清除之前的左浮動(dòng)示启。 */
clear: right; /* 元素被向下移動(dòng)用于清除之前的右浮動(dòng)。 */
clear: both; /* 元素被向下移動(dòng)用于清除之前的左右浮動(dòng)领舰。 */
clear: inline-start; /* inline-start是一個(gè)關(guān)鍵字夫嗓，表示該元素向下移動(dòng)以清除其包含塊的起始側(cè)上的浮動(dòng)。即在某個(gè)區(qū)域的左側(cè)浮動(dòng)或右側(cè)浮動(dòng)冲秽。 */
clear: inline-end; /* inline-end是一個(gè)關(guān)鍵字舍咖，表示該元素向下移動(dòng)以清除其包含塊的末端的浮點(diǎn)，即在某個(gè)區(qū)域的右側(cè)浮動(dòng)或左側(cè)浮動(dòng)锉桑。 */
clear: inherit; /* */
布局屬性
彈性盒布局
使用彈性盒布局可以創(chuàng)建對(duì)瀏覽器窗口調(diào)整響應(yīng)良好的流動(dòng)界面排霉。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman" />
<meta name="description" content="A simple example" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style>
p {
width: 150px;
max-width: 250px;
border: thin solid black;
background-color: lightgrey;
margin: 2px;
}
#container {
/* 通過(guò) display 屬性創(chuàng)建彈性盒。將該屬性應(yīng)用到彈性盒容器 */
display: -webkit-box;
-webkit-box-direction: reverse;
/* 指定瀏覽器如何處理多余的垂直空間：start|end|center|strech */
-webkit-box-align: start;
/* box-pack屬性表示在所有的可伸縮元素均達(dá)到最大尺寸時(shí)民轴，多余的空間如何處理 */
/* start|end|center|justify */
-webkit-box-pack: justify; /* 均勻分配 */
}
#first {
/* 指定元素的可伸縮性郑诺，應(yīng)用于彈性盒容器內(nèi)的元素。告訴瀏覽器當(dāng)容器大小改變時(shí)哪些元素的尺寸是彈性的 */
/* 值為3：瀏覽器為其分配的多余空間是為 id=second 元素的三倍 */
-webkit-box-flex: 3;
}
#second {
-webkit-box-flex: 1;
}
</style>
</head>
<body>
<div id="container">
<p id="first">
There are lots of different kinds of fruit - there are over 500 varieties of banana alone. By the time we add the countless types of apples, oranges, and other well-known fruit, we are faced with thousands of choices.
</p>
<p id="second">
One of the most interesting aspects of fruit is the variety available in each country. I live near London, in an area which is known for its apples.
</p>
<p id="third">
When travelling in Asia, I was struck by how many different kinds of banana were available - many of which had unique flavours and which were only avaiable within a small region.
</p>
</div>
</body>
</html>
文本屬性
font-family 屬性
font-family 字體系列參考：https://developer.mozilla.org/en-US/docs/Web/CSS/font-family
用CSS定義字體系列：
body {
font-family: Verdana, Geneva, Arial, "Goudy Bookletter 1911", sans-serif;
}
/*
* font-family定義工作的原理：
* 瀏覽器會(huì)按順序查找計(jì)算機(jī)種可用的具體字體：Verdana, Geneva, Arial, "Goudy Bookletter 1911",
* 如果以上具體的字體都沒(méi)有杉武，就使用瀏覽器默認(rèn)的某個(gè) sans-serif 系列字體辙诞。
*/
使用 @font-face 設(shè)置Web字體
谷歌字體庫(kù)：Google Fonts
<link rel="stylesheet">
<style>
@font-face {
font-family: 'Open Sans Condensed', sans-serif;
font-style: normal;
font-weight: normal;
/* src: url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');*/
}
p {
font-family: 'Open Sans Condensed', sans-serif;
}
</style>
font-style 屬性
| font-style值 | 描述 |
|---|---|
| normal | 選擇 font-family 的常規(guī)字體。 |
| italic | 選擇斜體轻抱，如果當(dāng)前字體沒(méi)有可用的斜體版本飞涂，會(huì)選用傾斜體（oblique ）替代。 |
| oblique | 選擇傾斜體祈搜，如果當(dāng)前字體沒(méi)有可用的傾斜體版本较店，會(huì)選用斜體（ italic ）替代。 |
-
italic文本向右傾斜而且襯線有彎曲容燕。 -
oblique梁呈，只是把普通字母傾斜顯示。
font-size 屬性
font-size 屬性指定字體的大小蘸秘。
/* <absolute-size>官卡，絕對(duì)大小值 */
/* 每種尺寸比前一種大20%*/
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium; /*初始值*/
font-size: large;
font-size: x-large;
font-size: xx-large;
/* <relative-size>蝗茁，相對(duì)大小值 */
font-size: larger;
font-size: smaller;
/* <length>，長(zhǎng)度值 */
font-size: 12px;
font-size: 0.8em; /*em = 希望得到的像素大小 / 父元素字體像素大小*/
/* <percentage>寻咒，百分比值 */
font-size: 80%;
font-size: inherit;
使用技巧：
- 選擇一種關(guān)鍵字（推薦用small或medium）定義body字體大小哮翘，也就是網(wǎng)頁(yè)的默認(rèn)字體大小。
- 用em或百分?jǐn)?shù)把別的元素的字體大小指定為相對(duì)于body字體大小的字體尺寸毛秘。
一個(gè)流行的技巧是設(shè)置body元素的字體大小為62.5% (即默認(rèn)大小16px的62.5%)饭寺，等于10px。現(xiàn)在你可以通過(guò)計(jì)算基準(zhǔn)大小10px的倍數(shù)叫挟，在任何元素上方便的使用em單位艰匙。這樣有6px = 0.6em, 8px = 0.8em, 12px = 1.2em, 14px = 1.4em, 16px = 1.6em。
font-weight 屬性
設(shè)置字體的粗細(xì)
font 屬性
/* style | variant | weight | size/line-height | family */
font: italic small-caps bolder 16px/3 cursive;
text-decoration屬性
參考文檔：https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration
添加文本排版樣式（下劃線抹恳、頂劃線旬薯、刪除線或者閃爍）。
text-decoration屬性是一種簡(jiǎn)寫(xiě)屬性适秩，并且可以使用普通屬性三個(gè)值中的任何一個(gè)。普通屬性如下：text-decoration-line硕舆，text-decoration-color和text-decoration-style
語(yǔ)法形式：<'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>
- Safari 使用普通屬性或者簡(jiǎn)寫(xiě)語(yǔ)法需要添加
-webkit-前綴秽荞。 - Firefox 瀏覽器需要添加
moz前綴。 - IE瀏覽器不支持該屬性抚官。
過(guò)度扬跋、動(dòng)畫(huà)和變換類(lèi)型
其他屬性
color 屬性
- 使用顏色名凌节；
- 十進(jìn)制钦听、十六進(jìn)制Color Hex Color Codes；
CSS顏色函數(shù)：
opacity 屬性
opacity 屬性表示讓整個(gè)元素和文本內(nèi)容透明倍奢。取值范圍是0～1朴上。
CSS 中的長(zhǎng)度
絕對(duì)長(zhǎng)度
CSS支持五種絕對(duì)長(zhǎng)度：
| 單位標(biāo)識(shí)符 | 說(shuō)明 |
|---|---|
| in | 英寸 |
| cm | 厘米 |
| mm | 毫米 |
| pt | 磅（1磅等于1/72英寸） |
| pc | pica（1pica等于12磅） |
<style type="text/css">
p {
color: white;
background: grey;
width: 5cm;
font-size: 20pt;
}
</style>
相對(duì)長(zhǎng)度
主流瀏覽器支持的一些CSS相對(duì)單位：
| 單位標(biāo)識(shí)符 | 說(shuō)明 |
|---|---|
| em | 與元素字號(hào)掛鉤 |
| ex | 與元素字體的“x高度”（字體基線到中線之間的距離）掛鉤 |
| rem | 與根元素的字號(hào)掛鉤 |
| px | CSS像素（假定顯示設(shè)備的分辨率為96dpi） |
| % | 另一屬性的值的百分比 |
px在CSS中原本是一個(gè)相對(duì)單位，但在實(shí)際使用中卻變成了絕對(duì)單位卒煞。
使用相對(duì)單位：
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
p {
background: grey;
color:white;
font-size: 15pt;
height: 2em;
}
</style>
</head>
<body>
<a >Visit the Apress website</a>
<p>I like <span>apples</span> and oranges.</p>
<p style="font-size:12pt">I also like mangos and cherries.</p>
<a class="myclass1 myclass2" >Visit the W3C website</a>
</body>
</html>
height值為 2em痪宰，表示高度是字號(hào)的兩倍。
使用從另一個(gè)相對(duì)單位推算出來(lái)的相對(duì)單位：
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
html {
font-size: 0.2in;
}
p {
background: grey;
color:white;
font-size: 2rem;
height: 2em;
}
</style>
</head>
<body>
<a >Visit the Apress website</a>
<p>I like <span>apples</span> and oranges.</p>
<p style="font-size:12pt">I also like mangos and cherries.</p>
<a class="myclass1 myclass2" >Visit the W3C website</a>
</body>
</html>
font-size: 2rem 表示使用該值的所有元素的字號(hào)是根元素的兩倍畔裕。
百分比單位
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
p {
background: grey;
color:white;
font-size: 200%;
width: 50%;
}
</style>
</head>
<body>
<a >Visit the Apress website</a>
<p>I like <span>apples</span> and oranges.</p>
<a class="myclass1 myclass2" >Visit the W3C website</a>
</body>
</html>
使用CSS角度
| 單位標(biāo)識(shí)符 | 說(shuō)明 |
|---|---|
| deg | 度（取值范圍：0deg~360deg） |
| grad | 百分度（取值范圍：0grad~400grad） |
| rad | 弧度（取值范圍：0rad~6.28rad） |
| turn | 圓周（1turn等于360deg） |
使用CSS時(shí)間
| 單位標(biāo)識(shí)符 | 說(shuō)明 |
|---|---|
| s | 秒 |
| ms | 毫秒（1s = 1000ms） |
測(cè)試CSS特性的支持情況
http://caniuse.com, 可以查詢各款瀏覽器的各種版本對(duì)HTML和CSS3的支持情況衣撬。
-
Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.
CSS工具
- CSS格式校驗(yàn)器：W3C CSS Validation Service
- 用 SelectorGadget 生成選擇器：http://selectorgadget.com
- 用LESS改進(jìn)CSS：http://lesscss.org
- 使用CSS框架：Blueprint | GitHub 源碼
- CSS模糊效果：Blurred Background CSS
