【前端学习2】CSS知识点总结(0.1版本)

前言：由于css内容实在是太多，我发现仅凭我一个人根本写不完，于是我会在本文档引用一些外部链接，可以跳转去看其他人的文档。
我现在还在思考怎么去写这个css笔记，它和html不一样,html好总结，所以我会陆续进行修改更新。等我完全完成了这些任务，会发到github上。

接下来我们将要学习css，如果要讲完所有css知识点，对我来说是不可能的，因为css太多了。曾经有本砖头厚的书、记录的全是css，所以我只能总结常用的。css是个博大的学问，具体要实现什么需求时、再具体去学习。不过我会在其他文章记录一些比较流行的css特效。

我建议读者在学习时，自己建个html文件，把我写的css粘贴到里边看效果(博客展示不方便，容易乱，因为我文章用html写的)

css知识点

基础语法

css规则由两个主要部分：选择器和声明，一个生命有一条属性和一个值，属性间用分号隔开。 
1
2
3
4
5
6
<style>
.hljs {
  background: #f5f5f5;
}
</style>
.hljs是选择器，background是属性、#f5f5f5是值

css的引入方式

1.内联样式 直接在标签内部写css语句，如: 
1
<p style="color: red;font-size: 30px;">我是一个段落</p>

缺点是维护成本高，如果是几千行代码，想修改css时得翻找半天，效率低下，一般不建议使用。

2.内部样式
 把样式写到head中的style标签中。这里涉及到元素选择器的知识，以下代码中，p标签和h2标签会受到css影响产生效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>第一个网页</title>
        <style>
            p{
                color: blueviolet;
                font-size: 15px;
            }
            h2{
                color:coral;
            }
        </style>
    </head>
    <body>
        <h2>我是h2标题</h2>
        <p>我是第二个段落</p>
    </body>
</html>

优点上，比内联样式要好很多，可以直接根据标签名使用了。缺点上，感觉还是不太好维护、显得冗杂（我们css一般都要写一大堆的，就这样塞head里不合适）

3.外部样式
这是目前最推荐、也最常用的方法：专门创建后缀为css的文件，在里边写，然后html文件引用。
这里我在同级目录下创建名为style.css的文件，写入

1
2
3
4
5
p{
    color: darkorange;
    font-size: 75px;
}
/*style.css文件 与下面的html位于同一目录下*/

然后在html头部添加语句：

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>第一个网页</title>
        <link rel="stylesheet" href="./style.css">(我们添加的语句)
    </head>
    <body>
        <h2>我是h2标题</h2>
        <p>我是第二个段落</p>
    </body>
</html>

在添加的语句中，rel必须是stylesheet，表示我们引用的是css文件,href填的是我们css文件的本地相对路径。

外部样式表的优点在于：易于维护、方便引用。在做网站时很多人喜欢把css文件直接托管到服务器上，不光自己可以引用、别人也能用。
优先级上，（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

css的选择器

多多少少能找到的选择器，大概有十余种，其中最主要的也就五种。

五大基础选择器


1.元素选择器

会给被标签包裹的元素加上css效果，如示例代码我们给span标签和p标签加了个color属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        span{
            color: red;
        }
        p{
            color: green;
        }
    </style>
</head>
<body>
    <p>边学Unity，边学<span>前端</span></p>
</body>
</html>

2.类选择器
选择器格式为”.+类名”，为当前类下的元素加上css效果：
下面我们定义两个类分别叫“oneclass”和“twoclass”,加上color属性

1
2
3
4
5
6
7
8
9
10
11
12
13
<style type="text/css">
.oneclass/*定义类选择器*/{
    color: red;
}
.twoclass{
    color: green;
}
</style>
</head>
<body>
<h2 class="oneclass">你好</h2>
<p class = "twoclass">我不好</p>
</body>

3.id选择器
规定用#来定义,与类选择器比较像，但它只能用一次，用完就销毁了，把html比作食物，那id选择器就是配套的一次性筷子。

1
2
3
4
5
6
7
8
9
10
11
12
13
<head>
<title>Document</title>
<style type="text/css">
#mytitle
{
    border:3px dashed green;
}
</style>
</head>
<body>
<h2 id="mytitle">你好</h2>
</body>
之后mytitle这个id便销毁了，接下来不能再用了，只能换个id名字。

4.全局选择器
对全局生效的选择器，用*来定义。

1
2
3
4
5
6
7
8
9
10
11
12
<head>
<title>Document</title>
<style type="text/css">
*{
    color: red;
}
</style>
</head>
<body>
<h2>所有标签都得听我的</h2>
<p>无论你是什么标签</p>
</body>

5.合并选择器
和上边的选择器基本一样。只不过可以把多个选择器合并起来，中间用逗号隔开。

1
2
3
4
5
6
7
8
9
10
<style type="text/css">
.oneclass,.twoclass{
    color: red;
}
</style>
</head>
<body>
<h2 class="oneclass">你好</h2>
<p class = "twoclass">我不好</p>
</body>

6.伪元素选择器

在前端开发中，CSS 提供了伪类来定义元素在不同状态下的样式，其中与鼠标交互相关的伪类主要有四个，分别是 :hover、:link、:visited 和 :active。以下是它们的详细说明：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
1. :hover
作用：当鼠标悬停在元素上时，应用该样式。
示例：
css复制
div:hover {
    background-color: yellow;
}
当鼠标悬停在 div 元素上时，背景颜色会变为黄色。
2. :link
作用：定义未被访问过的链接的样式。
示例：
css复制
a:link {
    color: blue;
}
未被访问过的链接会显示为蓝色。
3. :visited
作用：定义已经被访问过的链接的样式。
示例：
css复制
a:visited {
    color: purple;
}
已经被访问过的链接会显示为紫色。
4. :active
作用：定义元素被激活（如鼠标按下）时的样式。
示例：
css复制
button:active {
    background-color: red;
}
当鼠标按下按钮时，背景颜色会变为红色。
5. :focus
除了上述四个与鼠标交互相关的伪类外，还有一个与键盘交互相关的伪类：
:focus
作用：定义元素获得焦点时的样式（例如，通过键盘 Tab 键切换到该元素）。
示例：
css复制
input:focus {
    border: 2px solid green;
}
当输入框获得焦点时，边框会变为绿色。
总结
:hover：鼠标悬停时的样式。
:link：未被访问的链接样式。
:visited：已访问的链接样式。
:active：元素被激活时的样式。
:focus：元素获得焦点时的样式。
这些伪类在设计交互式界面时非常有用，可以帮助开发者为不同的用户交互状态提供更丰富的视觉反馈。

高级选择器


接下来的选择器是比较复杂、高级的（要上难度了，但不算特别重要）

1.属性选择器

我感觉解释起来比较抽象，想起来我们学HTML时的input标签了吗，当时是不是有好多属性。如type、name(忘了的话再重新翻翻看)，我们的属性编辑器就是针对这些的。属性选择器大概可以分为七类: 基本格式是：标签[属性] 1.存在选择器 选择所有具有指定属性的元素，不论其属性值为何。 
1
2
3
p[type] {
  选择p标签下，所有带有 'type' 属性的元素
}

2.完全匹配选择器
选择属性值完全等于指定值的元素，才会启用。

1
2
3
4
[href="https://www.example.com"]
{
  选择href属性值完全等于指定URL的元素
}

3.开始匹配选择器
选择属性值以指定值开头的元素。下例子，href属性以https://开头的才能实现

1
2
3
4
a[href^="https://"]
{
  选择a标签下，href属性值以'https://'开始的元素
}

4.结束匹配选择器
选择属性值以指定值结束的元素。下例子，href属性以.pdf结束的才能实现。

1
2
3
[href$='.pdf'] {
  选择href属性值以'.pdf'结束的元素
}

5.包含匹配选择器
选择属性值包含指定字符串的元素。下例子p标签下的title属性，只要包含hello的都能实现，无论是hello1还是hello2

1
2
3
p[title*='hello'] {
  选择p标签下title属性值包含'hello'字符串的元素
}

6.词匹配选择器
匹配含有特定单词的元素，下例中如果你把active拼错了，那就匹配不了了，这也是他与包含匹配选择器的区别。

1
2
3
[class~='active'] {
  选择class属性值中包含'active'单词的元素
}

7.前缀匹配选择器
选择属性值以指定值开始或者完全等于指定值的元素，主要用于语言代码或者文档类型这样的属性。

1
2
3
[lang|='en'] {
  /* 选择lang属性值以'en'开始或等于'en'的元素 */
}

下面是个简单的示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Attribute Selectors Example</title>
<style>
  /* 存在选择器 */
  [type] {
    color: blue;
  }

  /* 完全匹配选择器 */
  [href="https://www.example.com"] {
    font-weight: bold;
  }

  /* 开始匹配选择器 */
  [href^="https://"] {
    color: green;
  }

  /* 结束匹配选择器 */
  [href$=".pdf"] {
    color: red;
  }

  /* 包含匹配选择器 */
  [title*="hello"] {
    background-color: yellow;
  }

  /* 词匹配选择器 */
  [class~="active"] {
    border: 1px solid black;
  }

  /* 前缀匹配选择器 */
  [lang|="en"] {
    font-style: italic;
  }
</style>
</head>
<body>

<!-- 存在选择器 -->
<input type="text" placeholder="Type something...">

<!-- 完全匹配选择器 -->
<a href="https://www.example.com">Example Domain</a>

<!-- 开始匹配选择器 -->
<a href="https://www.example.com/about">About Example</a>

<!-- 结束匹配选择器 -->
<a href="https://www.example.com/resume.pdf">Resume</a> 

<!-- 包含匹配选择器 -->
<div title="hello world">Hello World</div>

<!-- 词匹配选择器 -->
<div class="container active">Active Container</div>

<!-- 前缀匹配选择器 -->
<p lang="en-US">English Paragraph</p>

</body>
</html>

这些请参考以下文章
伪类选择器、伪元素选择器、组合选择器

CSS背景

CSS 背景属性用于定义HTML元素的背景。 CSS 属性定义背景效果: background-color(定义了元素的背景颜色) background-image(描述了元素的背景图像) background-repeat(设置定位与不平铺) background-attachment(设置图像是否固定、是否随页面滚动) background-position(改变图像在背景中的位置) background-size(设置图像大小) 具体每个属性我建议你自己查，我发现我全写下来根本不现实() 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.example {
  /* 设置背景颜色为浅蓝色 */
  background-color: #add8e6;
  
  /* 设置背景图像为一张图片 */
  background-image: url('https://www.helloimg.com/i/2024/10/08/670526445bc46.jpg');
  
  /* 设置背景图像不平铺 */
  background-repeat: no-repeat;
  常用的就repeat-y,repeat-x了
  
  /* 设置背景图像固定，不随页面滚动 */
  background-attachment: fixed;
  具体参考
  https://blog.csdn.net/m0_60744481/article/details/130582748
  
  /* 设置背景图像的位置在右下角 */
  background-position: bottom right;
  几个英文单词组合，九宫格形式

  /* 设置背景图像大小 */
  background-size: 1000px 800px;
  第一个参数填图像长，第二个宽
  background-size: cover;
  cover表覆盖，可能把图片剪切了，以适应屏幕
  contain属性表完整的图片适应屏幕。
}

文字属性

具体参考这里 text-align: center/right/left;设置文字居中方式 text-decoration: underline(上划线);overline(下划线);line-through(定义删除线); text-transform: captialized(每个单词开头大写);uppercase(全部大写);lowercase(全部小写); text-indent: 50px;设置文字首行缩进;

表格属性 
1
2
3
4
5
6
7
8
9
10
11
12
为表格添加边框，第一个值为边框大小，第二个为实线/虚线，第三个是边框颜色。
加了td后就是每个td标签、单元格都实现这种效果
tabel,td{
  border: 1px solid red;
}
border-collapse: collapse;（边框折叠，把双边框变成单边框。）
width和height: 设置表格宽高
text-align: 设置文字左右对齐方式，right left center
vertical-align: 设置文字垂直对齐方式，top bottom center
padding: 20px;设置表格文字与上下左右四个边框的距离
background-color: 设置背景颜色
color: 设置表格文字颜色

盒子模型

因为其像盒子嵌套，所以叫“盒子模型” 参考菜鸟教程 
1
2
3
4
5
6
padding: 50px 20px;内边距,第一个值上下，第二个值左右
border: 50px;边框
margin: 50px 20px;外边距,第一个值上下，第二个值左右
更高级的用法，分别表示上下左右，
如padding-left，margin-left，表示左
注意border比较特殊，不能border: 50px,20px;

弹性盒子模型

弹性盒子模型适用的场景是，一个大盒子装有好几个小盒子 参考CSDN 
1
2
3
4
5
display: flex;启用弹性盒子模型
flex-direction: row(默认方式，横向从左到右对齐)|row-reverse(从右到左)|column(从上到下纵向排列)|column-reverse(从下到上)
justify-content: flex-start(垂直方向上居上摆放)|flex-end(垂直方向上居下摆放)|center(垂直方向居中)
align-items: 和上边参数一样，表左右方向，start居左，end居右
flex-grow: 1; 适用于子盒子的，子盒子分配比例(语言描述比较抽象，建议实际操作)；

圆角边框

可以写四个参数，左上开始顺时针转 
1
border-radius:length/percent;

盒子阴影

1
2
/* x 偏移量 | y 偏移量 | 以后的可选：阴影模糊半径 | 阴影扩散半径 | 阴影颜色 | 插入方式，inset是内阴影 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

文字阴影

1
text_shadow 2px 2px 模糊距离 颜色;

清除浮动

为什么要清除浮动呢，如果不清除浮动、子元素把父元素高度压成0了，导致父元素罩不住子元素，原来父元素的位置会被其他元素占用。

1.在最后一个“儿子”后加一个div空标签，然后对这个空标签clear:both;
2.父元素加overflow: hidden/auto/scroll;
3.after伪元素
4.双伪元素

定位

定位=定位模式+边偏移

定位：css的position属性来确定，static（静态）、relative（相对）、absolute（绝对）、fixed（固定）
边偏移：top、bottom、left、right
静态定位：标准流。无边偏移，基本不用。

相对定位：字面意思，同时如果移动了、下面盒子不会占有其原来位置

绝对定位：相对于祖先元素来移动的，比如搬家、家长搬孩子也走。

没有父元素、或者父元素没定位，就以浏览器为标准。如果爸爸不行、爷爷可以，以爷爷为标准。

绝对定位是脱离标准流的，和相对定位相反，别人会占了他的位置。子绝父相

固定定位：比如网站常见右侧放的二维码，固定不动、小广告。以可视窗口为参考。
粘性定位（了解）：固定和相对的结合，top、bottom、left、right必须至少有一个

定位叠放次序：z-index:数字

显示和隐藏

display：显示方式，不占用位置，none隐藏、block显示 visiable：显示方式，占用位置，visiable可视hidden隐藏 overflow：溢出，visiable不剪切内容也不加滚动条，hidden超出部分直接隐藏，scroll都加滚动条,auto用最多自动添加滚动条。

CSS高级技巧

精灵图

精灵图是把所有图片融合成一张图，和Unity类似。首先我们创建个盒子、再引入图片,默认图片左上角对齐盒子左上角，通过background-position属性调整图片显示位置。 
1
background: url(images/spirites.png) no-repeat -181px 0;

字体图标

从阿里妈妈、icomoon下载字体图标 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//引入字体文件
<style>
@font-face{
  font-family: '字体名称';
  //引入字体图标填入路径
  src: url('fonts/xxxx);
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

span {
  font-family: '字体名称';
}
</style>

<span>会给你个html，填入里边的特殊图标</span>

css三角制作

首先我们声明个宽高都为0的盒子，只给他border属性

1
2
3
4
5
6
7
8
.box {
  width: 0px;
  height: 0px;
  border-top: 10px solid pink;
  border-bottom: 10px solid green;
  border-right: 10px solid pink;
  border-left: 10px solid pink;
}

然后发现正方形变成一堆三角形组成的了。

于是我们把其它边框都改成透明色，就做出三角形了。

1
2
3
4
5
6
7
.box {
  width: 0px;
  height: 0px;
  border: 10px solid transparent;
  border-top-color: pink;
}
这样有一个朝下的三角形了，border可以改大小，通过子绝父相改位置

鼠标样式

暂且还没讲到自定义图标。 cursor: default/pointer/move/text/not-allowed; 分别是默认、小手、移动十字架、文本、禁止

去掉表单轮廓线和去掉文本域拖拽

两者可以结合，因为我们表单框框，点击时会出现蓝色轮廓线，我们不想要如何去掉呢？ 
1
2
3
input {
  outline: none/0;
}

文本域是可以拖拽的，比如留言框，如何防止？

1
2
3
textarea {
  resize: none;
}

vertical-align

用于设置图片或表单与文字垂直对齐

vertical: baseline(默认，元素放在父元素基线上)/top(与行内最高元素顶端对齐)/middle(父元素中部)/bottom(最低端);

解决图片底部缝隙问题方案

原因是行内块元素与文字基线对齐的。提供两个方案： 1.vertical-align: middle/bottom/top; 2.display: block;

单行文字溢出省略号

必须满足三个条件:

  1. white-space: nowrap;：这行代码强制文本在一行内显示，即使文本超出了容器的宽度也不会自动换行。默认情况下，文本是会自动换行的（normal）。
  2. overflow: hidden;：这行代码将超出容器的部分隐藏起来，不显示在容器外部。
  3. text-overflow: ellipsis;：这行代码在文本溢出时，用省略号（…）来替代超出容器宽度的部分，使得文本在视觉上更加整洁。

多行文本溢出省略号

  1. overflow: hidden;：这行代码用于隐藏超出容器边界的文本。
  2. text-overflow: ellipsis;：这行代码用于在文本溢出时显示省略号（…），提示用户有更多内容。
  3. display: -webkit-box;：这行代码使用WebKit浏览器特有的弹性伸缩盒子模型来显示文本。这种模型允许对文本进行更复杂的布局控制。
  4. -webkit-line-clamp: 2;：这行代码限制在一个块元素内显示的文本行数。在这个例子中，它限制为两行。这是一个非标准的CSS属性，主要用于WebKit内核的浏览器（如Chrome、Safari）和大部分移动端浏览器。
  5. -webkit-box-orient: vertical;：这行代码设置或检索伸缩盒对象的子元素的排列方式。在这里，它设置为垂直排列，意味着子元素将按垂直方向堆叠。

总结来说，这段CSS代码用于在WebKit内核的浏览器或移动端浏览器中处理多行文本溢出时显示省略号的情况。它通过使用弹性伸缩盒子模型和特定的WebKit属性来实现这一效果。

margin负值运用

margin用负值做细边框，通过position: relative配合z-index来实现边框颜色变换。

行内块元素巧用

开发中常用“上一页、下一页”页码块，行内块默认有距离。行内块元素父亲添加Text-align:center; 
1
2
3
4
5
6
7
8
9
10
11
12
13
.box {
    text-align: center;
}

.box a {
    display: inline-block;
    width: 36px;
    height: 36px;
    background-color: #fff;
    border: 1px solid #bbb;
    line-height: 36px;
    text-align: center;
}

CSS直角三角形

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
左和下边框0，上边框调大
.box {
  width: 0px;
  height: 0px;
  border-top: 100px solid transparent;
  border-bottom: 0px solid green;
  border-right: 50px solid pink;
  border-left: 0px solid pink;
}

京东原版写法
{
  width: 0px;
  height: 0px;
  border-color: transparent red transparent transparent;
  border-style: solid;
  border-width: 100px 50px 0px 0px;
}

CSS初始化

为了保证兼容性，比如我们不想要下划线之类的，先写好这些东西。