CSS属性
2016-07-13 本文已影响25人
我的梦想之路
CSS有N多属性，根据继承性，主要可以分为2大类：
1>可继承属性
1.1 父标签（上一级标签）的属性值会传递给子标签
1.1.1 一般是文字控制属性
2>不可继承属性
2.1 父标签的属性值不能传递给子标签
2.1.1 一般是区块控制属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS属性</title>
<style type="text/css">
/*可继承属性*/
body{
font-size: 30px;
color: red;
font-weight: bolder;
}
#no{
width: 150px;
height: 100px;
background-color: red;
/*不可继承属性*/
display: inline-block;
}
#no1{
color: blueviolet;
/*没有继承这个只是行内标签,设置无效*/
width: 150px;
}
</style>
</head>
<body>
<div>div标签</div>
<span>span标签</span>
<p>p标签</p>
<!---->
<hr width=100% />
<div id="no">
<span id="no1">1234567</span>
</div>
</body>
</html>
界面效果
CSS可继承属性
1>所有标签都可继承
visibility（是否可见）/cursor(光标的样式)
<html>
<head>
<meta charset="UTF-8">
<title>CSS属性</title>
<style type="text/css">
div{
width: 150px;
height: 100px;
background-color: red;
/*连同宽高一起隐藏*/
/*display: none;*/
/*宽高会留下*/
/*visibility: hidden;*/
/*变成手指：点击*/
cursor: pointer;
/*变成十字架L场景：画板，，*/
/*cursor: crosshair;*/
}
</style>
</head>
<body>
<div>
<span>1234567</span>
</div>
<p>22222222222</p>
</body>
</html>
界面效果，隐藏效果的比较自己实践，光标效果也只有自己实践
2>内联标签可继承
太多了，好难写，我就贴下图，偷下懒
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS属性</title>
<style type="text/css">
div{
width: 150px;
height: 100px;
background-color: red;
/*设置子标签居中*/
line-height: 100px;
text-align: center;
}
a{
/*去掉下划线*/
text-decoration: none;
}
</style>
</head>
<body>
<div>
<span>1234567</span>
</div>
<p>22222222222</p>
<a href="#">百度一下</a>
</body>
</html>
界面效果图
3>块级标签可继承
4>列表标签可继承
3.4标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS属性</title>
<style type="text/css">
p{
/*设置缩进距离*/
text-indent: 3%;
}
ul{
/*控制前面的圆点 */
list-style: none;
}
</style>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<p>22222222222</p>
</body>
</html>
界面效果
不可继承的属性
不可继承的属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS属性</title>
<style type="text/css">
div{
width: 150px;
height: 100px;
/*设置背景图片*/
background: url("img/1.jpg");
background-size: cover;
}
p{
height: 100px;
width: 75px;
background-color: red;
/*对内容超出规定大小的处理*/
overflow: auto;
}
</style>
</head>
<body>
<div></div>
<p>2222222222222222222222</p>
</body>
</html>
界面效果
