NecoMiMi > CSS笔记

CSS笔记

2022-04-15

css, 学习笔记

1.CSS基本格式

语法：
选择器{
声明1;
声明2;
声明3;
}

2.CSS的三种导入方式

  1. 直接标签加入style属性；（行内样式）
1
<h1 style="color: red">我是标题</h1>
  1. 用写入；（内部样式）
1
2
3
4
5
<style>
    h1{
        color: #ff0000;
    }
</style>
  1. 创建一个css文件，用于在html5文件中链接css文件；（外部样式）
1
<link rel="stylesheet" href="css/style.css">

==优先级，就近原则，用离代码最近的样式==

1
2
3
4
<!--导入式-->
    <style>
        @import "css/style.css";
    </style>

旧版2.1导入css方式

3.选择器

  1. 标签选择器：选择所有标签 标签{}
1
2
3
4
5
6
7
8
9
h1{
    /*标签选择器，会选择所有的h1标签*/
    color: red;
    background: aqua;
    border-radius: 24px;
    }
    
<h1>一个标签</h1>
<h1>二个标题</h1>
  1. 类选择器：选择一类标签 .class{}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*类选择器格式.class的名称{}
好处可以多个标签归类，是同一个class
*/
.shiyigelei{
    color: red;
}
.shiergelei{
    color: blueviolet;
}


<h1 class="shiyigelei">标题1</h1>
<h1 class="shiergelei">标题2</h1>

  1. id选择器：id全局唯一 #id{}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*id选择器:id必须保证全局唯一
#id名称{}
不遵循就近原则，固定id选择器>class选择器>标签选择器
*/

#dage{
    color: blue;
}
#xiaodi{
    color: deeppink;
}

<h1 id="dage">标题1</h1>
<h1 id="xiaodi">标题2</h1>

==三种选择器不遵循就近原则，固定id选择器>class选择器>标签选择器==

4.层次选择器

  1. 后代选择器
1
2
3
body p{
    background: red;
}
  1. 子选择器，选儿子辈
1
2
3
body>p{
    background: deeppink;
}
  1. 相邻兄弟选择器,只有一个，相邻向下
1
2
3
.active+p{
            background: blueviolet;
        }

4.通用选择器,当前选中元素所有向下的所有兄弟元素

1
2
3
.active~p{
    background: green;
}

5.结构伪类选择器

伪类：条件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/*ul的第一个子元素*/
ul li:first-child{
    background: red;
}

/*ul的最后一个元素*/
ul li:last-child{
    background: green;
}

/*选中p1：定位到父元素，选择当前的第一个元素
选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效*/
p:nth-child(1){
    background: blueviolet;
}

/*选中父元素下的p元素的第二个*/
p:nth-of-type(1){
    background: deeppink;
}

==p:nth-child(x)与p:nth-of-type(x)的区别：第一个是找父元素下第x个元素是否为p，若为p则生效；第二个是找父元素下第x个p元素==

6.属性选择器（常用）

通过属性来查找元素

标签[属性名=属性值]{}
= 代表绝对等于
*=代表包含这个元素
^=以这个开头
$=以这个结尾

7.美化网页元素

1.span标签，需要突出的字用span标签套起来

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #title{
            font-size: 50px;
        }
    </style>
</head>
<body>

欢迎学习 <span id="title">JAVA</span>

</body>

font-size:字体大小
font-family:字体
font-weight:字体粗细
color:字体颜色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
    #title{
        font-size: 50px;
    }
    body{
        font-family: 宋体,"Times New Roman";
        color: darksalmon;
    }
    h1{
        font-size: 50px;
    }
    .p1{
        font-weight: bold;
    }
</style>

2.阴影
text-shadow:阴影颜色，水平便宜，垂直便宜，阴影半径

1
text-shadow: #3cc7f5 1px 10px 10px;

3.超链接伪类

1
2
3
4
5
6
7
8
9
/*鼠标悬浮效果*/
a:hover{
    color: burlywood;
    font-size: 20px;
}
/*鼠标按住效果*/
a:active{
    color: green;
}

4.列表

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
#nav{
    width: 280px; 
    background: whitesmoke;
}
.title{
    font-size: 18px; 
    font-weight: bold; 
    text-indent: 1em; 
    line-height: 35px;
    background: red;
}
/*ul li 选中全部ul li*/
ul li{
    height: 30px;
    list-style: none;
    text-indent: 5px;
}
ul{
    background: whitesmoke;
}
a{
    text-decoration: none; //去掉超链接下划线
    font-size: 14px;
    color: black;
}
a:hover{
    color: orange;
    text-decoration: underline;
}

5.背景

background-repeat:设置背景平铺

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
div{
    width: 1000px;
    height: 2000px;
    border: 1px solid red;
    background-image: url("image/dc3699773912b31b88852444e120.png");
}
/*background-repeat默认不平铺，repeat-x水平平铺，repeat-y竖直平铺*/
.div1{
    background-repeat: repeat-x;
}
.div2{
    background-repeat: repeat-y;
}
.div3{
    background-repeat: no-repeat;
}

6.渐变
渐变色网站https://www.grabient.com/

1
2
background-color: #D9AFD9;
background-image: linear-gradient(100deg, #D9AFD9 0%, #97D9E1 100%);

8.盒子模型

margin：外边距
从左往右 上左下右
margin: 0
margin: 0 1px
margin: 0 1px 2px 3px
margin: 0 1px 2px 3px 4px

padding：内边距（与外边距相同）

border：边框

​ border:粗细，样式，颜色

9.圆角边框

border-radius：设置边框的角

1
2
3
4
5
6
7
8
9
10
11
<!--
左上 右上 右下 左下
-->
<style>
    div{
        width: 100px;
        height: 100px;
        border: 10px solid red;
        border-radius: 50px 20px 10px 0px;
    }
</style>

10.阴影

1
box-shadow: 10px 10px 100px yellow;

右偏移 下便宜 阴影宽度 颜色

11.浮动

标准文档：左边为标准文档格式

2245

块级元素：独占一行

1
h1~h6 p div 列表 ...

行内元素：不独占一行

1
span a img strong ...

行内元素可以被包含在块级元素中，反之，则不可以~

display：
block 块元素
inline 行内元素
inline-block 是块元素，但是也可以内联到一行
none

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
    div{
        width: 100px;
        height: 100px;
        border: 1px solid red;
        display: inline-block;
    }
    span{
        width: 100px;
        height: 100px;
        border: 1px solid green;
        display: inline-block;
    }
</style>

也是一种行内元素摆列的方式，但一般用float

float

1.左右浮动float

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
div{
    margin: 20px;
    padding: 10px;
}
#father{
    border: 1px red solid;
}
/*solid 实线
  dashed 虚线
*/
.layer01{
    border: 1px black dashed;
    display: inline-block;
    float: left;
}
.layer02{
    border: 1px #97D9E1 dashed;
    display: inline-block;
    float: left;
}
.layer03{
    border: 1px #ff0000 dashed;
    display: inline-block;
    float: left;
}
.layer04{
    border: 1px green dashed;
    font-size: 12px;
    line-height: 23px;
    display: inline-block;
    float: left;
}

父级边框塌陷问题

clear

1
2
3
4
clear:right; 右侧不允许有浮动元素
clear:left; 左侧不允许有浮动元素
clear:both; 两侧不允许有浮动元素
clear：none

解决方法：

1、增加父级元素的高度~

1
2
3
4
#father{
    border: 1px red solid;
    height: 800px;
}

2.增加一个空的div标签，清除浮动

1
2
3
4
5
6
<div class="clear"></div>
.clear{
    clear： both;
    margin: 0;
    padding: 0;
}

3、overflow

1
在父级元素中增加一个overflow: hidden

4、父类添加一个伪类：after

1
2
3
4
5
#father:after{
    content: '';
    display: block;
    clear: both;
}

小结：

1.浮动元素后面增加空div

简单，代码中尽量避免空div

2.设置父元素的高度

简单，元素假设有了固定高度，会被限制

3.overflow

简单，下拉的一些场景避免食用

4.父类添加一个伪类：alter（推荐）

写法稍微复杂，但没有副作用，推荐使用。

对比

  • display

    方向不可控

  • float

    浮动起来会脱离标准文档流

12.定位

12.1相对定位
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
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--相对定位
    相对于原来的位置进行偏移
    -->
    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #666;
        }
        #first{
            border: 1px dashed #a31d30;
            background-color: #a31d4f;
            position: relative;/*相对定位，上下移动*/
            top: -20px;
            left: 20px;
        }
        #second{
            border: 1px dashed #D9AFD9;
            background-color: #D9AFff;
        }
        #third{
            border: 1px dashed #66ccff;
            background-color: #66ccf0;
        }
    </style>

</head>
<body>

<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>

相对定位 position：relative;

相对于原来的位置，进行指定的偏移，相对定位的话，它任然在标准文档流中，原来的位置会被保留

1
2
3
4
top: -20px;
left: 20px;
bottom: -10px;
right: 20px;
12.2绝对定位
1
position: absolute;

定位：基于xxx定位，上下左右~

1.没有父级元素定位的前提下，相对于浏览器定位

2.假设父级元素存在定位。我们通常会相对于父级元素进行定位

相对于父级或浏览器的位置，进行指定的偏移，相对定位的话，它不在标准文档流中，原来的位置不会被保留

12.3 固定定位
1
position：fixed;

绝对定位与固定定位的区别：

绝对定位在对于浏览器定位时，位置固定在初始位置。

固定定位定位于浏览器特定位置，应用场景：返回顶部

12.4 z-index
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
#content{
    width: 300px;
    padding: 0px;
    margin: 0px;
    font-size: 12px;
    line-height: 25px;
    border: 1px red solid;
}
ul,li{
    padding: 0px;
    margin: 0px;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tipText,.tipBg{
    position: absolute;
    width: 300px;
    height: 25px;
    top: 188px;
}
.tipText{
    color: white;
    z-index: 1; /*图层层级*/
}
.tipBg{
    background: #000000;
    opacity: 0.5;  /*背景透明度*/
}

z-index：图层层级

opacity：为背景透明度

13.动画

14.总结