（十一）定义css样式

1.html标记定义

格式：

　　　p{属性：属性值； 属性1：属性值1}

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4     <meta charset="utf-8">
 5     <title>使用css样式</title>
 6     <style type="text/css">
 7     p{
 8     background-color:red;
 9     }
10     </style>
11     </head>
12     <body >
13     <p>使用css样式</p>
14     </body>
15 </html>

解析：

  • p可以叫做选择器，定义那个标记中的内容执行的样式
  • 一个选择器可以控制若干个样式属性，他们之间需要用英文的“;”隔开，最后一个可以不加“;”

2.class定义

格式：

　　<p class="p">...</p>

　　.p{属性：属性值； 属性1：属性值1}

注意：class定义是以.开头的

范例一：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4     <meta charset="utf-8">
 5     <title>定义css样式</title>
 6     <style type="text/css">
 7     .p{
 8     background-color:green;
 9     }
10     </style>
11     </head>
12     <body >
13     <p class="p">点点滴滴体现精彩人生</p>
14     </body>
15 </html>
View Code

范例二：（class类可以重复使用）

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4     <meta charset="utf-8">
 5     <title>定义css样式</title>
 6     <style type="text/css">
 7     .p{
 8     background-color:green;
 9     }
10     </style>
11     </head>
12     <body >
13     <p class="p">点点滴滴体现精彩人生</p>
14     <div class="p">点点滴滴体现精彩人生</div>
15     </body>
16 </html>
View Code

范例三：（控制class类下子类选择器p标签样式）

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4     <meta charset="utf-8">
 5     <title>定义css样式</title>
 6     <style type="text/css">
 7     .p{background-color:green;}
 8     .p p{background-color:red;}
 9     </style>
10     </head>
11     <body >
12     <div class="p">
13     <p>点点滴滴体现精彩人生</p>
14     点点滴滴体现精彩人生</div>
15     </body>
16 </html>
View Code

范例四：（在class类中加class）

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4     <meta charset="utf-8">
 5     <title>定义css样式</title>
 6     <style type="text/css">
 7     .p{background-color:green;}
 8     .pp{background-color:red;}
 9     </style>
10     </head>
11     <body >
12     <div class="p">
13     <p class="pp">点点滴滴体现精彩人生</p>
14     点点滴滴体现精彩人生</div>
15     </body>
16 </html>
View Code

3.ID定义

格式：

　　<p id="p">...</p>

　　#p{属性：属性值； 属性1：属性值1}

注意：id定义是以#开头的

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4     <meta charset="utf-8">
 5     <title>定义css样式</title>
 6     <style type="text/css">
 7     #p{background-color:blue;}
 8     .pp{background-color:red;}
 9     </style>
10     </head>
11     <body >
12     <div id="p">
13     <p >点点滴滴体现精彩人生</p>
14     点点滴滴体现精彩人生</div>
15     </body>
16 </html>
View Code

　

4.优先级问题

1.ID>class>html

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4     <meta charset="utf-8">
 5     <title>定义css样式</title>
 6     <style type="text/css">
 7     #p{background-color:blue;}
 8     .pp{background-color:red;}
 9     div{background-color:green;}
10     </style>
11     </head>
12     <body >
13     <div id="p" class="pp">
14     点点滴滴体现精彩人生</div>
15     </body>
16 </html>
View Code

2.同级时选择离元素最近的一个

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4     <meta charset="utf-8">
 5     <title>定义css样式</title>
 6     <style type="text/css">
 7     .pp{background-color:red;}
 8     .pp{background-color:green;}
 9     </style>
10     </head>
11     <body >
12     <div  class="pp">
13     点点滴滴体现精彩人生</div>
14     </body>
15 </html>
View Code

5.组合选择器（同时控制多个元素）

格式：

　　div,p{background-color:yellow}

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4     <meta charset="utf-8">
 5     <title>定义css样式</title>
 6     <style type="text/css">
 7     div,p{background-color:yellow}
 8     </style>
 9     </head>
10     <body >
11     <div  class="pp">
12     点点滴滴体现精彩人生</div>
13     <p>点点滴滴体现精彩人生</p>
14     </body>
15 </html>
View Code

 

6.伪元素选择器

  • a：link（正常连接的样式）
  • a:hover（鼠标放上去的样式）
  • a:active（选择链接时的样式）
  • a:visited（已经访问过的链接样式）
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4     <meta charset="utf-8">
 5     <title>定义css样式</title>
 6     <style type="text/css">
 7     a:link{color:red;}
 8     a:hover{color:green;}
 9     a:active{color:yellow;}
10     a:visited{color:blue;}
11     </style>
12     </head>
13     <body >
14     <a href="www.baidu.com" target="_blank">点点滴滴体现精彩人生</a>
15     <a href="www.bacx idu.com" target= "_blank">点点滴滴体现精彩人生</a>
16     <a href="www.bacx idcds u.com" target= "_blank">点点滴滴体现精彩人生</a>
17     </body>
18 </html>
View Code

 

posted @ 2015-12-23 12:15  花花妹子。  阅读(210)  评论(0)    收藏  举报