参考资料

  1. HTML 内部样式表
  2. HTML 链接详解
  3. HTML 文本格式化
  4. HTML 表格头部、主体、页脚
  5. html列表标签详细说明以及案例
  6. HTML 表格表头单元格
  7. HTML 表单详解
  8. HTML 颜色

HTML 外部样式表格式化

简介

外部样式表是将CSS规则存储在独立文件中，通过<link>标签引入HTML文档的样式定义方式。

主要标签

<link rel="stylesheet" href="styles.css">

详细用法

  1. 创建单独的.css文件

  2. 在HTML头部使用<link>标签引入

  3. 在.css文件中编写样式规则

实例

HTML文件(index.html):

<!DOCTYPE html>
<html>
<head>
    <title>示例页面</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>标题</h1>
    <p class="intro">段落文本</p>
</body>
</html>

CSS文件(styles.css):

h1 {
    color: blue;
    text-align: center;
}

.intro {
    font-size: 16px;
    line-height: 1.5;
    margin: 20px;
}

功能

  1. 实现内容与表现的分离

  2. 提高代码可维护性

  3. 实现多页面样式共享

  4. 减少代码重复

  5. 提高页面加载速度(通过缓存)

CSS扩展

  1. CSS预处理器:

    • Sass/SCSS

    • Less

    • Stylus

  2. CSS后处理器:

    • PostCSS

    • Autoprefixer

  3. CSS模块化:

    • CSS Modules

    • BEM命名规范

  4. CSS框架:

    • Bootstrap

    • Tailwind CSS

    • Foundation

  5. CSS-in-JS:

    • Styled-components

    • Emotion

    • JSS

TAG：文件标签外部样式表规则代码页面处理器格式化存储