|
,"楷体_GB2312"; }14.1用CSS3设置文本样式2．font-size属性font-s
ize属性用于控制文字的大小，它的取值分为4种类型——绝对大小、相对大小、长度值以及百分数。14.1用CSS3设置文本样式
3．font-style属性font-style属性确定指定元素显示的字形。font-style属性的值包括normal、it
alic和oblique3种。14.1用CSS3设置文本样式4．font-variant属性font-vari
ant属性用于在浏览器上显示指定元素的字体变体。该属性可以有3个值：normal、small-caps和inherit。5．fo
nt-weight属性font-weight属性定义了字体的粗细值，它的取值可以是以下值中的一个——normal、bol
d、bolder和lighter，默认值为normal。14.1用CSS3设置文本样式14.1用CSS3设置文本
样式6．font复合属性使用font属性可一次性设置前面介绍的各种字体属性（属性之间以空格分隔）。在使用font属性设
置字体格式时，字体属性名可以省略。font属性的排列顺序是：font-weight、font-variant、font-style
、font-size和font-family。14.1用CSS3设置文本样式14.1.2文本属性1．word-s
pacing和letter-spacing属性word-spacing用于设定单词之间的间隔，它的取值可以是normal或具体的
长度值，也可以是负值；默认值为normal，表示浏览器根据最佳状态调整字符间距。letter-spacing属性和word-sp
acing类似，它的值决定了字符间距（除去默认距离外）。它的取值可以是normal或具体的长度值，也可以是负值；默认值为norma
l，也就是说，如果将letter-spacing设置为0，它的效果并不与normal相同。14.1用CSS3设置文本样
式2．text-align属性text-align属性指定了所选元素的对齐方式（类似于HTML标记符的align属性），取
值可以是left、right、center和justify，分别表示左对齐、右对齐、居中对齐和两端对齐。3．text-inden
t属性text-indent属性可以对特定选项的文本进行首行缩进，取值可以是长度值或百分比。4．line-height属
性line-height属性决定了相邻行之间的间距（或者说行高），其取值可以是数字、长度或百分比，默认值是normal。
14.1用CSS3设置文本样式5．text-decoration属性text-decoration属性可以对特定
选项的文本进行修饰，它的取值为none、underline、overline、line-through和blink，默认值为non
e，表示不加任何修饰。6．text-transform属性text-transform属性用于转换文本，取值为capit
alize、uppercase、lowercase和none，默认值是none。7．text-shadow属性text-
shadow属性用于向文本添加一个或多个阴影，取值为color、length、opacity，其语法为：text-shado
w:X-OffsetY-Offsetshadowcolor。14.1用CSS3设置文本样式8．word-wr
ap属性允许超过容器的长单词换行到下一行。9．word-break属性用来处理如何自动换行。它的取值为nor
mal、break-all和keep-all。14.1用CSS3设置文本样式14.1.2文本属性示例14-6使用了
word-break、word-wrap、text-shadow属性14.1用CSS3设置文本样式14.1.2文本属性
示例14-7显示了各种常用文本属性的用法14.2用CSS3设置颜色与背景14.2.1颜色设置color属性用于控制
HTML元素内文本的颜色，取值可以使用下面的任意一种方式。?颜色名：直接使用颜色的英文名称作为属性值，例如，blue表示蓝色
。?#rrggbb：用一个6位的十六进制数表示颜色，例如，#0000FF表示蓝色。?#rgb：是#rrggbb的一种简
写方式，例如，#0000FF可以表示为#00F，#00FFDD表示为#0FD。?rgb（rrr,ggg,bbb）：使用十进制
数表示颜色的红、绿、蓝分量，其中，rrr、ggg、bbb都是0～255的十进制整数。例如，rgb（0,0,0）代表黑色。?r
gb（rrr%,ggg%,bbb%）：使用百分比表示颜色的红、绿、蓝分量，例如，rgb（50%，50%，50%）表示rgb（128
，128，128）。14.2用CSS3设置颜色与背景示例14-8是关于文本颜色测试的例子.14.2用CSS3设置颜色
与背景14.2.2背景设置1．background-color属性background-color属性用于设置HTM
L元素的背景颜色。2．background-image属性background-image属性用于设置HTML元素的背景图
像，取值为url（imageurl）或none。3．background-attachment属性background-a
ttachment属性控制背景图像是否随内容一起滚动，取值为scroll或fixed。4．background-position
属性background-position属性指定了背景图像相对于关联区域左上角的位置。14.2用CSS3设置颜色与背
景5．background-repeat属性background-repeat属性用来表示背景图像是否重复显示，取值可以是
repeat/repeat-x/repeat-y/no-repeat。6．background属性background属
性与font属性类似，它也是一个组合属性，可用于同时设置background-color、background-image、bac
kground-attachment、background-position和background-repeat等背景属性。
14.2用CSS3设置颜色与背景14.2.2背景设置示例14-9显示了颜色和背景属性的用法14.2用CSS3设置
颜色与背景14.2.3圆角边框和图像边框1．圆角边框使用border-radius属性可以设计各种类型的圆角边框。可
以直接给border-radius属性赋一组值来定义圆角。如果直接给border-radius属性赋4个值，这4个值按照top-
left、top-right、bottom-left、bottom-right的顺序来设置。?如果只设置1个值，则表示4个
圆角相同。?如果bottom-left值省略，其圆角效果与top-right相同。?如果bottom-right值省略
，其圆角效果与top-left相同。?如果top-right值省略，其圆角效果与top-left相同。14.2用CS
S3设置颜色与背景用CSS3的border-radius属性完成一个圆角的背景的示例.14.2用CSS3设置颜色与背景用
CSS3的border-radius属性完成一个圆角的背景的示例.14.2用CSS3设置颜色与背景2．图像边框该属
性指定一个图像文件作为边框，边框的长或宽会随着网页元素承载内容的多少自动调整。14.3用CSS3设置图像效果使用
示为没有边框。下面是为图片添加边框的代码。
使用各种CSS中的长度单位，通常用的是像素。?border-color（颜色）：定义边框的颜色，可以使用各种合法的颜色定义方
式。?border-style（线型）：选择一些预先定义好的线型，如虚线、实线或点划线等。14.3用CSS3设置图
像效果14.3.1为图片添加边框示例14-12说明了使用CSS设置边框的方法14.3用CSS3设置图像效果（2）为
不同的边框分别设置样式14.3用CSS3设置图像效果14.3.2图片缩放1．使用
ht属性通过
性和max-height属性max-width和max-height分别用来设置图片宽度最大值和高度最大值。14.3
用CSS3设置图像效果示例14-14展示了max-width、max-height属性和width、height的关系.14
.3用CSS3设置图像效果3．使用CSS中width和height属性使用属性width和height来设置图片的宽度和高度，从而达到对图片的缩放效果。14.3用CSS3设置图像效果14.3.3图文混排CSS使用float属性来实现文字环绕效果。float属性主要定义图像向哪个方向浮动。文字环绕也可以使文本围绕其他浮动对象（块）。不论浮动对象本身是何种元素，都会生成一个块级框。被浮动对象需要指定一个明确的宽度，否则会很窄。float语法格式如下：float:none/left/right;HTML5+CSS3Web前端开发技术LOGOHTML5+CSS3Web前端开发技术
