css和css3總結red {color:red;}green {color:green;}box_relative {

id 選擇器

id 選擇器可以為标有特定 id 的 HTML 元素指定特定的樣式。

id 選擇器以 “#” 來定義。

下面的兩個 id 選擇器，第一個可以定義元素的顔色為紅色，第二個定義元素的顔色為綠色：

下面的 HTML 代碼中，id 屬性為 red 的 p 元素顯示為紅色，而 id 屬性為 green 的 p 元素顯示為綠色。

p id=”red”>這個段落是紅色。/p

p id=”green”>這個段落是綠色。/p

在 CSS 中，類選擇器以一個點号顯示：

.center {text-align: center}

在上面的例子中，所有擁有 center 類的 HTML 元素均為居中。

在下面的 HTML 代碼中，h1 和 p 元素都有 center 類。這意味着兩者都将遵守 “.center” 選擇器中的規則。

h1 class=”center”

This heading will be center-aligned

/h1

p class=”center”

This paragraph will also be center-aligned.

/p

CSS 屬性選擇器

對帶有指定屬性的 HTML 元素設定樣式。

可以為擁有指定屬性的 HTML 元素設定樣式，而不僅限于 class 和 id 屬性。

屬性選擇器

下面的例子為帶有 title 屬性的所有元素設定樣式：

title

{

color:red;

}

1.CSS 文法

CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。

選擇器通常是您需要改變樣式的 HTML 元素。

每條聲明由一個屬性和一個值組成。

屬性（property）是您希望設定的樣式屬性（style attribute）。每個屬性有一個值。屬性和值被冒号分開。

selector {property: value}

h1 {color:red; font-size:14px;}

面這行代碼的作用是将 h1 元素内的文字顔色定義為紅色，同時将字型大小設定為 14 像素。

在這個例子中，h1 是選擇器，color 和 font-size 是屬性，red 和 14px 是值。

除了英文單詞 red，我們還可以使用十六進制的顔色值 #ff0000：

p { color: #ff0000; }

2.背景色

可以使用 background-color 屬性為元素設定背景色。這個屬性接受任何合法的顔色值。

這條規則把元素的背景設定為灰色：

p {background-color: gray;}

背景圖像

要把圖像放入背景，需要使用 background-image 屬性。background-image 屬性的預設值是 none，表示背景上沒有放置任何圖像。

如果需要設定一個背景圖像，必須為這個屬性設定一個 URL 值：

body {background-image: url(/i/eg_bg_04.gif);}

3.CSS 文本屬性可定義文本的外觀。

通過文本屬性，您可以改變文本的顔色、字元間距，對齊文本，裝飾文本，對文本進行縮進，等等

text-indent 還可以設定為負值。利用這種技術，可以實作很多有趣的效果，比如“懸挂縮進”，即第一行懸挂在元素中餘下部分的左邊：

p {text-indent: -5em;}

4.指定字型系列

使用 font-family 屬性 定義文本的字型系列。

使用通用字型系列

如果你希望文檔使用一種 sans-serif 字型，但是你并不關心是哪一種字型，以下就是一個合适的聲明：

body {font-family: sans-serif;}

字型大小

font-size 屬性設定文本的大小。

font 簡寫屬性。作用是把所有針對字型的屬性設定在一個聲明中。

font-family 設定字型系列。

font-size 設定字型的尺寸。

font-style 設定字型風格。

font-variant 以小型大寫字型或者正常字型顯示文本。

font-weight 設定字型的粗細。

5.設定連結的樣式

能夠設定連結樣式的 CSS 屬性有很多種（例如 color, font-family, background 等等）。

連結的特殊性在于能夠根據它們所處的狀态來設定它們的樣式。

連結的四種狀态：

執行個體

a:link {color:#FF0000;} /* 未被通路的連結 */

a:visited {color:#00FF00;} /* 已被通路的連結 */

a:hover {color:#FF00FF;} /* 滑鼠指針移動到連結上 */

a:active {color:#0000FF;} /* 正在被點選的連結 */

6.表格邊框

如需在 CSS 中設定表格邊框，請使用 border 屬性。

下面的例子為 table、th 以及 td 設定了藍色邊框：

table, th, td

border: 1px solid blue;

7.

CSS padding 屬性

CSS padding 屬性定義元素的内邊距。padding 屬性接受長度值或百分比值，但不允許使用負值。

例如，如果您希望所有 h1 元素的各邊都有 10 像素的内邊距，隻需要這樣：

h1 {padding: 10px;}

您還可以按照上、右、下、左的順序分别設定各邊的内邊距，各邊均可以使用不同的機關或百分比值：

h1 {padding: 10px 0.25em 2ex 20%;}

單邊内邊距屬性

也通過使用下面四個單獨的屬性，分别設定上、右、下、左内邊距：

h1 {

padding-top: 10px;

padding-right: 0.25em;

padding-bottom: 2ex;

padding-left: 20%;

8.邊框的樣式

的 border-style

p.aside {border-style: solid dotted dashed double;}

定義單邊樣式

如果您希望為元素框的某一個邊設定邊框樣式，而不是設定所有 4 個邊的邊框樣式，可以使用下面的單邊邊框樣式屬性：

您也可以通過下列屬性分别設定邊框各邊的寬度：

9.CSS margin 屬性

設定外邊距的最簡單的方法就是使用 margin 屬性。

margin 屬性接受任何長度機關，可以是像素、英寸、毫米或 em。

margin 可以設定為 auto。更常見的做法是為外邊距設定長度值。下面的聲明在 h1 元素的各個邊上設定了 1/4 英寸寬的空白：

h1 {margin : 0.25in;}

10.

CSS position 屬性

通過使用 position 屬性，我們可以選擇 4 種不同類型的定位，這會影響元素框生成的方式。

position 屬性值的含義：

static

元素框正常生成。塊級元素生成一個矩形框，作為文檔流的一部分，行内元素則會建立一個或多個行框，置于其父元素中。

relative

元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。

absolute

元素框從文檔流完全删除，并相對于其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關閉，就好像元素原來不存在一樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框。

fixed

元素框的表現類似于将 position 設定為 absolute，不過其包含塊是視窗本身。

CSS 相對定位

#box_relative {

position: relative;

left: 30px;

top: 20px;

CSS 絕對定位

position: absolute;

CSS 浮動

浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。

由于浮動框不在文檔的普通流中，是以文檔的普通流中的塊框表現得就像浮動框不存在一樣。

把圖像向右浮動：

img

float:right;

css3

調整背景圖檔的大小：

div

background:url(bg_flower.gif);

-moz-background-size:63px 100px; /* 老版本的 Firefox */

background-size:63px 100px;

background-repeat:no-repeat;

向 div 元素添加圓角：

border:2px solid;

border-radius:25px;

-moz-border-radius:25px; /* Old Firefox */

用粗體字型

您必須為粗體文本添加另一個包含描述符的 @font-face：

@font-face

font-family: myFirstFont;

src: url(‘Sansation_Bold.ttf’),

url(‘Sansation_Bold.eot’); /* IE9+ */

font-weight:bold;

以下内容省略3000字……