css样式属性
常用布局样式属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS学习</title>
<style>
.box{
width:150px;
height:150px;
background: papayawhip;
/*设置背景图片 不重复显示图片 拉伸当前显示这个图片*/
/*background: url("520.png") no-repeat;*/
/*background: url(520.png) no-repeat;*/
/*设置标签的四周边框*/
/*border: 15px solid red;*/
border-top: 5px solid red;
border-left: 5px solid black;
border-bottom: 5px solid yellow;
border-right: 5px solid green;
/*浮动 左右*/
float:right;
}
.box0{
width:1000px;
height:1000px;
background: papayawhip;
}
.box1{
width:500px;
height:100px;
background: peru;
}
.box2{
width:400px;
height:100px;
background: orange;
float: right;
}
.box3{
width:500px;
height:100px;
background: paleturquoise;
}
</style>
</head>
<body>
<div class="box">三行情书</div>
<div class="box0">
<div class="box1">思无邪，念折堕，今夕两茫茫</div>
<div class="box2">为伊憔，胭脂笑，欲语寄红楼</div>
<div class="box3">天雨粟，鬼夜哭，思念漫太古</div>
</div>
</body>
</html>
图片为网页效果，蝴蝶是我电脑屏幕上的。
常用文本样式属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS学习</title>
<style>
p{
/*设置文字颜色 大小 加粗*/
color:pink;
font-size: 30px;
font-width: bold;
/*设置文字的字体*/
font-family: 'Microsoft YaHei UI';
background: paleturquoise;
/*下划线*/
text-decoration: underline;
/*text-decoration: line-through;*/
/*text-decoration: overline;*/
/*行高*/
line-height: 100px;
/*设置水平方向对齐 居中*/
text-align: center;
/*缩进*/
text-index: 30px;
}
span{
color:green;
}
a{
/*取消下划线*/
text-decoration: none;
}
</style>
</head>
<body>
<!-- span标签可以设置某一段文字中一两个词的样式-->
<p>富贵可离<br>权柄可逆<br>独独是<span>你</span>不可弃</p>
<a href="http://www.baidu.com">百度</a>
</body>
</html>
元素溢出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS学习</title>
<style>
.box1{
width:1000px;
height:100px;
background:orange;
/* 元素溢出在父标签选择器上进行设置*/
/* 超出部分隐藏*/
/* overflow:hidden;*/
/* 超出部分显示*/
/* overflow:visible;*/
/* 超出部分滚动显示*/
overflow:auto;
}
.box2{
width:500px;
height:200px;
background: paleturquoise;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">思无邪，念折堕，今夕两茫茫</div>
</div>
</body>
</html>
显示特性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS学习</title>
<style>
.box1{
wieth:100px;
height:100px;
background: paleturquoise;
/*把该标签隐藏并且不占用位置*/
display:none;
}
.box2{
wieth:100px;
height:100px;
background: paleturquoise;
/*设置div和其他元素一行显示，以后就不能设置宽高*/
display:inline;
}
a{
/*设置div单独占一行显示，不和其他标签在一行显示*/
display:block;
}
</style>
</head>
<body>
<div class="box1">happy every day</div>
<p>哈哈</p>
<div class="box2">happy new year</div>
<a href="https://www.baidu.com">百度</a>
</body>
</html>