字体及文本样式

1.文本属性

color：为字体指定颜色

格式: color: 值;
取值：英文单词、rgb、rgba、十六进制		

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

格式：font-style:italic
取值：
	normal ： 正常的， 默认就是正常的
	italic :  倾斜的

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

格式： font-weight: bold;
取值:
	bold 加粗
	bolder  比加粗还要粗
	lighter 细线， 默认就是细线
数字取值：
	100-900之间整百的数字
	400 等同于 normal
	700 等同于 bold

font-size 为文字指定大小

格式：font-size: 30px;
单位：px（像素 pixel）
【注】： 通过font-size设置大小一定要带单位， 也就是一定要写px

font-family 为文字指定特殊的字体，浏览器只会使用浏览器可以访问到的字体

格式：font-family:"楷体";
通用字体 (直接使用，不需要加引号)
	serif:有衬线的字体,笔画结尾有特殊的装饰线或衬线
	sans-serif:无衬线的字体，笔画结尾是平滑的字体
	monospace:等宽字体，用于代码，字体中每个字宽度相同
	cursive:草书，这种字体有的有连笔，有的还有特殊的斜体效果。
	fantasy:装饰字体 ，具有特殊艺术效果的字体
【注】：
	1.如果取值是中文，需要用双引号或者单引号括起来，多个单词组合也要加
	​ 2.设置的字体必须是用户电脑里面已经安装的字体
	3.如果设置的字体不存在, 那么系统会使用默认的字体来显示默认使用宋体
	4.如果设置的字体不存在, 而我们又不想用默认的字体来显示怎么办?
		可以给字体设置备选方案
		格式:font-family:"字体1", "备选方案1", ...;
	5.如果想给中文和英文分别单独设置字体, 怎么办?
		但凡是中文字体, 里面都包含了英文
		但凡是英文字体, 里面都没有包含中文
		也就是说中文字体可以处理英文, 而英文字体不能处理中文
		【注】：如果想给界面中的英文单独设置字体, 那么英文的字体必须写在中文的前面。

文本装饰的属性

格式:text-decoration: underline;
取值:
	underline 下划线
	line-through 删除线
	overline 上划线
	none 什么都没有, 最常见的用途就是用于去掉超链接的下划线

文本水平对齐的属性

格式: text-align: right;
取值:
	left 左
	right 右
	center 中

文本缩进的属性

格式: text-indent: 2em;
取值:2em, 其中是em单位, 一个em代表缩进一个文字的宽度

设置或者取消字体改变

格式：text-transform:none
取值：
	none   防止任何改变   
	uppercase	将文本转换为大写    
	lowercase	将文本转换为小写  
	capitalize	将所有单词第一个字母转换为大写
	full-width	转换为类似于一个等宽字体

字体阴影

格式: text-shadow: h-shadow v-shadow blur color;    
取值:             
	none:取消所有阴影          
	h-shadow :必需。水平阴影的位置。允许负值。     
	v-shadow :必需。垂直阴影的位置。允许负值。     
	blur:可选。模糊的距离。
	color:可选。阴影的颜色。

2.列表样式

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

取值:             
	none: No item marker is shown.          
	disc: A filled circle (default value)
	circle: A hollow circle   
	square: A filled square
	decimal: Decimal numbers，Beginning with 1
	lower-roman: Lowercase roman numerals，E.g. i, ii, iii, iv, v…  
	upper-roman: Uppercase roman numerals，E.g. I, II, III, IV, V…
	decimal-leading-zero: Decimal numbers，Padded by initial zeros，E.g. 01, 02, 03, … 98, 99

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

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

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

取值:
	url() : 指定图标位置

list-style 列表样式的速记写法

取值:
	[<type>][<image>][<position>]

3.其他样式

line-height 设置文本的行高 取值为绝对单位或者相对单位

display 显示方式的切换

inline	行内显示，宽高无效
block	块级显示，宽高有效
inline-block	为了能够让元素既能够不独占一行, 又可以设置宽度和高度, 那么就出现了行内块级元素，行内显示同时宽高有效
none  不显示，不占据屏幕空间
flex 伸缩盒布局

visibility 显示与隐藏

hidden   隐藏，占据屏幕空间
visible    显示

opacity 透明度，0-1之间的取值，取值为0的时候隐藏，占据屏幕空间

overflow 溢出处理

hidden 超出内容隐藏
auto     超出产生滚动条
scroll   滚动条

/* 默认值。内容不会被修剪，会呈现在元素框之外 */
overflow: visible;
/* 内容会被修剪，并且其余内容不可见 */
overflow: hidden;
/* 内容会被修剪，浏览器会显示滚动条以便查看其余内容 */
overflow: scroll;
/* 由浏览器定夺，如果内容被修剪，就会显示滚动条 */
overflow: auto;

cursor 指定光标的样式

default	默认光标（通常是一个箭头）
auto	默认。浏览器设置的光标。
crosshair	光标呈现为十字线。
pointer	光标呈现为指示链接的指针（一只手）
move	此光标指示某对象可被移动。
e-resize	此光标指示矩形框的边缘可被向右（东）移动。
ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize	此光标指示矩形框的边缘可被向上（北）移动。
se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize	此光标指示矩形框的边缘可被向下移动（南）。
w-resize	此光标指示矩形框的边缘可被向左移动（西）。
text	此光标指示文本。
wait	此光标指示程序正忙（通常是一只表或沙漏）。
help	此光标指示可用的帮助（通常是一个问号或一个气球）。