style 屬性用于改變 HTML 元素的樣式。
HTML的style屬性用于為HTML元素提供內(nèi)聯(lián)樣式。內(nèi)聯(lián)樣式是直接將CSS代碼寫(xiě)在HTML標(biāo)簽中的style屬性里。這種方法可以快速地為單個(gè)元素應(yīng)用樣式，但通常不推薦在大型項(xiàng)目中使用，因?yàn)樗鼤?huì)增加代碼的復(fù)雜性并降低可維護(hù)性。
style屬性的值是一系列的CSS屬性和值，它們之間用分號(hào)（;）分隔。下面是一個(gè)使用style屬性的例子：
<p style=“color: red; font-size: 20px;”>這是一個(gè)紅色的段落，字體大小為20像素。</p>
在這個(gè)例子中，<p>標(biāo)簽的style屬性包含了兩個(gè)CSS屬性：color和font-size。color屬性設(shè)置文本顏色為紅色，font-size屬性設(shè)置字體大小為20像素。
雖然style屬性方便快捷，但通常更推薦的做法是將樣式寫(xiě)在單獨(dú)的文件中，并通過(guò)<link>標(biāo)簽或@import規(guī)則引入到HTML文檔中。這樣做的好處是：
因此，在實(shí)際開(kāi)發(fā)中，應(yīng)盡量避免過(guò)度使用style屬性，而是采用外部CSS文件來(lái)管理樣式。
在HTML中，有些標(biāo)簽和屬性因?yàn)楦鞣N原因已經(jīng)不推薦使用或已被廢棄。以下是一些不贊成使用的HTML標(biāo)簽和屬性的表格形式匯總：
| 標(biāo)簽/屬性 | 描述 | 廢棄原因 |
|---|---|---|
<font> | 用于設(shè)置文本的字體、顏色和大小 | 已被CSS取代，不推薦使用 |
<center> | 將內(nèi)容居中顯示 | 已被取代，不推薦使用 |
<s> 和 <strike> | 為文本添加刪除線 | 已被CSS的text-decoration: line-through;取代 |
<u> | 為文本添加下劃線 | 已被CSS的text-decoration: underline;取代 |
<b> 和 <strong>（作為樣式使用） | 加粗文本 | 作為樣式使用時(shí)，已被CSS的font-weight: bold;取代。但<strong>仍可用于表示強(qiáng)調(diào)的語(yǔ)義。 |
<i> 和 <em>（作為樣式使用） | 斜體文本 | 作為樣式使用時(shí)，已被CSS的font-style: italic;取代。但<em>仍可用于表示強(qiáng)調(diào)的語(yǔ)義。 |
border=“0”（在<img>標(biāo)簽中） | 去除圖片邊框 | 已被CSS的border: none;取代 |
align 屬性 | 在各種標(biāo)簽中用于對(duì)齊內(nèi)容 | 已被CSS取代，如text-align、float等 |
valign 屬性 | 在表格單元格中垂直對(duì)齊內(nèi)容 | 已被CSS的vertical-align取代 |
cellpadding 和 cellspacing 屬性 | 在<table>標(biāo)簽中設(shè)置單元格內(nèi)邊距和間距 | 已被CSS的pding和border-spacing取代 |
bgcolor 屬性 | 設(shè)置背景顏色 | 已被CSS的background-color取代 |
width 和 height 屬性（在<table>、<td>等標(biāo)簽中） | 設(shè)置寬度和高度 | 已被CSS的width和height取代，除非用于設(shè)置圖片的寬高 |
frame, rules, border 等屬性（在<table>標(biāo)簽中） | 控制表格邊框的顯示 | 已被CSS取代 |
<frameset>, <frame>, <noframes> | 用于創(chuàng)建框架頁(yè)面 | 已被廢棄，因?yàn)榭蚣軐?duì)用戶體驗(yàn)和SEO不友好 |
<acronym> | 定義首字母縮寫(xiě) | 已被<abbr>標(biāo)簽取代，用于表示縮寫(xiě) |
<dir> 和 <menu> | 目錄列表和菜單列表 | 已被廢棄，建議使用<ul>、<ol>和<li>等標(biāo)簽創(chuàng)建列表 |
<isindex> | 創(chuàng)建一個(gè)簡(jiǎn)單的搜索框 | 已被廢棄，建議使用HTML表單和輸入元素創(chuàng)建搜索框 |
<applet> | 嵌入Java小程序 | 已被廢棄，因?yàn)镴ava小程序的使用已經(jīng)減少，且存在安全問(wèn)題 |
請(qǐng)注意，雖然這些標(biāo)簽和屬性已經(jīng)不推薦使用，但在某些舊的網(wǎng)頁(yè)或系統(tǒng)中仍可能遇到它們。在開(kāi)發(fā)新網(wǎng)站時(shí)，應(yīng)盡量避免使用這些廢棄的標(biāo)簽和屬性，并采用現(xiàn)代的HTML5和CSS3標(biāo)準(zhǔn)。
在HTML中，設(shè)置元素的背景顏色通常通過(guò)CSS來(lái)完成。這可以通過(guò)內(nèi)聯(lián)樣式直接在HTML元素上設(shè)置，也可以在樣式表中進(jìn)行設(shè)置。以下是一些設(shè)置背景顏色的實(shí)例：
使用style屬性直接在HTML元素上設(shè)置背景顏色：
<p style=“background-color: yellow;”>這是一個(gè)黃色背景的段落。</p>
在HTML文檔的<head>部分中使用<style>標(biāo)簽來(lái)定義樣式規(guī)則：
<!DOCTYPE html>
<html>
<head><style> .yellow-background { background-color: yellow; } </style></head>
<body><p class="yellow-background">這是一個(gè)黃色背景的段落。</p></body>
</html>
在這個(gè)例子中，我們創(chuàng)建了一個(gè)CSS類名為.yellow-background，然后將其應(yīng)用到<p>標(biāo)簽上，通過(guò)設(shè)置class屬性為yellow-background。
你還可以將樣式規(guī)則保存在一個(gè)單獨(dú)的.文件中，并在HTML文檔中通過(guò)<link>標(biāo)簽引用它：
74}.yellow-background {
background-color: yellow;
}
75}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p class="yellow-background">這是一個(gè)黃色背景的段落。</p>
</body>
</html>
在這個(gè)例子中，styles.css文件包含了設(shè)置背景顏色的CSS規(guī)則。HTML文件通過(guò)<link>標(biāo)簽引用了這個(gè)樣式表，從而應(yīng)用其中定義的樣式。
這些方法可以讓你靈活地設(shè)置HTML元素的背景顏色，無(wú)論是直接在元素上設(shè)置，還是在樣式表中統(tǒng)一設(shè)置。在大型項(xiàng)目中，推薦使用外部樣式表來(lái)管理樣式，因?yàn)樗梢蕴岣叽a的可維護(hù)性和重用性。
在HTML中設(shè)置字體、顏色和尺寸，我們通常會(huì)使用（層疊樣式表）。以下是一些設(shè)置字體、顏色和尺寸的實(shí)例：
你可以使用font-family屬性來(lái)設(shè)置字體。
<!DOCTYPE html>
<html>
<head><style> p { font-family: Arial, sans-serif; } </style></head>
<body><p>這是一個(gè)使用Arial字體的段落。</p></body>
</html>
使用color屬性來(lái)設(shè)置文本顏色。
<!DOCTYPE html>
<html>
<head><style> p { color: red; } </style></head>
<body><p>這是一個(gè)紅色的段落。</p></body>
</html>
你可以使用font-size屬性來(lái)設(shè)置字體尺寸。
<!DOCTYPE html>
<html>
<head><style> p { font-size: 20px; } </style></head>
<body><p>這是一個(gè)字體尺寸為20像素的段落。</p></body>
</html>
你也可以將字體、顏色和尺寸組合在一起設(shè)置。
<!DOCTYPE html>
<html>
<head><style> p { font-family: Arial, sans-serif; color: blue; font-size: 18px; } </style></head>
<body><p>這是一個(gè)使用Arial字體、藍(lán)色且字體尺寸為18像素的段落。</p></body>
</html>
這些樣式可以直接在HTML文檔的<style>標(biāo)簽中定義，也可以保存在外部CSS文件中，并通過(guò)<link>標(biāo)簽在HTML文檔中引用。使用外部文件有助于保持代碼的整潔和可維護(hù)性，特別是在大型項(xiàng)目中。
記住，CSS提供了豐富的屬性和選擇器，可以用來(lái)精確地控制頁(yè)面上各個(gè)元素的樣式。上述示例只是基礎(chǔ)用法，CSS的功能遠(yuǎn)不止于此。
在HTML和CSS中，文本對(duì)齊是一個(gè)常見(jiàn)的樣式設(shè)置。以下是一些文本對(duì)齊的樣式實(shí)例：
默認(rèn)情況下，文本是左對(duì)齊的。但如果你想明確地設(shè)置左對(duì)齊，可以使用CSS的text-align屬性。
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: left;
}
</style>
</head>
<body>
<p>這是一個(gè)左對(duì)齊的段落。</p>
</body>
</html>
要將文本居中對(duì)齊，你可以將text-align屬性設(shè)置為center。
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: center;
}
</style>
</head>
<body>
<p>這是一個(gè)居中對(duì)齊的段落。</p>
</body>
</html>
要將文本右對(duì)齊，你可以將text-align屬性設(shè)置為right。
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: right;
}
</style>
</he>
<body>
<p>這是一個(gè)右對(duì)齊的段落。</p>
</body>
</html>
如果你想要文本在兩端都對(duì)齊（就像在某些印刷材料中看到的那樣），你可以使用text-align: justify;。
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: justify;
}
</style>
</head>
<body>
<p>這是一個(gè)兩端對(duì)齊的段落，你可以看到文本的左右兩側(cè)都與容器的邊緣對(duì)齊，而文本行與行之間的間距也被均勻地分布。</p>
</body>
</html>
請(qǐng)注意，兩端對(duì)齊通常在包含多個(gè)單詞和句子的較長(zhǎng)段落中效果最佳。在較短的文本或單行文本中，可能不會(huì)看到明顯的兩端對(duì)齊效果。
這些樣式可以直接在HTML文檔的<style>標(biāo)簽中定義，或者保存在外部文件中，并通過(guò)<link>標(biāo)簽在HTML文檔中引用。在實(shí)際開(kāi)發(fā)中，推薦使用外部文件來(lái)組織和管理樣式，以提高代碼的可維護(hù)性和重用性。
上一篇： HTML 段落
下一篇： HTML 文本格式化