CSS-定义样式表
1.HTML标记定义
p{属性：属性值；属性1：属性1}
<p>...</p>
注：p可以叫做选择器，定义那个标记中的内容执⾏其中的样式。⼀个选择器可以控制若⼲个样式属性，他们之间需要⽤英⽂的分号隔开，最后⼀个可以不加分号。⽰例代码：
1<!DOCTYPE html>
2<html>
3<head>
4<title>定义CSS样式（CSS选择器）</title>
5<meta charset="UTF-8">
6<style type="text/css">
7 p{
8 color:red;
9 font-size:30px
10 }
11</style>
12
13</head>
14<body>
15<p>昨天是七⼣节！</p>
16</body>
17</html>
View Code
显⽰效果：
2.Class定义
.p{属性：属性值；属性1：属性值1}
<p class="p">...</p>
注：class定义是以"."开始
⽰例代码：
1<!DOCTYPE html>
2<html>
3<head>
4<title>定义CSS样式（CSS选择器）</title>
5<meta charset="UTF-8">
6<style>
7 .p{
8 background-color: red;
9 color:blue;
10 font-size:40px;
11 }
12</style>
13</head>
14<body>
15<p class="p">昨天是七⼣节！</p>
16</body>
17</html>
View Code
显⽰效果：
与HTML标记定义联⽤：
⽰例代码：
1<!DOCTYPE html>
2<html>
3<head>
4<title>定义CSS样式（CSS选择器）</title>
5<meta charset="UTF-8">
6<style>
7 .p{
8 background-color: red;
9 color:blue;
10 font-size:40px;
11 }
12 .p p{
13 color:green;
14 font-size:50px;
15 }
16</style>
17</head>
18<body>
19<div class="p">
20<p>昨天是七⼣节！</p>
21昨天是七⼣节！昨天是七⼣节！
22</div>
23</body>
24</html>
View Code
显⽰效果：
3.ID定义
#p{属性：属性值；属性1：属性值1}
<p id="p">...</p>
注：ID定义是以"#"开始的。
⽰例代码：
1<!DOCTYPE html>
2<html>
3<head>
4<title>定义CSS样式（CSS选择器）</title> 5<meta charset="UTF-8">
6</head>
7<style>
8 #p{
9 background-color: green;
10 color:red;
11 font-size:40px;
12 }
13</style>
14<body>
15<p id="p">昨天是七⼣节！</p>
16</body>
17</html>
View Code
显⽰效果：
ID定义与HTML标记定义联⽤
代码⽰例：
1<!DOCTYPE html>
2<html>
3<head>
4<title>定义CSS样式（CSS选择器）</title> 5<meta charset="UTF-8">
6</head>
7<style>
8 #ppp{
9 background-color: green;
10 color:red;
11 font-size:40px;
12 }
13 #ppp p{
14 background-color: white;
15 color: blue;
16 font-size: 50px;
17 }
18</style>
19<body>
20<div id="ppp">
21<p>昨天是七⼣节！</p>
22昨天是七⼣节！昨天是七⼣节！
23</div>
25</html>
View Code
显⽰效果：
4.优先级问题
（1）ID > Class > HTML
（2）同级时选择离元素最近的⼀个
#p{color:red}
#p{color:#f60}
执⾏颜⾊为#f60的
⽰例代码：
1<!DOCTYPE html>
2<html>
3<head>
4<title>定义CSS样式（CSS选择器）</title>
5<meta charset="UTF-8">
6<style>
7 #ppp{color:blue}
8 .p{color: green;}
9 div{color: red;}
10</style>
11</head>
12<body>
13<div id="ppp" class="p">
14昨天是七⼣节！昨天是七⼣节！
15</div>
16</body>
17</html>
View Code
显⽰效果：
5.组合选择器（同时控制多个元素）h1,h2,h3{font-size:14px;color:red;}
注：选择器组合可以使⽤“,”隔开
代码⽰例：
1<!DOCTYPE html>
2<html>
3<head>
4<title>定义CSS样式（CSS选择器）</title>
5<meta charset="UTF-8">
6<style>
7 h1,h2,h3,h4,p,.div{color:red}
8</style>
9</head>
10<body>
11<div>
12<h1>昨天是七⼣节！</h1>
13<h2>昨天是七⼣节！</h2>
14<h3>昨天是七⼣节！</h3>
15<h4>昨天是七⼣节！</h4>
16</div>
17<p>
18昨天是七⼣节！
19</p>
20<div class="div">
21昨天是七⼣节！
22</div>
23</body>
24</html>
显⽰效果：
6.伪元素选择器
css样式表优先级最高（1）a:link 正常链接的样式
⽰例代码：
1<!DOCTYPE html>
2<html>
3<head>
4<title>定义CSS样式（CSS选择器）</title>
5<meta charset="UTF-8">
6<style>
7 a:link{color:red}
8</style>
9</head>
10<body>
11<a href="www.baidu" target="_blank">百度</a> 12</body>
13</html>
View Code
（2）a:hover ⿏标放上去的样式
⽰例代码：
1<!DOCTYPE html>
2<html>
3<head>
4<title>定义CSS样式（CSS选择器）</title>
5<meta charset="UTF-8">
6<style>
7 a:hover{color:green}
8</style>
9</head>
10<body>
11<a href="www.baidu" target="_blank">百度</a> 12</body>
13</html>
View Code
（3）a:active 选择链接时的样式
⽰例代码：
1<!DOCTYPE html>
2<html>
3<head>
4<title>定义CSS样式（CSS选择器）</title>
5<meta charset="UTF-8">
6<style>
7 a:active{color:blue}
8</style>
9</head>
10<body>
11<a href="www.baidu" target="_blank">百度</a> 12</body>
13</html>
View Code
（4）a:visited 已经访问过的链接的样式
⽰例代码：
1<!DOCTYPE html>
2<html>
3<head>
4<title>定义CSS样式（CSS选择器）</title>
5<meta charset="UTF-8">
6<style>
7 a:visited{color:yellow}
8</style>
9</head>
10<body>
11<a href="www.baidu" target="_blank">百度</a>
13</html> View Code
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论