我的前端学习之路＜css核心属性＞

1，文本属性

        文本大小属性         font-size

                取值：大部分使用px单位，也使用其他单位em / rem

                知识点：一般网站最小字体为10px

                                字体大小一般用偶数

                                浏览器默认字体大小为16px

        文本字体属性        font-family

                取值：①中文字体，引号可加可不加

                           ②英文字体，一个单词可不加引号，多个单词加引号

                           ③设置多个字体时，中间用逗号隔开

                知识点：谷歌默认字体为微软雅黑

        文本颜色属性        color

                取值：①颜色单词

                           ②rgb取值（取值范围0--255）

                           ③rgba取值（a为透明度，取值范围0--1）

                           ④#六位十六进制的颜色值（相邻两位一样时可以简写）

        文本加粗属性        font-weight

                取值：①数值类型        100--900（不带单位的整百数值）

                                                        100 细体

                                                        400 正常字体

                                                        700 加粗字体

                                                        900 更粗字体（强调性）

                        ②关键词类型        lighter 细体

                                                        normal 正常字体

                                                        bold 加粗字体

                                                        bolder 更粗字体（强调性）

                        400和narmal的作用：取消b，strong，h1--h6默认加粗效果。当作普通标签来用

        文本倾斜属性        font-style

                取值：normal         正常字体

                            italic        倾斜字体

                            blique        倾斜字体（强调性）

                normal作用：取消i / em标签自带的倾斜效果

        文本对齐

                水平对齐        text-align

                        取值：left        左对齐

                                right        右对齐

                                center        居中对齐

                                justify        两端对齐

                单行文本垂直居中        line-height

                        取值：=元素高度        垂直居中

                                <元素高度        文本贴上面显示

                                >元素高度        文本贴下面显示

        文本修饰线        text-decoration

                取值：underline        下划线

                        line-through        中划线（s / del）

                        overline        上划线

                        none        取消文本修饰线

        首行缩进        text-indent

                取值：①使用px为单位的数值，可正可负

                           ②首行缩进用em为单位的数值

                特点：只对第一行文本起作用，不影响第二行

        字间距        letter-spacing

        词间距        word-spacing

        检索英文字母大小写        text-transform

                作用：让英文字母大小写切换

                取值：none        默认值，无任何切换

                          capitalize        首字母大写

                           uppercase        全部大写

                           lowercase        全部小写

        小型大写字母符        font-variant

                作用：把小写字母转换为大写，且只占四线三格的中间格子

                取值：normal        正常字体

                          small-caps        小型大写字母

        文本控制显示方向        layout-flow

                取值：horizontal        从左向右开始显示

                          vertical-ideographic        从上向下开始显示

        文本复合属性        font：font-style font-weight font-size / font-height font-family

                注意事项：①必须按顺序书写

                                        ②字体大小与字体必须设置

                                        ③字体需要放在最后

                                        ④字体大小与行间距用 / 分割，前面字体大小，后面行间距

2，列表属性

        列表项样式        list-style-type

                取值：disc        黑色实心圆点

                        circle        空心圆

                        square        黑色实心方块

                        none        取消列表项

        列表项图片        list-style-image

                取值：list-style-image：url（图片位置）

        列表项位置        list-style-position

                取值：inside

                           outside

        列表项符合属性        list-style

                案例：list-style：none url（路径） inside

                注意：三个位置可以随意调换

        总结：列表项属性值可以添加在ul上也可添加在li上，都能有对应的效果，这一特点称为“属性继承”，即在父元素上能实现的效果，放在子元素也能实现

3，边框属性        border

        含义：一个元素 / 容器的边缘

        取值：border-width        边框宽度

                border-color        边框颜色

                border-style        边框样式

                        取值：solid        单实线

                                        double        双实线

                                        dashed        线段状虚线

                                        dotted        点状虚线

                                        transparent        透明色

                设置单一方向的边框        border-方向值

                        border-top        上边框

                        border-right        右边框

                        border-bottom        下边框

                        border-left        左边框

4，背景属性

        背景颜色        background-color

                取值：①颜色单词

                                ②rgb（取值0--255）

                                ③rgba（a取值为0--1，1为不透明，0全透明）

                                 ④#六位十六进制颜色值

        背景图片        background-image url("路径")

                如果：图片>盒子，会产生裁剪效果

                           图片<盒子，会产生平铺效果

                           图片=盒子，则图片完整显示

        背景平铺        background-repeat

                取值：repeat        平铺（默认值）

                        no-repeat        不平铺

                        repeat-x        水平平铺

                        repeat-y        垂直平铺

        背景位置        background-position

                取值：x（水平方向）        y（垂直方向）        原点为左上角

                        默认左上角显示，取值为px单位 / %单位 / 关键词（left right top bottom center）

        背景滚动和固定        background-attachment

                取值：scroll        滚动（默认值）

                        fixed        固定

        背景图片尺寸大小        background-size

                取值：①以px或%为单位的数值，但是会使图片变形

                        ②单词：cover        等比例放大，覆盖效果，整个盒子铺满，图片显示不全

                                      contain        等比例放大，包含效果，整个图片显示，盒子会留白

        背景属性复合属性        background：color image repeat possition / size attachment

                取值：空格隔开，多个取值可以调整顺序，但是位置和大小不能调整且必须用 / 分割

        浮动        float

                取值：left        向左浮动

                           right        向右浮动

                           none        不浮动

                作用：为了让元素横向显示

                总结：如果所有的浮动元素都添加左侧浮动，则元素会横向显示，从左向右依次排列

                        都使用浮动，后面剩余空间不够时，最后一个折到下一行显示

        清除浮动带来的影响        clear

                取值：none        不清除浮动带来的影响

                        left        清除左侧浮动带来的影响

                        right        清除右侧浮动带来的影响

                        both        清除所有浮动带来的影响

5，单行文本溢出显示三个小圆点

        ①，设置容器宽度：width：200px；

        ②，强制文本单行显示：white-space：nowrap；

        ③，溢出内容为隐藏：overflow：hidden；

        ④，溢出文本显示省略号：text-overflow：ellipsis

cs继承性：①文本大部分属性

                  ②列表属性

                   ③表格元素

css层叠：一个元素同时被多个选择器或者是多个样式表进行修饰时，相同修饰属性会被层级高的选择器修饰，不同的修饰属性被保留