HTML 樣式

tyle 屬性用于改變 HTML 元素的樣式。

<html>

<h1>Look! Styles and colors</h1>

This text is in Verdana and red</p>

This text is in Times and green</p>

<p style="font-size:30px">This text is 30 pixels high</p>

</body>

</html>

HTML 的 style 屬性

style 屬性的作用：

提供了一種改變所有 HTML 元素的樣式的通用方法。

樣式是 HTML 4 引入的，它是一種新的首選的改變 HTML 元素樣式的方式。通過(guò) HTML 樣式，能夠通過(guò)使用 style 屬性直接將樣式添加到 HTML 元素，或者間接地在獨(dú)立的樣式表中（CSS 文件）進(jìn)行定義。

不贊成使用的標(biāo)簽和屬性

在 HTML 4 中，有若干的標(biāo)簽和屬性是被廢棄的。被廢棄（Deprecated）的意思是在未來(lái)版本的 HTML 和 XHTML 中將不支持這些標(biāo)簽和屬性。

這里傳達(dá)的信息很明確：請(qǐng)避免使用這些被廢棄的標(biāo)簽和屬性！

應(yīng)該避免使用下面這些標(biāo)簽和屬性：

HTML 樣式實(shí)例 - 背景顏色

background-color 屬性為元素定義了背景顏色：

<html>
<body style="background-color:yellow">
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>
</html>

HTML 樣式實(shí)例 - 字體、顏色和尺寸

font-family、color 以及 font-size 屬性分別定義元素中文本的字體系列、顏色和字體尺寸：

<html>
<body>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>

HTML 樣式實(shí)例 - 文本對(duì)齊

text-align 屬性規(guī)定了元素中文本的水平對(duì)齊方式：

何使用CSS

CSS 是在 HTML 4 開(kāi)始使用的,是為了更好的渲染HTML元素而引入的.

CSS 可以通過(guò)以下方式添加到HTML中:

· 內(nèi)聯(lián)樣式- 在HTML元素中使用"style" 屬性

· 內(nèi)部樣式表 -在HTML文檔頭部 <head> 區(qū)域使用<style> 元素來(lái)包含CSS

· 外部引用 - 使用外部 CSS 文件

最好的方式是通過(guò)外部引用CSS文件.

在本站的HTML教程中我們使用了內(nèi)聯(lián)CSS樣式來(lái)介紹實(shí)例，這是為了簡(jiǎn)化的例子，也使得你能更容易在線編輯代碼并在線運(yùn)行實(shí)例。

內(nèi)聯(lián)樣式

當(dāng)特殊的樣式需要應(yīng)用到個(gè)別元素時(shí)，就可以使用內(nèi)聯(lián)樣式。使用內(nèi)聯(lián)樣式的方法是在相關(guān)的標(biāo)簽中使用樣式屬性。樣式屬性可以包含任何 CSS 屬性。以下實(shí)例顯示出如何改變段落的顏色和左外邊距。

<p style="color:blue;margin-left:20px;">This is a paragraph.</p>

HTML樣式實(shí)例 - 背景顏色

背景色屬性（background-color）定義一個(gè)元素的背景顏色：

</body>

早期背景色屬性（background-color）是使用 bgcolor 屬性定義。

HTML 樣式實(shí)例 - 字體, 字體顏色，字體大小

我們可以使用font-family（字體），color（顏色），和font-size（字體大小）屬性來(lái)定義字體的樣式:

現(xiàn)在通常使用font-family（字體），color（顏色），和font-size（字體大小）屬性來(lái)定義文本樣式，而不是使用<font>標(biāo)簽。

HTML 樣式實(shí)例 - 文本對(duì)齊方式

使用 text-align（文字對(duì)齊）屬性指定文本的水平與垂直對(duì)齊方式：

文本對(duì)齊屬性 text-align取代了舊標(biāo)簽 <center> 。

內(nèi)部樣式表

當(dāng)單個(gè)文件需要特別樣式時(shí)，就可以使用內(nèi)部樣式表。你可以在<head> 部分通過(guò) <style>標(biāo)簽定義內(nèi)部樣式表:

00001.

<head>

body {background-color:yellow;}

p {color:blue;}

</style>

</head>

外部樣式表

當(dāng)樣式需要被應(yīng)用到很多頁(yè)面的時(shí)候，外部樣式表將是理想的選擇。使用外部樣式表，你就可以通過(guò)更改一個(gè)文件來(lái)改變整個(gè)站點(diǎn)的外觀。

<head>

</head>

HTML 樣式標(biāo)簽

標(biāo)簽

描述

<style>

定義文本樣式

<link>

定義資源引用地址

已棄用的標(biāo)簽和屬性

在HTML 4, 原來(lái)支持定義HTML元素樣式的標(biāo)簽和屬性已被棄用。這些標(biāo)簽將不支持新版本的HTML標(biāo)簽。

不建議使用的標(biāo)簽有: <font>, <center>, <strike>

不建議使用的屬性: color 和 bgcolor.

T之家 12 月 12 日消息，Meta 日前開(kāi)源了自家產(chǎn)品所使用的網(wǎng)頁(yè) UI 樣式系統(tǒng) StyleX，這是一款基于編譯器的 CSS-in-JS 庫(kù)，號(hào)稱整合了靜態(tài) CSS 的高效與可擴(kuò)展性，并能夠復(fù)用組件庫(kù)和靜態(tài)類型代碼庫(kù)。

據(jù)悉，StyleX 并不全面支持 CSS 的所有功能，主要圍繞大型網(wǎng)站而構(gòu)建，目前這一樣式系統(tǒng)已經(jīng)在 Meta 旗下 Facebook、WhatsApp、Instagram 等產(chǎn)品中使用。

▲ 圖源 Meta 官方新聞稿

IT之家獲悉，StyleX 能夠自動(dòng)管理 CSS 選擇器，避免過(guò)程復(fù)雜化，確保生成的 CSS 不會(huì)出現(xiàn)沖突，此外，StyleX 避免了使用 JavaScript 插入樣式的開(kāi)銷，僅在必要時(shí)高效地組合類名字符串，從而保證生成的 CSS 樣式能夠快速被瀏覽器解析。

此外，StyleX 生成的樣式也經(jīng)過(guò)了優(yōu)化，官方提到，相對(duì)于傳統(tǒng) CSS 庫(kù)，StyleX 顯得“更小、更具體”，通過(guò)“原子構(gòu)建”和“文件級(jí)緩存”，StyleX 在編譯時(shí)能夠同時(shí)處理數(shù)萬(wàn)個(gè)組件，并具備“強(qiáng)大的擴(kuò)展能力”，從而提升開(kāi)發(fā)效率。

Meta 提到，目前官方在 GitHub 上開(kāi)源的 StyleX，是公司內(nèi)部所使用的 StyleX 正式版本，未來(lái)官方將在 GitHub 發(fā)布 StyleX 后續(xù)更新，Meta 還將定期同步 GitHub 上發(fā)布的新版本，帶回內(nèi)部使用，感興趣的小伙伴可以點(diǎn)此訪問(wèn)項(xiàng)目地址。

在線咨詢

上一篇：HTML-注冊(cè)頁(yè)面 212
下一篇：HTML鏈接及實(shí)例

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

HTML 樣式

您的項(xiàng)目需求