HTML第14章-使用CSS3设置元素样式课件.ppt

1、第第14章章使用CSS3设置元素样式用用CSS3设置文本样式设置文本样式1用用CSS3设置颜色与背景设置颜色与背景2用用CSS3设置图像效果设置图像效果3用用CSS3美化表单的应用美化表单的应用414.1 用用CSS3设置文本样式设置文本样式14.1.1 字体属性字体属性 字体属性用于控制网页文本字符的显示方式，例如控制文字体属性用于控制网页文本字符的显示方式，例如控制文字的大小、粗细以及使用的字体类型等。字的大小、粗细以及使用的字体类型等。1font-family属性属性下面的代码用来设置标记下面的代码用来设置标记的的font-family属性。属性。h1 font-family:微软雅黑微

2、软雅黑,仿宋仿宋_GB2312,楷体楷体_GB2312;14.1 用用CSS3设置文本样式设置文本样式2font-size属性属性font-size属性用于控制文字的大小，它的取值分为属性用于控制文字的大小，它的取值分为4种类型种类型绝对绝对大小、相对大小、长度值以及百分数。大小、相对大小、长度值以及百分数。14.1 用用CSS3设置文本样式设置文本样式3font-style属性属性font-style属性确定指定元素显示的字形。属性确定指定元素显示的字形。font-style属性的值包括属性的值包括normal、italic和和oblique 3种种。14.1 用用CSS3设置文本样式设置文

3、本样式4font-variant属性属性 font-variant属性用于在浏览器上显示指定元素的字体变体。该属属性用于在浏览器上显示指定元素的字体变体。该属性可以有性可以有3个值：个值：normal、small-caps和和inherit。5font-weight属性属性 font-weight属性定义了字体的粗细值，它的取值可以是以下值中属性定义了字体的粗细值，它的取值可以是以下值中的一个的一个normal、bold、bolder和和lighter，默认值为，默认值为normal。14.1 用用CSS3设置文本样式设置文本样式14.1 用用CSS3设置文本样式设置文本样式6font复合属性

4、复合属性 使用使用font属性可一次性设置前面介绍的各种字体属性（属性之间以属性可一次性设置前面介绍的各种字体属性（属性之间以空格分隔）。在使用空格分隔）。在使用font属性设置字体格式时，字体属性名可以省略。属性设置字体格式时，字体属性名可以省略。font属性的排列顺序是：属性的排列顺序是：font-weight、font-variant、font-style、font-size和和font-family。14.1 用用CSS3设置文本样式设置文本样式14.1.2 文本属性文本属性1word-spacing和和letter-spacing属性属性vword-spacing用于设定单词之间的间

5、隔，它的取值可以是用于设定单词之间的间隔，它的取值可以是normal或具体的长度值，也可以是负值；默认值为或具体的长度值，也可以是负值；默认值为normal，表示浏览器根据，表示浏览器根据最佳状态调整字符间距。最佳状态调整字符间距。vletter-spacing属性和属性和word-spacing类似，它的值决定了字符间类似，它的值决定了字符间距（除去默认距离外）。它的取值可以是距（除去默认距离外）。它的取值可以是normal或具体的长度值，也或具体的长度值，也可以是负值；默认值为可以是负值；默认值为normal，也就是说，如果将，也就是说，如果将letter-spacing设置为设置为0，它

6、的效果并不与，它的效果并不与normal相同。相同。14.1 用用CSS3设置文本样式设置文本样式2text-align属性属性 text-align属性指定了所选元素的对齐方式（类似于属性指定了所选元素的对齐方式（类似于HTML标记符的标记符的align属性），取值可以是属性），取值可以是left、right、center和和justify，分别表示，分别表示左对齐、右对齐、居中对齐和两端对齐。左对齐、右对齐、居中对齐和两端对齐。3text-indent属性属性 text-indent属性可以对特定选项的文本进行首行缩进，取值可以是属性可以对特定选项的文本进行首行缩进，取值可以是长度值或百分

7、比。长度值或百分比。4line-height属性属性 line-height属性决定了相邻行之间的间距（或者说行高），其取值属性决定了相邻行之间的间距（或者说行高），其取值可以是数字、长度或百分比，默认值是可以是数字、长度或百分比，默认值是normal。14.1 用用CSS3设置文本样式设置文本样式5text-decoration属性属性 text-decoration属性可以对特定选项的文本进行修饰，它的取值为属性可以对特定选项的文本进行修饰，它的取值为none、underline、overline、line-through和和blink，默认值为，默认值为none，表示不加任何修饰。，表示

8、不加任何修饰。6text-transform属性属性 text-transform属性用于转换文本，取值为属性用于转换文本，取值为capitalize、uppercase、lowercase和和none，默认值是，默认值是none。7text-shadow属性属性 text-shadow属性用于向文本添加一个或多个阴影，取值为属性用于向文本添加一个或多个阴影，取值为color、length、opacity，其语法为：，其语法为：text-shadow:X-Offset Y-Offset shadow color。14.1 用用CSS3设置文本样式设置文本样式8word-wrap 属性属性 允许

9、超过容器的长单词换行到下一行。允许超过容器的长单词换行到下一行。9word-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.

10、1 颜色设置颜色设置color属性用于控制属性用于控制HTML元素内文本的颜色，取值可以使用下面的任元素内文本的颜色，取值可以使用下面的任意一种方式。意一种方式。颜色名：直接使用颜色的英文名称作为属性值，例如，颜色名：直接使用颜色的英文名称作为属性值，例如，blue表示蓝表示蓝色。色。#rrggbb：用一个：用一个6位的十六进制数表示颜色，例如，位的十六进制数表示颜色，例如，#0000FF表示蓝色。表示蓝色。#rgb：是：是#rrggbb的一种简写方式，例如，的一种简写方式，例如，#0000FF可以表示可以表示为为#00F，#00FFDD表示为表示为#0FD。rgb（rrr,ggg,bbb）：

11、使用十进制数表示颜色的红、绿、蓝分量）：使用十进制数表示颜色的红、绿、蓝分量，其中，其中，rrr、ggg、bbb都是都是0255的十进制整数。例如，的十进制整数。例如，rgb（0,0,0）代表黑色。）代表黑色。rgb（rrr%,ggg%,bbb%）：使用百分比表示颜色的红、绿、蓝）：使用百分比表示颜色的红、绿、蓝分量，例如，分量，例如，rgb（50%，50%，50%）表示）表示rgb（128，128，128）。）。14.2 用用CSS3设置颜色与背景设置颜色与背景示例示例14-8是关于文本颜色测试的是关于文本颜色测试的例子例子.14.2 用用CSS3设置颜色与背景设置颜色与背景14.2.2 背

12、景设置背景设置1background-color属性属性 background-color属性用于设置属性用于设置HTML元素的背景颜色元素的背景颜色。2background-image属性属性 background-image属性用于设置属性用于设置HTML元素的背景图像，取值为元素的背景图像，取值为url（imageurl）或）或none。3background-attachment属性属性 background-attachment属性控制背景图像是否随内容一起滚动属性控制背景图像是否随内容一起滚动，取值为，取值为scroll或或fixed。4background-position属性属

13、性 background-position属性指定了背景图像相对于关联区域左上角属性指定了背景图像相对于关联区域左上角的位置。的位置。14.2 用用CSS3设置颜色与背景设置颜色与背景5background-repeat属性属性 background-repeat属性用来表示背景图像是否重复显示，取值可属性用来表示背景图像是否重复显示，取值可以是以是repeat/repeat-x/repeat-y/no-repeat。6background属性属性 background属性与属性与font属性类似，它也是一个组合属性，可用于属性类似，它也是一个组合属性，可用于同时设置同时设置backgroun

14、d-color、background-image、background-attachment、background-position和和background-repeat等背景属性。等背景属性。14.2 用用CSS3设置颜色与背景设置颜色与背景14.2.2 背景设置背景设置示例示例14-9显示了颜色和背景属性的用法显示了颜色和背景属性的用法14.2 用用CSS3设置颜色与背景设置颜色与背景14.2.3 圆角边框和图像边框圆角边框和图像边框1圆角边框圆角边框 使用使用border-radius属性可以设计各种类型的圆角边框。可以直接给属性可以设计各种类型的圆角边框。可以直接给border-rad

15、ius属性赋一组值来定义圆角。如果直接给属性赋一组值来定义圆角。如果直接给border-radius属性赋属性赋4个值，这个值，这4个值按照个值按照top-left、top-right、bottom-left、bottom-right的顺序来设置。的顺序来设置。如果只设置如果只设置1个值，则表示个值，则表示4个圆角相同。个圆角相同。如果如果bottom-left值省略，其圆角效果与值省略，其圆角效果与top-right相同。相同。如果如果bottom-right值省略，其圆角效果与值省略，其圆角效果与top-left相同。相同。如果如果top-right值省略，其圆角效果与值省略，其圆角效果与

16、top-left相同。相同。14.2 用用CSS3设置颜色与背景设置颜色与背景用用CSS3的的border-radius属性完成一个圆角的背景的示属性完成一个圆角的背景的示例例.14.2 用用CSS3设置颜色与背景设置颜色与背景用用CSS3的的border-radius属性完成一个圆角的背景的示例属性完成一个圆角的背景的示例.14.2 用用CSS3设置颜色与背景设置颜色与背景2图像边框图像边框 该属性指定一个图像文件作为边框，边框的长或宽会随着该属性指定一个图像文件作为边框，边框的长或宽会随着网页元素承载内容的多少自动调整。网页元素承载内容的多少自动调整。14.3 用用CSS3设置图像效果设置

17、图像效果 使用使用标记的标记的border属性可以为图片添加边框，属性值为边属性可以为图片添加边框，属性值为边框的粗细，以像素为单位，从而控制边框的效果。当设置属性值为框的粗细，以像素为单位，从而控制边框的效果。当设置属性值为0时时，则显示为没有边框。下面是为图片添加边框的代码。，则显示为没有边框。下面是为图片添加边框的代码。1边框的不同属性边框的不同属性 border-width（粗细）：设置边框的粗细，可以使用各种（粗细）：设置边框的粗细，可以使用各种CSS中的长度单中的长度单位，通常用的是像素。位，通常用的是像素。border-color（颜色）：定义边框的颜色，可以使用各种合法的颜色定

18、义（颜色）：定义边框的颜色，可以使用各种合法的颜色定义方式。方式。border-style（线型）：选择一些预先定义好的线型，如虚线、实线或点（线型）：选择一些预先定义好的线型，如虚线、实线或点划线等。划线等。14.3 用用CSS3设置图像效果设置图像效果14.3.1 为图片添加边框为图片添加边框示例示例14-12说明了使用说明了使用CSS设置边框的方法设置边框的方法14.3 用用CSS3设置图像效果设置图像效果（2）为不同的边框分别设置样式为不同的边框分别设置样式14.3 用用CSS3设置图像效果设置图像效果14.3.2 图片缩放图片缩放1使用使用标记的标记的width和和height属性属

19、性 通过通过标记的描述属性标记的描述属性width和和height可以设置可以设置图片大小。图片大小。2使用使用CSS3中中max-width属性和属性和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

20、和和height来设置图片的宽度和高度，从而达到对图来设置图片的宽度和高度，从而达到对图片的缩放效果。片的缩放效果。14.3 用用CSS3设置图像效果设置图像效果14.3.3 图文混排图文混排 CSS使用使用float属性来实现文字环绕效果。属性来实现文字环绕效果。float属性属性主要定义图像向哪个方向浮动。文字环绕也可以使文本围绕主要定义图像向哪个方向浮动。文字环绕也可以使文本围绕其他浮动对象（块）。不论浮动对象本身是何种元素，都会其他浮动对象（块）。不论浮动对象本身是何种元素，都会生成一个块级框。被浮动对象需要指定一个明确的宽度，否生成一个块级框。被浮动对象需要指定一个明确的宽度，否则会

21、很窄。则会很窄。float语法格式如下：语法格式如下：float:none/left/right;14.3 用用CSS3设置图像效果设置图像效果示例示例14-16展示了文字环绕功能展示了文字环绕功能14.4 用CSS3美化表单的应用示例示例14-17用用CSS美化一个网站的在线注册页面美化一个网站的在线注册页面作业与操作（1）用CSS设计下图所示的页面，要求如下。设置背景background-attachment、background-image、background-repeat、background-position等属性。设置图片的border、width、height等属性。为控制图片位置，可将图片置于标记或标记中。