CSS样式详解-优快云博客

设置颜色-color;设置背景颜色-background-color;插入背景附

件----background-attachment;插入背景图片-background-

image;设置重复背景图片----background-repeat;设置背景图

片位置-----backgroung-position;
transparent表示透明度，是背景颜色；backgroung-color属

性的初始值。scroll表示背景图片是随着滚动条的移动而移动。

是浏览器的默认值。
? fixed表示背景图片固定在页面上不动，不随着滚动条的移动

而移动。
repeat背景图片在水平和垂直方向平铺；repeat-x背景图片在

水平方向平铺；repeat-y背景图片在竖直方向平铺；no-

repeat图片不平铺；利用百分比和长度设置图片位置时，都要

指定两个值，并且这两个值要用空格隔开。一个代表水平位置

，一个代表垂直位置。水平位置的参考点是网页页面的左边，

垂直位置的参考点是页面的上边。
? 关键字在水平方向的主要有left、center、right，表示居左、

居中和居右。关键字在垂直方向的主要有top、center、

bottom，表示顶端、居中和底端。其中水平方向和垂直方向的

关键字可相互搭配使用。
?使用百分比和关键字对比说明background-position属性的属

性值。
top left左上位置；top center靠上居中；top right右上位置；
left center靠左居中；center center正中位置；bottom right

右下位置bottom center靠下居中
设计边框样式——border-style
调整边框宽度——border-width
设置边框颜色——border-color
设置边框属性——border
边距——margin-top /margin-bottom /margin-left/

margin-right/margin
填充——padding-top／padding- bottom /padding-left /

padding- right /padding
边界属性margin-top设置对象的上边距
margin-right设置对象的右边距
margin-bottom设置对象的下边距
margin-left设置对象的左边距

边框属性border-style设置边框的样式
border-width设置边框的宽度
border-color设置边框的颜色

填充属性padding-top设置内容与上边框之间的距离
padding-right设置内容与右边框之间的距离
padding-bottom设置内容与下边框之间的距离
padding-left设置内容与左边框之间的距离
border-style:样式取值
border-top-style:样式取值
border-bottom-style:样式取值
border-left-style:样式取值
border-right-style:样式取值
none不显示边框dotted点线dashed虚线solid实线double双

直线groove凹形线ridge凸型线inset嵌入式outset嵌出式
边框样式属性中border-style是一个复合属性，其他4个都是单

个边框的样式属性，只能取一个值，而复合属性border-style可

以同时取一到4个值。下面分别说明border-style属性的4个取值

方法：
 取一个值：四条边框均使用这一个值。e:s
 取两个值：上下边框使用第一个值，左右边框使用第二个值

，两个值一定要用空格隔开。
 取三个值：上边框使用第一个值，左右边框使用第二个值，

下边框使用第三个值，取值之间要用空格隔开。
 取4个值：四条边框按照上、右、下、左的顺序来调用取值。

使用绝对单位也可使用相对单位，如px、pt、cm等。
 基本语法中边框宽度属性border-width是一个复合属性，可

以同时设置四条边框的宽度。具体使用方法和边框样式的复合

属性border-style是一样的，可以参照上一节关于border-style

top:12px; width:165px; height:104px;"></div>
</body>
<body>
<div id="Layer1" style="position:absolute; z-index:1;

left:29px; top:12px; width:165px; height:104px;"></div>
<div id="Layer1" style="position:absolute; z-index:1;

left:29px; top:12px; width:165px; height:104px;"></div>
</body>
position属性将对象从文档流中拖出，进行绝对定位；
 left、top属性进行左边距和顶端间距的设置；
 width、height属性进行宽度和高度设置；
 层叠通过z-index属性定义。

css