前端之CSS初识选择器标签选择器id选择器类选择器通用选择器后代选择器(重要)儿子选择器毗邻选择器兄弟选择器属性选择器组合选择器(重要)CSS属性相关文字属性背景属性边框属性display属性CSS盒子模型浮动overflow定位positionz-index,opacity和模态框
前端之CSS初识
之前我们介绍了ＨＴＭＬ，今天我们就开始介绍ＣＳＳ，我们都知道，ＣＳＳ的作用就是定义如何显示ＨＴＭＬ元素．实际情况是，当浏览器读到一个样式表（也即是ＣＳＳ）时，浏览器就会按照这个样式表来对文档（也就是ＨＴＭＬ）进行格式化（或者说渲染）
每个ＣＳＳ样式都是由两个组成部分：选择器和声明．
1
h1 {color:blue;font-size:14px}
2
选择器 声明 属性 值 声明 值
选择器
标签选择器
x
1
<head>
2
<meta charset="UTF-8">
3
<title>Title</title>
4
<style>
5
div{
6
color: #40A070;
7
}
8
</style>
9
</head>
10
<body>
11
<!--标签选择器,只要是这个标签,都会被选中,无论层级关系-->
12
<div>父亲
13
<div>儿子</div>
14
</div>
15
<div>nihao</div>
16
17
<!--标签的嵌套-->
18
<div>父亲
19
<div>儿子</div>
20
</div>
21
<!--关于标签嵌套,通常块级元素可以包含内联元素或者某些块级元素,但是内联元素不能包含块级元素,它只能包含其他内联元素-->
22
<!--p标签不能包含块级标签,p标签也不能包含p标签,所以下面这种p标签的用法,在实际网页展示的时候网页会自动把里面的内容拿出来-->
23
<p>1111
24
<p>2222</p>3333
25
</p>
26
</body>
id选择器
xxxxxxxxxx
14
1
<head>
2
<meta charset="UTF-8">
3
<title>Title</title>
4
<style>
5
/*选择id的话用 # + a 来选择id*/
6
#a{
7
color: red;
8
}
9
</style>
10
</head>
11
<body>
12
13
<div id="a">nihao</div>
14
</body>
类选择器
xxxxxxxxxx
19
1
<head>
2
<meta charset="UTF-8">
3
<title>Title</title>
4
<style>
5
/*选择类的话用 . + a 来选择类*/
6
.p {
7
color: red;
8
}
9
10
.a {
11
font-size: 40px;
12
}
13
</style>
14
</head>
15
<body>
16
17
<div class="p a">nihao</div>
18
<div class="a">lalalla</div>
19
</body>
通用选择器
xxxxxxxxxx
17
1
<head>
2
<meta charset="UTF-8">
3
<title>Title</title>
4
<style>
5
/*星号就是选择全部,即body里面的所有标签里的内容都会应用这个格式*/
6
*{
7
color: red;
8
}
9
</style>
10
</head>
11
<body>
12
13
<div>111</div>
14
<span>222</span>
15
<p>333</p>
16
17
</body>
后代选择器(重要)
xxxxxxxxxx
27
1
<head>
2
<meta charset="UTF-8">
3
<title>Title</title>
4
<style>
5
/*后代选择器,主要是通过空格来实现后代的选择,通常需要用到id或者class*/
6
div .a {
7
color: red;
8
}
9
.c .a{
10
color: red;
11
}
12
div div{
13
color: #40A070;
14
}
15
</style>
16
</head>
17
<body>
18
19
<!--后代选择器-->
20
<div id="b" class="c">000
21
<div>111</div>
22
<div class="a">222
23
<div>333</div>
24
</div>
25
</div>
26
27
</body>
儿子选择器
xxxxxxxxxx
22
1
<head>
2
<meta charset="UTF-8">
3
<title>Title</title>
4
<style>
5
/*儿子选择器,实现方式是通过>,可以实现从最上级往下寻找,要注意一点的是,color这个属性是会自动继承的,最好不要用来实验*/
6
.a>div{
7
background-color: #3962ff;
8
height: 20px;
9
width: 100px;
10
}
11
</style>
12
</head>
13
<body>
14
15
<!--儿子选择器-->
16
<div class="a">1
17
<div class="b">2
18
<div class="c">3</div>
19
</div>
20
</div>
21
22
</body>
毗邻选择器
xxxxxxxxxx
17
1
<head>
2
<meta charset="UTF-8">
3
<title>Title</title>
4
<style>
5
/*毗邻选择器,实现方式是通过+,注意,只有加号,并没有减号,而且只支持向下相邻选择,不能向上选择*/
6
div + p {
7
color: #40A070;
8
}
9
</style>
10
</head>
11
<body>
12
<!--毗邻选择器-->
13
<p>444</p>
14
<div>111</div>
15
<p>222</p>
16
<p>333</p>
17
</body>
兄弟选择器
xxxxxxxxxx
23
1
<head>
2
<meta charset="UTF-8">
3
<title>Title</title>
4
<style>
5
/*兄弟选择器,实现方式是通过~,也就是可以通过兄弟选择器找到同一级别的所有标签,所以叫兄弟选择器*/
6
span~.a{
7
color: red;
8
}
9
</style>
10
</head>
11
<body>
12
13
<!--兄弟选择器-->
14
<div>
15
<span>span</span>
16
<h1 class="a">h1</h1>
17
<h2 class="a">h2</h2>
18
<p>p</p>
19
<h4 class="a">h4</h4>
20
</div>
21
<p class="a">p1</p>
22
23
</body>
属性选择器
xxxxxxxxxx
21
1
<head>
2
<meta charset="UTF-8">
3
<title>Title</title>
4
<style>
5
/*属性选择器,通过中括号里面写入要选择的属性,类似于字典的key值,依次来选择数据*/
6
div[name]{
7
color: red;
8
}
9
div[name="123"]{
10
color: red;
11
}
12
</style>
13
</head>
14
<body>
15
16
<!--属性选择器-->
17
<div name = "123">div</div>
18
<div name = "456">我是div</div>
19
<div>没有属性的div</div>
20
21
</body>
组合选择器(重要)
xxxxxxxxxx
27
1
<head>
2
<meta charset="UTF-8">
3
<title>Title</title>
4
<style>
5
/*组合选择器,用逗号来同时赋予格式,经常用于和其他选择器联用,日后常用,需牢记*/
6
div, p {
7
color: red
8
}
9
div .b .a, p {
10
color: red
11
}
12
</style>
13
</head>
14
<body>
15
16
<!--组合选择器-->
17
<div>div
18
<div class="b">345
19
<div class="a">123</div>
20
</div>
21
<div class="a">
22
678
23
</div>
24
</div>
25
<p>p</p>
26
27
</body>
CSS属性相关
文字属性
xxxxxxxxxx
1
66
1
<head>
2
<meta charset="UTF-8">
3
<title>Title</title>
4
<style>
5
/*text-align文字对齐的方式
6
left 左对齐
7
right 右对齐
8
center 居中对齐
9
justify 两端对齐
10
*/
11
/*div {*/
12
/* 100px;*/
13
/* background-color: yellow;*/
14
/* text-align: center;*/
15
/*}*/
16
17
/*文字的装饰,特殊效果 text-decoration
18
none 默认
19
underline 文本下划线
20
overline 文本上划线
21
line-through 穿过文本的线
22
*/
23
div {
24
width: 100px;
25
background-color: pink;
26
/*text-decoration: underline;*/
27
/*text-decoration: overline;*/
28
text-decoration: line-through;
29
}
30
31
/*可以手动清除a标签的下划线*/
32
a {
33
text-decoration: none;
34
}
35
36
/*把无序列表前面的点符号去掉*/
37
li {
38
list-style: none;
39
}
40
41
/*缩进,p和div可以,span不可以缩进,因为span是行级标签,所以很多格式都不能适用,但span的字符间距(letter-spacing 像素) 可以调整*/
42
/*p, span, div {*/
43
/* !*缩进*!*/
44
/* text-indent: 32px;*/
45
/* !*字间距*!*/
46
/* letter-spacing: 10px;*/
47
/*}*/
48
49
/*控制行高,仅针对块级标签,行级无效*/
50
div {
51
width: 400px;
52
height: 200px;
53
background-color: yellow;
54
text-align: center;
55
line-height: 200px;
56
}
57
58
59
</style>
60
</head>
61
<body>
62
63
<div>你好呀</div>
64
<a href="">alalala</a>
65
66
<ul>
67
<li>123</li>
68
<li>456</li>
69
<li>789</li>
70
</ul>
71
72
<p>hello world</p>
73
<span>hello world</span>
74
<div>hello world</div>
75
76
</body>
背景属性
xxxxxxxxxx
1
34
1
<head>
2
<meta charset="UTF-8">
3
<title>Title</title>
4
<style>
5
/*背景图片,全填充
6
background-color 设置背景的颜色
7
background-image 设置背景为图片
8
background-repeat 背景图片的重复方式
9
repeat 铺满整个网页
10
repeat-x 水平方向平铺
11
repeat-y 垂直方向平铺
12
no-repeat 不平铺
13
*/
14
/*div {*/
15
/* height: 100px;*/
16
/* background-color: green;*/
17
/* background-image: url("");*/
18
/* */
19
/* !*不要平铺*!*/
20
/* !*这样设置背景的话不会影响文字的显示*!*/
21
/* background-repeat: no-repeat;*/
22
/* */
23
/* !*水平,垂直方向平铺*!*/
24
/* !*background-repeat: repeat-x;*!*/
25
/* !*background-repeat: repeat-y;*!*/
26
/*}*/
27
28
div {
29
height: 100px;
30
width: 100px;
31
background-image: url("");
32
/*两个参数,第一个是左位置,第二个是右位置,通常用来取网页上移动的小图标*/
33
background-position: 200px, 200px;
34
}
35
36
</style>
37
</head>
38
<body>
39
40
<div>lalala</div>
41
42
</body>
边框属性
x
1
<head>
2
<meta charset="UTF-8">
3
<title>Title</title>
4
<style>
5
div {
6
/*控制边框的属性
7
border: 颜色 线条实虚 线条粗细
8
border-top
9
border-left
10
border-bottom
11
border-right
12
border-radius 将其设置为50%可以得到一个圆形
13
*/
14
height: 100px;
15
width: 100px;
16
/*颜色 虚线/实线 线条粗细*/
17
/*
18
solid 实线边框
19
dootted 点状虚线边框
20
dashed 矩形虚线边框
21
*/
22
border: green solid 10px;
23
24
/*可以为单个边设置格式*/
25
/*border-top: green solid 10px;*/
26
27
border-radius: 20%;
28
}
29
</style>
30
</head>
31
<body>
32
33
<div></div>
34
35
</body>
display属性
x
1
<head>
2
<meta charset="UTF-8">
3
<title>Title</title>
4
<style>
5
/*div {*/
6
/* !*要把标签内内容隐藏设置成none*!*/
7
/* !*display: none;*!*/
8
9
/* !*把块级标签转换成行内标签,即内容可以同行*!*/
10
/* display: inline;*/
11
/*}*/
12
13
/*span {*/
14
/* !*把行级标签转换成块级标签,然后就可以设置宽和高*!*/
15
/* display: block;*/
16
/* height: 200px;*/
17
/* 349px;*/
18
/* background-color: orange;*/
19
/*}*/
20
21
.a {
22
width: 400px;
23
height: 300px;
24
background-color: green;
25
/*visibility: hidden这种隐藏方式和none不同,即便隐藏还会占据原位置,而none不会,none是完全隐藏,不会占据位置*/
26
visibility: hidden;
27
}
28
29
.b {
30
width: 400px;
31
height: 300px;
32
background-color: red;
33
/*display: none;*/
34
}
35
.a,.b{
36
/*同时具有行和块的属性,inline-block*/
37
display: inline-block;
38
}
39
40
</style>
41
</head>
42
<body>
43
44
<div class="a">123</div>
45
<span>456</span>
46
<div class="b">789</div>
47
48
</body>
CSS盒子模型
xxxxxxxxxx
1
59
1
/*盒子模型主要运行的两个属性是margin和padding*/
2
<head>
3
<meta charset="UTF-8">
4
<title>Title</title>
5
<style>
6
/*开头输入这个可以清除原有的所有盒子模型的格式*/
7
* {
8
margin: 0;*/
9
padding: 0;*/
10
}
11
/*.a {*/
12
/* height: 400px;*/
13
/* 400px;*/
14
/* border: black 1px solid;*/
15
/* !*margin-bottom: 20px;*!*/
16
/* !*margin-left: 40px;*!*/
17
/* !*margin的参数顺序,如果是四个参数,方向分别是 上-右-下-左*!*/
18
/* !*如果是两个参数分别是,上-下,左-右*!*/
19
/* !*如果是一个参数,就是四边的*!*/
20
/* margin: 20px 30px 40px 50px;*/
21
/*}*/
22
/*!*相邻的margin会取最大值,并不会叠加*!*/
23
/*.b {*/
24
/* 300px;*/
25
/* height: 400px;*/
26
/* border: red 1px solid;*/
27
/* !*margin-top: 35px;*!*/
28
/*}*/
29
/*.c {*/
30
/* 20px;*/
31
/* height: 20px;*/
32
/* background-color: orange;*/
33
/* margin: 0 auto;*/
34
/*}*/
35
36
37
/*属性padding*/
38
/*div {*/
39
/* 400px;*/
40
/* height: 400px;*/
41
/* border: orange solid 2px;*/
42
/* !*padding-left: 30px;*!*/
43
/* !*padding-top: 300px;*!*/
44
/* !*顺序和margin相同,上-右-下-左*!*/
45
/* padding: 0 0 0 0;*/
46
}
47
</style>
48
</head>
49
<body>
50
<!--margin-->
51
<div class="a">11111
52
<div class="c">33</div>
53
</div>
54
55
<div class="b">22222</div>
56
57
58
<!--padding-->
59
<div>111</div>
60
61
62
</body>
浮动
xxxxxxxxxx
1
58
1
/*浮动本身很简单,就是把元素浮动在页面的最左或者最右边(float right/left),但是浮动会产生一些问题,就是如果对父标签的子标签赋予浮动的属性,而父标签长度不够的情况下,很可能父标签会出现塌陷的情况,
2
常见解决方法有三种,如下*/
3
<head>
4
<meta charset="UTF-8">
5
<title>Title</title>
6
<style>
7
.a, .b, .c {
8
width: 250px;
9
height: 250px;
10
}
11
.a {
12
background-color: red;
13
float: left;
14
}
15
.b {
16
background-color: black;
17
float: right;
18
}
19
.c {
20
background-color: orange;
21
float: right;
22
}
23
.p {
24
/*边框包裹浮动标签有可能会溢出,清除浮动*/
25
/*解决方法:
26
1. 通过给父级标签设定高度
27
2. 伪元素清除法,通过在最后定义一个clear,然后style clear:both可以清除浮动
28
3. overflow:hidden
29
*/
30
border: gold solid 2px;
31
/*height: 300px;*/
32
}
33
/*.clear{*/
34
/* clear: both;*/
35
/*}*/
36
.clearfix:after {
37
content: "";
38
display: block;
39
clear: both;
40
}
41
</style>
42
</head>
43
<body>
44
<div class="p">
45
<div class="a">111</div>
46
<div class="b">222</div>
47
<div class="c">333</div>
48
<div class="clear"></div>
49
</div>
50
</body>
overflow
xxxxxxxxxx
1
30
1
/*overflow的值如下:
2
visible 默认值
3
hidden 超出边框的内容会被隐藏,不可见
4
scroll 超出边框的内容会被隐藏,但是可以通过进度条滚动查看其余内容
5
*/
6
<head>
7
<meta charset="UTF-8">
8
<title>Title</title>
9
<style>
10
div {
11
width: 200px;
12
height: 200px;
13
border: gold solid 2px;
14
15
/*scroll是滚动条查看图片,hidden会隐藏超出范围的图片*/
16
/*overflow: scroll;*/
17
/*overflow: hidden;*/
18
19
border-radius: 50%;
20
}
21
img{
22
/*实际图片多于这个宽度的会压缩*/
23
max-width: 200px;
24
/*实际图片少于这个高度的会拉长*/
25
min-height: 200px;
26
}
27
</style>
28
</head>
29
<body>
30
31
<div>
32
<img src="" alt="">
33
</div>
34
35
</body>
定位position
x
1
/*position的定位可选值如下:
2
relative 相对定位
3
absolute 绝对定位
4
fixed 固定定位
5
*/
6
<head>
7
<meta charset="UTF-8">
8
<title>Title</title>
9
<style>
10
* {
11
margin: 0;
12
}
13
14
/*div {*/
15
/* 200px;*/
16
/* height: 200px;*/
17
/* background-color: gold;*/
18
/* !*相对定位*!*/
19
/* position: relative;*/
20
/* !*距离上边之前的位置*!*/
21
/* top: 20px;*/
22
/* !*距离左边之前的位置*!*/
23
/* left: 20px;*/
24
/*}*/
25
26
.a {
27
width: 400px;
28
height: 400px;
29
background-color: gold;
30
/*父级标签,相对定位*/
31
position: relative;
32
float: right;
33
}
34
.b {
35
width: 200px;
36
height: 200px;
37
background-color: red;
38
/*子标签,绝对定位,会跟着父级标签一起移动*/
39
position: absolute;
40
top: 40px;
41
}
42
.c{
43
width: 400px;
44
height: 400px;
45
background-color: black;
46
/*固定定位*/
47
position: fixed;
48
bottom: 10px;
49
right: 10px;
50
}
51
</style>
52
</head>
53
<body>
54
55
<!--相对定位-->
56
<!--<div></div>-->
57
<!--绝对定位-->
58
59
<div class="a">
60
<div class="b"></div>
61
</div>
62
<div class="c">固定定位</div>
63
</body>
z-index,opacity和模态框
xxxxxxxxxx
1
36
1
/*z-index本身是对象的层叠顺序,默认为0,即大于这个值就可以优先生效,优先显示,且只有定位了的元素,或者说标签,才能有z-index
2
opacity 透明度,范围是0~1, 0是全透明,1是全完全不透明*/
3
4
<head>
5
<meta charset="UTF-8">
6
<title>Title</title>
7
<style>
8
.a {
9
position: fixed;
10
/*透明度,0-1,0是全透明,1是全实,会把背景和字体都变透明*/
11
/*opacity: 0.5;*/
12
top: 0;
13
bottom: 0;
14
left: 0;
15
right: 0;
16
/*只会让背景透明*/
17
background-color: rgba(255, 192, 203,0.4);
18
/*z-index默认是0,如果设置成比0大的数,就会在0前面显示*/
19
z-index: 200;
20
}
21
22
.b {
23
position: fixed;
24
width: 200px;
25
height: 200px;
26
background-color: white;
27
z-index: 201;
28
top: 50%;
29
left: 50%;
30
margin: -100px 0 0 -100px;
31
}
32
</style>
33
</head>
34
<body>
35
36
<div class="a">111</div>
37
<div class="b">222</div>
38
39
</body>