1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>CSS常用属性</title>
6
7 <style media="screen">
8 /*标签+ 空格 + 大括号 = 标签选择器 ,可在标签选择器中定义标签属性*/
9 .d23 {
10 color: white;
11 font-size: 30px;
12 background-color: orange;
13 width: 300px;
14 height: 60px;
15 border:2px red solid;/*第一个参数:边框宽度 第二个参数:边框颜色 第三个参数:边框样式*/
16 background-image: url("myImage.png");
17 opacity: 0.9;/*透明度*/
18 text-align: center;
19 }
20 p {
21 color:blue;
22 }
23 .p1 {
24 text-decoration: overline;
25 color: green;
26 }
27 .p2 {
28 text-decoration:line-through;;
29 color: red;
30 }
31
32 ul {
33 list-style: circle;/*列表样式*/
34
35 }
36
37 a {
38 text-decoration: none;/*a标签样式(是否存在下划线)*/
39 }
40
41 .div {/*盒模型*/
42 background-color: gold;
43 width: 200px;
44 height: 200px;
45 border: 20px solid black;
46 margin: 50px;/*margin:外边距,相当于左上角的坐标*/
47 padding: 10px;/*padding:content 距离 border的距离,会增大整个div大小*/
48 /* border, margin,padding都可以-出来上下左右的分别值*/
49
50 }
51 </style>
52
53 </head>
54 <body>
55
56 <!-- 可以在单个div块中的style属性中添加font color等属性,不过一般不推荐,高耦合-->
57 <!-- <div class="" style="font-size:30px;color:blue;"> -->
58 <div class="d23" >
59 这有一个div
60 </div>
61
62
63 <a href="">a标签-点击跳转</a>
64
65 <!-- 标签被class赋值后,相当于添加了一个标识符属性,在head中条用相应的标签时要 ‘.’出来相应的属性;
66 注意被赋值开头不能是数字,否则不识别-->
67 <p class="p1">
68 p1标签的文本
69 </p>
70 <p class="p2">
71 p2标签的文本
72 </p>
73
74 <ul>
75 <li>HTML5</li>
76 <li>iOS</li>
77 <li>CSS</li>
78 </ul>
79
80 <div class="div">
81 div
82 </div>
83
84
85 </body>
86 </html>
87
88
89 <!-- 1、元素选择器:标签种类名 +空格 +大括号
90 eg:
91 h1 {
92 background-color : #ccc;
93 }
94 -->
95
96
97
98
99 <!-- 2、选择器的分组(可用来选择多个标签):标签种类名 + ‘,’ + 空格 + 大括号
100 eg:
101 h1,h2 {
102 background-color : #ccc;
103 }
104 -->
105
106 <!-- 3、通配符选择器(可选择全部标签,通常用来去掉外边框,内边框): '*' + 空格 + 大括号
107 * {
108
109 }
110 -->
111
112 <!-- 4、class选择器:点 + class名 + 空格 + 大括号
113 eg:
114 .p2 {
115 color: red;
116 }
117 -->
118
119 <!-- 5、结合元素选择器(标签和class相结合,用来精准获取某一个标签)
120 eg:
121 div.div {
122 background-color : #ccc;
123 }-->
124
125
126 <!-- 6、id先择器(类似class用法):‘#’ + id名 + 大括号
127 eg:
128 #p1 {
129 color:red;
130 }
131 -->
132
133 <!--注意: id 和 class都有标志符的作用,但是区别在于class可以在不同种类标签中使用同一个名称;
134 id在不同种类标签中也存在唯一性,即在一个html页面中只能存在一个id-->