CSS（层叠样式表，Cascading Style Sheets）是用于控制网页内容样式的语言。它与HTML或XML（包括如SVG、MathML或XHTML等变体）协同工作，用来描述文档应该如何呈现给用户。以下是关于CSS的一些基础知识：
1. CSS简介
- CSS的主要作用是设置网页的样式，如字体、颜色、间距和布局等。
- 它使得网页的内容（HTML）和设计分离，这提高了开发效率，并且让维护变得更简单。
2. 引入CSS的方式
有三种主要方式将CSS应用到HTML文档中：
- 内联样式：直接在HTML元素内部使用
style属性定义样式。例如：<p style="color: red;">这是一个段落。</p> - 内部样式表：在HTML文档的
<head>部分使用<style>标签定义样式。例如：<head> <style> p { color: blue; } </style> </head> - 外部样式表：通过
<link>标签链接一个外部的.css文件。这是最常用的方法，有助于代码重用和维护。例如：<link rel="stylesheet" type="text/css" href="styles.css">
3. CSS选择器
CSS选择器用于选中需要应用样式的HTML元素。常见的选择器类型包括：
- 元素选择器：根据元素名称选择，如
p { }会选中所有<p>标签。 - 类选择器：以
.开头，如.classname { }会选择所有class属性包含该值的元素。 - ID选择器：以
#开头，如#idname { }会选择id属性等于该值的元素。 - 后代选择器：用于选择特定父元素下的子元素，如
div p { }会选择所有位于div内的p元素。
4. 常见的CSS属性
- 颜色和背景：
color（文本颜色）、background-color、background-image - 文字格式：
font-family、font-size、font-weight（粗细）、text-align（对齐方式） - 边距和填充：
margin（外边距）、padding（内边距） - 尺寸：
width、height - 边框：
border（可以设置宽度、样式和颜色）
5. 盒模型
在CSS中，每个HTML元素都被视为一个矩形的盒子。这个“盒子”由四个部分组成：内容区域(content)、内边距(padding)、边框(border)和外边距(margin)。
- 内容区域 (
content)：这是放置文本或图片等实际内容的地方。你可以通过width和height属性来控制它的大小。 - 内边距 (
padding)：这是围绕内容周围的透明空间。它可以通过padding属性设置，并且可以分别对上、右、下、左进行独立设置。 - 边框 (
border)：这是一个包围着内边距和内容的边界线。边框的样式、颜色和宽度都可以定制。 - 外边距 (
margin)：这是围绕边框之外的空间，用于分离当前元素与其他元素之间的距离。同样，外边距也可以针对不同的方向进行单独设置。
标准盒模型的总宽度计算公式为：总宽度 = 左右外边距之和 + 左右边框宽度之和 + 左右内边距之和 + width；高度同理。
此外，CSS还提供了一个叫做box-sizing的属性，其值可以是content-box（默认值）或者border-box。使用border-box时，元素的width和height属性将包含内容区、内边距和边框的尺寸，但不包括外边距。
6. 布局
CSS提供了多种方法来创建复杂的页面布局，以下是几种常见的布局方式：
浮动（Floats）
浮动是一种早期用来布局的技术，主要用以让块级元素向左或向右移动，直到它的外边缘碰到包含块或另一个浮动元素的边缘。尽管现在有更先进的布局技术，但在某些场景下，如实现文字环绕图片的效果，浮动仍然很有用。
定位（Positioning）
通过position属性及其值（如static、relative、absolute、fixed），可以精确地定位元素的位置：
static：默认值，元素按照正常的文档流排列。relative：相对于其正常位置进行定位。absolute：相对于最近的已定位的祖先元素进行定位；如果没有这样的祖先元素，则相对于初始包含块（通常是浏览器窗口）。fixed：相对于浏览器窗口固定位置，即使页面滚动也不会改变。
弹性盒子布局（Flexbox）
Flexbox是一个一维布局模型，旨在更好地处理应用中的复杂布局结构。它使得容器能够调整其子元素的高度或宽度，以最优填充可用空间，无论是屏幕变大还是变小。
- 使用
display: flex;将一个容器设置为弹性盒子。 - 通过
flex-direction定义主轴的方向。 justify-content用于沿主轴对齐项目。align-items用于沿交叉轴对齐项目。
网格布局（Grid）
CSS Grid是一种二维布局系统，适用于同时需要行和列的布局设计。它比Flexbox更加灵活，允许我们明确指定网格的行、列以及它们的大小。
- 使用
display: grid;将一个容器设置为网格布局。 grid-template-columns和grid-template-rows定义了网格的列和行的大小。grid-gap定义了网格项之间的间距。- 可以使用
grid-column和grid-row来指定单个网格项占据的列数和行数。
这些布局方式各有特点，适用于不同的场景。理解并掌握它们可以帮助你创建出既美观又功能强大的网页布局。
7.特异性计算规则
CSS选择器的“级别”通常指的是它们的特异性（Specificity），这是一个用来确定哪个CSS规则应该被应用到一个元素上的机制。当多个规则应用于同一个元素时，浏览器会根据选择器的特异性来决定哪一个样式优先应用。以下是关于CSS选择器特异性的详细介绍：
CSS特异性是基于选择器的类型进行计算的，它由四个类别组成，从高到低分别是：
-
行内样式（Inline styles）：直接写在HTML元素的
style属性中的样式。这类样式的特异性最高。 -
ID选择器：以
#开头的选择器，例如#header。 -
类选择器、属性选择器和伪类：包括
.classname（类选择器）、[type="text"]（属性选择器）、:hover（伪类）等。 -
元素选择器和伪元素：如
div（元素选择器），::before、::after（伪元素）。
每个类别都贡献了特异性的值，具体来说，可以将特异性看作是一个四位数的编号（从左至右分别为行内样式、ID选择器、类选择器/属性选择器/伪类、元素选择器/伪元素）。例如，如果一个选择器包含一个ID选择器和两个类选择器，那么它的特异性就是0,1,2,0。
示例
#nav { }的特异性为 0,1,0,0.link { }的特异性为 0,0,1,0div { }的特异性为 0,0,0,1#nav a { }的特异性为 0,1,0,1.navbar .menu > li { }的特异性为 0,0,2,1
其他规则
- 通配符选择器（
*） 和 继承的样式 没有特异性，它们的权重最低。 - 如果两个选择器具有相同的特异性，则后来定义的样式会覆盖先前定义的样式（即源码顺序原则）。
!important声明会覆盖常规的特异性规则，但应谨慎使用，因为它可能会使调试变得更加困难。
理解CSS选择器的特异性对于有效地组织和维护CSS代码非常重要。正确地利用特异性可以帮助你避免不必要的样式冲突，并确保你的设计意图得到准确实现。
