前端之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>Titletitle>
4
<style>
5
div{
6
color: #40A070;
7
}
8
style>
9
head>
10
<body>
11
12
<div>父亲
13
<div>儿子div>
14
div>
15
<div>nihaodiv>
16
17
18
<div>父亲
19
<div>儿子div>
20
div>
21
22
23
<p>1111
24
<p>2222p>3333
25
p>
26
body>
id选择器
xxxxxxxxxx
14
1
<head>
2
<meta charset="UTF-8">
3
<title>Titletitle>
4
<style>
5
/*选择id的话用 # + a 来选择id*/
6
#a{
7
color: red;
8
}
9
style>
10
head>
11
<body>
12
13
<div id="a">nihaodiv>
14
body>
类选择器
xxxxxxxxxx
19
1
<head>
2
<meta charset="UTF-8">
3
<title>Titletitle>
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">nihaodiv>
18
<div class="a">lalalladiv>
19
body>
通用选择器
xxxxxxxxxx
17
1
<head>
2
<meta charset="UTF-8">
3
<title>Titletitle>
4
<style>
5
/*星号就是选择全部,即body里面的所有标签里的内容都会应用这个格式*/
6
*{
7
color: red;
8
}
9
style>
10
head>
11
<body>
12
13
<div>111div>
14
<span>222span>
15
<p>333p>
16
17
body>
后代选择器(重要)
xxxxxxxxxx
27
1
<head>
2
<meta charset="UTF-8">
3
<title>Titletitle>
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>111div>
22
<div class="a">222
23
<div>333div>
24
div>
25
div>
26
27
body>
儿子选择器
xxxxxxxxxx
22
1
<head>
2
<meta charset="UTF-8">
3
<title>Titletitle>
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">3div>
19
div>
20
div>
21
22
body>
毗邻选择器
xxxxxxxxxx
17
1
<head>
2
<meta charset="UTF-8">
3
<title>Titletitle>
4
<style>
5
/*毗邻选择器,实现方式是通过+,注意,只有加号,并没有减号,而且只支持向下相邻选择,不能向上选择*/
6
div + p {
7
color: #40A070;
8
}
9
style>
10
head>
11
<body>
12
13
<p>444p>
14
<div>111div>
15
<p>222p>
16
<p>333p>
17
body>
兄弟选择器
xxxxxxxxxx
23
1
<head>
2
<meta charset="UTF-8">
3
<title>Titletitle>
4
<style>
5
/*兄弟选择器,实现方式是通过~,也就是可以通过兄弟选择器找到同一级别的所有标签,所以叫兄弟选择器*/
6
span~.a{
7
color: red;
8
}
9
style>
10
head>
11
<body>
12
13
14
<div>
15
<span>spanspan>
16
<h1 class="a">h1h1>
17
<h2 class="a">h2h2>
18
<p>pp>
19
<h4 class="a">h4h4>
20
div>
21
<p class="a">p1p>
22
23
body>
属性选择器
xxxxxxxxxx
21
1
<head>
2
<meta charset="UTF-8">
3
<title>Titletitle>
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">divdiv>
18
<div name = "456">我是divdiv>
19
<div>没有属性的divdiv>
20
21
body>
组合选择器(重要)
xxxxxxxxxx
27
1
<head>
2
<meta charset="UTF-8">
3
<title>Titletitle>
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">123div>
20
div>
21
<div class="a">
22
678
23
div>
24
div>
25
<p>pp>
26
27
body>
CSS属性相关
文字属性
xxxxxxxxxx
1
66
1
<head>
2
<meta charset="UTF-8">
3
<title>Titletitle>
4
<style>
5
/*text-align文字对齐的方式
6
left 左对齐
7
right 右对齐
8
center 居中对齐
9
justify 两端对齐
10
*/
11
/*div {*/
12
/* width: 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="">alalalaa>
65
66
<ul>
67
<li>123li>
68
<li>456li>
69
<li>789li>
70
ul>
71
72
<p>hello worldp>
73
<span>hello worldspan>
74
<div>hello worlddiv>
75
76
body>
背景属性
xxxxxxxxxx
1
34
1
<head>
2
<meta charset="UTF-8">
3
<title>Titletitle>
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>lalaladiv>
41
42
body>
边框属性
x
1
<head>
2
<meta charset="UTF-8">
3
<title>Titletitle>
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>Titletitle>
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
/* width: 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">123div>
45
<span>456span>
46
<div class="b">789div>
47
48
body>
CSS盒子模型
xxxxxxxxxx
1
59
1
/*盒子模型主要运行的两个属性是margin和padding*/
2
<head>
3
<meta charset="UTF-8">
4
<title>Titletitle>
5
<style>
6
/*开头输入这个可以清除原有的所有盒子模型的格式*/
7
* {
8
margin: 0;*/
9
padding: 0;*/
10
}
11
/*.a {*/
12
/* height: 400px;*/
13
/* width: 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
/* width: 300px;*/
25
/* height: 400px;*/
26
/* border: red 1px solid;*/
27
/* !*margin-top: 35px;*!*/
28
/*}*/
29
/*.c {*/
30
/* width: 20px;*/
31
/* height: 20px;*/
32
/* background-color: orange;*/
33
/* margin: 0 auto;*/
34
/*}*/
35
36
37
/*属性padding*/
38
/*div {*/
39
/* width: 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
51
<div class="a">11111
52
<div class="c">33div>
53
div>
54
55
<div class="b">22222div>
56
57
58
59
<div>111div>
60
61
62
body>
浮动
xxxxxxxxxx
1
58
1
/*浮动本身很简单,就是把元素浮动在页面的最左或者最右边(float right/left),但是浮动会产生一些问题,就是如果对父标签的子标签赋予浮动的属性,而父标签长度不够的情况下,很可能父标签会出现塌陷的情况,
2
常见解决方法有三种,如下*/
3
<head>
4
<meta charset="UTF-8">
5
<title>Titletitle>
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">111div>
46
<div class="b">222div>
47
<div class="c">333div>
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>Titletitle>
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>Titletitle>
9
<style>
10
* {
11
margin: 0;
12
}
13
14
/*div {*/
15
/* width: 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
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>Titletitle>
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">111div>
37
<div class="b">222div>
38
39
body>