CSS:层叠式样式表
1、对层标签整体进行操作
<div style="200px;height:200px;background-color:blue"></div>
宽度 200px/50%
高度 height:200px/50%
背景色 background-color:red/#颜色代码
背景图片 background-image:url(图片路径)
背景图片排列方式 background-repeat:repeat平铺/repeat-x背景图像将在水平方向重复/repeat-y背景图像将在垂直方向重复/no-repeat背景图像将仅显示一次
背景图片位置 background-postion:
背景图片大小 background-size:
背景图片是否滚动(fixed背景图锁定) background-attachment:fixed
边框 border:5px solid red(宽度 实线/虚线 颜色)
绝对定位(定位层标签左上角的点) position:abslute;
层间距 margin-left/right/top/bottom:10px left层标签左侧间距,right层标签右侧间距,top层标签上部间距,bottom层标签底部间距
2、对层标签中文字样式进行操作
格式:<div style="font-weight:100;font-style:italic;text-decoration:underline;font-size:10px;color:red;font-family:黑体"></div>
加粗 font-weight:100/bold;
倾斜 font-style:italic;
下划线 text-decoration:underline;
删除线 text-decoration:line-through;
大小 font-size:10px; (正常浏览一般12px-18px)
颜色 color:red/#颜色代码;
字体 font-family:黑体;
3、流式布局
格式:<div style="100px;height:100px;background-color:blue;float:left/right;margin-left/right/top/bottom:10px;min-500px"></div>
float left从左向右布局,right从右向左布局
min-500px 设置流式布局最小宽度,若浏览器页面小于500px,则下方出现水平滚动条
4、层标签分组
格式:
<head>
<style type="text/css">
.组名{width: ;
height: ;
………… ;
}
</style>
</head>
<body>
<div class="组名"></div>
<div class="组名"></div>
<div class="组名"></div>
</body>
分组后的层标签按照<head>内的格式统一
5、将一个<div>排布到页面中间
<div style="200px;height:300px;background-color:red;position:absolute;top:50%;margin-top:-150px; left:50%; margin-left:-100px;"></div>
先设置绝对定位,再将这个div左上角的点定位到页面中央,然后向左和向上分别进行调整
6、去掉层标签和html页面顶部的缝隙
<head>
* {
margin:0px;
padding:0px;
}
</head>