(7)-HTML5-CSS文字样式

来源：互联网发布：阿里云怎么root 编辑：程序博客网时间：2024/04/20 03:03

在文字的css样式中又可以区分为两大类。其一是字体（font）。主要规范文字的外观，例如字体，大小，粗体，斜体等等。其二是文字（text），主要用于文字的排版，例如对齐，字距，行距等等。

字体常见属性有：

font-family（字体）

font-style（斜体）

font-weight（粗体）

font-size（大小）

==============================================================================

{font-family}

属性font-family是用来指定字体的属性，例如可以指定字体为“Arial”，“Times New Roman”或“黑体”等。之所以会称为“family”是因为可以设置一组字体列表，当游戏加载的时候会按照这组列表“依次”选用字体。当目前载体没有安装第一顺位的字体时，就会自动选用第二顺位的字体显示。

html文件

<html><head><link rel="stylesheet" type="text/css" href="style.css" /></head><body><p class="font1">text1</p><p class="font2">text2</p></body></html>

css文件

.font1 {font-family:impact,arial;}.font2{font-family:xx,arial;}

<font-style>

属性font-style用来决定字体要以normal（正常），italic（斜体）或oblique（斜体）显示。

CSS文件

.font1{font-style:italic;}.font2{font-style:oblique;}

{font-weight}

属性font-weight用来指定字体显示的粗细，可以选择normal（正常）或bold（粗体），也可以用100到900之间的数值表示。

CSS文件

.font1{font-weight:bold;}.font2{font-weight:500;}

{font-size}

属性font-size用来指定字体显示的大小，可以通过多种不同的单位，例如像素（px），百分比（%）等。

CSS文件

.font1{font-size:9px;}.font2{font-size:150%;}

{font}

属性font可以简化字体声明的程序行数，例如四种font属性样式，通过font就可以缩写成一行指令既可以完成。但是需要注意font后面的属性必须按照《font-style》，《font-variant》，《font-weight》，《font-size》，《font-family》的顺序排列，若无需设置的属性可以跳过。

CSS文件

.font1{font-style:italic;font-weight:blod;font-size:16px;font-family:impact;}

使用font缩写：

.font1{font:italic bolf 16px impact;}

文字（text）

文字主要用于字体的排列设置，例如方向，对齐方式，字距，行距等，常用的属性包括：

Direction（文字方向）

letter-spacing（字母间距）

line-height（行高）

text-align（对齐方式）

text-decoration（划线方式）

text-indent（第一行空格）

text-transform（字母大小写）

word-spacing（单字间距）

===============================================================================

{direction}

属性direction用来决定文字的方向，可以设置从左开始阅读“LTR”与从右开始阅读“LTR”与从右开始阅读“RLT”两个值。

CSS文件

.font1{direction:LTR;}.font2{direction:RTL;}

{letter-spacing}

属性letter-spacing用来决定字符与字符之间的距离（字距），单位用px，值设置越大则字母与字母间的距离越大。

CSS文件

.font1{letter-spacing;}.font2{letter-spacing;}

{line-height}

属性line-height用来决定行与行之间的距离（行距），单位使用px，值越大则行与行之间的距离也越大。

CSS文件

.font1{line-height:12px;}

{text-align}

属性text-align用于决定文字的对齐方式，包括左对齐（left），靠右对齐（right），中对齐（center）以及左右对齐（justify）。

CSS文件

.font1{text-align:right;}.font2{text-align:center;}

{text-decoration}

属性text-decoration用来决定文字上的划线方式，包括文字下划线（umderline），文字上划线（overline），文字中间划线（line-through）。

CSS文件

.font1{text-decoration:overline;}.font2{text-decoration:line-through;}

{text-indent}

属性text-indent用来决定第一行的第一个文字前面要保留多少空白，单位可使用px或%。

CSS文件

.font1{text-indent:12px;}.font2{text-indent:0%;}

[text-transform]

属性text-transform用来决定一串字符的大小写显示方式，包括第一个字母大小写（capitalize），所有字母大小写（uppercase）所有字母小写（lowercase）。

CSS文件

.font1{text-transform:capitalize;}.font2{text-transform:uppercase;}

{word-spacing}

属性word-spacing用来设置字与字之间的距离，与letter-spacing不同，word-spacing是以英文的单词为基本单位作为距离的。

CSS文件：

.font1{word-spacing:12px;}.font2{word-spacing:0px;}

0 0