参考资料

  1. HTML 区块元素
  2. HTML 属性
  3. HTML <abbr> 标签
  4. Html表格生成器有哪些
  5. html链接标签详细说明以及案例
  6. HTML 表格表头单元格
  7. HTML 使用<div> 元素布局
  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：文件标签外部样式表规则代码页面处理器格式化存储

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。