1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style type="text/css">
7 /*所有的css代码都写到这里*/
8 /*选择器{
9 这里面写具体都规则
10 }*/
11 /*
12 * 选择器的作用：查找到对应的html元素
13 * # id选择器
14 * . 类选择器
15 * div 标签选择器
16 *
17 * 不管用什么选择器，最终目的都是为了找到对应的元素 最终用{}里面的规则去修饰
18 */
19 /*
20 * id、类、标签这几个选择器的不同点？
21 *
22 * id: id的名称不会出现多次， 表示唯一，如果说网页中有一个唯一的元素需要修饰 用id选择器
23 * 类：类名称可以出现多次 修饰同一类元素，有多个元素具有同样的样式的时候，可以用类选择器
24 * 标签： 通过标签名称，可以选中所有同名的标签
25 */
26 .div{
27 /*设置宽度*/
28 width: 100px;
29 /*设置高度*/
30 height: 100px;
31 /*设置背景*/
32 background-color: blue;
33 }
34 .red{
35 color: red;
36 }
37 p{
38 color: green;
39 }
40 </style>
41 </head>
42 <body>
43 <div ></div>
44 <!--div、p、h1 这三个元素字体都是红色-->
45 <div class="red">这是div</div>
46 <p class="red">这是p元素</p>
47 <h1 class="red">这是h1</h1>
48
49 <p>sdfs</p>
50 <p>sdfsdf</p>
51 </body>
52 </html>
