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-->