第一章:初识 CSS
- 作者
- Name
- 青玉白露
- Github
- @white0dew
- 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 会根据特定的优先级规则来决定哪个样式生效。优先级规则包括:
- 重要性:使用
!important
标记的声明具有最高优先级。 - 特异性:选择器的特异性越高,优先级越高。
- 来源:用户代理样式表 < 用户样式表 < 作者样式表。
- 顺序:如果以上规则无法区分,则后出现的样式规则优先。
继承(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; }
外部样式表有助于样式的重用和代码的维护,是推荐的引入方式。