CSS - cascading style sheets - Tutorial

Table of Contents About the Tutorial Audience Prerequisites Copyright & Disclaimer Table of Contents 1 CSS ─ OVERVIEW 1 What is CSS?1 Advantages of CSS1 Who Creates and Maintains CSS?1 CSS Versions2 2 CSS ─ SYNTAX 3 The Type Selectors3 The Universal Selectors3 The Descendant Selectors 4 The Class Selectors4 The ID Selectors 4 The Child Selectors5 The Attribute Selectors 5 Multiple Style Rules 6 Grouping Selectors6 ### CSS - 概述 #### 什么是 CSS？ CSS（Cascading Style Sheets）是一种样式表语言，用于描述文档（如 HTML 或 XML 文件）中的结构化文档的外观和格式。通过 CSS，开发者可以控制网页上元素的颜色、字体、布局等样式属性，使网页更加美观和易于维护。 #### CSS 的优势 - **分离内容与表现**：CSS 允许将样式与内容分离，这意味着可以在不修改 HTML 内容的情况下更改页面的外观。 - **提高可维护性**：当样式发生变化时，只需要在一个地方进行更改，而无需在每个页面上修改样式。 - **提高加载速度**：浏览器通常会缓存 CSS 文件，因此用户访问网站时加载速度更快。 - **更好的控制**：CSS 提供了丰富的选择器和属性，让开发者能够更精确地控制页面布局和设计。 #### 谁创建和维护 CSS？ CSS 由 W3C（World Wide Web Consortium）制定和维护。W3C 是一个国际性的组织，致力于制定 Web 标准和技术规范。 #### CSS 版本 - **CSS1**：第一个版本，定义了一些基本的样式规则。 - **CSS2**：增加了更多的功能，如定位、视觉效果等。 - **CSS3**：最新的版本，进一步扩展了样式控制能力，包括新的选择器、颜色管理、动画等特性。 ### CSS - 语法 #### 类型选择器 类型选择器（Type selectors）是最基本的选择器之一，用于匹配指定类型的 HTML 元素。例如： ```css p { color: blue; } ``` 这段代码将把所有 `<p>` 元素的文字颜色设置为蓝色。 #### 通用选择器 通用选择器（Universal selector）`*` 匹配文档中的任何元素。例如： ```css * { margin: 0; padding: 0; } ``` 这段代码将所有元素的外边距和内边距都设置为 0，常用于重置默认样式。 #### 后代选择器 后代选择器（Descendant selector）用来选择某个元素的所有后代元素。例如： ```css div p { font-size: 14px; } ``` 这段代码将把所有位于 `<div>` 元素内部的 `<p>` 元素的文字大小设置为 14px。 #### 类选择器 类选择器（Class selector）使用点号（`.`）后跟类名来表示。类选择器允许开发者针对具有相同类的元素应用相同的样式。例如： ```html <p class="highlight">This paragraph has a highlight class.</p> ``` ```css .highlight { background-color: yellow; } ``` 这段代码将把类名为 `highlight` 的所有元素背景色设置为黄色。 #### ID 选择器 ID 选择器（ID selector）使用井号（`#`）后跟 ID 名来表示。ID 选择器用于唯一标识页面中的元素，并为其应用样式。例如： ```html <p id="main-title">This is the main title.</p> ``` ```css #main-title { font-size: 24px; color: red; } ``` 这段代码将把 ID 为 `main-title` 的元素文字大小设置为 24px 并将颜色设置为红色。 #### 子选择器 子选择器（Child selector）使用大于号（`>`）来表示。子选择器仅匹配特定父元素的直接子元素。例如： ```css ul > li { list-style-type: none; } ``` 这段代码将把所有直接位于 `<ul>` 下的 `<li>` 元素的列表样式设置为无。 #### 属性选择器 属性选择器（Attribute selector）允许根据元素的属性值来选择元素。例如： ```css a[href^="http://"] { color: green; } ``` 这段代码将把所有以 `http://` 开头的链接文字颜色设置为绿色。 #### 多个样式规则 在 CSS 中，可以为同一个元素应用多个样式规则。例如： ```css p { color: red; font-size: 18px; } ``` 这段代码将把所有 `<p>` 元素的文字颜色设置为红色，并将文字大小设置为 18px。 #### 分组选择器 分组选择器（Grouping selectors）允许将多个选择器组合在一起，为它们应用相同的样式。例如： ```css h1, h2, h3 { color: blue; } ``` 这段代码将把所有 `<h1>`、`<h2>` 和 `<h3>` 元素的文字颜色设置为蓝色。 以上就是关于 CSS 基础知识的详细介绍，包括 CSS 的概念、优势、版本以及常用的选择器和语法。通过学习这些内容，你可以更好地掌握如何使用 CSS 来美化和优化你的网页设计。