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

14.3 用CSS3设置图像效果 14.3.3 图文混排 CSS使用float属性来实现文字环绕效果。float属性主要定义图像向哪个方向浮动。文字环绕也可以使文本围绕其他浮动对象（块）。不论浮动对象本身是何种元素，都会生成一个块级框。被浮动对象需要指定一个明确的宽度，否则会很窄。 float语法格式如下： float:none/left/right; 14.3 用CSS3设置图像效果 示例14-16展示了文字环绕功能 14.4 用CSS3美化表单的应用 示例14-17用CSS美化一个网站的在线注册页面 作业 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 用CSS3设置文本样式 6．font复合属性 使用font属性可一次性设置前面介绍的各种字体属性（属性之间以空格分隔）。在使用font属性设置字体格式时，字体属性名可以省略。font属性的排列顺序是：font-weight、font-variant、font-style、font-size和font-family。 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属性 t