HTML基础样式（三）

一、设置图片

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;