HTML 樣式
本節(jié)介紹HTML的樣式style 標(biāo)簽
讓我們先看一段代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body style="background-color:black;"> <h1 style="color: white">標(biāo)題的顏色</h1> <p style="color:red"> 我是標(biāo)簽的顏色</p> </body> </html>
上面代碼的意思是將網(wǎng)頁(yè)的背景色變成黑色，標(biāo)題的文字顏色變成白色，段落的文字變成紅色
代碼運(yùn)行結(jié)果：
可以看到上面的代碼中不管是標(biāo)簽<body>,<h1>還是<p>，他們的標(biāo)簽里面都有style，現(xiàn)在我們就知道了style屬性用于改變 HTML 元素的樣式。
HTML 的 style 屬性
tyle 屬性的作用：提供了一種改變所有 HTML 元素的樣式的通用方法。
樣式是 HTML 4 引入的，它是一種新的首選的改變 HTML 元素樣式的方式。通過(guò) HTML 樣式，能夠通過(guò)使用 style 屬性直接將樣式添加到 HTML 元素，或者間接地在獨(dú)立的樣式表中（CSS 文件）進(jìn)行定義。
您可以在我們的 CSS 教程中學(xué)習(xí)關(guān)于樣式和 CSS 的所有知識(shí)。
在我們的 HTML 教程中，我們將使用 style 屬性向您講解 HTML 樣式。
不贊成使用的標(biāo)簽和屬性
在 HTML 4 中，有若干的標(biāo)簽和屬性是被廢棄的。被廢棄（Deprecated）的意思是在未來(lái)版本的 HTML 和 XHTML 中將不支持這些標(biāo)簽和屬性。
這里傳達(dá)的信息很明確：請(qǐng)避免使用這些被廢棄的標(biāo)簽和屬性！
應(yīng)該避免使用下面這些標(biāo)簽和屬性：
| 標(biāo)簽 | 屬性 |
| <center> | 定義居中的內(nèi)容。 |
| <font> 和 <basefont> | 定義 HTML 字體。 |
| <s> 和 <strike> | 定義刪除線文本 |
| <u> | 定義下劃線文本 |
屬性 | 描述 |
| align | 定義文本的對(duì)齊方式 |
| bgcolor | 定義背景顏色 |
| color | 定義文本顏色 |
對(duì)于以上這些標(biāo)簽和屬性：請(qǐng)使用樣式代替！
HTML 樣式實(shí)例 - 背景顏色
background-color 屬性為元素定義了背景顏色：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body style="background-color:yellow"> </body> </html>
style 屬性淘汰了“舊的” bgcolor 屬性。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body bgcolor="yellow"> </body> </html>
HTML 樣式實(shí)例 - 字體、顏色和尺寸
font-family、color 以及 font-size 屬性分別定義元素中文本的字體系列、顏色和字體尺寸：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <h1 style="font-family:verdana">標(biāo)題</h1> <p style="font-family:arial;color:red;font-size:20px;">段落</p> </body> </html>
style 屬性淘汰了舊的 <font> 標(biāo)簽，已經(jīng)不能使用了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <h1><font face="verdana">標(biāo)題</font></h1> <p><font size="5" face="arial" color="red">段落</font></p> </body> </html>
HTML 樣式實(shí)例 - 文本對(duì)齊
text-align 屬性規(guī)定了元素中文本的水平對(duì)齊方式：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body> <h1 style="text-align:center">標(biāo)題</h1> <p>學(xué)HTML PHP 就到www.miracleart.cn</p> </body> </html>
style 屬性淘汰了舊的 "align" 屬性。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body> <h1 align="center">標(biāo)題</h1> <p>上面的標(biāo)題在頁(yè)面中進(jìn)行了居中排列。上面的標(biāo)題在頁(yè)面中進(jìn)行了居中排列。上面的標(biāo)題在頁(yè)面中進(jìn)行了居中排列。</p> </body> </html>
