第14章 使用CSS3设置元素样式(HTML5与CSS3 Web前端开发技术 知识).pptVIP

HTML5+CSS3 Web前端开发技术 LOGO HTML5+CSS3 Web前端开发技术 第14章使用CSS3设置元素样式 用CSS3设置文本样式 1 用CSS3设置颜色与背景 2 用CSS3设置图像效果 3 用CSS3美化表单的应用 4 14.1 用CSS3设置文本样式 14.1.1 字体属性 字体属性用于控制网页文本字符的显示方式，例如控制文字的大小、粗细以及使用的字体类型等。 1．font-family属性 下面的代码用来设置标记h1的font-family属性。 style type=text/css h1 { font-family: 微软雅黑,仿宋_GB2312,楷体_GB2312; } /style 14.1 用CSS3设置文本样式 2．font-size属性 font-size属性用于控制文字的大小，它的取值分为4种类型——绝对大小、相对大小、长度值以及百分数。 14.1 用CSS3设置文本样式 3．font-style属性 font-style属性确定指定元素显示的字形。font-style属性的值包括normal、italic和oblique 3种。 14.1 用CSS3设置文本样式 4．font-variant属性 font-variant属性用于在浏览器上显示指定元素的字体变体。该属性可以有3个值：normal、small-caps和inherit。 5．font-weight属性 font-weight属性定义了字体的粗细值，它的取值可以是以下值中的一个——normal、bold、bolder和lighter，默认值为normal。 14.1 用CSS3设置文本样式 14.1.2 文本属性 1．word-spacing和letter-spacing属性 word-spacing用于设定单词之间的间隔，它的取值可以是normal或具体的长度值，也可以是负值；默认值为normal，表示浏览器根据最佳状态调整字符间距。 letter-spacing属性和word-spacing类似，它的值决定了字符间距（除去默认距离外）。它的取值可以是normal或具体的长度值，也可以是负值；默认值为normal，也就是说，如果将letter-spacing设置为0，它的效果并不与normal相同。 14.1 用CSS3设置文本样式 2．text-align属性 text-align属性指定了所选元素的对齐方式（类似于HTML标记符的align属性），取值可以是left、right、center和justify，分别表示左对齐、右对齐、居中对齐和两端对齐。 3．text-indent属性 text-indent属性可以对特定选项的文本进行首行缩进，取值可以是长度值或百分比。 4．line-height属性 line-height属性决定了相邻行之间的间距（或者说行高），其取值可以是数字、长度或百分比，默认值是normal。 14.1 用CSS3设置文本样式 5．text-decoration属性 text-decoration属性可以对特定选项的文本进行修饰，它的取值为none、underline、overline、line-through和blink，默认值为none，表示不加任何修饰。 6．text-transform属性 text-transform属性用于转换文本，取值为capitalize、uppercase、lowercase和none，默认值是none。 7．text-shadow属性 text-shadow属性用于向文本添加一个或多个阴影，取值为color、length、opacity，其语法为： text-shadow: X-Offset Y-Offset shadow color。 14.1 用CSS3设置文本样式 8．word-wrap 属性 允许超过容器的长单词换行到下一行。 9．word-break 属性 用来处理如何自动换行。它的取值为normal、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表示蓝色。 ? #rr