CSS字体和文本样式

 

课程内容

字体、字体大小、颜色、加粗等

•       文本

行高、对齐方式、文本装饰等

 

 

 

 

CSS文字样式

文字样式属性

•       字体：font-family

•       文字大小：font-size

•       文字颜色：font-color

•       文字粗细：font-weight

•       文字样式：font-style

•       字体变形：font-variant

•       （Css3）设置或检索对象中的文字是否横向拉伸变形：font-stretch

 

font-family字体属性

定义元素内文字以什么字体来显示语法：

•       Serif

•       Sans-serif

•       Monospace

•       Cursive

•       Fantasy

 

Serif和Sans-serif区别

 

 

 

 

 

 

 

font-size文字大小

定义元素内文字大小语法：

font-size: 绝对单位|相对单位

font-size: 绝对单位|相对单位

•   px 像素

•   em/%

font-size文字大小

属性值	说明
in	Inch,英寸 1英寸=2.54厘米
cm	厘米 1厘米=0.394英寸
mm	毫米 1毫米=0.1厘米
pt	磅，印刷的点数 72磅=1英寸
pc	Pica，1pc=12pt

属性值	CCS2缩放系数1.2
xx-small	9px
x-small	11px
small	13px
medium	16px
large	19px
x-large	23px

下面是代码例子演示每个值之间的差异：

HTML代码：

 

 

 

 

 

 

Css代码：                                                       实现效果：

 

color文字颜色

定义元素内文字颜色语法：

color: 颜色名|十六进制|RGB

下面是代码例子演示每个值之间的差异：

HTML代码：

 

 

 

Css代码：                                              实现效果：

                                               

font-weight文字粗细

为元素内文字设置粗细语法：

font-weight: normal | bold | bolder | lighter | 100~900

说明：

默认值：normal

400 等同于 normal，而 700 等同于 bold

font-style文字样式

为元素内文字设置样式法：

font-style: normal|italic|oblique

font-variant字体变形

设置元素中文本为小型大写字母

语法：

font-variant: normal | small-caps

 

 

 

下面是代码例子演示每个值之间的差异：

HTML代码：                                                             Css代码：

 

 

实现效果：

 

 

CSS文本样式

l  text-align

l line-height

l vertical-align

l text-decoration

l text-indent

l text-shadow

l text-transform

l letter-spacing

l word-spacing

text-align

设置元素内文本的水平对齐方式语法：

text-align: left | right | center | justify

注：该属性对块级元素设置有效

 

line-height属性

设置元素中文本行高语法：

line-height: 长度值 | 百分比

说明：一行文字的高度。

行高指文本行的基线间的距离。

 

 

vertical-align属性

设置元素内容的垂直方式语法：

vertical-align: baseline | sub | super | top | text-top

middle | bottom | text-bottom

长度 | 百分比

 

 

text-decoration

设置制定文本将如何装饰

neno-默认值，定义了一个正常的文本;

inherit-从其父元素继承此属性;

overline-在文本上方绘制水平线;

underlink-在文本下方绘制水平线;

line-through-在文本中绘制水平线（用于替换HTML<s>标记）;

 

 

下面是代码例子演示每个值之间的差异：

HTML代码：

 

 

Css代码：                                                       实现效果：

 

text-indent

检索或设置对象中的文本的缩进。

length-用长度值指定文本的缩进。可以为负值。;

percentage-用百分比指定文本的缩进。可以为负值。;

each-line-定义缩进作用在块容器的第一行或者内部的每个强制换行的首行，软换行不受影响。（CSS3）;

hanging-反向所有被缩进作用的行。（CSS3）;

 

 

下面是代码例子演示每个值之间的差异：

HTML代码：

 

Css代码：                                           实现效果：

text-shadow

为文本添加阴影。

none-无阴影;

length-①：第1个长度值用来设置对象的阴影水平偏移值。可以为负值

length-②：第2个长度值用来设置对象的阴影垂直偏移值。可以为负值

length-③：如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值

color-设置对象的阴影的颜色。;

下面是代码例子演示每个值之间的差异：

HTML代码：

Css属性：

实现效果：

text-transform

检索或设置对象中的文本的大小写。

none-无转换;

capitalize-将每个单词的第一个字母转换成大写;

uppercase-将每个单词转换成大写;

lowercase-将每个单词转换成小写;

full-width-将所有字符转换成fullwidth形式。如果字符没有相应的fullwidth形式，将保留原样。这个值通常用于排版拉丁字符和数字等表意符号。（CSS3）

下面是代码例子演示每个值之间的差异：

HTML代码：

Css代码：                                                          实现效果：

 

 

letter-spacing

指定文本中字符字符之间的空格

normal-定义了默认样式，自附件没有额外的空间;

Lengh-用px,pt,em,mm来定义字符之间的额外空间;

Inherit继承其父元素的属性;

 

 

 

 

下面是代码例子演示每个值之间的差异：

HTML代码：

 

 

Css属性：                            实现效果：

 

 

 

word-spacing

 Word-spacing属性指定文本中单词之间的空格。

就像letter-spacing属性一样，可以将word-spacing的值设置为normal，length和inherit。

 

 

 

 

 

 

下面是代码例子演示每个值之间的差异：

HTML代码：

 

 

 

Css代码：                                                     实现效果：

 

当段落需要使用正常的单词间距展示时，通常会使用normal

 

文字基线

行高和行距