10分钟带你学通CSS

CSS：层叠样式表

CSS（Cascading Style Sheets）是一种用于定义网页的样式和布局的语言，它可以控制 HTML 文档中的不同元素的外观、排版、动画等。本文将从 CSS 的基础知识、选择器、盒模型、浮动、定位、布局等多个方面讲解这门语言的相关知识。

基础概念

样式表

在 HTML 中，我们使用标签来定义文档的结构和内容，比如 <p> 表示段落，<h1> 表示标题等。而 CSS 则是用来控制这些 HTML 元素的样式和布局的。

CSS 样式表可以放在 HTML 文档的头部部分（head）或者外部文件中，它由一系列声明组成，每个声明由一个属性和一个属性值组成，并用花括号 {} 包含。一个简单的样式声明如下：

p {
  color: red;
}

其中，p 是选择器，表示选择所有的 <p> 元素；color: red; 是声明块，指定了 <p> 元素的颜色样式为红色。多个声明可以在同一个选择器下同时设置：

p {
  color: red;
  font-size: 14px;
  font-family: Arial, sans-serif;
}

层叠和优先级

CSS 样式表中的规则是可以相互覆盖和继承的，这就是所谓的“层叠（cascading）”特性。当多个样式规则应用到同一元素上时，浏览器会按照优先级（specificity）、来源（origin）和后来居上的原则来确定最终的样式。

• 优先级：选择器的特定性越高，优先级越高。选择器特定性的计算方法为：id 选择器计为 100，class、属性选择器和伪类选择器计为 10，标签选择器和伪元素选择器计为 1。例如，#content p.intro 选择器的特定性为 101（一个 id 选择器和一个标签选择器）。
• 来源：内联样式优先级最高，其次是 ID 选择器，再次是类、属性和伪类选择器，最后是元素选择器和伪元素选择器。
• 后来居上：当多个相同的选择器指向同一个元素时，后面的规则会覆盖前面的规则。

下面是一个简单的优先级示例：

/* 这里的选择器特定性为 1（标签选择器） */
p {
  color: red;
}

/* 这里的选择器特定性为 11（一个类选择器） */
.intro {
  color: blue;
}

/* 这里的选择器特定性为 101（一个 id 选择器和一个标签选择器） */
#content p.intro {
  color: green;
}

在这个例子中，如果一个元素既带有 .intro 类，又属于 #content 元素，那么最终的颜色样式将是绿色。否则，优先级高的规则会覆盖优先级低的规则。

选择器

CSS 选择器用于指定要应用样式的 HTML 元素，它可以根据元素的类型、属性、位置等条件筛选出一组元素，并对这些元素应用相应的样式。

基本选择器

• 标签选择器：通过 HTML 标签名进行选择。例如，p 选择所有的 <p> 元素。
• 类选择器：通过元素的 class 属性进行选择。例如，.intro 选择所有带有 class="intro" 属性的元素。
• ID 选择器：通过元素的 id 属性进行选择。例如，#content 选择所有带有 id="content" 属性的元素。
• 通配符选择器：选择所有的元素。例如，* 选择所有元素。

层次选择器

• 后代选择器：选择某个元素下的所有后代元素。例如，div p 选择所有在 <div> 元素内的 <p> 元素。
• 直接后代选择器：选择某个元素下的直接子元素。例如，div > p 选择所有是 <div> 元素的直接子元素的 <p> 元素。
• 兄弟选择器：选择某个元素之后的兄弟元素。例如，h1 + p 选择所有紧接着 <h1> 元素之后出现的 <p> 元素。
• 通用兄弟选择器：选择某个元素之后所有的兄弟元素。例如，h1 ~ p 选择所有在 <h1> 元素之后的 <p> 元素。

属性选择器

• 存在选择器：选择带有指定属性的元素。例如，[class] 选择所有带有 class 属性的元素。
• 精确匹配选择器：选择属性值完全等于指定值的元素。例如，[class="intro"] 选择所有 class 属性值为 “intro” 的元素。
• 包含选择器：选择属性值中包含指定字符串的元素。例如，[href*="example.com"] 选择所有 href 属性值中包含 “example.com” 的元素。
• 首部匹配选择器：选择属性值以指定字符串开头的元素。例如，[class^="intro-"] 选择所有 class 属性值以 “intro-” 开头的元素。
• 结尾匹配选择器：选择属性值以指定字符串结尾的元素。例如，[class$="-intro"] 选择所有 class 属性值以 “-intro” 结尾的元素。

伪类和伪元素

• 链接伪类：选择不同状态下的超链接。例如，:link 选择所有未访问的链接；:visited 选择所有已访问的链接。
• 动态伪类：选择元素在不同状态下的样式。例如，:hover 选择鼠标悬停在元素上时的样式；:focus 选择元素获得焦点时的样式。
• 伪元素：选择元素中特定部分的样式。例如，::before 创建一个虚拟元素，在元素之前插入一些内容；::after 在元素之后插入一些内容。

盒模型

CSS 中的每个元素都被构建为一个盒子（box），这个盒子由内容区域、内边距、边框和外边距组成。CSS 盒模型是用于描述这些区域的视觉模型。

• 内容区域：包含了元素的实际内容，也就是元素所呈现的文本、图像等信息。
• 内边距：围绕在内容区域之外的空白区域，用于分离内容与边框的距离。可以通过 padding 属性来控制。
• 边框：围绕着内容区域和内边距的一条线，用于分离元素和其他元素之间的距离。可以通过 border 属性来控制。
• 外边距：围绕在边框之外的空白区域，用于分离元素与元素之间的距离。可以通过 margin 属性来控制。

下图展示了一个简单的 CSS 盒模型：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9yz6PhCB-1681405195712)(https://mdn.mozillademos.org/files/13647/boxmodel.png)]

浮动与定位

浮动和定位是 CSS 中用来对元素进行布局的两个重要机制。

浮动

通过浮动（float）属性，我们可以让元素沿着包含块的左侧或右侧浮动，并且允许其他元素围绕它。浮动元素脱离文档的普通流（normal flow），因此不占用普通流的空间。可以通过 clear 属性来清除浮动。

img {
  float: right;
}

定位

通过定位（positioning）属性，我们可以精确地控制元素在页面中的位置。常见的定位属性包括相对定位（relative）、绝对定位（absolute）和固定定位（fixed）。

相对定位使元素相对于其正常位置进行定位，但不会脱离普通流：

div {
  position: relative;
  left: 50px;
  top: 50px;
}

绝对定位使元素相对于最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于文档进行定位：

div {
  position: absolute;
  left: 50px;
  top: 50px;
}

固定定位使元素相对于浏览器窗口进行定位，即使页面滚动也不会改变元素的位置：

div {
  position: fixed;
  left: 50px;
  top: 50px;
}

布局

CSS 中还有一些常见的布局方式，包括：

• 流式布局：让元素随着窗口大小的改变而自适应调整大小和位置。可以使用百分比、max-width、min-width 等属性来实现。
• 弹性盒子布局：通过 display: flex; 属性启用，可以让元素按一定比例自动调整大小和位置，使得界面更加美观。
• 网格布局：通过 `display: grid｀属性启用，可以将页面划分为网格，并在其中按照需要放置元素。可以通过 grid-template-columns、grid-template-rows 等属性来控制网格的列数、行数和大小。