使用 CSS3 | 菜鳥教程 進行學習~
CSS 用於控制網頁的樣式和佈局。CSS3 是最新的 CSS 標準。
注：對CSS3已完全向後兼容，所以你就不必改變現有的設計。瀏覽器將永遠支持CSS2。
W3C的CSS3規範仍在開發。但是，許多新的CSS3屬性已在現代瀏覽器使用！
目錄
CSS3 模塊
CSS3被拆分爲"模塊"。舊規範已拆分成小塊，還增加了新的。
一些最重要CSS3模塊如下：
選擇器
盒模型
背景和邊框
文字特效
2D/3D轉換
動畫
多列布局
用戶界面
本文中，以下內容將爲CSS基礎知識，掌握後開始學習CSS3~
————————————————分割線————————————————
CSS概述
使用 CSS 我們可以大大提升網頁開發的工作效率！學會如何使用 CSS 同時控制多重網頁的樣式和佈局。
★CSS應用案例——在html的head中用style語句嵌入CSS——
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<style>
body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
</style>
</head>
<body>
<h1>CSS 實例!</h1>
<p>這是一個段落。</p>
</body>
</html>
什麼是 CSS?
CSS 指層疊樣式表 (Cascading Style Sheets)
樣式定義如何顯示 HTML 元素，通常存儲在樣式表中。
把樣式添加到 HTML 4.0 中，是爲了解決內容與表現分離的問題！
外部樣式表通常存儲在 CSS 文件中（外部的 .css 文件），多個樣式定義可層疊爲一個。我們只需要編輯一個簡單的 CSS 文檔就可以改變所有頁面的佈局和外觀。
CSS語法
1、應用舉例
<style>
body {background-color:yellow;}
h1 {font-size:36pt;}
h2 {color:blue;}
p {margin-left:50px;}
</style>
結果——
2、CSS規則總結
CSS語句的構成：兩個主要的部分構成：選擇器，以及一條或多條聲明！
選擇器通常是您需要改變樣式的 HTML 元素。
每條聲明由一個屬性（您希望設置的樣式屬性）和一個值組成。
注意：CSS聲明總是以分號(;)結束，聲明總以大括號({})括起來。
習慣：爲了讓CSS可讀性更強，你可以每行只描述一個屬性。
3、CSS註釋
跟老版本的c語言一模一樣！
/*這是個註釋*/
id選擇器
爲標有特定 id 的 HTML 元素指定特定的樣式。
打開查看實例
警告： ID屬性不要以數字開頭，否則在部分瀏覽器無法正常運作。
class選擇器
class 選擇器用於描述一組元素的樣式，class 選擇器有別於id選擇器，class可以在多個元素中使用。
class 選擇器在HTML中以class屬性表示, 在 CSS 中，類選擇器以一個點"."號顯示！
看完實例就都明白了——打開
CSS樣式表-格式化 HTML 文檔
插入樣式表的方法有三種:
①外部樣式表(External style sheet)
②內部樣式表(Internal style sheet)
③內聯樣式(Inline style)
注意：多重樣式的優先級是不同的！（下面會列舉）
1、外部樣式表
當樣式需要應用於很多頁面時，外部樣式表將是理想的選擇。你可以通過改變一個CSS文件來改變整個站點的外觀。只需要在每個頁面使用link 標籤鏈接到樣式表即可。
link標籤在文檔的頭部——
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
上述語句：瀏覽器會從文件 mystyle.css 中讀到樣式聲明，並根據它來格式文檔。
外部樣式表文件（.css）不能包含任何的 html 標籤！下面是一個樣式表文件的例子：
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}
提醒：不要在屬性值與單位之間留有空格。正確的寫法如：20px。
2、內部樣式表
當單個文檔需要特殊的樣式時，就應該使用內部樣式表。
可以使用style標籤在html文檔頭部定義內部樣式表，就像上面的“CSS語法應用舉例”一樣。
3、內聯樣式
由於要將表現和內容混雜在一起，內聯樣式會損失掉樣式表的許多優勢。請慎用這種方法，例如當樣式僅需要在一個元素上應用一次時（才使用此法）。
操作方法——在相關的標籤內使用樣式（style）屬性
style 屬性裏可以包含任何 CSS 屬性。
<p style="color:sienna;margin-left:20px">這是一個段落。</p>
（本例展示如何改變段落的顏色和左外邊距）
★ 多重樣式 及其 優先級
如果某些屬性在不同的樣式表中被同樣的選擇器定義，那麼屬性值將從更具體的樣式表中被繼承過來。 具體的細則看不懂，奇奇怪怪的…
一般情況下的優先級：
內聯樣式 > 內部樣式 > 外部樣式 > 瀏覽器默認樣式
<head>
<!-- 外部樣式 style.css -->
<link rel="stylesheet" type="text/css" href="style.css"/>
<!-- 設置：h3{color:blue;} -->
<style type="text/css"> /* 內部樣式 */
h3{color:green;}
</style>
</head>
<body>
<h3>測試！</h3>
</body>
警告：在上述代碼中，如果外部樣式放在內部樣式的後面，則外部樣式將覆蓋內部樣式。
CSS背景
背景屬性用於定義HTML元素的背景。
CSS 屬性定義背景效果:
background-color 背景顏色
background-image 背景圖像
background-repeat
background-attachment 附件
background-position 位置
1、背景顏色
body {background-color:#b0c4de;}
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
2、背景圖像
默認情況下，背景圖像進行平鋪重複顯示，以覆蓋整個元素實體。設置時應注意文本的可讀性。
body {background-image:url('paper.gif');}
默認情況下 background-image 屬性會在頁面的垂直方向平鋪。
加這句話可以變成水平方向：
background-repeat:repeat-x;
★如果你不想讓圖像平鋪，使用no-repeat：
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat; /*這句話讓背景圖片只顯示一次！*/
}
★然後你可以用position 屬性改變圖像在背景中的位置：
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top; /*改變背景圖片的位置！*/
}
3、簡化背景屬性
爲了簡化這些屬性的代碼，我們可以將這些屬性合併在同一個屬性中：
簡寫屬性爲 “background”——
body
{background:#ffffff url('img_tree.png') no-repeat right top;}
這句話 一！步！到！位！
當使用簡寫屬性時，屬性值的順序爲：
①background-color
②background-image
③background-repeat
④background-attachment
⑤background-position
以上屬性無需全部使用，你可以按照頁面的實際需要使用.
4、固定背景圖片
在head的style中的body{ }裏，添加這句話：
background-attachment:fixed;
會有這個鏈接裏的效果（背景圖不會隨着滾動頁面而滾遠！）
跳過的一些筆記
文本顏色
文本對齊方式 打開鏈接
文本修飾（刪除線、加橫線）
字符間距、行高
其他都是些表格、超鏈接之類的的美化…