CSS3笔记1

【CSS3笔记1】 CSS（Cascading Style Sheets）是一种样式表语言，用于定义HTML或XML（包括如SVG、MathML等各种XML方言）文档的呈现。CSS负责网页的布局和外观，是网页设计中的关键组成部分。 ### CSS的发展历程 自HTML诞生以来，样式起初是通过HTML标签的属性来设置的，但这种方式很快变得复杂且难以维护。1996年，W3C（万维网联盟）发布了CSS1，从此开启了CSS的时代。随着时间的推移，CSS经历了多个版本的更新，CSS2在1998年发布，增加了更多布局和定位功能。而CSS3则是在2001年开始分模块开发，至今仍在不断进化，引入了诸如多背景、渐变、阴影、动画、3D变形等新特性。 ### CSS三大特性 1. **层叠性**（Cascading）：当多个样式规则应用于同一元素时，CSS根据层叠规则决定哪个规则生效。这使得样式可以有优先级，并且方便地进行继承和覆盖。 2. **继承性**：子元素可以继承父元素的一些样式属性，如字体、颜色等，但不是所有属性都可继承，如边距、边框等。 3. **优先级**（Specificity）：CSS的特殊性决定了在层叠中哪些规则更重要。它基于选择器的类型和数量来计算，ID选择器 > 类选择器 > 标签选择器 > 通配符选择器，以及内联样式（最高）。 ### 盒子模型 CSS的盒子模型是理解网页布局的基础，每个HTML元素都可以视为一个矩形的“盒子”，包括内容（content）、内边距（padding）、边框（border）和外边距（margin）。CSS3中的盒模型有两种：标准盒模型（content-box，W3C标准）和IE盒模型（border-box，IE早期版本）。 ### CSS选择器 选择器用于选取HTML元素，包括： 1. **标签选择器**（Element Selectors）：如`p`选择所有的段落元素。 2. **类选择器**（Class Selectors）：使用`.`前缀，如`.class-name`选择所有类名为`class-name`的元素。 3. **多类名选择器**：一个元素可以拥有多个类，如`.class1.class2`同时选择两类的元素。 4. **ID选择器**（ID Selectors）：使用`#`前缀，如`#id-name`选择ID为`id-name`的唯一元素。 5. **伪类选择器**（Pseudo-classes）：如`:hover`选择鼠标悬停时的元素。 6. **结构伪类选择器**（Structural Pseudo-classes）：如`:nth-child(n)`选择父元素的第n个子元素。 ### CSS3新特性 - **多背景**（Multiple Backgrounds）：允许一个元素有多个背景图像，通过逗号分隔。 - **凹凸文字导航栏**：利用CSS3的`text-shadow`和`box-shadow`等属性创建立体效果。 - **颜色半透明**：使用`rgba()`函数设置颜色的透明度。 - **文字阴影**：使用`text-shadow`属性为文本添加阴影效果。 - **CSS3盒模型**：改进了盒模型的计算方式，提供了更好的布局控制。 - **定位**（Positioning）：包括`static`、`relative`、`absolute`、`fixed`四种定位方式，以及`z-index`控制层叠顺序。 - **CSS3动画**（Animations）：通过`@keyframes`规则创建复杂的动画效果。 ### 图像处理 在网页设计中，Photoshop是常用的图像处理工具，用于创建、编辑和优化图像。了解基本操作、图层管理、切片工具等对于前端开发非常重要。 ### 总结 本篇笔记主要介绍了CSS3的基础概念、发展历史、核心特性以及选择器和布局相关的知识。通过学习，你可以更好地掌握网页设计的外观控制和布局策略，为创建美观、响应式的网页奠定基础。随着CSS3的不断发展，更多的新特性将带来更多可能，为网页设计带来无尽的创新空间。