CSS阶段三：文本，行内元素，行内块元素操作

字体

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-line与normal类似，空白处会被浏览器忽略。不同点是保留换行符，IE7及以下浏览器不支持此属性。

• pre-wrap保留空白符序列，换行单独一行显示，IE7及以下浏览器不支持此属性。

• nowrap文本不换行，文本在同一行显示，直到遇到
位置。空白处会被浏览器忽略,使用省略号

text-overflow

• ellipsis当文本溢出时，省略号显示。
• clip仅仅简单的剪裁，不使用省略号。

注意：上述两个属性需要配合 white-space: nowrap; 和 overflow: hidden 一起使用，且容器需要定义宽度。只在块元素内生效。
IE浏览器对其支持非常好。

text-shadow: offset-x | offset-y | blur-radius | color

文本阴影

• offset-x X轴偏移量

• offset-y Y轴偏移量

• 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

行内块元素之间的空隙处理办法

导致原因

在编码时，元素换行了。例如

解决办法

如果该元素没有文本内容。我可以设置元素的font-size： 0 解决。但是这回导致该元素所有的文字消失。