前端基础：CSS总结_前端css

二.CSS

1.CSS是什么

1.1 Cascading Style Sheet 层叠

• 美化网页，表现标准语言，决定网页的表现样式
• 是标记语言，不是编程语言，不能自定义变量，引用等，不具备语法支持
• 操作：字体、颜色、边距、高度、背景图片、网页定位，网页浮动

1.2 发展史

• css1.0
• css2.0 DIV（块）+CSS，html和css结构分离的思想，网页变得简单，便于搜索引擎优化SEO
• css2.1 浮动+定位
• css3.0 圆角，阴影，动画…浏览器兼容性

1.3 缺陷：

• 语法不够强大，无法嵌套书写，模块化开发需要书写重复的选择器
• 没有变量和合理的样式复用机制，使得逻辑相关的属性值必须以字面量的形式重复输出，导致难以维护

1.4 解决方法Vue

• 为减少这部分工作量，使用CSS预处理器的工具，提供缺失的样式层复用机制，减少冗余代码，提高演示代码的可维护性。提高前端在样式上的开发效率
• CSS预处理器：定义一种新的语言，即一种专门的编程语言，为CSS增加一些编程特性，生成CSS 目标文件，开发者使用这种语言进行CSS编码工作。用一种专门的编程语言，进行web页面样式设计，通过编译器转换为css文件，供项目使用
• 常用的CSS预处理器：SASS，基于Ruby通过服务端处理，功能强大，解析效率高。要学习Ruby语言，上手难度高于Less
• Less:基于NodeJs,通过客户端处理，使用简单，功能比sass简单。解析效率低于sass.实际开发中够用，后台人员推荐使用

2.CSS怎么用（快速入门）：推荐结构+样式分离

/*规范<style>可以编写css的代码，每个声明，最号以分号结尾
<style>中间的代码时css代码片段，不同与html*/
/*语法：
选择器{
声明1；
声明2；
声明3}*/
1
2
3
4
5
6
7

2.1 css优势

• 内容和表现分离
• 网页结构表现统一，可以实现复用
• 样式十分丰富
• html+css分离
• 利于SEO，利于被搜索引擎收录（Vue框架网站，不容易被SEO）

2.2 3种导入方式

• 行内样式

<!--优先级，就近原则，离元素越近，选谁，如：内部样式和外部样式位置颠倒-->
<!--行内样式，在标签元素中，编写个style属性，编写样式即可，有多个样式用;间隔-->
<h2 style="color: blueviolet">2号标题</h2>
1
2
3

• 内部样式表
• 外部样式表:方式
• • 链接式：一块渲染后显示出来

<link rel="stylesheet" href="css/demo01style.css">
1

• • 导入式：css2.1 html先出来，效果后渲染

<style>
	@import "css/demo01styletest.css";
	@import url("css/demo01styletest.css");
</style>
1
2
3
4

• 不同点：link和import语法结构不同，前者式html标签，只能放入html源代码中，后者作为css样式，作用引入css样式功能。import需要在

3. CSS选择器（*****）：在浏览器中调试好在复制到css中

作用：选择页面（html页面元素布局可认为是Dom树）上的某一个或某一类元素

3.1 基本选择器

3.1.1 标签选择器：会选择页面上所有这个标签元素

• color: #1b6556; //输入#111112 3位数字，点击左侧的颜色框，可出现色彩板。
  1

3.1.2 类选择器 class：可以多个标签归类，是同一个class,可以复用，跨标签

3.1.3 ID选择器：唯一性，必须保证全局唯一

• 优先级：不遵循就近原则，固定
• id>class>标签

3.2 高级选择器

3.2.1 层次选择器

• 后代选择器：在某个元素的后面，所有代系

//空格
body li p{
    background-color: aquamarine;
}
1
2
3
4

• 子选择器：一代

/*子选择器*/
body>p{
    background-color: #112233;
}
1
2
3
4

• 相邻弟选择器：同辈，只有一个，相邻（向下）

/*相邻弟选择器*/
.p2 + p{
    background-color: #112233
}
<p>P1</p>
<p class="p2">P2</p>
<p>P3</p>
1
2
3
4
5
6
7

• 通用选择器：当前选中元素的"向下"的所有兄弟元素

/*通用兄弟选择器，当前选中元素的"向下"的所有兄弟元素*/
.p2~p{
    background-color: #112233
}
<p>P1</p>
<p class="p2">P2</p>
<p>P3</p>
<ul>
    <li><p>l-p-1</p></li>
    <li><p>l-p-2</p></li>
    <li><p>l-p-3</p></li>
</ul>
<p>P4</p>
<p>P5</p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

3.2.2 结构 伪类选择器：加了条件，过滤

/*ui的第一个子元素*/
ul li:first-child{
    background-color: blueviolet;
}
/*ui的最后一个子元素*/
ul li:last-child{
    background-color: aquamarine;
}
/*选中p1:定位到父元素，选择当前的第一个元素
选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！顺序选择 ~~不分类型，加了逻辑*/
/*p:nth-child(2){
    background-color: antiquewhite;
}*/
/*选中父元素下的p元素的第二个，按类型选*/
p:nth-of-type(1){
    background-color: brown;
}
a:hover{
	background-color: brown;
}

<a href="#">haha</a>      
<h1>h1</h1>
<p>P1</p>
<p>P2</p>
<p>P3</p>
<ul>
    <li>l-p-1</li>
    <li>l-p-2</li>
    <li>l-p-3</li>
</ul>
<p>P4</p>
<p>P5</p>
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

3.2.3 属性选择器（常用）ID+Class结合

.demo a{
    float: left;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-color: antiquewhite;
    text-align: center;
    text-decoration-line: none;
    color: cadetblue;
    margin-right: 30px;
    /*line-height: 50px;*/  /*垂直居中*/
    font: bold 20px/50px Arial;

}
/*标签[属性]  标签[属性名=属性值] 属性值可用正则*/
/*
=是绝对等于
~=/*=是通配元素
^=以开头
$=以结尾
*/
/*存在ID属性的元素  a[] ID只有一个不用带""""*/
/*a[id]{
    background-color: cadetblue;
}*/
/*id=baidu的元素*/
/*a[id=baidu]{
    background-color: aquamarine;
}*/
/*class中有item的元素 class有多个加""*/
/*a[class~="item"]{
    background-color: chartreuse;
}*/
/*a[class*="item"]{
    background-color: chartreuse;
}*/
/*href属性中以http开头的元素*/
/*a[href^=http] {
    background-color: chartreuse;
}*/
/*以com结尾的元素*/
a[href$=com]{
    background-color: chartreuse;
}
<p class="demo">
    <a href="http://www.baidu.org" class="links item first" id = "baidu">a1</a>
    <a href="https://www.baidu.cn" class="links item first" id = "Tencent">b2</a>
    <a href="http://www.baidu.com" class="links first" target="_blank">c3</a>
    <a href="../resource/image/1.jpg" class="links first" title="d4">d4</a>
    <a href="../resource/image/1.png" class="links first" id = "google">e5</a>
</p>
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

4.美化网页（文字，阴影，超链接，列表，渐变…）

4.1 为什么？

• 有效传递页面信息

• 美化网页，页面漂亮，才能吸引用户

• 凸显页面主题

• 提高用户的体验

• span标签：重点要突出的字，使用span套起来，给span加id属性，之后对id加样式

4.2 字体样式

/*  font-weight:字体粗细,bold/900
    color:字体颜色
    font-family:Arial, 楷体;  //中英文多种字体
    font-style: oblique;  //风格斜体
    px
    em //缩进2em两个缩进
    */
1
2
3
4
5
6
7

4.3文本样式

/*
color:颜色单词/RGB16进制。#ff00ff/rgb()。rgb颜色值
rgba(12,12,126,0.5)  a--透明度（0-1）
text-indent: 2em; //首行缩进
 height: 200px;//块高度
line-height: 200px; //行高,单行文字上下居中
行高和块高度一致可以高度居中
text-decoration-line: line-through; //中划线
text-decoration-line: overline;  //上划线
img,span{
    vertical-align: middle;
}
水平对齐要有参照物。a/b
*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14

4.4文本阴影和超链接伪类

/*超链接默认状态，未访问*/
a:link{
    text-decoration-line: none;
    color: chartreuse;
}
/*以访问的状态*/
a:visited{
    color: blueviolet;
}
/*鼠标悬浮状态：重点*/
a:hover{
    color: aqua;
}
/*鼠标点击为释放状态*/
a:active{
    color: antiquewhite;
    font-size: 30px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

text-shadow: cadetblue 20px 20px 2px;
阴影颜色，水平偏移，垂直偏移,阴影半径
1
2

4.5 列表

/*list-style: none;无实心圆
square 实心方块
circle 空心园
decimal 数字
*/
ul li{
    list-style: none;
    text-indent: 1em;
    height: 30px;
}
1
2
3
4
5
6
7
8
9
10

4.6 背景

/*颜色，图片，位置，平铺方式*/
background: darkgray url("../resource/image/向右.svg") 322px 2px no-repeat;

background-repeat: repeat-y;垂直平铺
background-repeat: repeat-x;水平平铺
 background-repeat: no-repeat;不平铺
 
//默认平铺
 background-image: url("../resource/image/下载.svg");
 background-repeat: no-repeat;
 background-position: 362px 10px;
1
2
3
4
5
6
7
8
9
10
11

4.7 渐变：用网站进行搭配

/*径向渐变、圆形渐变*/
background-color: #e9ad00;
background-image: linear-gradient(160deg, #e9ad00 32%, #80D0C7 100%);
1
2
3

5.盒子模型

5.1 啥是盒子模型

margin

padding

border

5.2 边框

• 边框样式，粗细，颜色

/*body总有一个默认的外边距margin: 0，内边距padding: 0;常见操作统一样式
body,ul,h1,a{margin: 0;
padding: 0;}*/
*{
margin: 0;
padding: 0;
text-decoration-line: none;
}
/*border:颜色，粗细，样式*/
#box{
    width: 280px;
    border: #52ACFF 3px solid;
}
h2{
    font-size: 20px;
    height: 20px;
    line-height: 20px;
    background: #80D0C7;
}
form{
    background-color: #e9ad00;
    background-image: linear-gradient(160deg, #e9ad00 32%, #80D0C7 100%);

}
form div:nth-of-type(1) input{
    border: #52ACFF 2px dashed;
}
form div:nth-of-type(2) input{
    border: #e9ad00 2px solid;
}
form div:nth-of-type(3) input{
    border:#52ACFF 5px dotted;
}
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

5.3 外边距：作用居中元素，内边距

• margin: 0 auto;居中要求:外部是块元素，有固定的宽度，否则相对body无边界的空间无法居中

/*border:颜色，粗细，样式
顺时针旋转
上、右、下、左
padding: 10px 20px 15px 25px;
上下、左右
padding: 10px 20px;
上、左右、下
padding: 10px 20px 15px;
*/
/*margin外边距居中元素
上下、左右
margin: 0 auto;*/
#box{
    width: 280px;
    border: #52ACFF 3px solid;
    padding: 0;
    margin: 0 auto;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

• 盒子的计算方式：margin+padding+border+内容宽度=元素大小

5.4 圆角边框

/*border-radius圆角
上，右，下，左，顺时针方向
border-radius: 55px 20px; 上下、左右
圆圈：圆角=半径*/
#content{
    width: 100px;
    height: 50px;
    border: 5px seagreen solid;
    border-radius: 55px 55px 0px 0px;
}
1
2
3
4
5
6
7
8
9
10

<div id="content">

</div>
1
2
3

5.5 阴影

文字阴影
text-shadow: #52ACFF 10px 20px 0.5px;
box-shadow: #52ACFF 10px 20px 0.5px;
1
2
3

#content{
    margin: 0 auto;
    width: 100px;
    height: 100px;
    border: 5px seagreen solid;
    border-radius: 55px;
    /*文字阴影：颜色 偏移X 偏移Y 偏移半径*/
    /*text-shadow: #52ACFF 10px 20px 0.5px;*/
    /*边框阴影：颜色 偏移X 偏移Y 偏移半径*/
    box-shadow: #52ACFF 10px 20px 100px;
     /*使里面元素居中*/
    text-align: center;
    line-height: 100px;
}
img{
    margin: 0 auto
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<div id="content">
    <img src="../resource/image/向下(1).png" alt="">
</div>
1
2
3

6.浮动

6.1 块级元素

h1 p div 列表…

• 行内元素:不独占一行，可以被块级元素包含，反之不可以

span a img strong

6.2 display:是实现行内元素排列的方式，但是大部分情况使用float,还在文档流中

/*display:block块级元素
inline-block:是块元素，但可以内联，在一行
inline：行内元素
none:不显示
*/
1
2
3
4
5

/*将列表元素行转为列，首页菜单栏*/
ul li{
    display: inline-block;
    background: #52ACFF;
    border: #e9ad00 solid 5px;
    border-radius: 10px;
}
<ul>
    <li><p>l-p-1</p></li>
    <li><p>l-p-2</p></li>
    <li><p>l-p-3</p></li>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12

6.3 float:脱离文档流中，可以做其他的事

/*clear: both 两侧清除浮动
clear: left 左侧清除浮动
clear: right 右侧清除浮动
none:可以浮动
*/
1
2
3
4
5

//浮动：将元素脱离文档流，向右排列
float: right;
/*在浮动的基础上打破线性排列，转为块级元素*/
clear: both;
1
2
3
4

6.4 父级边框塌陷问题

• 增加父级元素的高度-包住浮动元素

• 在浮动块内增加空的div，清除两侧浮动

• overflow：溢出

.footer{
    clear: both;
    margin: 0;
    padding: 0;
}
<div id="father">
    <div id="content">
        <img src="../resource/image/向下(1).png" alt="">
    </div>
    <div id="content2">
        <img src="../resource/image/向下(1).png" alt="">
    </div>
    <div class="footer"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

#father{
    border: #52ACFF 3px solid;
    overflow: auto;
}
1
2
3
4

• 父类添加一个伪类：after:过滤

/*相当于添加一个空的div，==手动清除div*/
#father:after{
    content: "";
    display: block;
    clear: both;
}
1
2
3
4
5
6

6.4.2 总结

• 浮动元素后面增加空的div：简单，但代码中尽量避免空的div
• 设置父元素的高度：简单，元素假设有了固定，就会被限制，会超出父级元素
• overflow:简单，下拉的一些场景避免使用，宁愿被切掉，也不要滚动条
• 父类添加一个伪类：after（推荐）写法稍微复杂点，但无副作用推荐使用。不改动原来基础上新增代码

6.5 对比

• display：方向不可控制，在标准文档流，无父级边框塌陷问题
• float：浮动后脱离标准文档流，解决父级边框塌陷问题

7.定位

7.1 相对定位(静态定位。默认)：相对于自己原来的位置进行指定偏移，原位置保留，任然在标准文档流

/*position: relative;相对定位原位置
left:左方向，正值右移动，负值左移动，其他方向同理*/
#first{
    position: relative;
    left: 10px;
}
#second{
    position: relative;
    top: 10px;
}
#third{
    position: relative;
    left: 10px;
    bottom: -20px;
}

<div id="father">
        <div id="first">第一框</div>
        <div id="second">第二框</div>
        <div id="third">第三框</div>
    </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

#father2{
    width: 300px;
    height: 300px;
    padding: 20px;
    border: 2px red solid;
}
a{
    width: 100px;
    height: 100px;
    text-decoration-line: none;
    background: #d971d7;
    line-height: 100px;
    text-align: center;
    display: block;/*变为块元素*/
}
a:hover{
    background: #52ACFF;
}
.a2,.a4{
    position: relative;
    top: -100px;
    left: 200px;
}
.a5{
    position: relative;
    top: -300px;
    left: 100px;
}
<div id="father2">
    <a href="#" class="a1">a1</a>
    <a href="#" class="a2">a2</a>
    <a href="#" class="a3">a3</a>
    <a href="#" class="a4">a4</a>
    <a href="#" class="a5">a5</a>
</div>
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

7.2 绝对定位：基于XX定位，上下左右

• 没有父级元素定位的前提下，相对于浏览器定位
• 假设父级元素存在定位（相对定位），则相对于父元素偏移
• 在父级元素范围内移动。负值：不超过父元素。左右同时为负值，则元素拉伸
• 相对于父级或浏览器位置进行指定偏移，绝对定位时，原位置不保留，不在在标准文档流

#father3{
    width: 500px;
    height: 200px;
    border: #e9ad00 5px solid;
    position: relative;
}
#father3 div{
    border: #52ACFF 2px solid;
    margin: 20px;
}
#first3{
    position: absolute;
    right: 30px;
}

<div id="father3">
        <div id="first3">第一框</div>
        <div id="second3">第二框</div>
        <div id="third3">第三框</div>
    </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

7.3 固定定位：相对于浏览器位置进行指定偏移，固定定位时，原位置不保留，不在在标准文档流

#father4 div{
    border: #52ACFF 2px solid;
    margin: 20px;
}
#father4 div:nth-of-type(1){
    position: absolute;
    bottom: 0px;
    left: 100px;
}
#father4 div:nth-of-type(2){
    position: fixed;
    bottom: 0px;
    left: 100px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

7.4 z-index：最低0，最高无线~999，有定位，才浮起来，才有层级，不然就是平铺概念

• b站缩略图在地址栏可以调宽、高https://i2.hdslb.com/bfs/archive/b539be0b5560e2d6ec044473db7cb00c64db314e.png@64w_40h_1c.webp （64w_40h）

<style>
    #content{
        width: 300px;
        margin: 0;
        padding: 0;
        overflow: hidden;
        /*12/25常用配套大小*/
        font-size: 12px;
        line-height: 25px;
        border: #e9ad00 2px solid;
    }
    img{
        width: 300px;
        height: 50px;
    }
    ul,li{
        margin: 0;
        padding: 0;  /*li中圆点消失在padding: 0*/
        list-style: none;
    }
    /*父级元素相对定位*/
    #content ul{
        position: relative;
    }
    .tipText, .tipBg{
        position: absolute;
        width: 300px;
        top:36px;
        height: 25px;

    }
    .tipText{
        color: #e9ad00;
        /*z-index: 2;*/
    }
    .tipBg{
        background: #112233;
        opacity: 0.5;/*背景透明都0-1*/
        filter: alpha(opacity=50);/*IE8之前浏览器使用0-100*/
    }
</style>

<div id="content">
    <ul>
        <li><img src="../resource/image/1.png" alt=""></li>
        <li class="tipText">集合学习</li>
        <li class="tipBg"></li>
        <li>出版：2022.4.12</li>
        <li>地点：earth</li>
    </ul>
</div>
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

8.网页动画（特效）

下一篇：前端基础-02-JavaScript基础总结