logo

第一章：初识 CSS

作者
Modified on
Reading time
4 分钟阅读:..评论:..

1.1 CSS 简介

1.1.1 CSS 的历史与发展

CSS（Cascading Style Sheets，层叠样式表）是一种用于描述 HTML 或 XML（包括各种 XML 和 HTML 派生文档如 SVG 和 XHTML）文档外观和格式的样式表语言。CSS 的诞生可以追溯到 1996 年，当时由 W3C（万维网联盟）发布了 CSS Level 1。此后，CSS 不断发展，先后发布了多个版本，如 CSS2、CSS3，并继续向更高版本演进。

1.1.2 CSS 的应用领域

CSS 主要用于网页的视觉呈现。通过使用 CSS，可以实现网页的布局、颜色、字体、动画等方面的设计，使网页更加美观和用户友好。除了在传统的网页设计中，CSS 还被广泛应用于移动应用开发、响应式设计、电商平台、内容管理系统等领域。

1.1.3 为什么选择 CSS

选择 CSS 的理由包括：

  • 分离内容与表现：CSS 允许将网页内容与表现分离，使 HTML 代码更加简洁，易于维护和更新。
  • 样式重用：通过外部样式表，可以在多个网页中重用样式，提高开发效率和一致性。
  • 灵活性与控制力：CSS 提供了丰富的属性和选择器，能够精细控制网页的外观。
  • 响应式设计：CSS 支持媒体查询，可以根据不同设备的屏幕大小调整布局和样式，提升用户体验。

1.2 CSS 基础

1.2.1 CSS 的基本概念

CSS 是一种样式表语言，用于控制网页的表现。它通过选择器（selector）来指定要应用样式的 HTML 元素，并通过属性（property）和属性值（value）来定义样式规则（rule）。例如：

/* 选择器 { 属性: 属性值; } */
h1 {
  color: blue;
  font-size: 24px;
}

1.2.2 CSS 的层叠与继承

CSS 中的层叠（cascading）指的是当多个样式规则作用于同一元素时，CSS 会根据特定的优先级规则来决定哪个样式生效。优先级规则包括：

  1. 重要性：使用 !important 标记的声明具有最高优先级。
  2. 特异性：选择器的特异性越高，优先级越高。
  3. 来源：用户代理样式表 < 用户样式表 < 作者样式表。
  4. 顺序：如果以上规则无法区分，则后出现的样式规则优先。

继承（inheritance）指的是某些 CSS 属性可以从父元素继承到子元素。例如，文本颜色、字体样式等属性是可以继承的，而盒模型相关的属性（如 margin, padding）通常不会继承。

1.2.3 CSS 的语法与结构

CSS 的基本语法结构如下：

选择器 {
  属性: 属性值;
}

例如：

/* 设置段落文本的颜色为红色，字体大小为16像素 */
p {
  color: red;
  font-size: 16px;
}

一个样式规则由选择器和一组属性组成，每个属性由属性名和属性值构成，中间用冒号分隔，以分号结尾。

1.3 CSS 的引入方式

CSS 可以通过三种主要方式引入到 HTML 文件中：内联样式、内部样式表和外部样式表。

1.3.1 内联样式

内联样式直接在 HTML 元素的 style 属性中定义样式规则。例如：

<p style="color: blue; font-size: 18px;">这是一段带有内联样式的文本。</p>

内联样式的优先级高于内部样式表和外部样式表，但不推荐使用内联样式，因为它会使 HTML 代码变得冗长且不利于维护。

1.3.2 内部样式表

内部样式表使用 <style> 标签定义在 HTML 文件的 <head> 部分。例如：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>内部样式表示例</title>
    <style>
      p {
        color: green;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <p>这是一段带有内部样式表的文本。</p>
  </body>
</html>

内部样式表适用于页面内部的样式定义，但不利于样式的重用。

1.3.3 外部样式表

外部样式表将样式规则定义在单独的 .css 文件中，并使用 <link> 标签引入。例如：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>外部样式表示例</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <p>这是一段带有外部样式表的文本。</p>
  </body>
</html>

styles.css 文件内容：

p {
  color: purple;
  font-size: 22px;
}

外部样式表有助于样式的重用和代码的维护，是推荐的引入方式。

< CSS
第二章：选择器与规则 >