CSS的属性
CSS有N多属性，根据继承性，主要可以分为2大类
可继承属性
父标签的属性值会传递给子标签，一般是文字控制属性
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的可继承属性</title>
<style>
body{
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<div>我是块级标签</div>
<span>我是行内标签</span>
<button>我是行内-块级标签</button>
</body>
</html>
所有标签可继承
visibility、cursor
内联标签可继承
letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction
块级标签可继承
text-indent、text-align
列表标签可继承
list-style、list-style-type、list-style-position、list-style-image
不可继承属性
父标签的属性值不能传递给子标签，一般是区块控制属性
display、margin、border、padding、background
height、min-height、max-height、width、min-width、max-width
overflow、position、left、right、top、bottom、z-index
float、clear
table-layout、vertical-align
page-break-after、page-bread-before
unicode-bidi
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#main{
background-color: red;
width: 500px;
height: 300px;
}
.test1{
/*width: 100px;*/
background-color: green;
}
</style>
</head>
<body>
<div id="main">
<div class="test1">我是里面的</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用的属性</title>
<style>
div{
/*background-color: red;*/
/*默认是平铺 */
/*background: blue; no-repeat 不平铺*/
background: url("img/img_01.jpg") ;
background-size: cover;
width: 80%;
height: 500px;
/*属性规定元素是否可见*/
/*visibility: hidden;*/
/*display: none;*/
/*规定要显示的光标的类型（形状）*/
cursor: help;
font-family: "sans-serif";
font-weight: bolder;
}
p#main{
background-color: blue;
color: white;
/*添加到文本的修饰 line-through*/
text-decoration: underline;
}
p.test1{
/*首行缩进*/
text-indent: 30px;
height: 50px;
background-color: yellowgreen;
/*处理超出的内容 hidden*/
overflow: auto;
}
p.test2{
text-indent: 7%;
}
a{
/*去除下划线*/
text-decoration: none;
}
ul{
/*square circle */
list-style: none;
}
</style>
</head>
<body>
<div>我是div</div>
<p id="main">我是段落标签</p>
<p class="test1">我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落落我是段落</p>
<p class="test2">我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落</p>
<p>我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落</p>
<a href="#">我是超链接</a>
<ul>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
</ul>
</body>
</html>