花生_TL007

这个屌丝很懒，什么也没留下！

热门标签

CSS入门超详细_css教程

作者：花生_TL007 | 2024-02-25 13:34:52

踩

css教程

CSS

一基础认知

1.1：css的介绍

css：层叠样式表

css作用：给页面中的HTML标签设置样式

1.2css语法规则

写在哪里

css写在style标签中，style标签一般写在head标签里面，title标签下面

样式：

选择器{

属性名:属性值;

}

1.3css初体验

常见属性：

color：文字颜色

font-size:字体大小

background-color:背景颜色

width:宽度

height：高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            color: red;
            font-size: 30px;
            background: skyblue;
            width: 300px;
            height: 50px;
        }
    </style>
</head>
<body>
<p>hello world</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

注意点：

css标点符号都是英文转态下的
每一个样式键对写完后，都需要写分号

2.1：css引入方式

内嵌式：css写在style标签中，通常约定写在head标签中，作用于小案例
外联式：css写在一个单独的.css文件中，需要通过link标签在网页中引入，作用于项目中
行内式：css写在标签的style属性中，之后配合js使用

二：基础选择器

1.1：选择器的作用

选择页面中对应的标签，方面后续设置样式

1：标签选择器

结构：标签名{

css属性名:属性值;

}

作用：通过标签名，找到页面中所有这类标签，设置样式

注意点：

标签选择器选择的是一类标签，而不是单独一个
标签选择器无论嵌套关系有多深，都能找到对应标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            color: red;
        }
        div{
            color:blue;
        }
    </style>
</head>
<body>
    <p>我是一个p标签</p>
    <p>我也是一个p标签</p>
<div>我是一个div标签</div>
<div>我也是一个div标签</div>
<div>
    <div>
        <div>
            <div>
                <p>躲猫猫</p>
            </div>
        </div>
    </div>
</div>
</body>
</html>
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

效果：

2：类选择器

结果：

.类名{

css属性名:属性值;

}

作用：通过类名，找到页面中所有带有这个类名的标签，设置样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .red{
            color: red;
        }
        .big{
            font-size: 30px;
        }
        .yellow{
            color: yellow;
        }
        .pink{
            color: pink;
        }
    </style>
</head>
<body>
<p class="red big">小红</p>
<p class="yellow">小黄</p>
<p class="pink">小粉</p>
<p class="red">我也要变红</p>
</body>
</html>
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

效果

注意点：

所有标签上都有class属性，class属性是属性值称为类名
类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
一个标签可以同时有过个类名，类名之间以空格隔开
类名可以重复，一个类选择器可以同时选中多个标签

3：id选择器

结构：#id属性值{

css属性名:属性值;

}

作用：通过id选择器，找到页面中带有这个id属性值的标签，设置样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #red{
            color: red;
        }
        #green{
            color: green;
        }
    </style>
</head>
<body>
<p id="red">红果果</p>
<p id="green">绿泡泡</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

注意点

所有标签都有id属性
id属性类似于身份证号码，在一个页面中是唯一的，不可重复的！
一个标签上只能有一个id属性
一个id选择器只能选中一个标签

补充，类和id的区别

class相当于姓名，可以重复,以.开头
id属性值相当于身份证号码，不可重复，一个标签只能有一个id选择器,以#开头
类选择器用的最多（冗余代码的提取），id选择器配合js使用，除特殊情况，不使用id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .common{
            color: red;
            font-size: 30px;
        }
    </style>
</head>
<body>
<p class="common">我要变大，变红</p>
<div class="common">我也要变大，变红</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

4：通配符选择器

结构：

css属性名:属性值;

}

作用：找到页面中所有的标签，设置样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            color: indianred;
        }
    </style>
</head>
<body>
<p>小花</p>
<h1>我是标题1</h1>
<span>我是span标签</span>
<div>我是div选择器</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

注意点

开发中使用极少，只有在特殊情况下才会用到
在基础小页面中可能会用于去除标签默认的margin和padding

三：字体与文本样式

1：字体大小

属性名：font-size

取值：数字+px（像素点）

注意点：

谷歌浏览器默认文字大小是16px
单位要设置，否则无效

2：字体粗细

属性名：font-weight

取值：

关键字：

正常：normal

加粗：bold

纯数字：100到900的整百数

正常：400；

加粗：700

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .boldone{
      font-weight: bold;
    }
    .bold01{
        font-weight: 700;
    }
  </style>
</head>
<body>
<p class="boldone">我是一个p标签</p>
<p class="bold01">我也是一个p标签</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

注意点：

不是所有字体都提供了九种粗细，因此部分取值页面中无变化
实际开发中以：正常，加粗二种取值使用最多

3：字体样式（是否倾斜）

属性名：font-style

取值：

正常：normal
倾斜：italic

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .italic{
            font-style: italic;
        }
    </style>
</head>
<body>
<p class="italic">我是一个p标签</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

4:常见字体系列

无衬线字体（sans-serif）

特点：文字笔画粗细均匀，并且首位无修饰

常见：网页中大多采用无衬线字体

衬线字体（serif）

特点：文字笔画粗细不匀，并且首尾有笔锋修饰
场景：报刊书籍中应用广泛

等宽字体（monospace）

特点：每个字母后文字的宽度相等

场景：一般用于程序的编写，有利于代码的阅读和编写

5：字体系列

属性名：font-family

常见取值：具体字体1，具体字体2，具体字体3，字体系列

渲染规则：

从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体

如果都不支持，会根据操作系统，显示最后系列的默认字体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    p{
        font-family:苹方,微软雅黑,sans-serif;
    }
  </style>
</head>
<body>
<p>我是一个p标签</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

macOs:苹方

Windows：微软雅黑

注意点：

如果字体名称中存在多个单词，推荐使用引号包裹
最后一项字体系列不需要引号包裹
网页开发中，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示

6：样式的层叠问题

问题：给一个标签设置了多个相同的样式，此时浏览器如何渲染

结果：最下面的样式会生效，就近原则，因为浏览器是从上往下解析的。

7：字体font相关属性的连写

属性名：font

取值：font：style weight size family

顺序要求：swsf（稍微舒服）

省略要求：只能省略前二个，省略了相当于设置了默认值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    p{
      font: italic bold 30px 隶书,楷书,sans-serif ;
    }
  </style>
</head>
<body>
<p>我是一个p标签</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

注意点：如果需要同时设置单独和连写形式

要么把单独的样式写在连写的下面

要不吧单独的样式写在连写的里面

四：字体和文本样式

1：文本缩进

属性名：text-indent

取值：

数字+px
数字+em（推荐，1em=当前标签的font-size的大小）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p
            text-indent: 2em;
        }
    </style>
</head>
<body>
<p>啦啦啦我是卖报的小画家，滴滴滴，我是敲代码的小笨蛋</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2:文本水平对齐方式

属性名：text-align

取值

left：左对齐

center：局中对齐

right：右对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .box{
        width: 400px;
        height: 400px;
        background-color: skyblue;
        text-align: center;
    }
</style>
<body>
<div class="box">
 我是一行文本
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

注意点：

如果需要让文本水平局中，text-align属性给文本所在标签（文本的父元素）设置

3：文本修饰

属性名：text-decoration

取值：

undeline：下划线（常用）

line-through：删除线（不常用）

overline：上划线（几乎不用）

none：无装饰线（常用）

注意点：

开发中会使用text-decoration:none;清除下划线

4:水平局中方法总结

text-align:center能让那些元素水平局中

1：文本

2：span标签，a标签

3：input标签，img标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .box{
        width: 400px;
        height: 400px;
        text-align: center;
    }
    .none{
       text-decoration: none;
    }
</style>
<body>
<div class="box">
    <img src="../resources/image/img.png" alt="">
    <br>
    Xiaomi 12 Pro
    <br>
    全新骁龙八|2k AMOLED屏幕
    <br>
    <a href="https://www.mi.com/mi12pro" class="none">4999起</a>
</div>
</body>
</html>
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

总结：

文本缩进：text-indent：数字+px/数字+em

文本水平：text-align:left/center/right

文本修饰：text-decoration:underline/none

水平局中方法总结：

如果需要div，p，h等大盒子水平局中

可以通过margin:0 auto;实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father{
            width: 400px;
            height: 400px;
            background-color:skyblue;
        }
        .son{
            width:150px;
            height:150px;
            background-color:orange;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
</body>
</html>
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

注意点：

如果需要让div，p，h（大盒子）水平局中，直接给当前元素本身设置即可

margin：0 auto 一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度

4：行高

作用：控制行间距

属性名：line-height

取值：

数字加px
倍数（当前标签font-size的倍数）

应用:

让单行文本垂直局中可以设置line-height：文本父元素的高度
网页精准布局时，会设置line-height：1 可以取消上下间距

注意点：

如果先写行高在设置别的会被覆盖

font：style weight size/line-height family;

5：颜色表示方法

关键字表现法
rgb表示法：rgb（red，green，blue），每项取值为0-255
rgba表示法，a表示透明度，取值0-1,0是完全透明，1完全不透明
十六进制表示法

如果三组中每组数字都相同，每组可以省略只写一个数字

实际开发中会直接提供颜色，不需要前端自己设计

五：案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 800px;
            background-color: wheat;
            margin: 0 auto;
        }
        .box01{
            text-align: center;
        }
        .s1{
            color:#87ceeb;
        }
        .link{
            text-decoration: none;
        }
        p{
            text-indent:2em;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="box01">
        <h1 >
    如何提升自己感知快乐的能力
        </h1>
        <span>2022年03月08日21:24</span>
        <span class="s1">新浪科技</span>
        <a href="#" class="link">收藏文本</a>
    </div>
    <p>责任心一直是一个备受推崇和肯定的品质，不过一项研究发现，人们的尽责性与生活满意度呈显着负相关（Taher et al., 2013），也就是说，责任心越强的人，会越容易不快乐。另一项研究写道，尽责性强的人容易不快乐，可能是因为ta们更执着于想通过自己的力量来改变一些事情，因此当ta们遇到无法依靠个人力量克服的挫折（比如社会问题），会更无助和绝望（Boyce, 2010）。此外，尽责性高的人会更需要从他人给到的正面反馈中获得满足感，而尽责性较低的人正好相反，ta们不是懒惰，只是生活态度较为悠闲、随性，不太追逐世俗的“成功”，只要ta们觉得自己做得还不错，就会感到快乐。所以，我们并不是要鼓励大家做一个尽责性低的人，只是尽责性高的小伙伴可以试着像尽责性较低的人一样，多多关注和给予自己对自己的认可。

    </p>
    <p>生活中我们很少用“耐心”这个词来夸奖一个人，但其实耐心是一个很珍贵的品质，它指的是一个人在面对挫折、逆境或苦难时保持冷静等待的倾向或能力（Schnitker, 2012）。忙碌的我们为了节约时间，可能很久都没体会过耐心的感觉了，而这其实会将我们的情绪逐渐拉向快乐的对立面。一项研究就从对待人际关系的耐心、面对困境的耐心以及对待日常烦恼的耐心三个维度出发，研究了耐心与个人幸福感（包括孤独感、希望感和生活满意度）的关系（Schnitker, 2012）。研究显示，耐心是维持一段良好关系的关键因素，对待人际关系越有耐心的人，越不容易感到孤独。其次，耐心的人在面对挫折时更具备保持冷静应对的能力，ta们更相信自己能等到度过困难的那一天，因此有耐心的人会保有更强的希望感，这会极大地减轻我们在困境中的负面情绪。

    </p>
    <p>宜人性（Agreeableness）是心理学上的“五大人格”之一。宜人性高的人通常会更有亲和力、更友好、更富有同情心；相对的，宜人性较低的人会给人更理性、批判性更强的感觉。研究发现，宜人性越高的人，越容易感到快乐。这确实是因为，宜人性高的人通常来说会更受欢迎，拥有更和谐的人际关系（Simon, 2010）。但好的人际关系所带来的快乐，不仅仅是因为我们的人际环境变得更融洽了，研究者认为，好的人际关系更重要的价值是，更容易获得他人的理解，提升我们与他人沟通的效率，从而更好地交换信息。尤其是在工作中，宜人性高的人，更能获得同事的理解，与他人达成高效的合作。这将会大大提升ta们对工作的满意度。作为一个社畜，工作不闹心，生活自然是更开心啦。

        </p>
    <p>每个人对于自己的思想和感情的接纳程度是各不相同的。一项心理测量研究表明，“接纳”这个人格特质与幸福感有很高的相关性（Catalino et al., 2017）。研究发现，接纳特质高的人每天所感受到的负面情绪会相对更少，因为ta们会更少地进行反刍——不会沉浸在自己的消极情绪以及已发生的糟糕结果中。同时，接纳特质更高的人也会更少地批判自己的想法和感受，当负面情绪出现时，一些人会认为这种体验是不好的或不应该出现的，而接纳特质高的人则允许自己有这些负面的感觉，不会去过度地批判自己。可想而知，一个更少内耗的人，自然更容易感受到生活中点点滴滴的快乐。
</p>
</div>
</body>
</html>
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

效果：

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/141083

CSS入门 超详细_css教程

文章目录

CSS

一基础认知

1.1：css的介绍

1.2css语法规则

1.3css初体验

2.1：css引入方式

二：基础选择器

1.1：选择器的作用

1：标签选择器

2：类选择器

3：id选择器

补充，类和id的区别

4：通配符选择器

三：字体与文本样式

1：字体大小

2：字体粗细

3：字体样式（是否倾斜）

4:常见字体系列

无衬线字体（sans-serif）

衬线字体（serif）

等宽字体（monospace）

5：字体系列

6：样式的层叠问题

7：字体font相关属性的连写

四：字体和文本样式

1：文本缩进

2:文本水平对齐方式

3：文本修饰

总结：

4：行高

5：颜色表示方法

五：案例

CSS入门超详细_css教程