css样式

css字体样式

单位：

像素（px）：屏幕是由无数个像素点构成的，不同显示器屏幕像素是不同的，屏幕效果越好，像素越小

百分比（%）：浏览器会根据父元素的样式来设置，当父元素宽高发生改变时，子元素也会随之改变，自适应画面

em：相对于当前元素的字体大小来计算的，1em=1font-size，浏览器默认字体大小为16px，最小字体是12px，当字体发生改变时，em也随之改变，主要设置字体相关的样式

rem：相对于根元素的字体样式大小来计算

颜色单位

        1、颜色的单词

        2、RGB值，rgb（red,green,blue）,根据三原色的不同浓度来设置颜色，取值范围【0~255】

        3、rgba值，rgba（red,green,blue,alpha）,前三跟rgb一样，alpha是透明度【0~1】

        4、十六进制，如：#fffffff，两两重复可简写如；#fff

        5、HSL，hsl（色相，饱和度，亮度）

                h：色相【0~360】

                s：饱和度【0~100%】

                l：亮度【0~100%】

1、color：设置颜色

2、font-size:：设置字符框的大小

3、font-family:：设置文字字体

                        属性值：serif，衬线字体

                                sans-serif，非衬线字体

                                monospace，等宽字体

                                cursive，草书

                                fantasy，虚幻字体

4、font-style：

                                属性值：

                                        normal，默认正常显示

                                        italic，文字倾斜显示

                                        oblique，也是倾斜

5、font-weight：

                                属性值：

                                        100-900，宽度加粗

                                        normal，默认正常显示

                                        bold，文字加粗

6、font-variant：small-caps，小型的大写字母

7、line-height：行高

                                属性值：具体的值如：12px

                                                百分比，相对于字体

                                                倍数，字体的倍数

文本样式

        1、文本装饰

                text-decoration：underline，下划线

                                                none，正常显示

                                                overline，上划线

                                                line-through，删除线

        2、文本大小写

                text-transform：none，正常显示

                                        uppercase，所有大写

                                        lowercase，所有字母小写

                                        capitalize，首字母大写

        3、网页处理空白

                white-space：normal，正常显示

                                        nowrap，不换行

                                        pre，保留空白

        4、文本内容溢出处理

                text-overflow：ellipsis，以省略号代替

                                        clip，裁剪

        5、字符间距

                letter-spacing：2px

        6、文本对齐方式

                text-align：left，向左对齐，默认

                                          center，居中对齐

                                          right，向右对齐

                                        justify，两端对齐

        7、首行缩进

                text-indent：2em

        8、元素垂直对齐方式

                vertical-algin：baseline，基线对齐，默认

                                        top

                                        bottom

                                        middle

        9、文本阴影效果

                text-shadow：参数一，参数二，参数三，参数四

                        参数一：必填，水平阴影的位置

                        参数二：必填，垂直阴影的位置

                        参数三：模糊的距离

                        参数四：阴影颜色