CSS簡單筆記

一、加入樣式表到HTML文檔
1、內聯樣式
<p style="color: #F00">
2、內嵌樣式
<style type="text/css">p {color: #F00;}</style>
3、外部樣式
<link rel="stylesheet"type="text/ css" href="external.css"/>
4、樣式表適用的環境
所有流行的瀏覽器都支援最普通的media屬性。該屬性可以應用到<link>元素中來確定樣式表適用的環境。比如：
<link rel="stylesheet" media="handheld" type="text/ css" href="external.css"/>
說明樣式表適用於手持功能。media支援的屬性值有screen，print，all等

二、樣式表的文法
CSS的定義是由三個部分構成：選擇符（selector），屬性（properties）和屬性的取值（value）。
基本格式如下：
selector {property: value} ，多個屬性/值對必須由分號隔開。

選擇符可以是多種形式：
1、要定義樣式的HTML標記，例如BODY、P、TABLE……，你可以通過此方法定義它的屬性和值，屬性和值要用冒號隔開：
body {color: black}
2、類選擇符，以點號開頭，比如
.right {text-align: right}
應用類選擇符到標記
在標記的class屬性中填入類的名稱，注意不要點號。如：
<div class="dreamdu1">串連div標籤與dreamdu1樣式<div>
<div class="dreamdu12px dreamdublack dreamdubold">使用空格分開多個樣式串連div標籤<div>

3、ID選擇符

在HTML頁面中ID參數指定了某個單一元素，ID選擇符是用來對這個單一元素定義單獨的樣式，樣式只應用於ID參數指定的元素。例如：
<p id="intro">
這個段落向靠右對齊
</p>
定義ID選擇符要在ID名稱前加上一個“#”號。下面這個例子，ID屬性將匹配所有id="intro"的元素：
#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}

將ID和選取器結合
h2#title{

}
標識應用於ID屬性為title的h2標記

4、選擇符組

你可以把相同屬性和值的選擇符組合起來書寫，用逗號將選擇符分開，這樣可以減少樣式重複定義：
h1, h2, h3, h4, h5, h6 { color: green }

5、包含選擇符

可以單獨對某種元素內含項目關聯性定義的樣式表，元素1裡包含元素2，這種方式只對在元素1裡的元素2定義，對單獨的元素1或元素2無定義，
table a
{
font-size: 12px
}

三、樣式表層疊
樣式表層疊指可以將多個樣式表應用到同一個頁面元素，該元素展現所有應用的樣式，對於多個樣式表中重複定義的部分，高層樣式將覆蓋低層樣式。最高層的樣式是內聯樣式，其次是內嵌式樣式，最後是外部樣式。可以使用內聯或內嵌式樣式表覆蓋外部定義的樣式表。
對於外部定義的樣式表，按照加入的順序層次逐漸層高，最有加入的外部樣式表在外部樣式中具有最高的層次。
比如，依次加入如下樣式表：
<link rel="stylesheet"type="text/ css" href="first.css"/>
<link rel="stylesheet"type="text/ css" href="second.css"/>