正文
HTML5要点_CSS（三）
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS常用属性</title> <style media="screen">
/*标签+ 空格 + 大括号 = 标签选择器 ，可在标签选择器中定义标签属性*/
.d23 {
color: white;
font-size: 30px;
background-color: orange;
width: 300px;
height: 60px;
border:2px red solid;/*第一个参数：边框宽度 第二个参数：边框颜色 第三个参数：边框样式*/
background-image: url("myImage.png");
opacity: 0.9;/*透明度*/
text-align: center;
}
p {
color:blue;
}
.p1 {
text-decoration: overline;
color: green;
}
.p2 {
text-decoration:line-through;;
color: red;
} ul {
list-style: circle;/*列表样式*/ } a {
text-decoration: none;/*a标签样式（是否存在下划线）*/
} .div {/*盒模型*/
background-color: gold;
width: 200px;
height: 200px;
border: 20px solid black;
margin: 50px;/*margin:外边距，相当于左上角的坐标*/
padding: 10px;/*padding:content 距离 border的距离，会增大整个div大小*/
/* border, margin,padding都可以-出来上下左右的分别值*/ }
</style> </head>
<body> <!-- 可以在单个div块中的style属性中添加font color等属性，不过一般不推荐，高耦合-->
<!-- <div class="" style="font-size:30px;color:blue;"> -->
<div class="d23" >
这有一个div
</div> <a href="">a标签-点击跳转</a> <!-- 标签被class赋值后，相当于添加了一个标识符属性，在head中条用相应的标签时要 ‘.’出来相应的属性;
注意被赋值开头不能是数字，否则不识别-->
<p class="p1">
p1标签的文本
</p>
<p class="p2">
p2标签的文本
</p> <ul>
<li>HTML5</li>
<li>iOS</li>
<li>CSS</li>
</ul> <div class="div">
div
</div> </body>
</html> <!-- 1、元素选择器：标签种类名 +空格 +大括号
eg：
h1 {
background-color : #ccc;
}
--> <!-- 2、选择器的分组（可用来选择多个标签）：标签种类名 + ‘,’ + 空格 + 大括号
eg:
h1,h2 {
background-color : #ccc;
}
--> <!-- 3、通配符选择器（可选择全部标签，通常用来去掉外边框，内边框）： '*' + 空格 + 大括号
* { }
--> <!-- 4、class选择器：点 + class名 + 空格 + 大括号
eg：
.p2 {
color: red;
}
--> <!-- 5、结合元素选择器（标签和class相结合，用来精准获取某一个标签）
eg:
div.div {
background-color : #ccc;
}--> <!-- 6、id先择器（类似class用法）：‘#’ + id名 + 大括号
eg：
#p1 {
color:red;
}
--> <!--注意： id 和 class都有标志符的作用，但是区别在于class可以在不同种类标签中使用同一个名称；
id在不同种类标签中也存在唯一性，即在一个html页面中只能存在一个id-->
