HTML5要点_CSS（三）

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