您现在的位置是：网站首页 > 样式表的引入文章详情

样式表的引入

陈川【 HTML 】 7315人已围观 4988字

样式表的引入

样式表是控制网页外观的核心技术，通过CSS规则定义元素的表现形式。HTML文档引入样式表主要有三种方式：行内样式、内部样式表和外部样式表，每种方式各有特点和使用场景。

行内样式

直接在HTML元素的style属性中编写CSS规则，这种方式优先级最高但维护性差。适用于需要临时覆盖其他样式或快速测试的场景。

<p style="color: red; font-size: 16px;">这段文字显示为红色</p>
<div style="background-color: #f0f0f0; padding: 10px;">灰色背景区域</div>

行内样式会覆盖外部和内部样式表中的相同属性，但过度使用会导致HTML结构混乱。现代开发中建议谨慎使用，仅在必须覆盖全局样式时采用。

内部样式表

在HTML文档的<head>部分通过<style>标签定义，影响当前页面所有匹配元素。适合单页面应用或页面专属样式。

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: 'Arial', sans-serif;
      line-height: 1.6;
    }
    .highlight {
      background-color: yellow;
      padding: 0.2em;
    }
    #header {
      border-bottom: 2px solid #333;
    }
  </style>
</head>
<body>
  <div id="header">...</div>
</body>
</html>

内部样式表比行内样式更易于维护，但无法跨页面复用。当样式规则超过50行或需要多页面共享时，建议转为外部样式表。

外部样式表

通过<link>标签引入独立的.css文件，这是最推荐的方式。可以实现样式复用、缓存优化和团队协作。

基础引入方式：

<head>
  <link rel="stylesheet" href="styles/main.css">
  <link rel="stylesheet" href="styles/theme.css" media="(prefers-color-scheme: dark)">
</head>

现代项目常使用模块化引入：

<!-- 主样式 -->
<link rel="stylesheet" href="css/base.css">
<!-- 打印样式 -->
<link rel="stylesheet" href="css/print.css" media="print">
<!-- 移动端适配 -->
<link rel="stylesheet" media="screen and (max-width: 600px)" href="css/mobile.css">

外部样式表支持多种加载策略：

<!-- 预加载关键CSS -->
<link rel="preload" href="critical.css" as="style" onload="this.rel='stylesheet'">
<!-- 异步加载非关键CSS -->
<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">

@import规则

CSS文件内部可以使用@import引入其他样式表，但会引发渲染阻塞。建议在以下情况使用：

/* main.css */
@import url('reset.css');
@import url('typography.css') screen;
@import url('print.css') print;

与<link>标签相比，@import的缺点包括：

无法并行加载
增加HTTP请求
不利于浏览器预加载器优化

样式表的层叠与优先级

当多种引入方式同时存在时，浏览器按以下顺序应用样式：

用户代理样式（浏览器默认样式）
外部样式表
内部样式表
行内样式
!important声明

示例冲突解决：

<style>
  p { color: blue !important; }
</style>
<p style="color: red;">最终显示蓝色文字</p>

媒体查询与条件加载

通过media属性实现响应式加载：

<link rel="stylesheet" href="wide.css" media="(min-width: 1024px)">
<link rel="stylesheet" href="narrow.css" media="(max-width: 1023px)">

现代CSS还支持特性查询：

@supports (display: grid) {
  /* 仅当浏览器支持网格布局时应用 */
  .container { display: grid; }
}

样式表的性能优化

高效引入样式表的实践方法：

<!-- 使用CDN加速 -->
<link rel="stylesheet" href="https://cdn.example.com/bootstrap.min.css">
<!-- 添加完整性校验 -->
<link rel="stylesheet" 
      href="https://example.com/style.css"
      integrity="sha384-...">
<!-- 预连接CSS域名 -->
<link rel="preconnect" href="https://fonts.googleapis.com">

关键CSS内联示例：

<style>
  /* 首屏关键样式 */
  .hero { font-size: 2em; }
  button.cta { background: #f00; }
</style>
<link rel="preload" href="non-critical.css" as="style">

动态样式加载

JavaScript动态加载样式表的方法：

// 创建link元素
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'dynamic-styles.css';
document.head.appendChild(link);

// 使用Promise加载
function loadStyle(url) {
  return new Promise((resolve, reject) => {
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = url;
    link.onload = resolve;
    link.onerror = reject;
    document.head.appendChild(link);
  });
}

主题切换的实现：

// 切换暗色主题
function enableDarkTheme() {
  const theme = document.createElement('link');
  theme.rel = 'stylesheet';
  theme.href = 'dark-theme.css';
  theme.id = 'dark-theme';
  document.head.appendChild(theme);
}

// 移除主题
function disableDarkTheme() {
  const theme = document.getElementById('dark-theme');
  if (theme) theme.remove();
}

CSS模块化实践

现代前端框架中的样式引入方式：

React示例（CSS Modules）：

import styles from './Button.module.css';

function Button() {
  return <button className={styles.primary}>Submit</button>;
}

Vue示例（Scoped CSS）：

<template>
  <div class="example">Hi</div>
</template>

<style scoped>
.example {
  color: red;
}
</style>

Sass/Less预处理器的引入：

<!-- 开发时编译 -->
<link rel="stylesheet" href="styles/main.scss">
<!-- 或构建后引入 -->
<link rel="stylesheet" href="dist/main.css">

样式表的版本控制

解决缓存问题的常见方法：

<!-- 查询字符串 -->
<link rel="stylesheet" href="styles.css?v=1.0.2">
<!-- 文件名哈希 -->
<link rel="stylesheet" href="styles.a1b2c3d4.css">

通过服务器配置实现自动版本控制：

location ~* \.css$ {
  add_header Cache-Control "public, max-age=31536000";
  expires 1y;
}

可访问性考虑

为高对比度模式提供备用样式：

<link rel="stylesheet" href="high-contrast.css" media="(prefers-contrast: high)">

支持用户样式覆盖：

<link rel="stylesheet" href="styles.css" title="Default">
<link rel="alternate stylesheet" href="large-text.css" title="Large Text">

JavaScript切换样式表示例：

function setActiveStyle(title) {
  const links = document.getElementsByTagName('link');
  for (const link of links) {
    if (link.rel.includes('style') && link.title) {
      link.disabled = (link.title !== title);
    }
  }
}

上一篇：外部资源链接(link)

下一篇：脚本的引入(script)