CSS中的列表属性及背景属性、边框属性

css语法：选择器{属性:属性值;属性:属性值;属性:属性值;}

        CSS中的属性：

一、列表属性：

           取消列表项样式（常用）

                list-style:none;

                可以添加在ul标签上也可以添加在li标签上

                拓展：

                    1)列表项样式

                        list-style-type:

                            取值

                                disc/circle/square/none

                    2）列表项显示位置

                        list-style-position:

                            取值：

                                outside/inside

                    3）列表项图标（不推荐使用，不方便更改）

                        list-style-image:url(路径)

 二、背景属性：

            1、背景颜色：

                background-color:

                    取值：

                            1、一个表示颜色的英文单词，如：red、green、white、

                            2、rgb(红,绿,蓝)，红绿蓝用数字来表示，取值区间在0-255

                            3、rgba(红,绿,蓝,alpha),红绿蓝用数字来表示，取值区间在0-255

                                a:表示透明度，取值0-1，0表示完全透明，1表示完全不透明

                            4、#开头六位十六进制的数值，取值范围：数字0-9，字母A-F

                                #1A2C9E;      #3C4D6A;

            2、背景图

                background-image:url(路径)

                    添加背景图后默认会平铺（重复）显示，如果不想要重复显示，需要使用background-repeat

            3、背景图重复

                background-repeat:

                    取值：

                        repeat-------可以平铺（默认值）

                        no-repeat--------不平铺（常用）

                        repeat-x---------水平方向上平铺

                        repeat-y---------垂直方向上平铺

            4、背景图位置

                background-position：

                    取值：

                        1）background-position：x y

                            取值为数值+单位

                            x：表示水平方向位置，取值为正数，向右侧移动

                            y：表示垂直方向位置，取值为正数，向下面侧移动

                        2）background-position：x y

                            取值为百分数

                            x：表示水平方向位置，取值为正数，向右侧移动

                            y：表示垂直方向位置，取值为正数，向下面侧移动

                        3)background-position：x y

                            关键词取值

                            x：left/right/center

                            y：top/bottom/center

            5、背景图大小

                background-size：

                    取值：

                        1）background-size：x y

                            x、y取值为数值+单位

                        2）关键词取值

                            contain-----填充，图片等比缩放，直到容器一侧填充满，图片不在进行等比缩放，会出现容器一侧留白问题

                            cover------覆盖，图片等比缩放，将容器完全填充满为止，会出现图片被裁减掉的情况

            6、背景图的固定于滚动

                background-attachment:

                    取值：

                        scroll------滚动

                        fixed-------固定（固定在浏览器窗口左上角）

            7、复合属性：

                {background：颜色（可以省掉）背景图 平铺 位置}

背景属性的缩写语法正确的是（）
A  {background:#00ff00  url(背景图片的路径及全称) no-repeat  center  top;}
B  {background:url(背景图片的路径及全称) #00ff00  no-repeat  center  top;}
C  {background:url(背景图片的路径及全称) #00ff00  center  top  no-repeat;}
D  {background:url(背景图片的路径及全称) no-repeat  center  top;}

正确答案: A,B,C,D

           三、 边框属性：

                border：2px solid red;(复合属性)

                    2px-------边框宽度------border-width

                    solid-----边框样式------border-style

                        取值：

                            solid-------实线

                            dashed------虚线

                            dotted------点线

                            double------双实线

                    red-------边框颜色------border-color

                添加某一方向上的边框

                    border-top：------上边框

                    border-right------右边框

                    border-bottom------下边框

                    border-left------左边框

                用边框书写三角形（面试题）

  div{
      width:0px;
      height:0px;
      border:50px solid transparent;
      border-bottom:50px solid pink;
     }