选择器的权重和字体样式

12选择器的权重（面试题）

       样式冲突

       优先级：

              !important>内联>id选择器>class选择器/属性选择器>元素选择器>通配选择器>继承选择器

注意：1.选择器的权重一样，优先选用靠下的样式

              2.如果是交集选择器，则所有选择器权重相加，最终谁大听谁的

              3.如果是并集选择器，则选择器的权重各算各的

              4.选择器的权重相加，再大也不会超过它上一级权重

总结：哪个选择器越具体，权重越大

       实际应用过程中，样式没设置成功：

              1.有没有选择2.选择器权重

04字体样式

01长度单位

像素      px、

百分比  %    是一个相对单位，相对于其父元素高宽，多用于流体式布局、

em  相对于当前字体的大小设置的，是一个相对单位，字体默认大小16px，若没设置字体大小，则继承其祖先元素字体大小，直到根标签默认字体大小16px、

rem      只相对于根标签字体大小来设置，是一个相对单位

02颜色单位

       Rgb（red、green、blue）

       Rgba（red、green、blue 、0—1）   0是透明，1是不透明

       Hsla       表示亮度、色相、颜色、透明度

       使用十六进制    0-9abcdef

       03字体样式

       Color     文字颜色

       Font-family  文字字体

       Font-size       文字大小

       @font-face   自定义字体

       Font简写：大小、字体必须写，而且大小在倒二，字体在倒一

       04行间距

       行高（line height）：文字占有的实际高度、上间距+下间距+字体大小

       行间距=上间距+下间距

       Line-heigh属性：1.直接放大小单位px、em、rem、%

                                   2.直接放倍数（当前字体大小的倍数）   例如：1  2  3

                                   3.放百分比（当前字体大小的百分比）

       单行文本在父元素中垂直居中：单行文本高度设置和高度一致，就会垂直居中

       font也可以指定大小

       07文本样式

1. text-transform：设置文本的大小写

可选值：none 默认值，正常显示

                            Uppercase   文本大写

                            Lowrcase      文本小写

                            Capitalize     首字母大写

1. text-décoration：设置文本的修饰

可选值：none 默认值，正常显示

               Underline    下划线

               Overline       上划线

               Line-though 删除线

       3.    letter-spacing：字符距离

4.    word- spacing：单词距离

5.    text-align：对齐方式

       可选值：center  居中、left（默认值）、right、justify（两端对齐）

6.    text-indent：首行缩进

              常用的  em单位

      

       7.    white-space：设置网页如何处理空白

              可选值：normal 换行显示

                            Nowrap不换行

       8.    text-overflow：文本溢出包含元素的情况

可选值：clip      裁剪

                            ellipsis 显示省略号

              Overflow属性：hidden 隐藏

       9.    vertical-align：设置元素垂直对齐

              可选值：baseline     基线对齐，沿着x字母最下方对齐，默认值

                            Top、bottom、middle

              功能：1. 设置元素垂直对齐（只针对图片、文字、表格）

                            2.解决图片三像素的问题：图片与图片之间有空白间隙（面试题）

                                   a. vertical-align属性，设置一个非baseline的样式值

                                   b.设置父元素font-size为0

                                   c.将图片转成块元素（block）

                                   d.将元素脱离文档流

       10.  text-shadow：（四个参数：） 设置文本的阴影

              四个参数：1.阴影水平位移距离（必填）正右负左

                                   2.阴影垂直位移距离（必填）正下负上

                                   3.阴影的模糊半径

                                   4.阴影的颜色（默认字体颜色）

       11.  box-shadow：设置块元素的阴影

四个参数：1.阴影水平位移距离（必填）正右负左

                                   2.阴影垂直位移距离（必填）正下负上

                                   3.阴影的模糊半径

                                   4.阴影的颜色（默认黑色）