day5选择器权重和文本属性

1.权重：

            css的权重是用四个数值表示的，即 ： 0,0,0,0

                基础选择器

                    通配符*：                 0,0,0,0

                    类型选择器（元素选择器）： 0,0,0,1

                    class选择器（类选择器）：  0,0,1,0

                    伪类选择器 (:hover)    :   0,0,1,0

                    id选择器          0,1,0,0

复合选择器：后代选择器（包含选择器）： 包含选择器权重之和

子选择器                ：选择器权重之和

相邻兄弟选择器          ：选择器权重之和

 通用选择器              ：选择器权重之和

交集选择器              ：选择器权重之和

          注：群组选择器的权重：是各选择器自身权重大小;

                    .box    ,    #box    ,   div     { }

                    0,0,1,0     0,1,0,0     0,0,0,1

                                      

                    .box{ }  0,0,1,0

                    #box{ }  0,1,0,0

                    div{ }   0,0,0,1

                     

其他权重：

                    内联样式表： 1,0,0,0

                    !important;  关键字过滤器，具有最高优先级，

                                 使用方法： background:#0f0 !important;

                    继承属性：   0,0,0,0

                权重的计算：

                    1、计算权重值的时候，是同位相加，不进位；

                    2、比较式，从前往后，同位进行比较大小；

 css属性-文本属性:

            1、字号大小:

                font-size:value;

                注：value表示数值

                    部分浏览器不识别12px一下的文字大小，最小以12px显示；

                    font-size:0; 隐藏文字

                    默认时：文本显示为16px = 1em

            2、文本颜色：

                color:colorValue;

                注：colorValue 表示颜色值

               

            3、文本加粗

                font-weight:;

                    属性值：

                        normal 默认值，常规显示，取消加粗； 400 —— 500

                        bold   加粗显示 600 —— 700

                        了解即可：

                        bolder  更粗的 800 —— 900

                        lighter 极细的 100 —— 300

                        100 - 900 的粗细等级

             

            4、文本倾斜：

                font-style:;

                    属性值：

                       normal 默认值，常规显示，取消倾斜

                       italic  倾斜 ，倾斜的字体

                       oblique 倾斜 ，倾斜的文字

                   

            5、小型的大写字母:(了解)

                font-variant:;

                    属性值：

                        normal 默认值，常规显示

                        small-caps 小型的大写字母

            6、文字字体

                font-family:;

                默认时，Windows中文操作系统的默认字体，是宋体或者新宋体；

                字体设置写法：

                    -> 如果设置的字体是中文，就要写在引号里面;如：'微软雅黑' 英文写法：'Microsoft YaHei'

                    -> 如果设置的字体是英文，并且是由多个英文单词组成的，也要写在引号里；如：'Times New Roman'

                    -> 如果设置的字体是英文，且是由一个英文单词组成的，就不需要写在引号里；如：Arial;

                注：

                    -> 中文字体对英文起作用，而英文字体对中文是不起作用的；

                    -> 一个元素可以同时设置多个字体；字体之间用逗号隔开的形式;

                        如下： 

                            font-family:arial,'宋体','微软雅黑';

                            浏览器会从前往后解析，如果第一个字体有，就以第一个字体显示，后面的就不看，

                            如果没有第一个字体，则会找第二个，一次往后，如果都没有，就显示默认字体；

            

 css属性-文本属性-对齐属性:

            8、设置文本水平对齐：

                text-align:;

                    属性值：

                        left    左对齐（默认值）

                        center  居中对齐

                        right   右对齐

                        justify 两端对齐

            9、垂直对齐：(了解)

                vertical-align:;

                    属性值：

                        top 顶对齐

                        middle 居中对齐

                        bottom 底对齐

                        baseline 基线对齐（默认值）

                        text-top 相对文本顶对齐(了解)

                        text-bottom 相对文本底对齐(了解)

                        super  上标 (所有标签都可以应用)

                        sub    下标 (所有标签都可以应用)

                    注：目前，对img 、input、textarea 、select ...是可以直接应用的；

  css属性-文本属性-行高属性:

            10、行高属性：

                line-height:value;

            

                说明：

                    -> 属性值可以加单位也可以不加单位，不加单位表示倍数的意思，是文字大小的倍数

                    -> 行高也可以缩写在font属性的后面，但是必须要和字号用斜杠的形式写在一起；

                       如： font:字号/行高 '字体'；

                作用：设置行间距

                注：默认情况下，文本是由默认行高的，默认值为文字大小的1.3倍左右；

                行高的测量方式：

                    - 多行文本的测量方式：从上一行文字开始，量到下一行文字开始；

                    - 单行文本的测量方式：从元素顶部量到文字顶部乘2 ，再加上文字字号大小；

                                         或从元素顶部量到文字中间，再乘2；

    11、文本修饰属性：

                复合属性：（常用）

                    text-decoration: line color style;

                    如：

                        text-decoration: underline  red dashed;

                        

                    单独设置文本修饰的属性：（了解）

                        -> 设置文本修饰的线的显示位置

                            text-decoration-line:;（必须的）

                                 属性值：

                                    none 没有修饰（默认值）

                                    underline  下划线

                                    overline   上划线

                                    line-through  删除线

                        -> 设置文本修饰线条的颜色：

                            text-decoration-color:;

                                默认时跟文本颜色相同

                        -> 设置修饰线条的线型：

                            text-decoration-style:;

                                属性值：

                                    solid  实线（默认值）

                                    dashed 虚线

 css属性-文本属性-首行缩进：

            12、首行缩进属性：

                text-indent:value;

                注：

                    -> 只对第一行起作用

                    -> 支持负值

 css属性-文本属性-字间距和词间距:

            13、字间距

                letter-spacing:value;

                注：设置字之间的间距和字母之间的间距

                    支持负值

                 

            14、词间距

                word-spacing:value;

                 

                注：设置英文单词和单词之间的间距

                    支持负值