快速上手CSS

選擇器：是html中的元素，例如上述的元素是h1元素。

屬性：屬性和值是成對出現的，中間用冒號隔開。

舉例：引用菜鳥教程的例程。

1
doctype html
>
2<
html
>
3<
head
>
4<
meta 
charset
="utf-8"
>
5<
title
>菜鳥教程(runoob.com)
title
>
6<
style
>7p
812style
>
13head
>
1415
<
body
>
16<
p>hello world!
p>
17<
p>這個段落採用css樣式化。
p>
18body
>
19html
>

結果：

從以上**可以觀察到css樣式定義是放在style標籤內的，這樣所有使用p標籤的元素都會有以下的效果，但是如果我想控制某乙個p標籤而不是所有的p標籤應該怎麼辦呢？由此引入id和class選擇器。

如果你要在html元素中設定css樣式，你需要在元素中設定"id" 和 "class"選擇器。

id選擇器：id 選擇器可以為標有特定 id 的 html 元素指定特定的樣式；html元素以id屬性來設定id選擇器,css 中 id 選擇器以"#" 來定義；以下的樣式規則應用於元素屬性 id="para1"。

舉例：

1
doctype html
>
2<
html
>
3<
head
>
4<
meta 
charset
="utf-8"
>
5<
title
>菜鳥教程(runoob.com)
title
>
6<
style
>
7#para1812
style
>
13head
>
1415
<
body
>
16<
p id
="para1"
>hello world!
p>
17<
p>這個段落不受該樣式的影響。
p>
18body
>
19html
>

結果：

另一種實現控制特定元素的方法是使用class選擇器，與id選擇器不同的是class選擇器可以控制一組元素，因為id是唯一的，而class可以多個元素使用同乙個class形成一組。

class選擇器：class 選擇器用於描述一組元素的樣式，class 選擇器有別於id選擇器，class可以在多個元素中使用；class 選擇器在html中以class屬性表示, 在 css 中，類選擇器以乙個點"."號顯示；在以下的例子中，所有擁有 center 類的 html 元素均為居中。

舉例：

1
doctype html
>
2<
html
>
3<
head
>
4<
meta 
charset
="utf-8"
>
5<
title
>菜鳥教程(runoob.com)
title
>
6<
style
>
7.center811
style
>
12head
>
1314
<
body
>
15<
h1 class
="center"
>標題居中
h1>
16<
p class
="center"
>段落居中。
p>
17body
>
18html
>

結果：

當然我也可以指定特定元素使用，在下面的例子中便指定只有p標籤並且class是center的元素才會受到影響。

舉例：

doctype html
>
<
html
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>菜鳥教程(runoob.com)
title
>
<
style
>
p.center
style
>
head
>
<
body
>
<
h1 class
="center"
>這個標題不受影響
h1>
<
p class
="center"
>這個段落居中對齊。
p>
body
>
html
>

結果：

除此之外，還可以使用屬性和值選擇器：

css 屬性選擇器 | 菜鳥教程 (runoob.com)

前面提到過html頁面中通過style標籤控制css，其實css還提供了多種實現方式。

外部樣式表：

1
<
head
>
2<
link 
rel="stylesheet"
type
="text/css"
href
="mystyle.css"
>
3head
>

瀏覽器會從檔案 mystyle.css 中讀到樣式宣告，並根據它來格式文件。外部樣式表可以在任何文字編輯器中進行編輯。檔案不能包含任何的 html 標籤。樣式表應該以 .css 副檔名進行儲存。下面是乙個樣式表檔案的例子：

hr 2p 3

body

當單個文件需要特殊的樣式時，就應該使用內部樣式表。你可以使用標籤在文件頭部定義內部樣式表。

內部樣式表：

1
<
head
>
2<
style
>
3hr 4p 
5body 
6style
>
7head
>

內聯樣式**式混亂，表達不清晰慎用。

內聯樣式表：

p style

="color:sienna;margin-left:20px"

>這是乙個段落。

css偽類是用來新增一些選擇器的特殊效果。

偽類的語法：

selector:pseudo-class

css類也可以使用偽類：

selector.class:pseudo-class

2313

14這是乙個鏈結

15注意：a:hover 必須在 a:link 和 a:visited 之後，需要嚴格按順序才能看到效果。

16注意：a:active 必須在 a:hover 之後。

1718

偽元素的語法：

selector:pseudo-element

css類也可以使用偽元素：

selector.class:pseudo-element

2314

1516

你可以使用 "first-line" 偽元素向文字的首行設定特殊樣式。

1718

快速上手CSS

ibatis 快速上手

Pro C快速上手

Apache James快速上手

快速上手CSS

ibatis 快速上手

Pro C快速上手

Apache James快速上手

相關推薦