CSS层叠样式表：就是给HTML标签添加样式的，让其变得更加好看
【CSS的使用，以及三种引入方式】
1 1.注释
2 /*单行注释*/
3
4 /*
5 多行注释
6 多行注释
7 */
8
9 2.用来划定样式区域
10 /*这是博客园首页的css样式文件*/
11 /*顶部导航样式*/
12 ......
13 /*左侧菜单栏样式*/
14 ...........
15 /*右侧菜单栏样式*/
16
17
18 3.CSS的语法结构：
19 选择器{
20 属性1：值1；
21 属性2：值2；
22 属性3：值3；
23 }
24
25 4.三种引入方式
26
27 <!DOCTYPE html>
28 <html lang="en">
29 <head>
30 <meta charset="UTF-8">
31 <title>Title</title>
32 <meta name="viewport" content="width=device-width, initial-scale=1.0">
33 <style>
34 /*第一种，内部直接引用*/
35 h1 {
36 color: darkgoldenrod
37 }
38 </style>
39
40 <!-- 第二种：link标签引入外部css文件-->
41 <link rel="stylesheet" href="mycss.css">
42
43 </head>
44 <body>
45 <h1>你好啊！熊大</h1>
46 <!--第三种：行内式-->
47 <h2 style="color: green">你好啊！毛毛</h2>
48 </body>
49 </html>
50
【CSS基本选择器】
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <style>
8 /*!*id选择器*!*/
9 #d1 {
10 /*找到id是d1的标签 将文本颜色设置为黄绿色*/
11 color: red;
12 }
13
14 /*!*类选择器*!*/
15 .c1 {
16 /*找到class是c1的标签 将文本颜色设置为蓝色*/
17 color: blue;
18 }
19
20 /*!*标签、元素选择器*!*/
21 span {
22 /*找到所有的span标签 将文本颜色设置为蓝色*/
23 color: orange;
24 }
25
26 /*通用选择器*/
27 /*将所有的标签都设置为绿色*/
28 * {
29 color: green
30 }
31 </style>
32 </head>
33 <body>
34 <div id="d1" class="c1 c2">div
35 <p>div里面的p</p>
36 <span>div里面的span</span>
37 </div>
38 <p id="d2" class="c1">ppp</p>
39 <span id="d3" class="c2">span111</span>
40 <span id="d4" class="c3">span222</span>
41 </body>
42 </html>
【组合选择器】
后代选择器
儿子选择器
毗邻选择器
弟弟选择器
<div>
<p>div p</p>
<p>
<span>div p span</span>
</p>
<span>span</span>
<span>span</span>
</div>
div里面的p span 都是div的后代
p是div的儿子
p里面的span 是p的儿子，是div的孙子
div是父亲
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <style>
8 /*!*后代选择器*!*/
9 /*!*将div内部的span标签的颜色设置为红色*!*/
10 div span {
11 color: red;
12 }
13
14 /*!*儿子选择器：将div的儿子span标签的颜色设置为黄色*!*/
15 div > span {
16 color: yellow;
17 }
18
19 /*!*毗邻选择器：同级别紧挨着的下面的第一个*!*/
20 div + span {
21 color: blue;
22 }
23
24 /*弟弟选择器：同级别下面的所有span*/
25 div ~ span {
26 color: green;
27 }
28
29
30 </style>
31
32
33 </head>
34 <body>
35 <span>span1</span>
36 <span>span2</span>
37
38 <div>
39 <p>div p</p>
40 <p>
41 <span>div p span</span>
42 </p>
43 <span>span</span>
44 <span>span</span>
45 </div>
46
47 <span>span</span>
48 <span>span</span>
49 </body>
50 </html>
【属性选择器】
属性选择器：属性选择器是以[]作为标志的
含有某个属性
含有某个属性并且有某个值
含有某个属性并且有某个值的某个标签
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <style>
8 [username] {
9 /*将所有属性名字是username的标签背景色改为红色*/
10 background-color: red;
11 }
12
13 [username="jason"] {
14 /*找到所有属性名是username,属性值是jason的标签*/
15 background-color: orange;
16 }
17
18 input[username='jason'] {
19 /*找到所有属性名是username,属性值是jason的input标签*/
20 background-color: wheat;
21 }
22 </style>
23 </head>
24 <body>
25
26 <input type="text" username>
27 <input type="text" username="jason">
28 <input type="text" username="egon">
29 <p username="tank">水箱老师</p>
30 <div username="egon">矮子老师</div>
31 <span username="jason">jason老师</span>
32
33 </body>
34 </html>
【分组与嵌套】
（分组），
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <style>
8 /*!*将三个标签都变为红色 ,表示并列关系*!*/
9 div, p, span {
10 color: yellow;
11 }
12 </style>
13 </head>
14
15 <body>
16 <div>div</div>
17 <p>p</p>
18 <span>span</span>
19
20 </body>
21 </html>
（嵌套）
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <style>
8 /*多个选择器之间可以混合使用*/
9 #d1, .c1, span {
10 color: red;
11 }
12 </style>
13 </head>
14 <body>
15 <div id="d1">div</div>
16 <p class="c1">p</p>
17 <span>span</span>
18
19 </body>
20 </html>
（混用）
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <style>
8 /*不同选择器之间可以混用，只有id为d1下的类为c2下的id为3的颜色会变*/
9 #d1 .c2 #d3 {
10 color: green;
11 }
12 </style>
13 </head>
14 <body>
15 <div id="d1">div
16 <p class="c2">div>p
17 <span id="d3">div>p>span1</span>
18 <span id="d4">div>p>span2</span>
19 </p>
20 </div>
21 <p class="c1">p</p>
22 <span>span</span>
23
24 </body>
25 </html>
【伪类选择器】
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <style>
8 a:link {
9 /*鼠标点击之前颜色*/
10 color: #2e6da4;
11 }
12
13 a:hover {
14 /*鼠标悬浮在上面颜色就变*/
15 color: #ff0000;
16 }
17
18 a:active {
19 /*鼠标点击的时候颜色就变*/
20 color: #00ff00;
21 }
22
23 a:visited {
24 /*鼠标点击之后颜色就变*/
25 color: #0000ff;
26 }
27
28 p {
29 color: darkorange;
30 font-size: 80px;
31 }
32 p:hover{
33 color: white;
34 }
35
36 input:focus {
37 /*获取焦点事件*/
38 background-color: #7a77c8;
39 }
40
41 </style>
42 </head>
43 <body>
44 <a href="https://www.cnblogs.com/liuliu1">熊二</a>
45 <p>点我有惊喜</p>
46 <input type="text">
47 </body>
48 </html>
【伪元素选择器】
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <style>
8 p:first-letter {
9 /*给文章的第一个字调样式*/
10 font-size: 30px;
11 color: red;
12 }
13
14 p:before {
15 /*在文本开头，用CSS添加内容，但是鼠标选不中*/
16 content: '你说的对';
17 color: blue;
18 }
19
20
21 p:after {
22 /* 在当前文字的最后面生效，不能被选中 */
23 content: '？';
24 color: yellow;
25 }
26
27 </style>
28 </head>
29 <body>
30 <p>装备差劲任何本都是血赚，装备差劲任何本都是血赚</p>
31 </body>
32 </html>
33
34 <!--PS:before和after伪元素通常都是用来清除浮动带来的影响，父标签塌陷的问题-->
【选择器的优先级】
id选择器
类选择器
标签选择器
行内样式
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <link rel="stylesheet" href="mycss1.css">
8 <style>
9 /*选择器不同，加载是从上往下，谁先定义，谁先加载*/
10 /* 行内样式>id选择器>类选择器>标签选择器*/
11
12 /*选择器相同，书写顺序不同:加载是从上往下,但先就近原则：谁离标签近就听谁的*/
13 #d1 {
14 color: blue;
15 }
16
17 .c1 {
18 color: beige;
19 }
20
21 p {
22 color: red;
23 }
24 </style>
25 </head>
26
27 <body>
28 <p>哎呦喂，你很不错哦</p>
29 <p style="color: blue">你果然很识趣，有前途</p>
30 <p id="d1" class="c1">你果然很识趣，有前途</p>
31
32 </body>
33 </html>
.
。
。
。
-------------------------------------------------------------------------------------------
属性相关
【设置长宽】
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <style>
8 p {
9 background-color: red;
10 height: 100px;
11 width: 100px;
12 }
13
14 span {
15 background-color: blue;
16 height: 200px;
17 width: 200px;
18 /*行内标签无法设置长宽，写了也不会生效*/
19 }
20 </style>
21 </head>
22 <body>
23 <p>ppp</p>
24 <span>span</span>
25 </body>
26 </html>