字体及文本样式

1.文本属性

1.1.颜色属性

格式 : color: 值 ;

取值：

1.rgb  三原色 红色 绿色  蓝色

红色  rgb(255,0,0); 绿色: rgb(0,255,0); 蓝色: rgb(0,0,255); 黑色: rgb(0,0,0);白色: rgb(255,255,255);

2.rgba  三原色多了一个透明度  a:取值为0-1 取值越小越透明

3.十六进制   通过每两位表示⼀个颜色  eg：#FFEE00

1.2.font-style 用于打开和关闭斜体文本

格式： font-style: italic;

取值： normal ： 正常的， 默认就是正常的                  快捷键fsn

           italic : 倾斜的                                                      快捷键fs

1.3.font-weight 为字体设置粗细程度

格式： font-weight: bold;

取值： 

           bold 加粗                                          快捷键 fwb

           bolder 比加粗还要粗                        快捷键 fwbr

           lighter 细线， 默认就是细线

数字取值：

            100-900 之间整百的数字

            400 等同于 normal

            700 等同于 bold

1.4.font-size 为文字指定大小

格式： font-size: 30px;

单位：px（像素） 设置该属性一定要带单位

1.5.font-family 为文字指定特殊的字体

格式： font-family:" 楷体 ";

取值：

serif: 有衬线的字体 , 笔画结尾有特殊的装饰线或衬线

sans-serif: 无衬线的字体，笔画结尾是平滑的字体

monospace: 等宽字体，用于代码，字体中每个字宽度相同

cursive: 草书，这种字体有的有连笔，有的还有特殊的斜体效果。

fantasy: 装饰字体 ，具有特殊艺术效果的字体

若取值为中文，则需要单引号或者多引号括起来

1.6.文本装饰的属性

格式 :text-decoration: underline;

取值：

underline 下划线                                                                                  快捷键tdu

line-through 删除线                                                                              快捷键tdl

overline 上划线                                                                                     快捷键tdo

none 什么都没有 , 最常见的用途就是用于去掉超链接的下划线           快捷键td

1.7.文本水平对齐的属性

格式 : text-align: right;

取值：

               left 左         快捷键ta

              right 右         快捷键tar

              center 中       快捷键tdc

1.8.文本缩进的属性

格式 : text-indent: 2em;

取值：em 一个em就是一个文字的宽度

1.9.设置或者取消字体改变

格式：  text-transform ：取值；

取值：

none 防止 任何改变

uppercase 将文本转换为大写

lowercase 将文转换为小写

capitalize 将所有单词第⼀个字母转换为大写

full-width 转换为类似于⼀个等宽字体

1.10.字体阴影

格式: text-shadow: h-shadow v-shadow blur color;

取值：

none: 取消所有阴影

h-shadow : 必需。水平阴影的位置。允许负值。

v-shadow : 必需。垂直阴影的位置。允许负值。

blur: 可选。模糊的距离。

color: 可选。阴影的颜色

2.列表样式

2.1.list-style-type 设置列表项标志类型

格式：list-style-type ：取值；

取值：

none : No item marker is shown.

disc : A filled circle (default value)

circle : A hollow circle

square : A filled square

decimal :  1

lower-roman :  i, ii, iii, iv, v…

upper-roman :  I, II, III, IV, V…

decimal-leading-zero :01, 02, 03, … 98, 99

2.2.list-style-position 设置列表项标志出现的位置

格式：list-style-position：取值；

取值：outside : 列表项标志出现在主块框的外部

          inside : 列表项标志出现在主块框的内部

2.3.list-style-image 自定义设置列表项标志

格式：list-style-image：取值；

取值：url()

2.4.list-style

格式：list-style: none;

清空列表自带的样式

3.其他样式

3.1.line-height

设置文本的行高

3.2.display

显示方式的切换

取值：inline 行内显示，宽高无效

block 块级显示，宽高有效

inline-block 为了能够让元素既能够不独占⼀行 , 又 可以设置宽度和高度, 那么就出现了行内块级元素，行内显示同时宽高有效

none 不显示，不占据屏幕空间  隐藏以后不会再标准流中占据空间

 

3.3.visibility

显示与隐藏

取值：hidden 隐藏，占据屏幕空间    隐藏以后会在标准流中占据空间

          visible 显示

3.4.opacity

透明度

取值：0-1之间的取值，取值为0的时候隐藏，占据屏幕空间   隐藏以后会在标准流中占据空间

3.5.overflow 溢出处理

取值：hidden 超出内容隐藏

          auto 超出产生滚动条

           scroll 滚动条

3.6.cursor

光标的样式