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

XZ_CSS之CSS属性-继承和不可继承

2017-08-25 10:18 211 查看

CSS属性-继承和不可继承
CSS有N多属性，根据继承性，主要分为2大类：
可继承属性
父标签的属性值会传递给子标签
一般是文字控制属性
不可继承属性
父标签的属性值不能传递给子标签
一般是区块控制属性
<style>
/** 可继承性 */
body{
color:
brown;
font-size:
18px;
}
</style>
<body>


<div>我是块级标签</div>
<span>我是行内标签</span>
<button>我是行内-块级标签</button>
</body>

<style>
/** 不可继承性 */
#main
{
background-color:
gold;
width:
300px;
height:
100px;
}
.test1
{
background-color:
green;
width:
150px;
}
</style>
<body>


<div
id="main">
<div
class="test1">
我是里面的div
</div>
</div>
</body>

CSS属性-可继承属性（红色表示常用）
所有标签可继承
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

/** 属性规定元素是否可见:这个属性指定是否显示一个元素生成的元素框，这意味着元素仍占据其本来的空间，不过可以完全不可见；
hidden隐藏，但是，保留占位；
默认值：visible；
可继承；
collapse当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用，如果此值使用在其他元素上，会呈现为"hidden" */
visibility:
hidden;
/** none隐藏且没有占位； */
display:
none;

cursor 属性规定要显示的光标的类型（形状）:该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。
默认值：auto；可继承；
可能的值：crosshair（光标呈现为十字线。）；pointer（光标呈现为指示链接的指针（一只手））；move（此光标指示某对象可被移动。）；help（此光标指示可用的帮助（通常是一个问号或一个气球））。

text-decoration

<a
href="#">我是超链接</a>
a{
text-decoration:
none;
}

块级标签可继承
text-indent、text-align

text-indent:首行缩进
p.text1
{
/** 缩进30 */
text-indent:
30px;
}
p.text2
{
/** 根据父视图的7%缩进 */
text-indent:
7%;
}
<p
class="text1">我是段落我是段落我是段落我是段我是段落我是段落我是段落我是段落落我是段落我是段落我是段落我是段我是段落我是段落我是段落我是段落落我是段落我是段落我是段落我是段我是段落我是段落我是段落我是段落落我是段落我是段落我是段落我是段我是段落我是段落我是段落我是段落落</p>
<p
class="text2">我是段落我是段落我是段落我是段我是段落我是段落我是段落我是段落落我是段落我是段落我是段落我是段我是段落我是段落我是段落我是段落落我是段落我是段落我是段落我是段我是段落我是段落我是段落我是段落落我是段落我是段落我是段落我是段我是段落我是段落我是段落我是段落落</p>

列表标签可继承
list-style、list-style-type、list-style-position、list-style-image、

list-style 简写属性在一个声明中设置所有的列表属性。
可以按顺序设置如下属性：
list-style-type
list-style-position
list-style-image

ul
{
/** 最主要的用途是去除无序列表左侧的· */
list-style:none
;
}
<ul>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
</ul>

CSS属性-不可继承属性（红色表示常用）
display、margin、border、padding、background
height、min-height、max-heignt、width、min-width、max-width
overflow、position、left、right、top、bottom、z-index

/** 默认是平铺的,no-repeat是不平铺的； */
background:
yellow;
background:
url(../html/img/HBuilder.png) no-repeat;
background-size:
cover;

overflow
p.text1
{
/** 缩进30 */
text-indent:
30px;
height:
50px;
background-color:
yellowgreen;
/** 处理超出的内容:hidden隐藏、scroll、auto滚动 */
overflow:
auto;
}
<p
class="text1">我是段落我是段落我是段落我是段我是段落我是段落我是段落我是段落落我是段落我是段落我是段落我是段我是段落我是段落我是段落我是段落落我是段落我是段落我是段落我是段我是段落我是段落我是段落我是段落落我是段落我是段落我是段落我是段我是段落我是段落我是段落我是段落落</p>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航