CSS入门六
2020-12-07 本文已影响0人
码农修行之路
背景样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>背景样式属性</title>
<style type="text/css">
/* 背景样式属性 */
.box1 {
/*水平居中*/
/*text-align: center;*/
width: 500px;
/*高度和行高值一致 垂直居中*/
height: 1000px;
/*line-height: 500px;*/
/*边框*/
border: 1px solid skyblue;
/*背景颜色*/
/*background-color: blue;*/
/*背景图片 默认是重复的*/
/*background-image: url(../img/android.png);*/
/*背景是否可重复 只有当图片大小不足以覆盖全区域时 可以设置图片背景重复状态 以达到整个背景铺满的效果*/
/* repeat（全区域可重复平铺） no-repeat（不可重复） repeat-x（水平重复平铺 单行） repeat-y（垂直重复平铺 单列） */
/*background-repeat: no-repeat;*/
/*背景图片其实位置*/
/*盒子水平居中*/
margin-left: auto;
margin-right: auto;
/*background-position: right top;*//*右上*/
/*background-position: left bottom;*//*左下*/
/*background-position: center center;*//*居中*/
/*background-position: 100px 100px;*//*固定数值表示*/
/*background-position: 50% 50%;*//*百分比表示
/*background-position: 100px 50%;*//*混合方式表示 固定值和百分比*/
/*背景图片是固定还是随着页面滑动而滚动*/
/*background-attachment: fixed;*//*固定不动*/
/*background-attachment: scroll;*//*滚动*/
/*背景复合式简写形式*/
background: url(../img/android.png) #ff0 no-repeat center center;
/* 1. background 可以同时设置多个样式 背景颜色、背景图片、背景图片是否平铺、背景水平垂直位置 */
/* 2. background 其值的设置 不固定个数 不固定顺序 每个值之间通过空格隔开 */
}
</style>
</head>
<body>
<div class="box1">经过8年持续奋斗，我们如期完成了新时代脱贫攻坚目标任务，现行标准下农村贫困人口全部脱贫，贫困县全部摘帽，消除了绝对贫困和区域性整体贫困，近1亿贫困人口实现脱贫，取得了令全世界刮目相看的重大胜利。经过8年持续奋斗，我们如期完成了新时代脱贫攻坚目标任务，现行标准下农村贫困人口全部脱贫，贫困县全部摘帽，消除了绝对贫困和区域性整体贫困，近1亿贫困人口实现脱贫，取得了令全世界刮目相看的重大胜利。</div>
</body>
</html>
- 背景颜色 background-color: blue;
- 背景图片 默认是重复的 background-image: url(../img/android.png);
- 背景是否可重复 只有当图片大小不足以覆盖全区域时 可以设置图片背景重复状态 以达到整个背景铺满的效果 background-repeat
- repeat（全区域可重复平铺） no-repeat（不可重复） repeat-x（水平重复平铺 单行） repeat-y（垂直重复平铺 单列）
- 背景图片起始位置 可以通过 固定数值、百分比、混合方式表示
- 背景图片是固定还是随着页面滑动而滚动 background-attachment: fixed、scroll;
- 背景复合式简写形式 background: url(../img/android.png) #ff0 no-repeat center center;
- background 可以同时设置多个样式 背景颜色、背景图片、背景图片是否平铺、背景水平垂直位置
- background 其值的设置 不固定个数 不固定顺序 每个值之间通过空格隔开
边框样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>边框样式</title>
<style type="text/css">
div {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
/*border: 2px solid #f00;*/
/* 给每个边设置样式 */
/*border-top: 1px solid #f00;
border-bottom: 2px solid #00f;
border-left: 3px solid #0f0;
border-right: 4px solid #000;*/
/* 去掉某一边的边框 */
border: 2px solid #f00;
/* 是把上下边框宽度设置为0或者设置为none，这样上下边框就没有宽度了，因此去除了上下边框 */
border-top: 0px;
border-bottom: none;
}
</style>
</head>
<body>
<div>盒子</div>
</body>
</html>
