网页设计与制作案例教程（HTML5+CSS3+JavaScript）（微课版）（第2版） 课件 案例5知识点03：CSS常用文本属性

我们毕业啦其实是答辩的标题地方CSS常用文本属性为了控制文本显示的样式，我们可以使用哪些CSS属性呢?CSS常用文本属性CSS常用文本属性，如表所示。CSS常用文本属性属性说明font-family设置字体font-size设置字号font-weight设置字体的粗细font-style设置字体的倾斜@font-face设置服务器端字体，是CSS3新增属性text-decoration设置文本是否添加下画线、删除线等color设置文本颜色text-align设置文本的水平对齐方式text-indent设置段落的首行缩进line-height设置行高text-shadow设置文字的阴影效果，是CSS3新增属性text-overflow设置元素内溢出文本的处理方法，是CSS3新增属性font-familyCSS常用文本属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。例如：

p{font-family:"微软雅黑";}可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。例如：

body{font-family:"微软雅黑","宋体","黑体";}font-familyCSS常用文本属性注意（1）各种字体名必须使用英文状态下的逗号隔开。（2）中文字体名需要加英文状态下的引号，英文字体名一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。（3）如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如：p{font-family:"TimesNewRoman";}（4）尽量使用系统默认字体，以保证在任何用户的浏览器中都能正确显示。font-sizeCSS常用文本属性注意适用于显示网页正文的文字大小一般为12px左右。对于标题或其他需要强调的地方可以适当设置较大的字。页脚和辅助信息可以用小一些的字。用于设置文字大小，一般以像素（px）为单位。例如：

p{font-size:12px;}font-weightCSS常用文本属性用于定义字体的粗细。其常用的属性值为normal和bold，分别表示正常显示和粗体显示。例如：p{font-weight:bold;}/*设置段落文本为粗体显示*/h2{font-weight:normal;}/*设置标题文本为正常显示*/font-styleCSS常用文本属性用于定义字体风格，如设置标准、斜体或倾斜的字体样式。例如：p{font-style:italic;}/*设置段落文本为斜体显示*/h2{font-style:oblique;}/*设置标题文本为倾斜显示*/其可用属性值如下。（1）normal：默认值，浏览器会显示标准的字体样式。（2）italic：浏览器会显示斜体的字体样式。（3）oblique：浏览器会显示倾斜的字体样式。@font-faceCSS常用文本属性CSS3新增属性，用于定义服务器端字体。通过该属性，设计人员可以在网页中使用任何字体，而不管用户计算机是否安装这些字体。定义服务器端字体的基本语法格式如下。@font-face{font-family:字体名称;src:字体文件路径;}用于指定服务器端字体的名称,该名称由设计人员自定义用于指定相应字体文件的路径@font-faceCSS常用文本属性使用服务器端字体的步骤如下:（1）下载字体，并存储到网站相应的文件夹中。（2）使用@font-face属性定义服务器端字体。（3）对网页中的元素应用font-family样式。text-decorationCSS常用文本属性用于设置文本的下画线、上画线、删除线等装饰效果。其可用属性值如下：（1）none：没有装饰（正常文本默认值）。（2）underline：下画线。（3）overline：上画线。（4）line-through：删除线。例如：a{text-decoration:none;}/*设置超链接文字不显示下画线*/a:hover{text-decoration:underline;}/*设置鼠标悬停在超链接文字上时显示下画线*/colorCSS常用文本属性用于定义文本的颜色，常用的表示方式有以下4种。（1）以预定义的颜色值表示，有black、olive、teal、red、green、blue、maroon、navy、gray、lime、fuchsia、white、purple、silver、yellow、aqua等。（2）以十六进制数表示。采用#RRGGBB的形式，RR表示红色的分量值，GG表示绿色的分量值，BB表示蓝色的分量值，每组分量值的取值范围为00～FF，如#FF0000、#FF6600、#29D794等。以十六进制数表示是最常用的定义颜色的方式。如果每组十六进制数的两位数相同，则可以每组用一位数表示。例如，#FF0000可以表示为#F00。colorCSS常用文本属性（3）以rgb函数表示。例如，红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。例如，下面的3行代码都设置标题颜色为红色。h1{color:#f00;}h2{color:red;}h3{color:rgb(255,0,0);}colorCSS常用文本属性（4）以rgba函数表示。rgba函数是在rgb函数的基础上增加了控制alpha不透明度的参数，不透明度的取值范围为0～1。例如：h3{color:rgba(255,0,0,0.5);}表示h3标题文字采用半透明的红色。text-alignCSS常用文本属性用于设置文本内容的水平对齐方式。其可用属性值如下：（1）left：左对齐（默认值）。（2）right：右对齐。（3）center：居中对齐。（4）justify：两端对齐。例如：h1{text-align:center;}text-indentCSS常用文本属性用于设置首行文本的缩进，其属性值可为不同单位的数值，一般建议使用em（1em等于一个中文字符的宽度）作为设置单位。例如：p{text-indent:2em;}

/*

设置段落首行缩进2个中文字符

*/line-heightCSS常用文本属性用于控制行与行的垂直间距，也称为行高。其属性值一般以px为单位。例如：

p{line-height:25px;}

/*

设置行高为25px

*/text-shadow用于设置文本的阴影效果，其常用语法格式如下。选择器{text-shadow:水平阴影距离

垂直阴影距离

模糊半径

阴影颜色;}阴影距离可以是正值，也可以是负值，正、负值表示阴影的方向不同。基本语法格式如下选择器{text-overflow:clip|ellipsis;}text-overflowCSS常用文本属性用于设置元素内文本溢出时如何处理。修剪元素内溢出的文本，使溢出的文本不显示，也不显示省略标记“…”。在元素文本末尾用省略标记“…”标示被修剪的文本。text-overflowCSS常用文本属性例

5-3example03.htmltext-overflowCSS常用文本属性使用text-overflow属性，设置用省略标记标示