CSS常见的属性
2016-07-26 本文已影响15人
Z了个L
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css常见的属性</title>
<style>
div{
/*background-color: red;*/
/* background是复合属性 */
/*background: yellow;*/
/*背景图像
no-repeat: 不平铺
*/
background: url("imgs/img_01.jpg") no-repeat;
/*cover:可能图片拉伸的一些看不到,但是完全占满整个空间*/
/*contain:图片完全可以看到,可能不能完全占满整个空间*/
background-size: cover;
/*background-size: contain;*/
border: 1px solid red;
width: 200px;
height: 200px;
/*隐藏*/
/*visibility: hidden;!*内容隐藏,但是会占位*!*/
/*display: none;*/
/*光标的类型*/
cursor: pointer;
}
p.test1{
background-color: blue;
width: 200px;
height: 100px;
}
span{
font-family: "Al Bayan";
}
p.test2{
text-decoration: line-through;
/*-webkit-text-decoration-color: blue;*/
background-color: aquamarine;
width: 200px;
height: 100px;
}
p.test3{
/*首行缩进*/
text-indent: 8%;
/*处理超出的内容*/
/*overflow: hidden;*/
/*overflow: scroll;*/
overflow: auto;
}
a{
/*去除下划线*/
text-decoration: none;
}
ul{
/*list-style: upper-roman;*/
list-style: none;
}
</style>
</head>
<body>
<div>我是div</div>
<p class="test1">我是段落</p>
<span>我是MT</span>
<a href="#">我是超链接</a>
<p class="test2 test3">我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落</p>
<p class="test2">我是段落我是段落我是段落我是段落我是段落我是段落</p>
<p class="test2">我是段落我是段落我是段落我是段落我是段落我是段落</p>
<p class="test2">我是段落我是段落我是段落我是段落我是段落我是段落</p>
<!--无序列表-->
<ul>
<li>我是无序列表</li>
<li>我是无序列表</li>
<li>我是无序列表</li>
<li>我是无序列表</li>
<li>我是无序列表</li>
</ul>
</body>
</html>
