CSS-02-css的三种基础选择器-优快云博客

本文介绍如何在HTML中使用CSS进行样式设置，包括ID选择器、类选择器和标签选择器等基本概念及其应用实例。通过具体例子展示了不同选择器如何影响页面元素的显示效果。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>css使用方法</title>
 6         <!---->
 7         <style type = "text/css">
 8              /*css代码*/
 9             
10             /*id选择器*/
11              #box{
12                  /*color表示设置颜色*/
13                  color:blue;
14              }
15              
16              
17              /*类选择器*/
18             .box3{
19                 color: cornflowerblue;
20             }
21             
22             #p1{
23                 color: red;
24             }
25             
26             /*标签选择器*/
27             p{
28                 color: blueviolet;
29             }
30         </style>
31         <!--这种方式的好处：让html代码和css代码分离，方便维护-->
32         <link rel="stylesheet" type="text/css" href="style/next.css" />
33     </head>
34     <body>
35         <!--通过自定义名字产生关联-->
36         <div  id = "box">这是一个盒子</div>
37         <div  id = "box2">这是一个盒子</div>
38         <div  style = "color:green;" >这是一个盒子</div>
39         <div class = "box3">这是一个box</div>
40         <!--需求：把p标签的字体都设置为红色-->
41         <p id="p1">这是p1</p>
42         <div id="p1">这是p2</div>
43         <p id="p1">这是p3</p>
44         <p id="p1">这是p4</p>
45         <!--需求：把p标签的字体都设置为红色-->
46         <p >这是p1</p>
47         <p >这是p2</p>
48         <p >这是p3</p>
49         <p >这是p4</p>
50     </body>
51 </html>