【前端学习记录5】边框样式、列表样式、表格样式、图片样式和背景样式

一、边框样式

       1、整体样式：

            (1)属性：border-width定义宽度

                           border-style定义外观：none无样式、dashed虚线、solid实线

                           border-color定义颜色：取值“关键字”或“十六进制RGB值”

            (2)简写形式：

                           div{border:1px solid red;}

       2、局部样式：

            上边框：border-top

            下边框：border-bottom

            左边框：border-left

            右边框：border-right

二、列表样式

       1、列表项符号：list-style-type

             语法：list-style-type:取值；

       2、去除列表项符号

             语法：list-style-type:none;

       3、列表项图片

             语法：list-style-image:url(图片途径);

三、表格样式

       1、表格标题位置

             语法：caption-side:取值；

             取值：top 标题在顶部

                        bottom 标题在底部

       2、表格边框合并：

             语法：border-collapse:取值；

             取值：separate 边框分开，有空隙

                        collapse 边框合并，无空隙

       3、表格边框间距：

             语法：border-spacing:像素值；

四、图片样式

       1、图片大小

             语法：width:像素值；

                        height:像素值；

       2、图片边框

            语法：border:1px solid red

       3、图片对齐

            (1)语法：text-align:取值；

            取值：left 左对齐

                       center 居中对齐

                       right 右对齐

            (2)垂直对齐：

                    语法：vertical-align:取值；

                    取值：top 顶部对齐

                               middle 中部对齐

                               baseline 基线对齐

                               bottom 底部对齐

      4、文字环绕

            语法：float:取值；

            取值：left 元素向左浮动

                       right 元素向右浮动

五、背景样式

       1、背景颜色

             语法：background-color:颜色值；

             颜色值：“关键字”或“十六进制RGB值”

       2、背景图片样式

             语法：background-image:url(图片路径)；

       3、背景图片重复

             语法：background-repeat:取值；

             取值：repeat 在水平方向和垂直方向上同时平铺

                        repeat-x 只在水平方向(x轴)上平铺

                        repeat-y 只在垂直方向(y轴)上平铺

                        no-repeat 不平铺

       4、背景图片位置

             语法：background-position:水平距离 垂直距离 ；

             距离属性：像素值/关键字

             关键字：top left  左上

                           top center  靠上居中

                           top right  右上

                           left center  靠左居中

                           center center  正中

                           right center  靠右居中

                           bottom left  左下

                           bottom center  靠下居中

                           bottom right  右下

       5、背景图片固定

             语法：backgroung-attachment:取值；

             取值：scroll 随元素一直滚动

                        fixed 固定不动