一、设置图片
1、对图片的实现方式两大类:插入图片(HTML实现)和背景图片(css样式)
设置图片大小:height(高度值)或width(宽度值)
2:、设置图片和其他元素边框
(1)设置边框样式的属性:border-style;
none (无边框,默认值)| dotted (点线)| dashed (虚线) | solid (实线) | double(双直线) | groove (凹直线)| ridge (凸直线)| inset (嵌入式)| outdet(嵌出式 )
设置边框宽度的属性:border-width;
设置边框颜色的属性:border-color;
(2)为4个边框设置不同样式
上边框 boder-top-style
boder-top-width
boder-top-color
下边框 boder-bottom-style
boder-bottom-width
boder-bottom-color
左边框 boder-left-style
boder-left-width
boder-left-color
右边框 boder-right-style
boder-right-width
boder-right-color
注意:可以写一个组合复合属性(一个属性多个值)
border-left:botted样式 5px宽度 颜色(为左边框设置样式宽度颜色)
(3)设置边框样式线条(顺序是顺时针,上 右 下 左;如果是三个值 上右 下 左同右 ;两个值,上下 下同上 左同右)
border-style:上右下左(为四个边框设置样式)
border-width:(为四个边框设置宽度)
border-color: (为四个边框设置颜色)
3、设置图片的对齐方式
(1)水平对齐:图片的水平对齐不能通过直接设置图片的text-align属性实现,而是通过设置其父元素的text-align属性来实现。
(2)垂直对齐(在CSS中可以使用vertical-align属性来控制图片的垂直对齐方式,它主要应用在图片与文字搭配的情况下。)
4、设置图文混排(可以使用margin属性设置图片同文字之间的距离)
图片居于文字右边:float:right;
图片居于文字左边:flost:left
5、设置背景图片
插入背景图片:background-image:url(图片的路径和名称)
设置背景图片的重复方式:background-repeat:repeat (背景图片在水平和垂直方向平铺(默认值)| repeat-x(背景图片在水平方向平铺) | repeat-y (背景图片在垂直方向平铺)|no-repeat(背景图片不平铺)
设置背景图片的位置:background-position
固定背景图片: background-sttachment:scroll (默认值。背景图像会随着页面其余部分的滚动而移动)| fixed(当页面的其余部分滚动时,背景图像不会移动)| Inherit(从父元素继承该属性的设置)
6、背景样式综合设置
background-color:red;
background-image:url(bg6.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:5px 10px;
以上代码可以统一用一个属性background代替,如下:
background:red url(bg6.jpg) no-repeat fixed 5px 10px;