CSS?簡介
什么是 CSS?
CSS 指層疊樣式表 (Cascading?Style?Sheets)
樣式定義如何顯示?HTML 元素
樣式通常存儲在樣式表中
把樣式添加到 HTML 4.0 中，是為了解決內容與表現分離的問題
外部樣式表可以極大提高工作效率
外部樣式表通常存儲在?CSS 文件中
多個樣式定義可層疊為一個
CSS?Id?和?Class
id 和 class 選擇器
如果你要在HTML元素中設置CSS樣式，你需要在元素中設置"id" 和 "class"選擇器。
id 選擇器
id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。
HTML元素以id屬性來設置id選擇器,CSS 中 id 選擇器以 "#" 來定義。
以下的樣式規則應用于元素屬性 id="para1":
#para1
{ text-align:center;
? ? color:red;}
class 選擇器
class 選擇器用于描述一組元素的樣式，class 選擇器有別于id選擇器，class可以在多個元素中使用。
class 選擇器在HTML中以class屬性表示, 在 CSS 中，類選擇器以一個點"."號顯示：
在以下的例子中，所有擁有 center 類的 HTML 元素均為居中。
.center {text-align:center;}
你也可以指定特定的HTML元素使用class。
在以下實例中, 所有的 p 元素使用 class="center" 讓該元素的文本居中:
p.center {text-align:center;}
如何插入樣式表
插入樣式表的方法有三種:
外部樣式表(External style sheet)
內部樣式表(Internal style sheet)
內聯樣式(Inline style)
外部樣式表
當樣式需要應用于很多頁面時，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，你可以通過改變一個文件來改變整個站點的外觀。每個頁面使用 <link> 標簽鏈接到樣式表。 <link> 標簽在（文檔的）頭部：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
注意：瀏覽器會從文件 mystyle.css 中讀到樣式聲明，并根據它來格式文檔。外部樣式表可以在任何文本編輯器中進行編輯。文件不能包含任何的 html 標簽。樣式表應該以 .css 擴展名進行保存。
內部樣式表
當單個文檔需要特殊的樣式時，就應該使用內部樣式表。你可以使用 <style> 標簽在文檔頭部定義內部樣式表，就像這樣:
<head>
????????<style>
????????????hr {color:sienna;}
????????????p {margin-left:20px;}
????????????body {background-image:url("images/back40.gif");}
????????</style>
</head>
內聯樣式
由于要將表現和內容混雜在一起，內聯樣式會損失掉樣式表的許多優勢。請慎用這種方法，例如當樣式僅需要在一個元素上應用一次時。要使用內聯樣式，你需要在相關的標簽內使用樣式（style）屬性。Style 屬性可以包含任何 CSS 屬性。本例展示如何改變段落的顏色和左外邊距：
<p style="color:sienna;margin-left:20px">這是一個段落。</p>
多重樣式
如果某些屬性在不同的樣式表中被同樣的選擇器定義，那么屬性值將從更具體的樣式表中被繼承過來。?
例如，外部樣式表擁有針對 h3 選擇器的三個屬性：
h3{ color:red;
? ? text-align:left;
? ? font-size:8pt;}
而內部樣式表擁有針對 h3 選擇器的兩個屬性：
h3{ text-align:right;
? ? font-size:20pt;}
假如擁有內部樣式表的這個頁面同時與外部樣式表鏈接，那么 h3 得到的樣式是：
color:red;
text-align:
right;font-size:20pt;
即顏色屬性將被繼承于外部樣式表，而文字排列（text-alignment）和字體尺寸（font-size）會被內部樣式表中的規則取代。
多重樣式優先級
樣式表允許以多種方式規定樣式信息。樣式可以規定在單個的 HTML 元素中，在 HTML 頁的頭元素中，或在一個外部的 CSS 文件中。甚至可以在同一個 HTML 文檔內部引用多個外部樣式表。
一般情況下，優先級如下：
內聯樣式）Inline style > （內部樣式）Internal style sheet >（外部樣式）External style sheet > 瀏覽器默認樣式
CSS?背景
CSS 背景屬性用于定義HTML元素的背景。
CSS 屬性定義背景效果:
background-color
background-image
background-repeat
background-attachment
background-position
背景顏色
background-color 屬性定義了元素的背景顏色.
body {background-color:#b0c4de;}
頁面的背景顏色使用在body的選擇器中:
CSS中，顏色值通常以以下方式定義:
十六進制 - 如："#ff0000"
RGB - 如："rgb(255,0,0)"
顏色名稱 - 如："red"
背景圖像
background-image 屬性描述了元素的背景圖像.
默認情況下，背景圖像進行平鋪重復顯示，以覆蓋整個元素實體.
body {background-image:url('paper.gif');}
背景圖像 - 水平或垂直平鋪
默認情況下 background-image 屬性會在頁面的水平或者垂直方向平鋪。
body
{
background-image:url('gradient2.png');
}
如果圖像只在水平方向平鋪 (repeat-x), 頁面背景會更好些:
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
背景圖像- 設置定位與不平鋪
?讓背景圖像不影響文本的排版，如果你不想讓圖像平鋪，你可以使用 background-repeat 屬性:
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
背景- 簡寫屬性
在以上實例中我們可以看到頁面的背景顏色通過了很多的屬性來控制。為了簡化這些屬性的代碼，我們可以將這些屬性合并在同一個屬性中，背景顏色的簡寫屬性為 "background":
body {background:#ffffff url('img_tree.png') no-repeat right top;}
當使用簡寫屬性時，屬性值的順序為：:
background-color
background-image
background-repeat
background-attachment
background-position
CSS?文本格式
文本顏色
顏色屬性被用來設置文字的顏色。顏色是通過CSS最經常的指定：
十六進制值 - 如:?＃FF0000
一個RGB值 - 如:?RGB(255,0,0)
顏色的名稱 - 如:?red
body {
color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
文本的對齊方式
文本排列屬性是用來設置文本的水平對齊方式。文本可居中或對齊到左或右,兩端對齊.
當text-align設置為"justify"，每一行被展開為寬度相等，左，右外邊距是對齊（如雜志和報紙）
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
文本修飾
text-decoration 屬性用來設置或刪除文本的裝飾。從設計的角度看 text-decoration屬性主要是用來刪除鏈接的下劃線：
a {text-decoration:none;}
h1 {text-decoration:overline;}h2 {text-decoration:line-through;}h3 {text-decoration:underline;}
文本轉換
文本轉換屬性是用來指定在一個文本中的大寫和小寫字母。可用于所有字句變成大寫或小寫字母，或每個單詞的首字母大寫。
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
文本縮進
文本縮進屬性是用來指定文本的第一行的縮進。
p {text-indent:50px;}
CSS?字體
CSS字型
在CSS中，有兩種類型的字體系列名稱：
通用字體系列?- 擁有相似外觀的字體系統組合（如 "Serif" 或 "Monospace"）
特定字體系列?- 一個特定的字體系列（如 "Times" 或 "Courier"）
字體系列
font-family 屬性設置文本的字體系列。
font-family 屬性應該設置幾個字體名稱作為一種"后備"機制，如果瀏覽器不支持第一種字體，他將嘗試下一種字體。
注意: 如果字體系列的名稱超過一個字，它必須用引號，如Font Family："宋體"。
多個字體系列是用一個逗號分隔指明：
p{font-family:"Times New Roman", Times, serif;}
字體樣式
主要是用于指定斜體文字的字體樣式屬性。
這個屬性有三個值：
正常 - 正常顯示文本
斜體 - 以斜體字顯示的文字
傾斜的文字 - 文字向一邊傾斜（和斜體非常類似，但不太支持）
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
字體大小
font-size 屬性設置文本的大小。
能否管理文字的大小，在網頁設計中是非常重要的。但是，你不能通過調整字體大小使段落看上去像標題，或者使標題看上去像段落。
請務必使用正確的HTML標簽，就<h1> - <h6>表示標題和<p>表示段落：
字體大小的值可以是絕對或相對的大小。
絕對大小：
????????設置一個指定大小的文本
????????不允許用戶在所有瀏覽器中改變文本大小
????????確定了輸出的物理尺寸時絕對大小很有用
相對大小：
????????相對于周圍的元素來設置大小
????????允許用戶在瀏覽器中改變文字大小
?如果你不指定一個字體的大小，默認大小和普通文本段落一樣，是16像素（16px=1em）。
設置字體大小像素
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
用em來設置字體大小
為了避免Internet Explorer 中無法調整文本的問題，許多開發者使用 em 單位代替像素。
em的尺寸單位由W3C建議。
1em和當前字體大小相等。在瀏覽器中默認的文字大小是16px。
因此，1em的默認大小是16px。可以通過下面這個公式將像素轉換為em：px/16=em
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
使用百分比和EM組合
在所有瀏覽器的解決方案中，設置 <body>元素的默認字體大小的是百分比：
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
