CSS入門基礎

class選擇器

通用選擇器

css的建立

內部樣式表(internal style sheet)

內聯樣式(inline style)

css 規則由兩個主要的部分構成：選擇器，以及一條或多條宣告:

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

:

id選擇器作為唯一標識，用於一種特殊的格式（id選擇器只能被乙個元素引

用）

注意：雖然id可以給多個標籤定義個樣式，瀏覽器也允許這種錯誤但是，在寫的時候不能這樣寫。首先… 多個 id 定義，同一頁面當中會bai令到 dom 的判別出錯

另外絕對du不符合國際 w3c 組織的網頁標準

<
!doctype html>
"en"
>
"utf-8"
>
css入門<
/title>
#wordred
<
/style>
<
/head>
"wordred"
>
hello
world
<
/p>
"wordred"
>你好！<
/p>
"wordred"
>我很好<
/h1>
<
/body>
<
/html>

id作為唯一標識不能被多個標籤引用

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

<
!doctype html>
"utf-8"
>
class
<
/title>
.center
<
/style>
<
/head>
="center"
>標題居中<
/h1>
="center"
>段落居中。<
/p>
<
/body>
<
/html>

允許元素引用class

語法：
元素.(名字)

你也可以指定特定的html元素使用class。

在以下例項中, 所有的 p 元素使用 class=「center」讓該元素的文字居中:

**實現：

<
!doctype html>
"utf-8"
>
class
<
/title>
p.center
<
/style>
<
/head>
="center"
>這個標題不受影響<
/h1>
="center"
>這個段落居中對齊。<
/p>
<
/body>
<
/html>

通用選擇器是功能最強大的選擇器，它使用乙個（*）號指定，它的作用是匹配 html中所有標籤元素，

如下使用下面**使用html中任意標籤元素字型顏色全部設定為紅色字型20px：

*

內聯樣式）inline style > （內部樣式）internal style sheet >（外部樣式）external style sheet > 瀏覽器預設樣式

在head標籤定義

"stylesheet" type=
"text/css" href=
"red.css"
>
<
/head>

建立乙個.css結尾的檔案（我建立的是red.css)

在裡面寫上css樣式：

hr p body

**實現：

<
!doctype html>
"utf-8"
>
class
<
/title>
"stylesheet" href=
"red.css"
>
<
/head>
/h1>
這個段落居中對齊。<
/p>
<
/body>
<
/html>

利用style標籤在head 標籤內定義

hr p 
body 
<
/style>
<
/head>

利用style屬性在標籤內定義

"color:sienna;margin-left:20px"
>這是乙個段落。<
/p>

CSS入門基礎

CSS入門基礎

CSS基礎入門

CSS入門基礎

相關推薦