0401 CSS定义和样式、选择器、引用CSS的方式、利用link引用图标

 1 CSS

　　CSS（层叠样式表）用来规定HTML文档的展形式现

 

2 CSS的定义和应用样式

 　　

 

　　CSS属性和值用冒号分隔，每条样式结束后必须加分号（；）

 

3 选择器

　　3.1 标签选择器

　　3.2 class选择器

　　3.3 id选择器

 1 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->
 2 <html>
 3 <head>
 4     <meta charset = "utf-8" /> <!-- 让浏览器识别文档的字符编码集 -->
 5     <meta name="Keywords" content="" /> <!-- 关键字：在百度中通过关键字能搜索到这个页面 -->
 6     <mata name = "description" content = "" /> <!-- 描述：对网页的一个简单描述（80字以内） -->
 7     <title>三少测试网页</title>
 8     <style>
 9         *{
10             margin: 0;
11             padding: 0;
12         }
13         h1{ /*标签选择器*/
14             color: red;
15         }
16         .er{ /*class选择器*/
17             color: blue;
18         }
19         #dl{ /*id选择器*/
20             color: green;
21         }
22 
23     </style>
24 </head>
25 
26 <body>
27     <h1>测试页面</h1>
28     <h2 class="er">标题二</h2>
29     <p id="dl">我是段落</p>
30     <h2 class="er">标题二副本</h2>
31     
32 </body>
33 </html>
3种选择器

 

4 CSS样式的实现方式

　　4.1 内嵌样式

　　4.2 内部样式

　　4.3 外联样式

　　　　执行顺序：内部和外联样式等地位，谁在后面就是执行谁的样式；内嵌样式权利最高

 1 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->
 2 <html>
 3 <head>
 4     <meta charset = "utf-8" /> <!-- 让浏览器识别文档的字符编码集 -->
 5     <meta name="Keywords" content="" /> <!-- 关键字：在百度中通过关键字能搜索到这个页面 -->
 6     <mata name = "description" content = "" /> <!-- 描述：对网页的一个简单描述（80字以内） -->
 7     <title>三少测试网页</title>
 8     <style> /*通过内部方式应用CSS样式*/
 9         *{
10             margin: 0;
11             padding: 0;
12         }
13         h1{ /*标签选择器*/
14             color: red;
15         }
16         .er{ /*class选择器*/
17             color: blue;
18         }
19         #dl{ /*id选择器*/
20             color: green;
21         }
22     </style>
23     <link rel="stylesheet" href="../css/test.css"> <!-- 通过外部方式引用CSS样式 -->
24 </head>
25 
26 <body>
27     <h1>测试页面</h1>
28     <h2 class="er">标题二</h2>
29     <p id="dl">我是段落</p>
30     <h2 class="er">标题二副本</h2>
31     <hr />
32     <p style="color: #DFAF20;">我是段落副本</p> <!-- 通过内联方式引用CSS方式 -->
33     
34 </body>
35 </html>
引用CSS的三种方式

 

5 利用link引用图标

　　<link rel="shortcut icon" href="study.ico"> <!-- 添加图标 -->

 

 1 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->
 2 <html>
 3 <head>
 4     <meta charset = "utf-8" /> <!-- 让浏览器识别文档的字符编码集 -->
 5     <meta name="Keywords" content="" /> <!-- 关键字：在百度中通过关键字能搜索到这个页面 -->
 6     <mata name = "description" content = "" /> <!-- 描述：对网页的一个简单描述（80字以内） -->
 7     <title>三少测试网页</title>
 8     <style> /*通过内部方式应用CSS样式*/
 9         *{
10             margin: 0;
11             padding: 0;
12         }
13         h1{ /*标签选择器*/
14             color: red;
15         }
16         .er{ /*class选择器*/
17             color: blue;
18         }
19         #dl{ /*id选择器*/
20             color: green;
21         }
22     </style>
23     <link rel="stylesheet" href="../css/test.css"> <!-- 通过外部方式引用CSS样式 -->
24     <link rel="shortcut icon" href="study.ico"> <!-- 添加图标 -->
25 
26 </head>
27 
28 <body>
29     <h1>测试页面</h1>
30     <h2 class="er">标题二</h2>
31     <p id="dl">我是段落</p>
32     <h2 class="er">标题二副本</h2>
33     <hr />
34     <p style="color: #DFAF20;">我是段落副本</p> <!-- 通过内联方式引用CSS方式 -->
35 </body>
36 </html>
本博客源码

 

posted @ 2017-05-10 09:27  寻渝记  阅读(168)  评论(0)    收藏  举报