字体
color
字体颜色
font-size
字体大小
font-family
字体样式
serif 衬线字体
sans-serif非衬线字体
monospace等宽字体
cursive草书字体
fantasy虚幻字体
- 可以将字体设置为这些大的分类,当设置为大的分类以后，
- 浏览器会自动选择指定的字体并应用样式
- 一般会将字体的大分类，指定为font-family中的最后一个字体
p{
font-family: arial , 微软雅黑 , 华文彩云 , serif;
}
font-style
normal默认值，文字正常显示
italic 文字会以斜体显示
oblique 文字会以倾斜的效果显示
大部分浏览器都不会对倾斜和斜体做区分，
也就是说我们设置italic和oblique它们的效果往往是一样的
一般我们只会使用italic
font-weight
normal默认值，文字正常显示
bold文字加粗显示
font-variant
normal默认值，文字正常显示
small-caps文本以小型大写字母显示
font
可以将字体的样式的值，统一写在font样式中，不同的值之间使用空格隔开
使用font设置字体样式时，斜体 加粗 小大字母，没有顺序要求，甚至可写可不写，
如果不写则使用默认值，但是要求文字的大小和字体必须写，而且字体必须是最后一个样式
-
**大小必须是倒数第二个样式 **
font: [加粗 斜体 小大字母] 大小[/行高] 字体
自定义字体
英文自定义:
http://www.dafont.com/
现在字体，适配不太好
生成不同版本浏览器支持的字体文件https://www.fontsquirrel.com/tools/webfont-generator
中文自定义:
有字库网
艺术字生成器生成
文本，行内元素，行内块元素样式
line-height
行高
用来设置文本垂直方向上居中height的高度和line-height的数值是一样的
line-height: 200%;//字体大小的两倍
line-height：height；
direction
文本方向
-
ltr默认。一行中文本，行内元素，行内块元素 排列方向从左到右。 -
rtl一行中文本，行内元素，行内块元素 排列方向从右到左。 -
inherit规定应该从父元素继承 direction 属性的值。
text-transform
设置文本的大小写
-
none默认值，该怎么显示就怎么显示，不做任何处理 -
capitalize单词的首字母大写，通过空格来识别单词 -
uppercase所有的字母都大写 -
lowercase所有的字母都小写
text-decoration
设置文本修饰
-
none默认值，不添加任何修饰，正常显示 -
underline为文本添加下划线 -
overline为文本添加上划线 -
line-through为文本添加删除线
text-align
文本，行内元素，行内块元素水平对齐方式
-
left默认值，靠左对齐 -
right靠右对齐 -
center文本居中对齐 -
justify两端对齐
text-indent
设置首行缩进
一般使用em作单位
使用负值可以用来隐藏一些不想显示的内容
overflow-wrap
文本换行
normal默认情况，浏览器只在“空格”或者“半角”的位置换行
break-word为防止长文本（例如网页地址、长的单词）溢出，浏览器自行决定在何处“截断”单词。默认情况是禁止浏览器截断单词。
word-break
IE6及以上浏览器对该属性支持。
break-all强行截断单词！keep-all不准许“截断” 单词normal
white-space
normal默认值。空白处会被浏览器忽略（即多余空格被浏览器删除）。只保留正常的空格。pre文本空白会被浏览器保留。其行为方式类似HTML的<pre>元素效果。pre-line与normal类似，空白处会被浏览器忽略。不同点是保留换行符，IE7及以下浏览器不支持此属性。pre-wrap保留空白符序列，换行单独一行显示，IE7及以下浏览器不支持此属性。nowrap文本不换行，文本在同一行显示，直到遇到<br/>位置。空白处会被浏览器忽略,使用省略号
text-overflow
-
ellipsis当文本溢出时，省略号显示。 -
clip仅仅简单的剪裁，不使用省略号。
注意：上述两个属性需要配合 white-space: nowrap; 和 overflow: hidden 一起使用，且容器需要定义宽度。只在块元素内生效。
IE浏览器对其支持非常好。
text-shadow: offset-x | offset-y | blur-radius | color
文本阴影
offset-xX轴偏移量offset-yY轴偏移量blur-radius模糊半径-
color阴影颜色text-shadow: 0 0 30px blue, 0 0 80px red;
可设置文字背景发光效果
text-shadow:
0 0 30px blue,
0 0 30px #fff,
0 0 80px blue,
0 0 80px #fff,
0 0 180px blue,
0 0 80px #fff;
letter-spacing
字符间距
word-spacing
单词间距
vertical-aligin
行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高
- 设置给子元素
可用值
-
baseline基线位于一行非衬线字体小写x字母的底部（默认） -
middle在父元素居中，不要为父元素设置高度和行高 -
top位于父元素一行的顶部,需要为父元素设置“足够”的高度，且高度等于行高，才能看到效果 -
bottom位于父元素一行的底部，需要为父元素设置“足够”的高度，且高度等于行高，才能看到效果 -
sub垂直对齐文本的下标。 super-
text-top与父元素字体的顶端对齐 text-bottom
多行对齐，设置其父元素 display: table-cell vertical-align
行内块元素之间的空隙处理办法
导致原因
在编码时，<img>元素换行了。例如
<img src=“img/1.png”>
<img src=“img/2.png”>
解决办法
如果该元素没有文本内容。我可以设置元素的font-size： 0 解决。但是这回导致该元素所有的文字消失。
<img src=“img/1.png”><!--
><img src=“img/2.png”>
使用注释消除空格
