CSS 語法
CSS?語法
CSS 規(guī)則由兩個主要的部分構(gòu)成:選擇器,以及一條或多條聲明:
選擇器通常是您需要改變樣式的 HTML 元素。
每條聲明由一個屬性和一個值組成。
屬性(property)是您希望設(shè)置的樣式屬性(style attribute)。每個屬性有一個值。屬性和值被冒號分開。
CSS 實例
CSS聲明總是以分號(;)結(jié)束,聲明組以大括號({})括起來:
p {color:red;text-align:center;}
為了讓CSS可讀性更強,你可以每行只描述一個屬性:
實例?
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> p { color: #ff122b; text-align:center; } </style> </head> <body> <p>Hello World!</p> <p>這一段是用CSS樣式化。</p> </body> </html>
上面的css 樣式是
標(biāo)簽的顏色設(shè)置成?#ff122b,文本居中
運行程序嘗試一下
CSS 注釋
注釋是用來解釋你的代碼,并且可以隨意編輯它,瀏覽器會忽略它。
CSS注釋以 "/*" 開始, 以 "*/" 結(jié)束, 實例如下:
/*這是個注釋*/
p
{
text-align:center;
/*這是另一個注釋*/
color:black;
font-family:arial;
}
更多實例
實例1
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> body {background-color:#8cd6ff;} h1 {font-size:36px;} h2 {color:blue;} p {margin-left:50px;} </style> </head> <body> <h1>這個頭是36 pt</h1> <h2>這個頭是藍(lán)色的</h2> <p>這一段有一個50像素的左邊框</p> </body> </html>
運行程序嘗試一下
實例2
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <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>這是一個標(biāo)題</h1> <hr> <p>您可以看到鏈接格式文本</p> <p><a href="http://php.cn" target="_blank">鏈接</a></p> </body> </html>
運行程序嘗試一下