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 元素样式的方式。通过 HTML 样式，能够通过使用 style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义。

不赞成使用的标签和属性

在 HTML 4 中，有若干的标签和属性是被废弃的。被废弃（Deprecated）的意思是在未来版本的 HTML 和 XHTML 中将不支持这些标签和属性。

这里传达的信息很明确：请避免使用这些被废弃的标签和属性！

应该避免使用下面这些标签和属性：

HTML 样式实例 - 背景颜色

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 样式实例 - 字体、颜色和尺寸

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 样式实例 - 文本对齐

text-align 属性规定了元素中文本的水平对齐方式：

何使用CSS

CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.

CSS 可以通过以下方式添加到HTML中:

· 内联样式- 在HTML元素中使用"style" 属性

· 内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素来包含CSS

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

最好的方式是通过外部引用CSS文件.

在本站的HTML教程中我们使用了内联CSS样式来介绍实例，这是为了简化的例子，也使得你能更容易在线编辑代码并在线运行实例。

内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

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

HTML样式实例 - 背景颜色

背景色属性（background-color）定义一个元素的背景颜色：

<h2 style="background-color:red;">这是一个标题</h2>

<p style="background-color:green;">这是一个段落。</p>

</body>

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

HTML 样式实例 - 字体, 字体颜色，字体大小

我们可以使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式:

现在通常使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义文本样式，而不是使用<font>标签。

HTML 样式实例 - 文本对齐方式

使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式：

<h1 style="text-align:center;">居中对齐的标题</h1> <p>这是一个段落。</p>

文本对齐属性 text-align取代了旧标签 <center> 。

内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表:

00001.

<head>

body {background-color:yellow;}

p {color:blue;}

</style>

</head>

外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

<head>

</head>

HTML 样式标签

标签

描述

<style>

定义文本样式

<link>

定义资源引用地址

已弃用的标签和属性

在HTML 4, 原来支持定义HTML元素样式的标签和属性已被弃用。这些标签将不支持新版本的HTML标签。

不建议使用的标签有: <font>, <center>, <strike>

不建议使用的属性: color 和 bgcolor.

T之家 12 月 12 日消息，Meta 日前开源了自家产品所使用的网页 UI 样式系统 StyleX，这是一款基于编译器的 CSS-in-JS 库，号称整合了静态 CSS 的高效与可扩展性，并能够复用组件库和静态类型代码库。

据悉，StyleX 并不全面支持 CSS 的所有功能，主要围绕大型网站而构建，目前这一样式系统已经在 Meta 旗下 Facebook、WhatsApp、Instagram 等产品中使用。

▲ 图源 Meta 官方新闻稿

IT之家获悉，StyleX 能够自动管理 CSS 选择器，避免过程复杂化，确保生成的 CSS 不会出现冲突，此外，StyleX 避免了使用 JavaScript 插入样式的开销，仅在必要时高效地组合类名字符串，从而保证生成的 CSS 样式能够快速被浏览器解析。

此外，StyleX 生成的样式也经过了优化，官方提到，相对于传统 CSS 库，StyleX 显得“更小、更具体”，通过“原子构建”和“文件级缓存”，StyleX 在编译时能够同时处理数万个组件，并具备“强大的扩展能力”，从而提升开发效率。

Meta 提到，目前官方在 GitHub 上开源的 StyleX，是公司内部所使用的 StyleX 正式版本，未来官方将在 GitHub 发布 StyleX 后续更新，Meta 还将定期同步 GitHub 上发布的新版本，带回内部使用，感兴趣的小伙伴可以点此访问项目地址。

在线咨询

上一篇：HTML-注册页面 212
下一篇：HTML链接及实例

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML 样式

您的项目需求