网页设计基础3

                                网页设计基础3

1.边框样式：border-style: 上 右 下 左
border-style: 上 左右 下
border-style: 上下 左右
注意：综合设置四边样式，必须按照上右下左的顺序，省略时采用值复制的原则，即一个值为四边，两个值为上下、左右，三个值为上、左右、下。
覆盖式：p{border-style:solid;}
p{border-top-style:dashed;}
2.边框宽度：border-width
border-bottom-width:下边框宽度
border-left-width:左边框宽度 right top
注意：综合设置四边样式，必须按照上右下左的顺序，省略时采用值复制的原则，即一个值为四边，两个值为上下、左右，三个值为上、左右、下。
3.边框颜色：border-color
注意：综合设置四边样式，必须按照上右下左的顺序，省略时采用值复制的原则，即一个值为四边，两个值为上下、左右，三个值为上、左右、下。设置边框颜色时必须设置边框样式。
4.综合设置边框：border：四边宽度 样式 颜色
border-top 上边宽度 样式 颜色
……
注意：宽度 样式 颜色顺序任意，不分先后，可以只指定需要设置的属性。
5.内边距属性：padding
padding-top
padding-bottom
……
注意：综合设置四边样式，必须按照上右下左的顺序，省略时采用值复制的原则，即一个值为四边，两个值为上下、左右，三个值为上、左右、下。
6.外边距属性：margin
margin-top
margin-left
……
7.背景颜色：backgrund-color;
8.背景图像：background-image：url(cat.jpg);
9.背景图像平铺：背景图像会自动向水平和竖直两个方向平铺，如果不希望图像平铺，或者只沿一个方向平铺，可以通过background-repeat属性来控制。
repeat：沿水平和竖直两个方向平铺
no-repeat:不平铺（图像位于元素的左上角，只显示一次）
repeat-x:只沿水平方向平铺
repeat-y:只沿竖直方向平铺
10.背景图像的位置:background-position属性值通常设置为两个，中间用空格隔开，用于定义背景图像在元素的水平和垂直方向的坐标。
属性的取值有多种，例如：
使用不同单位（最常用的是像素px）的数值：直接设置图像左上角在元素中的位置，例如 ：background-position：20px 20px;
使用预定义的关键字：指定背景图像在元素中的对齐方式。
水平方向值：left cetter right
竖直方向值：top cetter bottom
使用百分比：按背景图像和元素的指定点对齐
11.背景图像固定：background-attachment
scroll：图像随页面元素一起滚动
fixed：图像固定在屏幕上，不随页面元素滚动
12.综合设置元素的背景：
p{
background-image：url(cat.jpg);
background-repeat:no-repeat;
background-position:50px 80px;
background-attachment:fixed;
}