Css学习总结

最新推荐文章于 2023-12-09 03:00:00 发布

Kmugi

最新推荐文章于 2023-12-09 03:00:00 发布

阅读量140

点赞数

文章标签： css 学习 html

本文链接：https://blog.csdn.net/m0_74112520/article/details/131368526

版权

css学习总结

章节目录

1.css语法及简介

2.CSS的工作原理

3.颜色、尺寸、对齐

3.1颜色

3.2尺寸

3.3对齐

4.盒子模型

5.边框与边距

6.定位

7.溢出

8.浮动

9.不透明度

10.组合选择器

11.伪类和伪元素

1 css语法及简介

CSS (Cascading Style Sheets) 是一种用于描述文档样式和外观的计算机语言。它可以控制网页中HTML元素的外观，包括文字的字体、大小、颜色，背景色，边框等等。CSS 将表达文档结构和表现样式分离开来，使得在复杂的应用中，HTML 只需要关注文档的语义结构，而样式和布局则由 CSS 职责处理。

CSS 的语法规则如下：

CSS 规则由选择器和一组声明构成。
选择器通常是 HTML 元素，也可是其他元素，例如文档、ID 或类等。
声明由一个属性和一个值组成。以冒号分隔。
声明之间用分号分隔，一个规则包含多个声明。
注释以 /* 开始，以 */ 结束。

以下是一个简单的 CSS 示例代码：

h1 {
    color: red;
    font-size: 24px;
    background-color: #eee;
}

在上面这个例子中，我们定义了一个规则，它匹配 HTML 中的<h1>标签。规则内包含了三个声明，每个声明包含属性和值，用冒号分隔。注意，声明之间用分号分隔，最后一个声明不需要分号。

整个 CSS 文件由一系列规则和注释组成。一条规则由选择器和一组声明构成。对于单个 HTML 元素，可以有多条规则作用于它，根据优先级算法，规则的优先级可以根据选择器类型以及其权重来计算。

CSS 语法的简明易懂，但深入学习 CSS，需要对选择器、布局以及一些高级特性有更全面的了解。

2.css的工作原理

当浏览器获取 HTML 文件时，它会解析 HTML 文件的内容，然后构建一个 DOM 树。同时，如果 HTML 文件中包含了 CSS 文件链接，浏览器会再次发出请求去获取 CSS 文件。一旦获取到 CSS 文件，浏览器会对该文件进行解析，构建出一棵 CSSOM 树（CSS Object Model），该树与 DOM 树一一对应，用于存储 CSS 文件中的选择器和声明。

当 DOM 树和 CSSOM 树都构建完成后，浏览器会将它们合并成一个 Render 树，并根据 Render 树中每个节点的计算样式，确定每个元素的布局和视觉呈现。

以上是 CSS 的工作流程，整个过程就是通过从 HTML 文件和 CSS 文件内提取数据，解析每个节点的样式，计算出要渲染的元素的视觉表现。

CSS的工作原理决定了它的能力，同时也决定了它的复杂性。由于 CSS 能够优雅地降低 HTML 和 JavaScript 与样式的耦合度，使得大型前端项目的开发和维护变得更加容易，因此它已经成为前端开发中最重要的一个部分之一。

3.颜色、尺寸、对齐

CSS 的颜色，尺寸和对齐是其中的几个基本概念。

3.1 颜色

在 CSS 中，颜色既可以用英文名称表示，也可以用 RGB 值、十六进制值、HSL 值表示。以下是一些例子：

使用英文名称：

p {
  color: red;
}

使用 RGB 值：

p {
  color: rgb(255, 0, 0);
}

使用十六进制值：

p {
  color: #ff0000;
}

还有其他一些方法也可以表示颜色值。此外，还可以使用 transparent 关键字来设置透明度。

3.2 尺寸

在 CSS 中，尺寸可以使用绝对单位（如像素 px、英寸 in 等）或相对单位（如％、em 等）表示。以下是一些例子：

使用像素单位：

p {
  font-size: 20px;
  width: 100px;
  height: 50px;
}

使用相对单位：

p {
  font-size: 1.2em;
  width: 50%;
  height: 50%;
}

3.3 对齐

在 CSS 中，对齐指定元素在页面内的位置。CSS 支持多种对齐方式，如居中对齐、左对齐、右对齐等等。以下是一些例子：

水平居中：

p {
  text-align: center;
}

垂直居中：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

4.盒子模型

CSS 盒子模型是指 HTML 元素所占据的空间，该空间由元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。这些部分可以用 CSS 属性来分别进行设置。

盒子模型每个部分的作用如下：

内容（content）：元素所包含的内容，如文字、图片，可以使用 width 和 height 属性来控制。
内边距（padding）：内容和边框之间的空间，可以使用 padding 属性来控制。
边框（border）：包裹内容和内边距的边框，可以使用 border 属性来控制。
外边距（margin）：位于元素和相邻元素之间的空间，可以使用 margin 属性来控制。

盒子模型中各个部分的大小如下图所示：
在这里插入图片描述

CSS 盒子模型可以继承，一个元素的盒子模型属性可以从其父元素中继承。同时，边框和内边距可以分别应用到元素的四个边（top、right、bottom 和 left）。

5.边框与边距

在 CSS 中，边框和边距是基本的样式属性，可以用于美化和调整 HTML 元素的外观和布局。

边框（border）

边框指的是 HTML 元素的边框，可以通过边框属性设置为实线、虚线或其他样式。常见的 CSS 边框属性包括：

border-style：设置边框的样式，包括 solid、dashed、dotted、double、groove、ridge、inset 和 outset 等。
border-width：设置边框的宽度，可以使用像素（px）、百分比（%）、em 或其他单位进行设置。
border-color：设置边框的颜色，可以使用关键字或 RGB 值和十六进制颜色代码进行设置。

例如，以下 CSS 样式将 h1 元素的边框样式设置为红色、实线，宽度为 2px：

h1 {
  border: 2px solid red;
}

边距（margin）

边距指的是 HTML 元素之间的空白区域。常见的 CSS 边距属性包括：

margin-top：设置元素上边缘与相邻元素的距离。
margin-right：设置元素右边缘与相邻元素的距离。
margin-bottom：设置元素下边缘与相邻元素的距离。
margin-left：设置元素左边缘与相邻元素的距离。
margin：设置所有边距。

例如，以下 CSS 样式将两个 div 元素之间的垂直边距设置为 20px：

div {
  margin-bottom: 20px;
}

边框和边距在页面布局和样式设计中非常重要，正确的使用可以使页面看起来更美观和清晰，所以，对于 Web 开发者来说，熟练掌握这两种属性是必须的。

6.定位

在 CSS 中，定位是一种布局技术，可以让网页元素相对于文档的某个位置进行定位。CSS 支持多种定位方式，包括相对定位（relative）、绝对定位（absolute）、固定定位（fixed）和粘性定位（sticky）。

以下是各种定位方式的简要介绍：

相对定位（relative）

相对定位是基于元素原来的位置进行定位。使用相对定位，元素的位置相对于它在文档流中的原始位置进行定位。元素不会脱离文档流，因此其他元素在文档流中的位置不会因为相对定位而改变。

div {
  position: relative;
  top: 20px; /* 向下偏移20像素 */
  left: 20px; /* 向右偏移20像素 */
}

绝对定位（absolute）

绝对定位是相对于包含它的最近的已定位元素（或文档的初始包含块）的位置进行定位。使用绝对定位，元素会脱离文档流，并且在文档中不再占用空间。如果父元素没有定位，则元素相对于页面的左上角定位。

div {
  position: absolute;
  top: 20px; /* 距离顶部20像素 */
  left: 20px; /* 距离左侧20像素 */
}

固定定位（fixed）

固定定位是相对于浏览器窗口进行定位。在滚动页面时，元素将始终保持在相同的位置。固定定位常用于创建浮动的导航栏或警告栏。

div {
  position: fixed;
  top: 0; /* 距离顶部0像素 */
  left: 0; /* 距离左侧0像素 */
}

粘性定位（sticky）

粘性定位是相对于元素在正常流中的位置和浏览器窗口可视范围的交集来定位的。当元素到达指定的阈值（例如页面顶部）时，元素将变为固定定位，然后留在该位置直到一个新的阈值。

div {
  position: sticky;
  top: 0; /* 距离顶部0像素 */
  left: 0; /* 距离左侧0像素 */
}

7.溢出

CSS 中，溢出（overflow）是控制 HTML 元素内容超出边框范围时的行为方式。当元素的内容超出其边框时，可以使用 overflow 属性设置如何处理溢出内容。

overflow 属性有以下几个属性值：

visible：默认值，内容会突破元素的边框，并会呈现在元素外面或覆盖在其他元素上。
hidden：内容不会突破元素的边框，超出部分会被隐藏。
scroll：添加滚动条，让用户可以滚动显示整个内容。
auto：当内容突破元素的边框时添加滚动条。

例如，以下 CSS 样式将 div 元素内的内容超出元素宽度和高度时添加滚动条：

div {
  overflow: auto;
}

还可以分别设置水平和垂直方向的溢出处理方式，使用 overflow-x 和 overflow-y 属性，分别针对水平方向和垂直方向进行溢出的控制。

8.浮动

在 CSS 中，浮动（float）是一种布局技术，可以将元素向左或向右移动，并允许其他元素环绕它。

使用浮动属性，可以为 HTML 元素创建一个类似于文本环绕图片的效果。当一个元素浮动之后，其他文档的内容会环绕着浮动元素。

浮动属性有三种可取值：left、right 和 none。其中，left 表示将元素向左浮动，right 表示将元素向右浮动，none 表示元素不浮动（默认值）。

以下是一个示例，将一个 div 元素向左浮动：

div {
  float: left;
}

浮动元素会脱离文档流，因此也可能影响周围元素的布局。为了防止浮动元素对页面布局的影响，可以使用 clear 属性来清除浮动元素的影响。clear 属性可以设置以下值：

left：清除左侧浮动元素的影响。
right：清除右侧浮动元素的影响。
both：同时清除左右两侧浮动元素的影响。
none：默认值，不清除浮动元素的影响。

例如，下面的示例清除了浮动元素的影响：

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

9.不透明度

CSS 中，不透明度（opacity）是一种控制 HTML 元素透明度的效果。透明度的值范围从 0（完全透明）到 1（完全不透明），可以使用 opacity 属性来设置元素的不透明度。

以下是一个简单的示例，将一个 div 元素设置为 50% 的不透明度：

div {
  opacity: 0.5;
}

除了 opacity 属性之外，CSS 还提供了另外一个与不透明度类似的属性，即 rgba() 颜色。通过使用 rgba() 颜色，可以在设置元素的颜色时同时设置不透明度。

其中，r、g 和 b 表示颜色的 RGB 值，a 表示元素的不透明度。a 的值范围从 0（完全透明）到 1（完全不透明）。

以下是一个示例，将一个 div 元素设置为红色，并且不透明度为 50%：

div {
  background-color: rgba(255, 0, 0, 0.5);
}

在实际开发中，常常使用不透明度来实现半透明的效果，例如在设计中使用的遮罩效果等。掌握和灵活应用不透明度的相关属性和方法，是 Web 开发中必不可少的技能。

10.组合选择器

在 CSS 中，可以使用组合选择器来选择同时满足多个条件的元素。组合选择器提供了多种不同的方式来选择元素，包括：

后代选择器（Descendant Selector）：通过空格将两个或两个以上的选择器组合在一起，可以选择某个元素内包含的所有符合条件的后代元素。

/* 选择 div 元素内的所有 p 元素 */
div p {
  color: red;
}

子元素选择器（Child Selector）：仅选择某个元素的直接子元素。

/* 选择 div 元素的所有直接子元素 p 元素 */
div > p {
  color: red;
}

相邻兄弟选择器（Adjacent Sibling Selector）：选择紧接着在另一个元素后出现的元素。

/* 选择 class 为 "second" 的元素紧接着在 class 为 "first" 的元素后出现的 p 元素 */
.first + p.second {
  color: red;
}

通用兄弟选择器（General Sibling Selector）：选择在另一个元素后出现的所有元素。

/* 选择 class 为 "second" 的元素在 class 为 "first" 的元素后出现的所有 p 元素 */
.first ~ p.second {
  color: red;
}

以上是 CSS 中可用的组合选择器，它们可以深入地选择元素，使得 CSS 更加精细和高效。

需要注意的是，在复杂的页面中使用组合选择器会影响页面性能，因此建议尽可能使用单个标签选择器来优化页面加载速度。

11.伪类和伪元素

在 CSS 中，伪类和伪元素是用于选择器的关键字，用于更精确地选择和操作 Web 页面中的特定元素。它们不需要在 HTML 中定义，而是通过 CSS 样式来定义。

伪类（Pseudo-class）：用于表示元素在特定状态下的样式。常用的伪类包括：

:hover：当鼠标悬停在元素上时。
:active：当元素被激活（例如鼠标被按下）时。
:visited：用于访问过的链接。
:first-child：第一个子元素。
:last-child：最后一个子元素。
:nth-child(n)：第 n 个子元素，n 可以是一个数字、表达式或关键字。

以下是一个使用伪类选择器设置鼠标悬停时链接颜色的示例：

a:hover {
  color: #FF0000;
}

伪元素（Pseudo-element）：用于表示元素中不存在的虚拟元素，常用的伪元素包括：

::after：在元素之前插入内容。
::before：在元素之后插入内容。
::first-letter：选择元素中的第一个字母。
::first-line：选择元素中的第一行文本。

以下是一个使用伪元素为段落首字母设置特殊样式的示例：

p::first-letter {
  font-size: 2em;
  font-weight: bold;
  color: #0000FF;
}

伪类和伪元素的使用可以大大简化 CSS 代码，提高代码的可读性和维护性。同时，它们也是实现一些炫酷效果的关键所在。需要注意的是，伪类和伪元素选择器通常会增加页面渲染时间，因此应该尽量避免过度使用。

}


2. 伪元素（Pseudo-element）：用于表示元素中不存在的虚拟元素，常用的伪元素包括：

- ::after：在元素之前插入内容。
- ::before：在元素之后插入内容。
- ::first-letter：选择元素中的第一个字母。
- ::first-line：选择元素中的第一行文本。

以下是一个使用伪元素为段落首字母设置特殊样式的示例：

```css
p::first-letter {
  font-size: 2em;
  font-weight: bold;
  color: #0000FF;
}

以上是我在学习 CSS 过程中的一些总结，当然还有很多知识点和细节，需要不断的练习和实践。

Kmugi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Css学习总结

CSS (Cascading Style Sheets) 是一种用于描述文档样式和外观的计算机语言。它可以控制网页中HTML元素的外观，包括文字的字体、大小、颜色，背景色，边框等等。CSS 将表达文档结构和表现样式分离开来，使得在复杂的应用中，HTML 只需要关注文档的语义结构，而样式和布局则由 CSS 职责处理。CSS 规则由选择器和一组声明构成。选择器通常是 HTML 元素，也可是其他元素，例如文档、ID 或类等。声明由一个属性和一个值组成。以冒号分隔。
复制链接

扫一扫