CSS学习总结

雾语wuyu

于 2024-05-18 00:02:00 发布

阅读量1k

点赞数 31

分类专栏：前端学习文章标签： css 学习前端 html

本文链接：https://blog.csdn.net/wuyuplus/article/details/138757009

版权

前端学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这是对近期通过MDN文档学习CSS内容的总结，方便自己回顾和掌握相关知识

前言

CSS（层叠样式表）和html相比，内容较多。因此打算以由大到小的脉络来把握整体CSS的内容。从大到小，依次是整体的CSS概念理论，CSS层叠关系，CSS排版，CSS基本的盒子模型，盒模型内部相关元素，一些常用样式等。随着学习的深入也会进一步修改文章。
在这里插入图片描述

提示：以下是本篇文章正文内容，下面案例可供参考

一、CSS概念理论

1.CSS概述

CSS用一句话来概括，就是用来指定文档如何展示给用户的一门语言——如网页的样式、布局、等等。

h1 {
  color: red;
  font-size: 5em;
}

CSS语法由一个选择器（selector）起头。它选择了我们将要用来添加样式的 HTML 元素。

接着输入一对大括号 { }。在大括号内部定义一个或多个形式为属性（property）—值（value）对的声明。每个声明都指定了我们所选择元素的一个属性，之后跟一个我们想赋给这个属性的值。

冒号之前是属性，冒号之后是值。不同的 CSS 属性对应不同的合法值。在这个例子中，我们指定了 color 属性，它可以接受许多颜色值；还有 font-size 属性，它可以接收许多 size unit 值。

2.CSS组成

CSS有三种应用于文档的方法：外部样式表，内部样式表和内联样式。最常用的为外部样式表。

外部样式表：可以将一个CSS文件链接到多个网页上，也可以用同一个CSS样式表为所有网站确定样式。
使用模板为
<link rel="stylesheet" href="styles.css" />

内部样式表：驻留在html文档内部,对于有多个页面的网站来说，内部样式表是一种不太有效的工作方式。
使用模板为

<!doctype html>
<html >
  <head>
    <style>
      p {
        color: red;
      }
    </style>
  </head>
</html>

内联样式：尽可能避免使用
使用模板为
<h1 style="color: blue;background-color: yellow;border: 1px solid black;">

3.CSS运行

浏览器载入 HTML 文件（比如从网络上获取）。
将 HTML 文件转化成一个 DOM（Document Object Model），DOM 是文件在计算机内存中的表现形式

一个 DOM 有一个树形结构，标记语言中的每一个元素、属性以及每一段文字都对应着结构树中的一个节点（Node/DOM 或 DOM node）。节点由节点本身和其他 DOM 节点的关系定义，有些节点有父节点，有些节点有兄弟节点（同级节点）。例子：

Let’s use:
Cascading
Style
Sheets

P
├─ “Let’s use:”
├─ SPAN
| └─ “Cascading”
├─ SPAN
| └─ “Style”
└─ SPAN
└─ “Sheets”

接下来，浏览器会拉取该 HTML 相关的大部分资源，比如嵌入到页面的图片、视频和 CSS 样式。JavaScript 则会稍后进行处理
浏览器拉取到 CSS 之后会进行解析，根据选择器的不同类型（比如 element、class、id 等等）把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器，将不同的规则（基于选择器的规则，如元素选择器、类选择器、id 选择器等）应用在对应的 DOM 的节点中，并添加节点依赖的样式（这个中间步骤称为渲染树）
上述的规则应用于渲染树之后，渲染树会依照应该出现的结构进行布局。
网页展示在屏幕上（这一步被称为着色）。

二、CSS层叠关系

概述

为什么层叠关系很重要？
我的理解是，CSS和HTML一样，并不是一门很严谨的语言，多个规则能作用于同一个元素却不发生冲突。因此在设计样式的时候就需要了解同时作用时会发生什么。
层叠的规则主要包括：层叠，优先级（specificity），继承和层叠层。前三者在同一样式表中体现，而后者是多个样式表应用在同一网页的规则。

1.层叠，优先级与继承

层叠：一句话概括就是当应用两条同级别的规则到一个元素的时候，写在后面的就是实际使用的规则。（仅在相同优先级下适用）

优先级：不同类型选择器作用于同一元素上属性的优先级不同。
ID选择器>类选择器>元素选择器

两种例外情况：
1.内联样式，即style属性内的样式声明优先于所有普通的样式。
2.！important可以覆盖优先级计算（除非常情况不要使用）

继承：一些设置在父元素上的CSS属性是可以被子元素继承的，如color。
CSS为控制继承提供了五个特殊的通用属性值：
inherit（开启继承）
initial（初始值）
revert（浏览器默认样式）
revert-layer（上一个层叠层中建立的值）
unset（重置为自然值）

2.层叠层

层叠层的使用场景：

1.使用来自多个源的CSS
2.存在冲突的CSS选择器和竞争优先级
3.使用！import时

层叠来源类型：

1.用户代理样式表（浏览器）
2.用户样式表（网站访问者）
3.作者样式表（开发者）

创建层叠层：

1.@layer后跟一个或多个层的名称来声明层。这将创建一个没有分配任何样式的具名层，同时定义层的先后顺序。 例：@layer theme，layout，utilities;

注意：此声明不会更改已经创建层的顺序。目前没有办法重新排序已声明的层。

2.@layer后跟一个标识符+样式。如已经存在指定名称的层，则会将样式添加到先前存在的层中。例：
@layer layout { main { color: #000; } }
@layer { body { margin: 0; } }

注意:匿名只能在创建时指定样式。
后续使用不带层名的 @layer 会创建额外的未命名层；它不会将样式附加到先前存在的未命名层。

3.在层声明（@layer）之外的样式均加入隐含层，此层的优先级高于其他声明层。

4.如果在一个块 @layer at 规则内嵌套另一个块 @layer at 规则，无论是否命名，嵌套的块都会成为一个嵌套层。如果 @import 语句包含层，那么这些层会成为该匿名或具名层中的嵌套层。
向嵌套层添加样式，应用点表示法：@layer example.layout { main { width: 50vw; } }

将其他样式表导入指定层

格式：

@import url("components-lib.css") layer(components);  /*导入具名层*/
@import url("dialog.css") layer(components.dialog);  /*导入嵌套具名层*/
@import url("marketing.css") layer();/*导入匿名层*/

层叠层优先级

例：

@import url(A.css) layer(firstLayer);
@import url(B.css)layer(secondLayer);
@import url(C.css);

优先级从低到高排序：

firstLayer 普通样式（A.css）
secondLayer 普通样式（B.css）
未分层普通样式（C.css）
内联普通样式
动画样式
未分层重要样式（C.css）
secondLayer 重要样式（B.css）
firstLayer 重要样式（A.css）
内联重要样式
过渡样式

怎么理解？
把握几条规则，按照序号顺序依次判断：
1.普通样式<动画样式<重要样式<过渡样式。
2.内联样式>导入样式。
3.将隐藏层视为层叠规则的最后一层。
4.普通样式中，层叠规则有效；重要样式中层叠优先级颠倒。

三、CSS排版

概述

CSS布局方式有很多，在此就去繁就简分为两大类：
1.整体布局
2.盒子与周边元素的布局关系
和1相关的布局技术有display，多列布局，CSS表格布局等。和2相关的有浮动和定位。

不过在这两种技术之前，必须先要熟悉常规流布局模式。即什么都不干之下，网页会如何组织内容。

1.常规流布局

1.块级元素（display:block）会填充其父元素所有的行向空间
2.每个块级元素会在上一个元素下面一指定的外边距另起一行
3.行级元素（display:inline）大小就是其本身
4.行级元素不会另起一行，但当空间不够时溢出的内容将会下移到新的一行。
5.如果两个垂直相邻的元素都设置了外边距并且两个外边距相接触，那么更大的外边距会被保留，小的则会消失——这被称为外边距折叠。外边距折叠仅与垂直方向有关。

2.整体布局技术

这块技术主要分为三块：display相关，多列布局，响应式布局。

display相关

CSS display属性设置元素是否被视为块级或行级盒子以及用于子元素的布局
display常用5种属性值
display:block
display:inline-block
display:none
display:flex
display:grid
与布局相关的为后两种属性，前三种主要规定元素的外部显示类型，因此不在关注之列。

1.弹性盒子

定义一个弹性盒子：section { display: flex;}
在这里插入图片描述

主轴（main axis）是沿着 flex 元素放置的方向延伸的轴。
交叉轴（cross axis）是垂直于 flex 元素放置方向的轴。
设置了 display: flex 的父元素被称之为 flex 容器。
在 flex 容器中表现为弹性的盒子的元素被称之为 flex 项（flex item）。

弹性盒子常用属性：

flex-direction:column; 指定主轴的方向
flex-wrap: wrap; 换行，任何溢出都会向下移动到下一行

flex-flow: column wrap; 前两个属性的缩写
flex:1; 控制flex项占用空间比例
align-items:center; 控制子元素在交叉轴的对齐
justify-content:space-around;沿着主轴分配内容元素和周围的空间
order: 1;改变flex布局位置而不影响到源顺序

2.网格

定义一个网格：.container {display: grid;}
在这里插入图片描述

与弹性盒子不同的是，在定义网格后，网页并不会马上发生变化。因为 display: grid 的声明只创建了一个只有一列的网格，所以子项还是会像正常布局流那样，自上而下、一个接一个的排布。
网格常用属性：

 grid-template-columns: 200px 200px 200px;给网格加列
 grid-template-columns: 1fr 1fr 1fr;用 fr 这个单位来灵活地定义网格的行与列的大小
 grid-template-columns: repeat(3, 1fr);repeat重复构造
 grid-column-gap:10px;定义列间隙
 grid-row-gap:10px;定义行间隙
 grid-gap:10px;同时定义两者间隙

grid-auto-rows:minmax(100px,auto);手动设置隐式网格轨道大小
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));综合使用
grid-column: 1 / 3;从一列开始，第三列结束。往网格放置元素
grid-row:1;
grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";另一种网网格放元素的方式

多列布局

定义多列布局：.container { column-count: 3;}
在这里插入图片描述
多列布局常用属性：

column-count:3;创建指定数量的列
column-width:200px;设置列宽
column-gap:20px;改变列间间距
column-rule:4px dotted rgb(79,185,277)加入分割线
break-inside:avoid;防止多列折断

响应式设计

响应式网页设计的概念（responsive web design，RWD），RWD 指的是允许 Web 页面适应不同屏幕宽度因素等，进行布局和外观的调整的一系列实践
响应式设计为三种技术的混合使用

液态网格（前文所提排版技术，使用相对单位）
液态图像（max-width=100%）
媒体查询

媒体查询语法：

@media media-type and (media-feature-rule) { /* CSS rules go here */ }

media-type类型：all；print；screen；speech
media-feature-rule:一条规则指向一种媒体特征,为条件语句
常用媒体特征：
max-width
min-width
orientation:landscape（屏幕横放）
hover：hover（测试用户是否能在一个元素上悬浮）
and,not,or（与或非）

3.第二类布局技术

浮动

float 属性最初只用于在成块的文本内浮动图像，但是现在它已成为在网页上创建多列布局的最常用工具之一。浮动元素处于正常文档流之外
定义浮动：
float:left(right)

浮动常用属性：

margin-right:15px;设置元素右边距
margin:15px；设置元素上下左右四边距
clear:left; 清除左浮动，不让剩余元素收浮动影响
overflow:auto;清除浮动元素周围的盒子

定位

定位解决不同元素之间如何交互的问题。
要使用某个元素上的特定类型的定位，使用postion属性
定位共有5种类型，下面依次介绍。

静态定位
position:static;
position的默认值，意味着将元素放入它在文档布局流中的正常位置
相对定位
position:relative
初始状态与静态定位相同，搭配top,bottom,left,right等关键字一起使用。如指定top:30px;一个力推动框的顶部，使它向下移动30px。
绝对定位
position：absolute;
绝对定位的元素不再存在于正常文档流布局之中。相反，它坐在它自己的层独立于一切。
当绝对定位元素出现重叠时，遵循层叠原理，后定位的元素将堆叠在先定位的元素上方。也可使用z-index:1；更改堆叠顺序
固定定位
position:fixed;
与绝对定位的工作方式完全相同，但固定定位元素则是相对浏览器视窗本身。这意味着能创建固定的有用的UI项目，如持久导航菜单。
相对+固定混合体
position:sticky
它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点（例如，从视口顶部起 10 像素）为止，此后它就变得固定了。例如，它可用于使导航栏随页面滚动直到特定点，然后粘贴在页面顶部。不常用。

四.CSS盒子模型

概述

盒子模型是CSS内容中最重要的一部分，在 CSS 中，所有的元素都被一个个的“盒子”包围着，理解这些“盒子”的基本原理，是我们使用 CSS 实现准确布局、处理元素排列的关键。

1.盒子类型

在上面已经略有提及，通过display属性为盒子设置类型。一般将盒子分为两种类型，一般区分为区块盒子（block boxes）和行内盒子（inline boxes）除此之外，每个盒子均有两种属性，内部显示（inner display type）和外部显示（outer display type）
它们体现了盒子在页面流的行为方式与页面上其他盒子的关系。

内部显示在默认情况下，盒子内的元素以标准流的方式布局，除非设置display:flex，此时外部显示体现出区块盒子的特征，但内部子代都将成为弹性项，按照弹性盒子的规范执行，

区块盒子（block）

盒子会换行
width和height属性可以发挥作用
内边距，外边距和边框会将其他元素从当前盒子周围”推开“
如果未指定width，方框将沿行向扩展，以填充其容器中的可用空间。咋爱大多数情况下，盒子会变得与其容器一样宽，占据可用空间的100%
某些HTML元素，如<h1>和,默认使用block作为外部显示类型。

行内盒子（inline）

盒子不会产生换行
width和height属性将不起作用
垂直方向的内边距，外边距以及边框会被应用，但是不会把其他处于inline状态的盒子推开。
水平方向的内边距，外边距以及边框会被应用且会把其他处于inline状态的盒子推开
某些HTML元素，如<a>,,默认使用inline作为外部显示类型。

特殊盒子（inline-block）

它提供了介于 inline 和 block 之间的中间位置。如果不希望项目换行，但又希望它使用 width 和 height 值并避免出现上述重叠现象，请使用它。

一个元素使用 display: inline-block，实现我们需要的块级的部分效果：

设置 width 和height 属性会生效。
padding、margin 和 border 会推开其他元素。

不过，它不会换行，只有在明确添加 width 和 height 属性后，才会变得比其内容大。

2.盒模型

标准盒模型

在这里插入图片描述

content：内容盒子，使用inline-size和block-size或width和height等属性确定其大小。
padding：内边距盒子，填充位于内容周围的空白处
border:边框盒子，包住内容和任何填充
margin:外边距盒子，作为该盒子与其他元素之间的空白。

盒子占用空间计算
宽：width+(padding+border)*2
高：height+padding+border)*2

替代盒模型

定义：box-sizing:border-box;

在这里插入图片描述
盒子实际占用空间在行项为width，块项为height。

3.盒模型元素简介

外边距（margin）

外边距是盒子周围一圈看不到的空间。它会把其他元素退推离盒子。外边距属性值可以为正也可以为负。在盒子一侧设置负值会导致盒子和页面上的其他内容重叠。无论使用标准模型还是替代模型，外边距总是在计算可见部分后额外添加。

我们可以使用 margin 属性一次性控制一个元素的所有外边距，或者每边单独使用等价的普通属性控制：

margin-top
margin-right
margin-bottom
margin-left

根据外边距相接触的两个元素是正边距还是负边距，结果会有所不同：

两个正外边距将合并为一个外边距。其大小等于最大的单个外边距。
两个负外边距会折叠，并使用最小（离零最远）的值。
如果其中一个外边距为负值，其值将从总值中减去。

边框（bording）

为边框设置样式时，有大量的属性可以使用——有四个边框，每个边框都有样式、宽度和颜色，我们可能需要对它们进行操作。

可以使用 border 属性一次性设置所有四个边框的宽度、颜色和样式。

欲分别设置每边的属性，可以使用：

border-top
border-right
border-bottom
border-left

欲设置所有边的宽度、样式或颜色，可以使用：

border-width
border-style
border-color

欲设置单条边的宽度、样式或颜色，可以使用最细粒度的普通属性之一：

border-top-width
border-top-style
border-top-color

内边距（padding）

内边距位于边框和内容区域之间，用于将内容推离边框。与外边距不同，内边距不能为负数。任何应用于元素的背景都会显示在内边距后面。

我们可以使用 padding 简写属性一次性控制元素所有边，或者每边单独使用等价的普通属性：

padding-top
padding-right
padding-bottom
padding-left

4.选择器

下面介绍各种类型的选择器

类型选择器
在文档中选择一个 HTML 标签/元素例：h1{}
全局选择器
全局选择器，是由一个星号（*）代指的，它选中了文档中的所有内容（或者是父元素中的所有内容，比如，它紧随在其他元素以及邻代运算符之后的时候）例：*{}
类选择器
类选择器以一个句点（.）开头，会选择文档中应用了这个类的所有物件例：.highlight{}
ID选择器
ID 选择器开头为#而非句点，不过基本上和类选择器是同种用法。可是在一篇文档中，一个 ID 只会用到一次。例：#one{}
存否和值选择器
这些选择器允许基于一个元素自身是否存在（例如href）或者基于各式不同的按属性值的匹配，来选取元素。例[attr]，[attr=value]，[attr~=value]，[attr|=value]
子字符串匹配选择器
这些选择器让更高级的属性的值的子字符串的匹配变得可行。
例：
[attr^=value]，匹配带有一个名为attr的属性的元素，其值开头为value子字符串。
[attr$=value]，匹配带有一个名为attr的属性的元素，其值结尾为value子字符串
[attr*=value]，匹配带有一个名为attr的属性的元素，其值的字符串中的任何地方，至少出现了一次value子字符串。
伪类和伪元素选择器
伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。伪类就是开头为冒号的关键字,伪元素开头为双冒号::，而且常常同时使用。
常用伪类：

:last-child 匹配兄弟元素中最末的那个元素
:only-child 匹配没有兄弟元素的元素
:invalid 匹配诸如的位于不可用状态的元素。
:hover 当用户悬浮到一个元素之上的时候匹配。
:focus 当一个元素有焦点的时候匹配。

常用伪元素：

::after 匹配出现在原有元素的实际内容之后的一个可样式化元素。
::before 匹配出现在原有元素的实际内容之前的一个可样式化元素。
::first-line 匹配包含此伪元素的元素的第一行。

后代选择器
典型用单个空格（" "）字符——组合两个选择器，比如，第二个选择器匹配的元素被选择，如果他们有一个祖先（父亲，父亲的父亲，父亲的父亲的父亲，等等）元素匹配第一个选择器。
子代关系选择器
子代关系选择器是个大于号（>），只会在选择器选中直接子元素的时候匹配。继承关系上更远的后代则不会匹配。
邻接兄弟选择器
邻接兄弟选择器（+）用来选中恰好处于另一个在继承关系上同级的元素旁边的物件。
通用兄弟选择器
如果你想选中一个元素的兄弟元素，即使它们不直接相邻，你还是可以使用通用兄弟关系选择器（~）。

五、常用样式

1.背景与边框

背景background

background-color 属性定义了 CSS 中任何元素的背景颜色。
background-image 属性可以在一个元素的背景中显示一个图像
background-repeat 属性用于控制图像的平铺行为。可用的值是：
- no-repeat——阻止背景重复平铺。
- repeat-x——仅水平方向上重复平铺。
- repeat-y——仅垂直方向上重复平铺。
- repeat——默认值，在水平和垂直两个方向重复平铺。
background-size 属性可以设置长度或百分比值，来调整图像的大小以适应背景。
- cover：浏览器将使图像足够大，使它完全覆盖了盒子区域，同时仍然保持其宽高比。在这种情况下，图像的部分区域可能会跳出盒子外。
- contain：浏览器会将图像调整到适合框内的尺寸。在这种情况下，如果图像的长宽比与盒子的长宽比不同，你可能会在图像的两边或顶部和底部出现空隙。
background-position 属性允许你选择背景图片出现在它所应用的盒子上的位置。这使用了一个坐标系统，其中方框的左上角是 (0,0)，方框沿水平（x）和垂直（y）轴定位。支持的值包括
- 1.top和right之类的关键字
- 2.长度和百分比值

边框border

border：为一个框的所有四条边设置边框
border-top: 为一条边设置边框
border-width: 宽度
border-style: 样式
border-color: 颜色
border-radius 圆角
border-top-right-radius: 1em 10%;

2.单位与大小

单位：
px 像素
em 相对父元素的字体大小
rem 相对根元素的字体大小
vh 相对视窗口的高度
vw 相对视窗口的宽度
如果将元素的字体大小设置为百分比，那么它将是元素父元素字体大小的百分比。如果使用百分比作为宽度值，那么它将是父值宽度的百分比。

width
height
min-
max-

3.图像

图像和视频被描述为替换元素。这意味着 CSS 不能影响它们的内部布局——而仅影响它们在页面上相对于其他元素的位置。
调整图像大小方式：
max-width:100%
object-fit:contain

替换元素在成为网格或者弹性布局的一部分时，有不同的默认行为,不会被自动拉伸。

4.文本和链接

字体样式：
color
font-family 字体种类
font-size 字体大小
font-style 斜体
font-weight 粗体
text-decoration 字体上的文本装饰
text-shadow 文字阴影

文本布局风格：
text-align 文本对齐
line-height 行高
letter-spacing 字母间距
word-spacing 单词间距

链接：
链接存在时处于不同的状态，每一个状态都可以用对应的伪类来应用样式

Link：有目的地的链接（即不只是一个具名锚点） 默认下划线。未访问链接为蓝色。
Visited：已访问过（存在于浏览器历史记录中）的链接。 默认为紫色
Hover：被用户鼠标指针悬停的链接，鼠标指针会变成一个小手图标。
Focus：被选中的链接（比如通过键盘的 Tab 移动到这个链接，或者使用像 HTMLElement.focus() 这样的方法编程地聚焦链接），使用 :focus 伪类来应用样式。
Active：激活（如点击）的链接，使用 :active 伪类来应用样式。活动链接为红色

总结

CSS内容比HTML多，写这些东西也是为了督促自己，总结学习的内容。结果依然还是有些拖延症。立下计划第三篇JavaScript总结在25号之前完成。

雾语wuyu

关注

31
点赞
踩
18

收藏

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

CSS（层叠样式表）和html相比，内容较多。因此打算以由大到小的脉络来把握整体CSS的内容。从大到小，依次是整体的CSS概念理论，CSS层叠关系，CSS排版，CSS基本的盒子模型，盒模型内部相关元素，一些常用样式等。随着学习的深入也会进一步修改文章。
复制链接

扫一扫