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>
24     </body>
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>

View Code

显示效果：

6.伪元素选择器

（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="http://www.baidu.com" 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="http://www.baidu.com" 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="http://www.baidu.com" 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="http://www.baidu.com" target="_blank">百度</a>
12     </body>
13 </html>

View Code