HTML 样式

首页 / HTML / CSS / HTML / HTML 样式 /

技术教程

HTML

HTML 简介 HTML 编辑器基本的 HTML 标签 - 四个实例 HTML 元素 HTML 属性 HTML 标题 HTML 段落 HTML 样式 HTML 文本格式化 HTML 引用 HTML 注释 HTML 颜色 HTML 颜色名

style 属性用于改变 HTML 元素的样式。

HTML 的 style 属性

HTML的style属性用于为HTML元素提供内联样式。内联样式是直接将CSS代码写在HTML标签中的style属性里。这种方法可以快速地为单个元素应用样式，但通常不推荐在大型项目中使用，因为它会增加代码的复杂性并降低可维护性。

style属性的值是一系列的CSS属性和值，它们之间用分号（;）分隔。下面是一个使用style属性的例子：

&lt;p style=“color: red; font-size: 20px;”&gt;这是一个红色的段落，字体大小为20像素。&lt;/p&gt;

在这个例子中，<p>标签的style属性包含了两个CSS属性：color和font-size。color属性设置文本颜色为红色，font-size属性设置字体大小为20像素。

虽然style属性方便快捷，但通常更推荐的做法是将样式写在单独的文件中，并通过<link>标签或@import规则引入到HTML文档中。这样做的好处是：

可维护性：所有的样式都集中在一个或多个CSS文件中，便于管理和修改。
重用性：CSS类可以在多个元素之间重用，减少代码冗余。
性能优化：浏览器可以缓存CSS文件，提高页面加载速度。
团队协作：设计师和开发者可以更容易地协作，因为样式和内容是分离的。

因此，在实际开发中，应尽量避免过度使用style属性，而是采用外部CSS文件来管理样式。

不赞成使用的标签和属性

在HTML中，有些标签和属性因为各种原因已经不推荐使用或已被废弃。以下是一些不赞成使用的HTML标签和属性的表格形式汇总：

标签/属性	描述	废弃原因
`<font>`	用于设置文本的字体、颜色和大小	已被CSS取代，不推荐使用
`<center>`	将内容居中显示	已被取代，不推荐使用
`<s>` 和 `<strike>`	为文本添加删除线	已被CSS的`text-decoration: line-through;`取代
`<u>`	为文本添加下划线	已被CSS的`text-decoration: underline;`取代
`<b>` 和 `<strong>`（作为样式使用）	加粗文本	作为样式使用时，已被CSS的`font-weight: bold;`取代。但`<strong>`仍可用于表示强调的语义。
`<i>` 和 `<em>`（作为样式使用）	斜体文本	作为样式使用时，已被CSS的`font-style: italic;`取代。但`<em>`仍可用于表示强调的语义。
`border=“0”`（在`<img>`标签中）	去除图片边框	已被CSS的`border: none;`取代
`align` 属性	在各种标签中用于对齐内容	已被CSS取代，如`text-align`、`float`等
`valign` 属性	在表格单元格中垂直对齐内容	已被CSS的`vertical-align`取代
`cellpadding` 和 `cellspacing` 属性	在`<table>`标签中设置单元格内边距和间距	已被CSS的`pding`和`border-spacing`取代
`bgcolor` 属性	设置背景颜色	已被CSS的`background-color`取代
`width` 和 `height` 属性（在`<table>`、`<td>`等标签中）	设置宽度和高度	已被CSS的`width`和`height`取代，除非用于设置图片的宽高
`frame`, `rules`, `border` 等属性（在`<table>`标签中）	控制表格边框的显示	已被CSS取代
`<frameset>`, `<frame>`, `<noframes>`	用于创建框架页面	已被废弃，因为框架对用户体验和SEO不友好
`<acronym>`	定义首字母缩写	已被`<abbr>`标签取代，用于表示缩写
`<dir>` 和 `<menu>`	目录列表和菜单列表	已被废弃，建议使用`<ul>`、`<ol>`和`<li>`等标签创建列表
`<isindex>`	创建一个简单的搜索框	已被废弃，建议使用HTML表单和输入元素创建搜索框
`<applet>`	嵌入Java小程序	已被废弃，因为Java小程序的使用已经减少，且存在安全问题

请注意，虽然这些标签和属性已经不推荐使用，但在某些旧的网页或系统中仍可能遇到它们。在开发新网站时，应尽量避免使用这些废弃的标签和属性，并采用现代的HTML5和CSS3标准。

HTML 样式实例 - 背景颜色

在HTML中，设置元素的背景颜色通常通过CSS来完成。这可以通过内联样式直接在HTML元素上设置，也可以在样式表中进行设置。以下是一些设置背景颜色的实例：

内联样式

使用style属性直接在HTML元素上设置背景颜色：

&lt;p style=“background-color: yellow;”&gt;这是一个黄色背景的段落。&lt;/p&gt;

内部样式表

在HTML文档的<head>部分中使用<style>标签来定义样式规则：

&lt;!DOCTYPE html&gt;

&lt;html&gt;

&lt;head&gt;

&lt;style&gt;    
    .yellow-background {    
        background-color: yellow;    
    }    
&lt;/style&gt;    


&lt;/head&gt;

&lt;body&gt;

&lt;p class="yellow-background"&gt;这是一个黄色背景的段落。&lt;/p&gt;    


&lt;/body&gt;

&lt;/html&gt;

在这个例子中，我们创建了一个CSS类名为.yellow-background，然后将其应用到<p>标签上，通过设置class属性为yellow-background。

外部样式表

你还可以将样式规则保存在一个单独的.文件中，并在HTML文档中通过<link>标签引用它：

74}.yellow-background {

background-color: yellow;

}

75}<!DOCTYPE html>
<html>
<head>

&lt;link rel="stylesheet" type="text/css" href="styles.css"&gt;

</head>
<body>

&lt;p class="yellow-background"&gt;这是一个黄色背景的段落。&lt;/p&gt;

</body>
</html>

在这个例子中，styles.css文件包含了设置背景颜色的CSS规则。HTML文件通过<link>标签引用了这个样式表，从而应用其中定义的样式。

这些方法可以让你灵活地设置HTML元素的背景颜色，无论是直接在元素上设置，还是在样式表中统一设置。在大型项目中，推荐使用外部样式表来管理样式，因为它可以提高代码的可维护性和重用性。

HTML 样式实例 - 字体、颜色和尺寸

在HTML中设置字体、颜色和尺寸，我们通常会使用（层叠样式表）。以下是一些设置字体、颜色和尺寸的实例：

字体

你可以使用font-family属性来设置字体。

&lt;!DOCTYPE html&gt;

&lt;html&gt;

&lt;head&gt;

&lt;style&gt;    
    p {    
        font-family: Arial, sans-serif;    
    }    
&lt;/style&gt;    


&lt;/head&gt;

&lt;body&gt;

&lt;p&gt;这是一个使用Arial字体的段落。&lt;/p&gt;    


&lt;/body&gt;

&lt;/html&gt;

颜色

使用color属性来设置文本颜色。

&lt;!DOCTYPE html&gt;

&lt;html&gt;

&lt;head&gt;

&lt;style&gt;    
    p {    
        color: red;    
    }    
&lt;/style&gt;    


&lt;/head&gt;

&lt;body&gt;

&lt;p&gt;这是一个红色的段落。&lt;/p&gt;    


&lt;/body&gt;

&lt;/html&gt;

尺寸

你可以使用font-size属性来设置字体尺寸。

&lt;!DOCTYPE html&gt;

&lt;html&gt;

&lt;head&gt;

&lt;style&gt;    
    p {    
        font-size: 20px;    
    }    
&lt;/style&gt;    


&lt;/head&gt;

&lt;body&gt;

&lt;p&gt;这是一个字体尺寸为20像素的段落。&lt;/p&gt;    


&lt;/body&gt;

&lt;/html&gt;

综合示例

你也可以将字体、颜色和尺寸组合在一起设置。

&lt;!DOCTYPE html&gt;

&lt;html&gt;

&lt;head&gt;

&lt;style&gt;    
    p {    
        font-family: Arial, sans-serif;    
        color: blue;    
        font-size: 18px;    
    }    
&lt;/style&gt;    


&lt;/head&gt;

&lt;body&gt;

&lt;p&gt;这是一个使用Arial字体、蓝色且字体尺寸为18像素的段落。&lt;/p&gt;    


&lt;/body&gt;

&lt;/html&gt;

这些样式可以直接在HTML文档的<style>标签中定义，也可以保存在外部CSS文件中，并通过<link>标签在HTML文档中引用。使用外部文件有助于保持代码的整洁和可维护性，特别是在大型项目中。

记住，CSS提供了丰富的属性和选择器，可以用来精确地控制页面上各个元素的样式。上述示例只是基础用法，CSS的功能远不止于此。

HTML 样式实例 - 文本对齐

在HTML和CSS中，文本对齐是一个常见的样式设置。以下是一些文本对齐的样式实例：

文本左对齐

默认情况下，文本是左对齐的。但如果你想明确地设置左对齐，可以使用CSS的text-align属性。

&lt;!DOCTYPE html&gt;

&lt;html&gt;

&lt;head&gt;

&lt;style&gt;    
    p {    
        text-align: left;    
    }    
&lt;/style&gt;    


&lt;/head&gt;

&lt;body&gt;

&lt;p&gt;这是一个左对齐的段落。&lt;/p&gt;    


&lt;/body&gt;

&lt;/html&gt;

文本居中对齐

要将文本居中对齐，你可以将text-align属性设置为center。

&lt;!DOCTYPE html&gt;

&lt;html&gt;

&lt;head&gt;

&lt;style&gt;    
    p {    
        text-align: center;    
    }    
&lt;/style&gt;    


&lt;/head&gt;

&lt;body&gt;

&lt;p&gt;这是一个居中对齐的段落。&lt;/p&gt;    


&lt;/body&gt;

&lt;/html&gt;

文本右对齐

要将文本右对齐，你可以将text-align属性设置为right。

&lt;!DOCTYPE html&gt;

&lt;html&gt;

&lt;head&gt;

&lt;style&gt;    
    p {    
        text-align: right;    
    }    
&lt;/style&gt;    


&lt;/he&gt;

&lt;body&gt;

&lt;p&gt;这是一个右对齐的段落。&lt;/p&gt;    


&lt;/body&gt;

&lt;/html&gt;

文本两端对齐

如果你想要文本在两端都对齐（就像在某些印刷材料中看到的那样），你可以使用text-align: justify;。

&lt;!DOCTYPE html&gt;

&lt;html&gt;

&lt;head&gt;

&lt;style&gt;    
    p {    
        text-align: justify;    
    }    
&lt;/style&gt;    


&lt;/head&gt;

&lt;body&gt;

&lt;p&gt;这是一个两端对齐的段落，你可以看到文本的左右两侧都与容器的边缘对齐，而文本行与行之间的间距也被均匀地分布。&lt;/p&gt;    


&lt;/body&gt;

&lt;/html&gt;

请注意，两端对齐通常在包含多个单词和句子的较长段落中效果最佳。在较短的文本或单行文本中，可能不会看到明显的两端对齐效果。

这些样式可以直接在HTML文档的<style>标签中定义，或者保存在外部文件中，并通过<link>标签在HTML文档中引用。在实际开发中，推荐使用外部文件来组织和管理样式，以提高代码的可维护性和重用性。

上一篇： HTML 段落

下一篇： HTML 文本格式化