阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

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

      目录
      目录