前端之CSS初识
之前我们介绍了ＨＴＭＬ，今天我们就开始介绍ＣＳＳ，我们都知道，ＣＳＳ的作用就是定义如何显示ＨＴＭＬ元素．实际情况是，当浏览器读到一个样式表（也即是ＣＳＳ）时，浏览器就会按照这个样式表来对文档（也就是ＨＴＭＬ）进行格式化（或者说渲染）
每个ＣＳＳ样式都是由两个组成部分：选择器和声明．
xxxxxxxxxx2
1
h1 {color:blue;font-size:14px}2
选择器 声明 属性 值 声明 值选择器
标签选择器
xxxxxxxxxx26
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>111124
<p>2222</p>333325
</p>26
</body>id选择器
xxxxxxxxxx14
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>类选择器
xxxxxxxxxx19
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>通用选择器
xxxxxxxxxx17
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>后代选择器(重要)
xxxxxxxxxx27
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">00021
<div>111</div>22
<div class="a">22223
<div>333</div>24
</div>25
</div>26
27
</body>儿子选择器
xxxxxxxxxx22
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">117
<div class="b">218
<div class="c">3</div>19
</div>20
</div>21
22
</body>毗邻选择器
xxxxxxxxxx17
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>兄弟选择器
xxxxxxxxxx23
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>属性选择器
xxxxxxxxxx21
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>组合选择器(重要)
x
1
<head>2
<meta charset="UTF-8">3
<title>Title</title>4
<style>5
/*组合选择器,用逗号来同时赋予格式,经常用于和其他选择器联用,日后常用,需牢记*/6
div, p {7
color: red8
}9
div .b .a, p {10
color: red11
}12
</style>13
</head>14
<body>15
16
<!--组合选择器-->17
<div>div18
<div class="b">34519
<div class="a">123</div>20
</div>21
<div class="a">22
67823
</div>24
</div>25
<p>p</p>26
27
</body>