HTML5 文档添加样式有三种方式:一、用 link 标签外链 CSS 文件,实现结构与样式分离;二、用 style 标签内嵌 CSS 代码,适用于局部样式或调试;三、用 style 属性设行内样式,优先级最高但难维护。

如果您希望为 HTML5 文档添加样式,可以通过外链 CSS 文件或内嵌 CSS 代码两种主要方式实现。以下是具体操作步骤:
一、使用 link 标签外链 CSS 文件
通过 标签在 HTML 文档的
部分引入外部 CSS 文件,可实现样式与结构分离,便于维护和复用。
1、在项目目录中创建一个纯文本文件,命名为 style.css,并保存为 UTF-8编码 格式。
2、在 style.css 中编写 CSS 规则,例如:body {background-color: #f0f0f0; font-family: Arial, sans-serif;}。
立即学习 “ 前端免费学习笔记(深入)”;
3、在 HTML 文件的
标签内插入 标签,属性设置为 rel=”stylesheet”、type=”text/css”、href=”style.css”。
4、确保 HTML 文件与 style.css 位于同一目录,或正确填写 href 中的相对路径,如 ”css/style.css”。
二、使用 style 标签内嵌 CSS 代码
将 CSS 规则直接写入 HTML 文档的
1、在 HTML 文件的
标签内部添加
结束,且不嵌套其他 HTML 标签。
4、浏览器 加载 HTML 时会自动解析
三、使用 style 属性为单个元素添加行内样式
通过元素的 style 属性直接定义 CSS 声明,作用范围仅限该元素,优先级高于外链和内嵌样式。
1、在目标 HTML 元素的开始标签中添加 style 属性。
2、在 style 属性值中输入 CSS 声明,多个声明用分号分隔,例如:style="color: red; font-size: 16px;"。
3、注意属性值必须用英文双引号包围,且不能包含换行或注释。
4、避免在大型项目中大量使用行内样式,因其难以复用和维护。