HTML5中属性的继承
2016-03-15 本文已影响937人
Alexander
本章摘要 :
- CSS有N多属性，根据继承性，主要可以分为2大类
可继承属性
父标签的属性值会传递给子标签
一般是文字控制属性
不可继承属性
父标签的属性值不能传递给子标签
一般是区块控制属性
一, 可继承的标签
/**************可继承的标签*******************/
所有标签可继承
pvisibility、cursor
内联标签可继承
pletter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction
块级标签可继承
ptext-indent、text-align
l列表标签可继承
plist-style、list-style-type、list-style-position、list-style-image
/**************不可继承的标签******************/
pdisplay、margin、border、padding、background
pheight、min-height、max-height、width、min-width、max-width
poverflow、position、left、right、top、bottom、z-index
pfloat、clear
ptable-layout、vertical-align
ppage-break-after、page-bread-before
punicode-bidi
二, CSS中常见的属性
<html>
<head lang="en">
<meta charset="UTF-8">
<title>CSS中常见的属性</title>
<style>
/*可继承的属性*/
body{
/*设置字体大小*/
font-size: 40px;
/*设置文字颜色*/
color: red;
/*设置字体加粗*/
font-weight: bolder;
}
/*块级标签*/
div {
/*复合性属性,可用于设置背景颜色和图片*/
background: url("images/7.jpg");
width: 200px;
height: 200px;
/*cover是用于设置图片的尺寸,让图片跟随标签的尺寸而显示*/
background-size: cover;
/*设置文字居中显示*/
text-align: center;
/*display和visibility都有隐藏内容的功能,但是两者之间的区别是,display隐藏内容后,所有的内容以及属性都会消失,但是visibility隐藏内容,但是它的高度和宽度一直都是存在的*/
/*display: none;*/
/*visibility: hidden;*/
/*设置光标显示的样式*/
cursor: pointer;
}
span{
background-color: blue;
width: 300px;
height: 200px;
/*设置行高,用于设置垂直居中*/
line-height: 300px;
}
a{
/*去除下划线*/
text-decoration: none;
}
ul{
/*将圆点设置为正方形*/
/*list-style: square;*/
/*将圆点删除掉*/
list-style: none;
}
#Alex{
/*超出标签的内存自动处理掉*/
/*overflow: hidden;*/
/*超出标签的内容全部添加到标签中*/
/*overflow: scroll;*/
/*overflow: inherit;*/
overflow: auto;
}
</style>
</head>
<body>
<p>AAAAAAAAAAAAAAA</p>
<span>BBBBBBBBBBBB</span>
<div>CCCC</div>
<a href="#">谷歌一下,您就知道了</a>
<div id="Alex">DDDDDDDDDDDDDDDDDDDDDDDDDDD</div>
<ul>
<li>William</li>
<li>William</li>
<li>William</li>
<li>William</li>
</ul>
</body>
</html>
