CSS-定義樣式表

本文轉載自查看原文 2019-08-09 12:08 493 HTML + 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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 CSS-樣式表的分類以及選擇器的分類 CSS樣式表 CSS樣式表 css樣式表 CSS樣式表 CSS默認樣式表 CSS 樣式表分類 css重置樣式表 CSS樣式表的權限和級別 CSS樣式表的書寫位置