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; }

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