H5-前端学习-04CSS属性部分

         哈喽，各位小伙伴，我们会更新一些前端的文章，想学习前端的小伙伴，特别是0基础的小伙伴，或者对此感兴趣的小伙伴，可以关注我，我会保持更新。

CSS属性部分：
            CSS语法：选择器：{属性：属性值}
            1.文本属性
                1.字号大小：
                    font-size:数值+单位
                    浏览器中默认字号大小为16PX
                2.字体：
                    font-family:字体名1，字体名2，字体名3
                        取值：
                            单一取值：
                                1.如果字体名是中文，引号可加可不加
                                2.如果字体名是一个英文单词，不加引号
                                3.如果字体名由多个英文单词组成需要加上引号
                            取多个值：
                                不同字体名用逗号隔开
                            谷歌浏览器默认字体微软雅黑
                            IE低版本浏览器默认字体为宋体
                3.字体颜色：
                    color：
                        取值：
                        1.一个表示颜色的英文单词 如：red，yellow，pink
                        2.#六位十六进制数值（0-9A-F） 如：#09AB3C(正确)，#59AJ23(错误)
                        3.rgb(red,green,blue)(0-255) 如：rgb(150,123,22)
                        4.rgba(red,green,blue,alpha)
                          alpha:透明度用数字来表示取值范围:0-1，0：完全透明；1：完全不透明,可以取0.2,0.5之类的
                4.字体加粗：
                    font-weight:
                    取值：
                    1.关键词取值
                        bold------加粗
                        bolder----更粗（效果同等于加粗）
                        normal----正常显示（默认值，可以用来取消b,strong,标题标签的加粗效果）
                        lighter-----细体字
                    2.数值取值（整百数值取值）
                        100-900
                        100-----细体字
                        400-----normal(正常显示)
                        700-----加粗
                        900-----更粗
                5.字体倾斜：
                    font-style:
                    取值：
                        italic-----字体倾斜(强调斜体字)
                        oblique------字体倾斜(强调倾斜效果，更具有强调性)
                        normal------正常显示（默认值,可以用来取消,i,em标签的倾斜效果）
                6.文本修饰线：
                    text-decoration:
                    取值：
                    underline------下划线
                    overline------上划线
                    line-through----中划线（删除线）
                    none--------取消下划线(常用来取消超链接标签的下划线)
                7.首行缩进
                    text-indent:数值+单位(px,em)
                    em是一个相对单位，相对于父元素字号大小进行放大或缩小
                    不更改父元素字号大小
                        1em=16px
                        2em=32px
                    更改父元素字号大小为20px
                        1em=20px
                        2em=40px
                8.文本对其方式：
                    text-align:
                    取值:
                    left------靠左
                    center-------水平居中
                    right------靠右
                    justify------两端对其(对单行文本不生效，对多行文本最后一行生效)
                9.行高
                    Line-height:
                    应用在单行文本中：
                        当行高大于容器高度，文本靠下显示；
                        当行号等于容器高度，文本居中（此时可以省略容器高度）；
                        当行高小于容器高度，文本靠上显示
                    应用在多行文本中：
                        用来调整每一行文本内容之间的间距

            2.列表属性：
                list-style:none;取消列表项样式，写在ul/ol或者li上面都生效---（常用）
                list-style:none url() outside;（不常用）
                    none:表示列表项样式
                    url：表示更改列表项插入的图片
                    outside:表示列表项在列表内还是列表外

            3.边框属性：
                边框：元素的边缘
                bodder:5px solid red;
                5px------边框粗细------border-width
                solid-----边框样式-----border-style
                最后的颜色，如果想要设置为透明（如：制作三角，颜色设为transparent）
                    取值：
                        solid------实线
                        dashed-----虚线
                        dotted-----点线(由点组成的线)
                        double------双实线
                red------边框颜色------border-color
                思考：给元素指定方向上设置边框
                    border-方向词
                    border-top--------上边框
                    border-right--------右边框
                    border-bottom--------下边框
                    border-left--------左边框
            4.背景属性：
                1.背景颜色
                    background-color:
                    取值：
                    同color取值方式
                2.背景图
                    background-image:url()
                    默认背景图重复
                    背景图在页面中不占位置
                3.背景图重复
                    background-repeat:
                    取值
                    repeat-------重复(默认值)
                    no-repeat------不重复
                    repeat-x------水平方向重复（X轴重复）
                    repeat-y------垂直方向重复（Y轴重复）
                4.背景图的位置
                    background-position:x y;
                        X-------水平方向上的位置
                        Y-------垂直方向上的位置
                    取值：
                        1.数值+单位，可以是正值，也可以是负值
                            x:100px
                            y:100px
                        2.关键词
                            x------left/center/right
                            y------top/center/bottom