您的位置：首页 > Web前端 > HTML5

HTML5自学_CSS（三）

2016-06-21 16:36 381 查看 
<!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-->
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航