<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS属性1</title> <style> #div1{ background: yellow; text-align: center; /*居中属性align*/ line-height: 100px; /*背景高度*/ color: red; font-size: 28px; font-style: italic; } #di2{ height: 100px;/*画面高*/ /*background: url("520.jpg" ); background-repeat: no-repeat; background-size: auto; background-position: center;*/ /*可以简写成下面的格式，图片，不重复显示图片，间隔，颜色*/ /*background: url("520.jpg") no-repeat red;*/ } .div3{ border:dashed 5px ; height: 200px; width: 30%; background-color: chartreuse; } .div4{ margin-top: 20px; margin-bottom: 20px; border:dashed 5px ; height: 200px; width: 30%; background-color: chartreuse; } .div5{ border:dashed 5px ; line-height: 200px; width: 30%; background-color: chartreuse; text-align: center; } </style> </head> <body> <div id="div1">这个是文本</div> <!--文本属性--> <div id="di2"></div> <!--背景属性--> <div class="div3">这个是div3</div> <!--边距属性--> <div class="div4">这个是div4</div> <div class="div5">这个是div5</div> </body> </html>