【前端学习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>

高级选择器


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

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; 适用于子盒子的，子盒子分配比例(语言描述比较抽象，建议实际操作)；

浮动流

float属性，只有left和right,新建一个层级。 清除浮动用clear