在 HTML 文档中嵌入 CSS 的几种方式

🌙
手机阅读
本文目录结构

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 文件导入。

<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 知识

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了