02选择器 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Document</title>
 7 
 8 <style>
 9     /*
10         1 元素选择器：根据标签名字确定样式的作用元素
11             语法：标签名{}
12             缺点：某些同名元素不希望使用某些样式，某些不同名元素也使用该样式，都无法协调
13 
14         2 id选择器：根据标签的id值确定样式的作用元素
15             一般每个元素都有id属性，但是在一个页面中，id的值不应该相同，id具有唯一性
16             语法：#id值{}
17             缺点：一个样式只能作用到一个元素上
18 
19         3 class选择器：根据元素的class属性值确定样式的作用元素
20             元素的class属性值可以重复，而且一个元素的class属性可以有多个值
21             语法：.class属性{}
22     */
23 
24     /*
25         input{
26             height: 60px ; 
27             width: 100px; 
28             background-color: rgb(227, 136, 140) ; 
29             color: azure ; 
30             font-size: 20px ; 
31             font-family: '隶书' ; 
32             border: 3px ; 
33             border-color: rgb(202, 189, 137) ; 
34             border-radius: 5px;
35         }
36     */
37 
38     /*
39         btn3{
40             height: 60px ; 
41             width: 100px; 
42             background-color: rgb(227, 136, 140) ; 
43             color: azure ; 
44             font-size: 20px ; 
45             font-family: '隶书' ; 
46             border: 3px ; 
47             border-color: rgb(202, 189, 137) ; 
48             border-radius: 5px;
49         }
50     */
51 
52     .shapeClass{
53         width: 80px;
54         height: 40px;
55         border-radius: 5px;
56     }
57 
58     .colorClass{
59         background-color: rgb(226, 144, 188);
60         color: azure;
61         border: 3px solid rgb(134, 153, 238);
62     }
63 
64     .fontClass{
65         font-size: 28px;
66         font-family: '隶书';
67         line-height: 30px;
68     }
69 
70 </style>
71 
72 </head>
73 <body>
74     <input id="btn1" class="shapeClass" type="button" value="按钮1"/>
75     <input id="btn2" class="colorClass" type="button" value="按钮2"/>
76     <input id="btn3" class="shapeClass fontClass" type="button" value="按钮3"/>
77     <button id="btn4" class="shapeClass colorClass">按钮4</button>
78 </body>
79 </html>

 

posted @ 2024-03-08 15:50  白茶花约  阅读(9)  评论(0)    收藏  举报