在 HTML 文档中嵌入 CSS 的几种方式
🌙
手机阅读
本文目录结构
2、使用
html 使用 css
在 HTML 中常用以下 3 种方式定义 CSS
- Embedding（嵌入式）
- Linking（引用式）
- Inline（内联式）
一、嵌入式
使用 HTML 的 style 元素，在文档中定义 CSS 样式。
<head>
<style type="text/css">
h1{color:red}
p{color:blue}
</style>
<head>
二、内联式
每一个 HTML 元素都包含一个 style 属性，可以直接定义样式。该样式仅能用于该元素的内容，对于另一个同名的元素则不起作用。
<p style="color:#FFF;font-weight:bold;">内联样式</p>
三、外部引用式
外部引用指 HTML 文档本身不含有 CSS 样式，而是动态引用外部的 CSS 文件定义文档的表现形式。
1、使用样式表的处理指令语句
在 HTML 文档的开头部分写一个关于样式表的指令处理语句
<?xml-stylesheet type="text/css" href="mystyle.css" ?>
<html>
指令语句
</html>
不过只有使用 xml 语法格式编写的 html 文档才支持使用该指令，大多数浏览器仅当被保存为 xhtml 或 xml 格式才有效，且 JS 不能处理这种 CSS，所以不建议使用。
2、使用 @import 命令
在 style 元素之间使用 @import 命令导入外部的 css 文件
<head>
<style type="text/css">
<!-- 下面两行代码效果一样
@import "mystyle.css";
@import url("mystyle.css");
-->
</style>
</head>
任何 @import 规则必须出现在所有规则之前。参数是一个 css 文件的 URL 地址。在一个 css 文件中也可以用 @import 指令将另一个 css 文件导入。
3、使用 link 元素
<head>
<link rel="stylesheet" href="css的url" type="text/css" >
</head>
这是最常用的方式。
4、使用 HTTP 消息报头链接到样式表
可以使用 HTTP 消息报头的 link 字段链接一个外部样式表。
link:<mystyle.css>;rel=stylesheet;
// 等同于<link rel="stylesheet" href="css 的 url" type="text/css" >
HTTP 报头中可以使用多个 link，从而链接多个样式表，且 HTTP 报头中的 link 比 HTML 文档中的 link（head 元素中）具有优先级。
npm install --global web-ext
更多 HTML 搜索
通过查看前端开发者在搜索引擎里的搜了哪些 HTML 内容，可以知道他们实际工作使用了什么技术或者什么地方薄弱；
你可以通过点击 HTML 常见搜索 来查看前端开发者都在搜哪些内容；
注：这里仅收录了常见搜索，并不是无论搜索什么都记录在里面的；
如果你是为了面试做准备的，那么推荐你查看 HTML面试题，这里基本包涵了市场上的所有 HTML 方面的面试题，让你更加牢固的掌握 HTML 知识
