CSS文本样式

一、优先级

如果某一个样式被优先级高的给替换掉了，却又想执行这个样式方案，可以将这个方案标记成重要样式(important)

color:green !important;//强行设置最高优先级

二、样式继承

只适用于元素的外观(文字、颜色、字体等)，而元素在页面上的布局样式则不会被继承。如果继承这种样式，就必须使用强制继承：inherit

<p>这是<b>HTML5</b></p>

<style type="text/css">
p {border:1px solid red;}
b {border:inherit;}
</style>

有了强制继承，那么就有强制不继承，initial表示强制使用默认样式而不使用继承样式

三、字体样式：

如果页面中使用了一个字体，如果用户电脑中没有安装该字体，会使用默认字体，这不是我们想要的结果，那么我们需要引入一个字体来保证没一个用户都能使用我们想要的字体的效果

在css中使用@font-face模块来引入字体：

@font-face {
    font-family: 'YourWebFontName'; //自定义引入字体的名称
    src:url('../fonts/webfont.woff'),
    url('../fonts/webfont.ttf');
    font-weight: normal;
    font-style: normal;
}

常用的字体格式有fft、otf、woff、eot、svg，其中tff和woff格式浏览器支持比较齐全，但是由于tff文件比较大，不适合网络传输，所以一般使用woff格式，而otf和svg格式IE不支持，eot格式则仅仅IE一个浏览器支持

font-size：设置字体的大小

font-variant：设置英文字体是否转换为小写字母以小型大写字母显示，有normal和small-caps两个值

font-style：设置字体是否倾斜：normal、italic 表示使用斜体。oblique 表示让文字倾斜，区别在没有斜体时使用。

font-weight：设置字体是否加粗：

normal 表示让加粗的字体恢复正常。
bold 粗体
bolder 更粗的字体
lighter 轻细的字体
100 ~ 900 之间的数字 600 及之后是加粗，之前不加粗

font-family：设置font 字体名称

font：设置字体样式复合写法：格式如下：[是否倾斜|是否加粗|是否转小型大写] 字体大小 字体名称;

四、文本样式：

color：设置文字颜色，可以使用rgb()、rgba、16进制等，也可以使用预设的一些颜色名称

red、green、blue、yellow等
transparent为一个特殊的值，表示透明颜色

text-decoration：装饰文本出现各种划线。

none：让本身有划线装饰的文本取消掉
underline：下划线，让文本的底部出现一条下划线
overline：上划线，让文本的头部出现一条上划线
line-through：删除线，让文本的中部出现一条删除划线
blink：让文本进行闪烁，基本不支持了

text-transform：控制英文文本的大小写。

none：将已被转换大小写的值恢复到默认状态
capitalize：将英文单词首字母大写
uppercase：将英文转换为大写字母
lowercase：将英文转换为小写字母

text-shadow：给文本添加阴影

第一个值：水平偏移
第二个值：垂直偏移
第三个值：阴影模糊度(可选)
第四个值：阴影颜色(可选)
如p {text-shadow : 5px 5px 3px black;}

text-align：设置文本对齐方式

left：靠左对齐，默认
right：靠右对齐
center：居中对齐
justify：内容两端对齐
    该属性不会对文本的最后一行生效，只会对最后一行以上的行生效
    使用text-align-last:justify来使最后一行文本也生效
start：让文本处于开始的边界
end：让文本处于结束的边界

text-overflow：裁切文本的溢出部分

clip：默认值，裁剪文本时不添加“...”省略号
ellipsis：裁剪文本时添加“...”省略号
注：text-overflow必须配合不换行white-space: nowrap和overflow:hidden使用
{width:160px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}

vertical-align：设置元素的垂直对齐方式。

baseline：默认。元素放置在父元素的基线上。
sub：垂直对齐文本的下标。
super：垂直对齐文本的上标
top：把元素的顶端与行中最高元素的顶端对齐
text-top：把元素的顶端与父元素字体的顶端对齐
middle：把此元素放置在父元素的中部。
bottom：把元素的顶端与行中最低的元素的顶端对齐。
text-bottom：把元素的底端与父元素字体的底端对齐。
%：使用"line-height"属性的百分比值来排列此元素。允许使用负值。

white-space：排版中的空白处理方式

normal：默认值，空白符被压缩，文本自动换行
nowrap：空白符被压缩，文本不换行
pre：空白符被保留，遇到换行符才换行
pre-line：空白符被压缩，文本会在排满或遇换行符换行
pre-wrap：空白符被保留，文本会在排满或遇换行符换行

letter-spacing：设置字母之间的间距（允许使用负值）。

word-spacing：设置单词之间的间距

line-height：设置行高

<div style="line-helght:1.5;font-size:100px;">
    <div style="background:red;font-size:30px;">111</div>
    <div style="background:yellow;font-size:40px;">222</div>
</div>
当行高设置为一个float时，表示当前字体大小的float倍，并且子元素会继承该float值
子div会继承line-helght:1.5，会根据各自的字体大小乘以1.5来设置行高

<div style="line-helght:150%;font-size:100px;">
    <div style="background:red;font-size:30px;">111</div>
    <div style="background:yellow;font-size:40px;">222</div>
</div>
当行高单位为px、%、em时，表示根据当前设置行高的元素计算绝对值，并且子元素会继承计算后的绝对值
子div会继承计算后的值line-helght:150px;

word-wrap：控制过长的英文单词段词：normal：单词不断开;break-word：断开单词

text-indent：设置文本首行的缩进

user-select:none：禁用文本选择

文本排列方式

writing-mode属性用于设置文本排列方式

horizontal-tb：默认值，水平方向自上而下。即 left-right-top-bottom
vertical-rl：垂直方向自右而左。即 top-bottom-right-left
vertical-lr：垂直方向自左到右。即 top-bottom-left-right

<div class="cont">
    <h2>江雪</h2>
    <p style="color:#aaa;">柳宗元（<span>773</span>-<span>819</span>）</p>
    <p>千山鸟飞绝，万径人踪灭</p>
    <p>孤舟蓑笠翁，独钓寒江雪</p>
</div>
style样式
.cont{writing-mode:vertical-rl;}

当父元素设置writing-mode为vertical-rl或vertical-lr时，所有子元素的文字都是竖向排列的，但是当文字中出现了字母或数字时，这些字符的朝向时不正确的，都是朝右的，也就是顺时针旋转了90度

使用text-orientation属性可以改变竖向显示的文本的朝向，该属性可能的值

mixed：默认值
upright：文本朝上
sideways-right、sideways、use-glyph-orientation：未测试出效果，显示都是文本朝右

此时设置样式
.cont{writing-mode:vertical-rl;text-orientation:upright;}

此时数字显示的朝向正确了，但是如果我们想讲年份放在同一行该怎么办呢？

text-combine-upright属性表示是否组合文字，可能的值

none：默认值
all：表示将文字全部组合起来

此时设置样式
span{text-combine-upright:all;}