CSS3美化网页文本

概述：

• 定义字体类型，大小，颜色等字体样式
• 设计文本样式，如对齐，行高，间距等
• 能够灵活设计美观，实用的网页正文版式

1，字体样式

    网页字体样式包括字体类型，大小，颜色等基本效果，另外还包括一些特殊的样式，如字体粗细，下划线，斜体，大小等

1.1 定义字体类型

    CSS使用font-family属性来定义字体类型，另外使用font属性也可以定义字体类型。font-family是字体专用类型专用属性，用法如下：

font-family:name
font-famile:ncursive|fantasy|monospace|serif|sans-serif

    font是一个复合属性，可以设置的字体属性如下：

font:font-style || font-variant||font-weight||font-size||line-height||font=family
font:caption|icon|menu|message-box|small-caption|status-bar

    CSS提供了5类通用字体。所谓通用字体就是一种备用机制，即指定的所有字体都不可用时，能够在用户系统中找到一个类似字体进行替代显示。这五类通用字体说明如下。

• serif：衬线字体，
• sans-serif：无衬线字体
• cursive：草体
• fantasy：奇异字体
• monospace：等宽字体

1.2 定义字体大小

    font-size

	
helloworld
	
helloworld

1.3 定义字体颜色

    color

	
helloworld
	
helloworld

1.4 定义字体粗细

    font-weight

1.5 定义斜体

    font-style: normal | italic | oblique

        
helloworld
	
helloworld
	
helloworld

1.6 定义下划线

    text-decoration

	
helloworld
	
helloworld
	
helloworld
	
helloworld
	
helloworld

2，文本样式

    字体样式只要涉及字符本身的显示效果，而文本样式主要涉及多个字符的排版效果。CSS在命名属性时，使用font前缀和text前缀来区分字体和文本属性。

2.1 定义文本对齐

    CSS使用text-align属性来定义文本的对齐方式，该属性的用法如下。

text-align:left:right:center:justify

		
小白菜向左偏移
		
小白菜向右偏移
		
小白菜居中显示
	

2.2 定义垂直对齐

    vertical-align:auto | baseline | sub | super | top | text-top | middle | bottom |text-bottom | length

取值简单说明如下：

• auto：将根据layout-flow属性的值对齐对象内容
• baseline：表示默认值，表示将支持valign特性的对象内容与基线对齐
• sub：表示垂直对齐文本的下标
• super：表示垂直对齐文本的上标
• top：表示将支持valign特性的对象的内容对象顶端对齐
• text-top：表示将支持valign特性的对象的文本与对象顶端对齐
• middle：表示将支持valign特性的对象的内容与对象中部对齐
• bottom：表示将支持valign特性的对象的内容与对象底部对齐
• text-bottom：表示将支持valign特性的对象的文本与对象顶端对齐
• length：表示由浮点数字和的那位标识符组成的长度值或者百分数，可为负数，定义由基线算起的偏移量，基线对于数值来说为0，对于百分比来说为0%；

2.3 定义字距和词距

    字距：letter-spacing    词距：word-spacing

2.4 定义行高

    line-height : normal | length

2.5 定义缩进

    text-indent：length

3，CSS3新增文本样式

3.1 定义文本阴影

    text-shadow 

helloworld

text-shadow中参数的属性：第一个 水平位移，第二个 垂直位移，第三个 模糊半径  第4个 阴影颜色

3.2 设计阴影特效

1，通过阴影增加前景色与背景色的对比度

helloworld

2，定义多色阴影

helloworld

3，定义火焰文字

helloworld

3.3 定义溢出文字

    CSS新增了text-overflow属性，该属性可用设置超长文本省略显示。text-overflow属性的基本语法如下：

text-overflow:clip | ellipsis | ellipsis-word;

• clip：表示不显示省略标记，而只是简单的裁剪
• ellipsis：表示当对象内文本溢出时显示省略标记
• ellipsis-word：表示当对象内文本溢出时显示省略标记

3.4 文本换行

    word-break

3.5 添加动态内容

    content

3.6 恢复默认样式

    initial ，可以取消对某个元素的样式绑定

	
hahahahaha
	
haihdiha