CSS-定义样式表

Posted muzidaitou

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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)同级时选择离元素最近的一个

#pcolor:red
#pcolor:#f60

执行颜色为#f60的

 

示例代码:

技术图片
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>定义CSS样式(CSS选择器)</title>
 5         <meta charset="UTF-8">
 6         <style>
 7             #pppcolor:blue
 8             .pcolor: green;
 9             divcolor: 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,h3font-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,.divcolor: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:linkcolor: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:hovercolor: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:activecolor: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:visitedcolor:yellow
 8         </style>
 9     </head>
10     <body>
11         <a href="http://www.baidu.com" target="_blank">百度</a>
12     </body>
13 </html>
View Code

 

以上是关于CSS-定义样式表的主要内容,如果未能解决你的问题,请参考以下文章

CSS样式定义的优先级顺序总结

CSS样式表怎么做

CSS - 原始与自定义样式表 - 覆盖样式的正确方法

在div层里调用css样式表出现这个错怎么解决? 未定义class 或CssClass的值。

CSS 样式表不适用于自定义 QWidget

CSS-定义样式表