CSS 語法


CSS 語法規則由兩個主要的部分構成：選擇器，以及一條或多條聲明（聲明群組）。 選擇器通常是您需要改變樣式的 HTML 元素。每個聲明由一個屬性和一個值組成，屬性（property）是您希望設定的樣式屬性（style attribute）；每個屬性有一個，屬性和值被冒號分開。 CSS宣告總是以分號(;)結束，宣告群組以大括號({})括起來。

實例示範

實例

<html>
<head>
<style>
body {background-color:yellow;}
h1   {font-size:36pt;}
h2   {color:blue;}
p    {margin-left:50px;}
</style>
</head>

<body>

<h1>This header is 36 pt</h1>
<h2>This header is blue</h2>

<p>This paragraph has a left margin of 50 pixels</p> 

</body>
</html>

執行實例»

點擊"運行實例" 按鈕查看線上實例

實例

<html>
<head>
<style>
body {background-color:tan;}
h1   {color:maroon;font-size:20pt;}
hr   {color:navy;}
p    {font-size:11pt;margin-left:15px;}
a:link    {color:green;}
a:visited {color:yellow;}
a:hover   {color:black;}
a:active  {color:blue;}
</style>
</head>

<body>

<h1>This is a header 1</h1>
<hr>

<p>You can see that the style 
sheet formats the text</p>

<p><a href="http://www.w3cschool.cc" 
target="_blank">This is a link</a></p>

</body>
</html>

運行實例»

#點擊"運行實例" 按鈕檢視線上實例

CSS 實例

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

1.jpg

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

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

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

CSS 實例

CSS宣告總是分號(;)結束，宣告群組以大括號({})括起來:

p {color:red;text-align:center;

為了讓CSS可讀性更強，你可以每行只描述一個屬性:

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
p
{
	color:red;
	text-align:center;
} 
</style>
</head>

<body>
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
</body>
</html>

運行實例»

點擊"運行實例"按鈕查看線上實例

#CSS 註解

註解是用來解釋你的程式碼，並且可以隨意編輯它，瀏覽器會忽略它。

CSS註解以 "/*" 開始, 以 "*/" 結束, 實例如下:

##
/*这是个注释*/
p
{
text-align:center;
/*这是另一个注释*/
color:black;
font-family:arial;
}


#