《HTML5+CSS3网站设计基础教程（第3版）》ppt第3章 CSS3入门_第1页
《HTML5+CSS3网站设计基础教程（第3版）》ppt第3章 CSS3入门_第2页
《HTML5+CSS3网站设计基础教程（第3版）》ppt第3章 CSS3入门_第3页
《HTML5+CSS3网站设计基础教程（第3版）》ppt第3章 CSS3入门_第4页
《HTML5+CSS3网站设计基础教程（第3版）》ppt第3章 CSS3入门_第5页
已阅读5页，还剩175页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第3章CSS3入门《HTML5+CSS3网站设计基础教程（第3版）》学习目标/Target了解CSS的功能和作用，能够列举CSS的应用示例。熟悉CSS的发展历史，能够厘清CSS1、CSS2和CSS3三者的关系掌握CSS的样式规则，能够按照CSS样式规则正确书写CSS样式。掌握CSS样式表的引入方式，能够在网页中引入CSS样式。掌握CSS基础选择器的用法，能够使用CSS基础选择器设置差异化的网页样式。学习目标/Target掌握字体样式属性的用法，能够在网页中设置不同的字体样式。掌握文本外观属性的用法，能够在网页中设置不同的文本样式。熟悉列表样式属性的用法，能够清除网页中默认的列表项目符号。了解CSS层叠性和继承性的特点，能够运用CSS层叠性和继承性优化网页代码结构。掌握CSS优先级的特点，能够对CSS基础选择器进行优先级排序。章节概述/Summary随着网页制作技术的不断发展，仅仅依靠HTML属性设置的样式已经无法满足网页设计的需求。CSS能够在不改变原有HTML结构的情况下实现更加丰富的样式效果，例如更多样的字体、更绚丽的图形动画等，这极大地满足了网页设计的需求。本章将主要讲解CSS3的基础知识。目录/Contents3.1CSS概述3.2CSS基础3.3字体样式属性3.4文本外观属性3.5列表样式属性3.6CSS层叠性和继承性3.7CSS优先级3.8阶段案例——宣传软文目录/ContentsCSS概述3.13.1CSS概述在学习CSS设置网页样式之前，本节先从认识CSS和CSS发展历史两个方面对CSS进行简单介绍。了解CSS的功能和作用，能够列举CSS的应用示例。学习目标3.1.1认识CSS3.1CSS概述3.1.1认识CSS3.1CSS概述CSS以HTML为基础，提供了丰富的样式效果，例如，字体、颜色、背景的控制以及网页整体的布局和排版等。某教育网站的信息展示模块3.1.1认识CSS3.1CSS概述CSS非常灵活，既可以嵌入在HTML文件中，也可以是一个独立的外部文件。如果是独立的文件，则必须以.css为后缀名。例如，嵌入在HTML文件中的CSS代码熟悉CSS的发展历史，能够厘清CSS1、CSS2和CSS3三者的关系。学习目标3.1.2CSS的发展历史3.1CSS概述20世纪90年代初，HTML语言的诞生，各种形式的修饰样式也随之出现。CSS发展至今主要出现了4个版本。3.1.2CSS的发展历史3.1CSS概述CSS11996年12月W3C发布了第一个有关样式的标准CSS1CSS21998年5月，CSS2正式推出，这个版本开始使用样式表结构CSS2.12004年2月，CSS2.1正式推出删除了许多不被浏览器支持的属性。CSS3CSS3是目前CSS的最新版本，增加了很多强大的新功能，例如，过渡、变形、动画等效果。CSS基础3.23.2CSS基础本节将从CSS样式规则、引入CSS样式表、CSS基础选择器三个方面，详细讲解CSS的基础知识。掌握CSS的样式规则，能够按照CSS样式规则正确书写CSS样式。学习目标3.2.1CSS样式规则3.2CSS基础要想熟练地使用CSS对网页进行修饰，需要遵循CSS样式规则。3.2.1CSS样式规则3.2CSS基础CSS样式规则具体格式选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;}在上面的样式规则中，选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。其中，属性和属性值以“键值对”的形式出现，用英文“:”连接，多个“键值对”之间用英文“;”进行区分。3.2.1CSS样式规则3.2CSS基础CSS样式规则的结构示例h1：表示CSS样式作用的HTML对象为<h1>标签。CSS样式对应的效果3.2.1CSS样式规则3.2CSS基础CSS代码结构的特点01CSS样式中的选择器严格区分大小写，而声明不区分大小写，按照书写习惯一般采用小写书写选择器、声明。3.2.1CSS样式规则3.2CSS基础CSS代码结构的特点02多个声明之间必须用英文分号隔开，最后一个声明后的英文分号可以省略，但是为了便于增加新样式最好保留最后一个声明后的英文分号。3.2.1CSS样式规则3.2CSS基础CSS代码结构的特点03如果属性值由多个单词组成且中间包含空格，则必须为这个属性值添加英文引号。p{font-family:"TimesNewRoman";}例如：3.2.1CSS样式规则3.2CSS基础CSS代码结构的特点04可使用注释语句对CSS代码进行注释。CSS代码注释也不会显示在浏览器窗口中。p{font-family:"TimesNewRoman";}/*这是CSS注释文本,有利于方便查找代码,此文本不会显示在浏览器窗口中*/例如：3.2.1CSS样式规则3.2CSS基础CSS代码结构的特点05在CSS代码中空格是不被解析的，大括号以及分号前后的空格可有可无。因此可以使用Tab键、回车键对CSS代码进行排版，即所谓的格式化CSS代码，这样可以提高代码的可读性。3.2.1CSS样式规则3.2CSS基础CSS代码结构的特点05h1{color:green;font-size:14px;}/*定义颜色属性，定义字号属性*/例如1：h1{color:green;/*定义颜色属性*/font-size:14px;/*定义字号属性*/}例如2：√可读性更高3.2.1CSS样式规则3.2CSS基础CSS代码的属性值和单位之间是不允许出现空格的，否则浏览器解析网页代码时会出错。h1{font-size:14px;}/*14和单位px之间有空格，浏览器解析时会出错*/3.2.2引入CSS样式表3.2CSS基础要想使用CSS修饰网页，就需要在HTML文件中引入CSS样式表。引入CSS样式表的方式有4种，分别为行内式、内嵌式、链入式和导入式。行内式内嵌式链入式导入式掌握行内式引入方式，能够在网页中引入CSS样式。学习目标3.2.2引入CSS样式表-行内式3.2CSS基础3.2CSS基础行内式内嵌式链入式<标签名style="属性1:属性值1;属性2:属性值2;属性3:属性值3;">内容</标签名>行内式也被称为内联样式，是通过标签的style属性来设置标签的样式。导入式标签的属性用来设置行内式3.2.2引入CSS样式表-行内式3.2CSS基础行内式内嵌式链入式导入式案例演示3.2.2引入CSS样式表-行内式掌握内嵌式引入方式，能够在网页中引入CSS样式。学习目标3.2CSS基础3.2.2引入CSS样式表-内嵌式3.2CSS基础<styletype="text/css">

选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;}</style>内嵌式是将CSS代码集中写在HTML文件的<head>头部标签中，并且用<style>标签定义。行内式内嵌式链入式导入式一般位于<head>标签中<title>标签之后能够让浏览器识别<style>标签包含的是CSS代码3.2.2引入CSS样式表-内嵌式3.2CSS基础行内式内嵌式链入式导入式案例演示3.2.2引入CSS样式表-内嵌式3.2CSS基础行内式内嵌式链入式导入式内嵌式CSS样式只对其所在的HTML页面有效，因此，仅设计一个页面时，使用内嵌式CSS样式是个不错的选择。但如果制作一个网站，则不建议使用内嵌式CSS样式，因为它不能充分发挥CSS代码的重用优势。3.2.2引入CSS样式表-内嵌式掌握链入式引入方式，能够在网页中引入CSS样式。学习目标3.2CSS基础3.2.2引入CSS样式表-链入式3.2CSS基础<head><linkhref="CSS文件的路径"type="text/css"rel="stylesheet"/></head>链入式也叫外链式，是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link/>标签将外部样式表文件链接到HTML文件中。行内式内嵌式链入式导入式<link/>标签需要放在<head>头部标签中，并且必须指定<link/>标签的三个属性3.2.2引入CSS样式表-链入式3.2CSS基础行内式内嵌式链入式导入式<link/>标签的三个属性123href：定义所链接外部样式表文件的路径。文件路径可以是相对路径，也可以是绝对路径。type：定义所链接文件的类型，在这里需要指定为“text/css”，表示链接的外部文件为CSS样式表。rel：定义当前文件与被链接文件之间的关系，在这里需要指定为“stylesheet”，表示被链接的文件是一个样式表文件。3.2.2引入CSS样式表-链入式3.2CSS基础行内式内嵌式链入式导入式案例演示3.2.2引入CSS样式表-链入式3.2CSS基础行内式内嵌式链入式导入式链入式最大的优势是同一个CSS样式表可以被不同的HTML文件链接使用，同时一个HTML文件也可以通过多个<link/>标签链接多个CSS样式表。在实际网页制作中，链入式是使用频率较高，也较实用的引入方式。它将HTML代码与CSS代码分离为两个或多个文件，实现了结构和样式的完全分离，使得网页的前期制作和后期维护都十分方便。3.2.2引入CSS样式表-链入式掌握导入式引入方式，能够在网页中引入CSS样式。学习目标3.2CSS基础3.2.2引入CSS样式表-导入式3.2CSS基础<styletype="text/css">@importurl(css文件路径);或@import"css文件路径";

存放其他的内嵌CSS样式</style>导入式与链入式相同，都能够引入外部样式表文件。在HTML头部应用<style>标签，并在<style>标签内使用@import语句，即可导入外部样式表文件。行内式内嵌式链入式导入式@import语句的两种书写形式均可以导入CSS样式。3.2.2引入CSS样式表-导入式3.2CSS基础在<style>标签内还可以存放其他的内嵌的CSS样式，但@import语句需要位于其他内嵌样式的上方。行内式内嵌式链入式导入式<styletype="text/css">@import"style03.css";p{color:blue;}</style><styletype="text/css">@importurl(style03.css);p{color:blue;}</style>3.2.2引入CSS样式表-导入式3.2CSS基础行内式内嵌式链入式导入式虽然导入式和链入式功能基本相同，但是大多数网站都是采用链入式引入外部样式表的。主要原因是导入式和链入式的加载时间和顺序不同。当一个页面被加载时，<link/>标签引用的CSS样式表将同时被加载，而@import引用的CSS样式表会等到页面全部下载完后再被加载。因此，当用户的网速比较慢时，使用导入式CSS样式，网页可能会先显示没有CSS修饰的网页，造成不好的用户体验，而使用链入式CSS样式则能够避免这个问题。3.2.2引入CSS样式表-导入式3.2.3CSS基础选择器3.2CSS基础要想将CSS样式应用于特定的HTML标签，首先需要找到该标签。在CSS中，执行这一任务的样式对象被称为选择器。在CSS中的基础选择器有标签选择器、类选择器、id选择器、通配符选择器、标签指定式选择器、后代选择器和并集选择器。标签选择器类选择器id选择器标签指定式选择器后代选择器并集选择器通配符选择器熟悉标签选择器的用法，能够使用p选择器定义HTML页面中所有段落的样式。学习目标3.2CSS基础标签选择器3.2.3CSS基础选择器3.2CSS基础标签选择器是指用HTML标签名称作为选择器。标签选择器会按标签名称分类，为页面中某一类标签指定统一的CSS样式。标签选择器的基本语法格式标签名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}3.2.3CSS基础选择器标签选择器掌握类选择器的用法，能够为标签定义单独的样式。学习目标3.2CSS基础3.2.3CSS基础选择器类选择器3.2CSS基础类选择器使用“.”（英文点号）进行标识，后面紧跟类名。最大的优势是可以为标签定义单独的样式。类选择器基本语法格式.类名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}类名即为HTML标签的class属性值，大多数HTML标签都可以定义class属性。3.2.3CSS基础选择器类选择器3.2CSS基础案例演示3.2.3CSS基础选择器类选择器3.2CSS基础一个标签也可以应用多个class类，来设置差异化的样式。在HTML标签中多个类名之间需要用空格隔开。3.2.3CSS基础选择器类选择器3.2CSS基础注意：类名的第一个字符不能使用数字，并且严格区分大小写，一般采用小写的英文字符。3.2.3CSS基础选择器类选择器掌握id选择器的用法，能够为一个具体的标签定义样式。学习目标3.2CSS基础3.2.3CSS基础选择器id选择器3.2CSS基础id选择器使用“#”进行标识，后面紧跟id名。id选择器基本语法格式#id名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}Id名即为HTML标签的id属性值，大多数HTML标签都可以定义id属性，标签的id名是唯一的，只能对应文件中某一个具体的标签。3.2.3CSS基础选择器id选择器3.2CSS基础案例演示3.2.3CSS基础选择器id选择器3.2CSS基础同一个id名也可以应用于多个标签，浏览器并不报错，但是这种做法是不被允许的。因为JavaScript等脚本语言调用id名时会因为重复的id名而出错。此外，最后一行没有应用任何CSS样式，这意味着id选择器不可以像类选择器那样定义多个值，类似“id="boldfont24"”的写法是错误的。3.2.3CSS基础选择器id选择器熟悉通配符选择器的用法，能够描述通配符选择器的作用。学习目标3.2CSS基础3.2.3CSS基础选择器通配符选择器3.2CSS基础通配符选择器用“*”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的标签。通配符选择器基本语法格式*{属性1:属性值1;属性2:属性值2;属性3:属性值3;}3.2.3CSS基础选择器通配符选择器*{ margin:0;/*定义外边距*/ padding:0;/*定义内边距*/}例如：3.2CSS基础在实际网页开发中不建议使用通配符选择器设置HTML标签样式，因为通配符选择器设置的样式对所有的HTML标签都生效，不管标签是否需要该样式，这样反而降低了代码的执行效率。3.2.3CSS基础选择器通配符选择器掌握交集选择器的用法，能够为某些标签单独指定样式。学习目标3.2CSS基础3.2.3CSS基础选择器交集选择器3.2CSS基础交集选择器也被称为标签指定式选择器，可以为某些标签单独指定样式，由两个选择器构成，其中第一个为标签选择器，第二个为类选择器或id选择器。交集选择器的两个选择器之间不能有空格。3.2.3CSS基础选择器交集选择器h3.special例如：p#one3.2CSS基础案例演示3.2.3CSS基础选择器交集选择器掌握并集选择器的用法，能够为多个标签统一设置相同的样式。学习目标3.2CSS基础3.2.3CSS基础选择器并集选择器3.2CSS基础并集选择器可以为多个标签统一设置相同的样式，从而避免代码的冗余。并集选择器也是一个复合选择器，是各个选择器通过逗号连接而成的。任何形式的选择器（包括标签选择器、类选择器以及id选择器等），都可以作为并集选择器的一部分。如果不同标签包含相同的样式，可以使用并集选择器对这些相同的样式进行统一设置。3.2.3CSS基础选择器并集选择器3.2CSS基础案例演示3.2.3CSS基础选择器并集选择器3.2CSS基础使用并集选择器也能实现标签选择器、类选择器、id选择器定义的样式效果，并且使用并集选择器书写的CSS代码更简洁、直观。3.2.3CSS基础选择器并集选择器掌握后代选择器的用法，能够控制内部嵌套标签的样式。学习目标3.2CSS基础3.2.3CSS基础选择器后代选择器3.2CSS基础后代选择器可以用来控制内部嵌套标签的样式。后代选择器的写法就是把外层标签写在前面，内层标签写在后面，外层标签和内层标签之间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。3.2.3CSS基础选择器后代选择器3.2CSS基础案例演示3.2.3CSS基础选择器后代选择器3.2CSS基础后代选择器数量不受限制，如果需要加入更多的选择器，只需在选择器之间加上空格，按序排列即可。3.2.3CSS基础选择器后代选择器字体样式属性3.33.3字体样式属性为了更方便地控制网页中字体显示样式，CSS提供了一系列的字体样式属性。本节将对CSS字体样式属性进行详细讲解。掌握font-size属性的使用方法，能够设置字号。学习目标3.3.1font-size:字号3.3字体样式属性3.3字体样式属性font-size属性用于设置字号，该属性的属性值可以为像素值、百分比、倍率等。font-size属性常用的属性值单位单位说明em倍率单位，指相对当前文本的倍率px像素单位，是网页设计中常用的单位%百分比单位，指相对于当前文本的百分比推荐使用像素单位——px例如：p{font-size:12px;}3.3.1font-size:字号掌握font-family属性的使用方法，能够设置字体。学习目标3.3.2font-family:字体3.3字体样式属性3.3字体样式属性font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。例如：将网页中所有段落文本的字体设置为微软雅黑p{font-family:"微软雅黑";}3.3.2font-family:字体可以同时指定多个字体，各字体之间以逗号隔开。如果浏览器不支持第一种字体，则会尝试选择下一种，直到匹配到合适的字体。body{font-family:"华文彩云","宋体","黑体";}3.3字体样式属性使用font-family设置字体时的注意事项3.3.2font-family:字体12各种字体之间必须使用英文逗号分隔中文字体需要加英文引号，但英文字体不需要加引号。设置英文字体时，英文字体名必须位于中文字体名之前3.3字体样式属性使用font-family设置字体时的注意事项3.3.2font-family:字体34如果字体名中包含空格、#、$等符号，则该字体必须加英文引号尽量使用计算机系统默认字体，保证网页中的文字在任何用户的浏览器中都能正确显示掌握font-weight属性的使用方法，能够定义文字的粗细。学习目标3.3.3font-weight:字体粗细3.3字体样式属性3.3字体样式属性font-weight属性用于定义文字的粗细。font-weight属性的属性值3.3.3font-weight:字体粗细属性值描述normal默认属性值。定义标准样式的文字bold定义粗体文字bolder定义更粗的文字lighter定义更细的文字100~900（100的整数倍）定义由细到粗的文字。其中400等同于normal，700等同于bold，数值越大字体越粗较为常用掌握font-variant属性的使用方法，能够定义小型大写字体。学习目标3.3.4font-variant:变体3.3字体样式属性normal：默认值，浏览器会显示标准的字体。small-caps：浏览器会显示小型大写的字体，即所有的小写字母均会转换为大写。但是所有使用小型大写字体的字母和其余文本相比，字体尺寸更小。3.3字体样式属性font-variant属性用于设置英文字符的变体，用于定义小型大写字体，该属性仅对英文字符有效。font-variant属性的常用属性值3.3.4font-variant:变体掌握font-style属性的使用方法，能够定义字体风格。学习目标3.3.5font-style:字体风格3.3字体样式属性3.3字体样式属性font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体。font-style属性的可用属性值normal：默认值，浏览器会显示标准的字体风格。132italic：浏览器会显示斜体的字体样式。oblique：浏览器会显示倾斜的字体样式。3.3.5font-style:字体风格掌握font属性的使用方法，能够对字体样式进行综合设置。学习目标3.3.6font:综合设置字体样式3.3字体样式属性3.3字体样式属性font属性用于对字体样式进行综合设置。font属性的基本语法格式选择器{font:font-stylefont-weightfont-size/line-heightfont-family;}使用font属性时，必须按上面语法格式中的顺序书写，各个属性以空格隔开3.3.6font:综合设置字体样式在设置字体样式属性时，不需要设置的属性可以省略（取默认值），但必须保留font-size属性和font-family属性，否则font属性将不起作用。3.3字体样式属性3.3.6font:综合设置字体样式案例演示3.3字体样式属性3.3.6font:综合设置字体样式掌握@font-face规则，能够定义服务器字体。学习目标3.3.7@font-face规则3.3字体样式属性3.3字体样式属性@font-face是CSS3的新增规则，用于定义服务器字体。使用@font-face规则定义服务器字体的基本语法格式@font-face{ font-family:字体名称; src:字体路径; }用于指定字体文件的路径3.3.7@font-face规则用于指定字体的名称案例演示3.3字体样式属性3.3.7@font-face规则3.3字体样式属性使用服务器字体的步骤3.3.7@font-face规则下载字体，并存储到相应的文件夹中02使用@font-face规则定义服务器字体0103对元素应用“font-family”字体样式文本外观属性3.43.4文本外观属性使用HTML可以对文本外观进行简单的控制，但是效果并不理想。为此CSS提供了一系列的文本外观属性，用于设置更为丰富的文本外观样式。3.4文本外观属性CSS文本样式属性有哪些？CSS样式属性修饰的文本随处可见3.4文本外观属性colorletter-spacingword-spacingline-heighttext-transformtext-decorationtext-indenttext-alignwhite-spacetext-shadowtext-overflowword-wrap掌握color属性的用法，能够定义文本的颜色。学习目标3.4.1color:文本颜色3.4文本外观属性color属性用于定义文本的颜色。color属性的属性值3.4.1color:文本颜色3.4文本外观属性预定义的颜色值，如red，green，blue等。十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。注意：如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。3.4.1color:文本颜色3.4文本外观属性十六进制颜色值是由#开头的6位十六进制数值组成，每2位数值为一个颜色分量，分别表示颜色的红、绿、蓝3个颜色分量。当3个颜色分量的2位十六进制数值都相同时，可使用CSS缩写。例如，#FF6600可缩写为#F60，#FF0000可缩写为#F00，#FFFFFF可缩写为#FFF。十六进制颜色值的缩写多学一招:3.4.1color:文本颜色3.4文本外观属性掌握letter-spacing属性的用法，能够定义字间距。学习目标3.4.2letter-spacing:字间距3.4文本外观属性letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白距离。3.4.2letter-spacing:字间距3.4文本外观属性letter-spacing属性的属性值letter-spacing属性的属性值可为不同单位的数值。例如，像素单位px、倍率单位em。定义字间距时，允许使用负数，表示缩小字间距，字间距默认属性值为normal。h2{letter-spacing:20px;}h3{letter-spacing:-0.5em;}例如：分别为<h2>标签和<h3>标签定义不同的字间距掌握word-spacing属性的用法，能够定义单词间距。学习目标3.4.3word-spacing:单词间距3.4文本外观属性word-spacing属性用于定义英文单词之间的间距，对中文字符无效。word-spacing属性的属性值可为不同单位的数值。定义单词间距时允许使用负值，表示缩小单词间距，默认属性值为normal。word-spacing和letter-spacing属性的区别3.4.3word-spacing:单词间距3.4文本外观属性letter-spacingword-spacing定义的为字母之间的间距定义的为英文单词之间的间距案例演示3.4.3word-spacing:单词间距3.4文本外观属性掌握line-height属性的用法，能够定义行间距。学习目标3.4.4line-height:行间距3.4文本外观属性line-height属性用于设置行间距，所谓行间距就是行与行之间的距离，即字符的垂直间距。3.4.4line-height:行间距3.4文本外观属性3.4.4line-height:行间距3.4文本外观属性line-height属性的属性值单位A像素单位pxB倍率单位emC百分比单位%推荐使用像素单位px。案例演示3.4.4line-height:行间距3.4文本外观属性掌握text-transform属性的用法，能够转换英文字符的大小写。学习目标3.4.5text-transform:文本转换3.4文本外观属性text-transform属性用于控制英文字符的大小写转换。3.4.5text-transform:文本转换3.4文本外观属性text-transform属性的属性值none：不进行转换（默认值）。capitalize：将首字母转换为大写。uppercase：将全部字符转换为大写。lowercase：将全部字符转换为小写。掌握text-decoration属性的用法，能够设置文本的下划线或删除线。学习目标3.4.6text-decoration:文本装饰3.4文本外观属性text-decoration属性用于设置文本的下划线，上划线，删除线等装饰效果。3.4文本外观属性text-decoration属性的属性值none：没有文本装饰，为默认值。underline：用于设置下划线效果。overline：用于设置上划线效果。line-through：用于设置删除线效果。3.4.6text-decoration:文本装饰text-decoration属性可以添加多个属性值，用于给文本添加多种显示效果。3.4文本外观属性3.4.6text-decoration:文本装饰案例演示掌握text-align属性的用法，能够设置文本内容的水平对齐。学习目标3.4.7text-align:水平对齐方式3.4文本外观属性text-align属性用于设置文本内容的水平对齐，和HTML中的align对齐属性类似。3.4文本外观属性text-align属性的属性值left：左对齐（默认值）。right：右对齐。center：居中对齐。3.4.7text-align:水平对齐方式掌握text-indent属性的用法，能够设置首行缩进。学习目标3.4.8text-indent:首行缩进3.4文本外观属性3.4文本外观属性text-indent属性的属性值单位A像素单位pxB倍率单位emC百分比单位%推荐使用倍率单位——emtext-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值。3.4.8text-indent:首行缩进3.4文本外观属性3.4.8text-indent:首行缩进案例演示掌握white-space属性的用法，能够设置空格的处理方式。学习目标3.4.9white-space:空格处理3.4文本外观属性使用HTML制作网页时，不论源代码中有多少个空格，在浏览器中只会显示一个空格。在CSS中，使用white-space属性可设置空格的处理方式。3.4文本外观属性white-space属性的属性值normal：常规显示（默认值），文本中的空格、换行无效，只显示一个空格，文本满行（指到达模块区域边界）后自动换行。pre：按文件的书写格式保留空格、换行，文本将按照原格式显示。nowrap：空格、换行无效，强制文本不能换行，除非使用换行标签<br/>。若超出浏览器边界，浏览器会自动增加滚动条。3.4.9white-space:空格处理3.4文本外观属性案例演示3.4.9white-space:空格处理掌握text-shadow属性的用法，能够为文本添加阴影。学习目标3.4.10text-shadow:阴影效果3.4文本外观属性text-shadow是CSS3新增属性，使用该属性可以为页面中的文本添加阴影效果。3.4文本外观属性text-shadow属性的语法格式3.4.10text-shadow:阴影效果选择器{text-shadow:h-shadowv-shadowblurcolor;}设置阴影颜色设置水平阴影的距离设置垂直阴影的距离设置模糊半径3.4文本外观属性3.4.10text-shadow:阴影效果案例演示注意：阴影的水平距离或垂直距离参数可以设为负值，但阴影的模糊半径参数只能设置为正值，并且数值越大阴影向外模糊的范围也就越大。3.4文本外观属性3.4.10text-shadow:阴影效果text-shadow属性能够给文字添加多个阴影，从而产生阴影叠加的效果。设置阴影叠加的效果方法很简单，只需为文本设置多组阴影参数，中间用逗号隔开即可。设置多个阴影叠加效果多学一招:3.4文本外观属性3.4.10text-shadow:阴影效果设置多个阴影叠加效果多学一招:3.4文本外观属性3.4.10text-shadow:阴影效果P{ font-size:32px; text-shadow:10px10px10pxred,20px20px20pxgreen;/*红色和绿色的阴影叠加*/}例如：设置红色和绿色阴影叠加的效果设置多个阴影叠加效果多学一招:3.4文本外观属性3.4.10text-shadow:阴影效果例如：设置红色和绿色阴影叠加的效果掌握text-overflow属性的用法，能够处理溢出的文本。学习目标3.4.11text-overflow:处理溢出的文本3.4文本外观属性text-overflow属性同样为CSS3的新增属性，该属性用于处理溢出的文本。3.4文本外观属性text-overflow属性的语法格式选择器{text-overflow:属性值;}text-overflow属性的属性值clip：修剪溢出文本，不显示省略符号“…”。ellipsis：用省略符号“…”替代被修剪文本，省略符号插入的位置在最后一个字符处。3.4.11text-overflow:处理溢出的文本3.4文本外观属性案例演示3.4.11text-overflow:处理溢出的文本3.4文本外观属性设置省略标签标示溢出文本的步骤243应用“white-space:nowrap;”样式强制文本不能换行应用“text-overflow:ellipsis;”样式显示省略符号应用“overflow:hidden;”样式隐藏溢出文本1为包含文本的元素定义宽度3.4.11text-overflow:处理溢出的文本掌握word-wrap属性的用法，能够设置文本换行效果。学习目标3.4.12word-wrap属性3.4文本外观属性word-wrap属性是CSS3的新增属性，该属性用于实现长单词和URL地址的自动换行。3.4文本外观属性word-wrap属性的取值属性值描述normal只在允许的断字点换行（浏览器保持默认处理）break-word在长单词或URL地址内部进行换行3.4.12word-wrap属性3.4文本外观属性3.4.12word-wrap属性案例演示列表样式属性3.53.5列表样式属性定义无序或有序列表时，可以通过标签的属性控制列表项目符号，但该方式不符合结构与样式相分离的网页设计原则，为此CSS提供了一系列的列表样式属性，来单独控制列表项目符号，本节将对这些列表样式属性进行详细地讲解。掌握list-style-type属性的用法，能够控制列表项显示符号的类型。学习目标3.5.1list-style-type属性3.5列表样式属性3.5列表样式属性3.5.1list-style-type属性在CSS中，list-style-type属性用于控制列表项显示符号的类型，其取值有多个同。list-style-type属性的取值-1属性值描述属性值描述disc实心圆（无序列表使用）none不使用项目符号（无序列表和有序列表通用）circle空心圆（无序列表使用）cjk-ideographic简单的表意数字（有序列表使用）square实心方块（无序列表使用）georgian传统的乔治亚编号方式（有序列表使用）decimal阿拉伯数字（有序列表使用）decimal-leading-zero以0开头的阿拉伯数字（有序列表使用）3.5列表样式属性3.5.1list-style-type属性属性值描述属性值描述lower-roman小写罗马数字（有序列表使用）upper-roman大写罗马数字（有序列表使用）lower-alpha小写英文字母（有序列表使用）upper-alpha大写英文字母（有序列表使用）lower-latin小写拉丁字母（有序列表使用）upper-latin大写拉丁字母（有序列表使用）hebrew传统的希伯来编号方式（有序列表使用）armenian传统的亚美尼亚编号方式（有序列表使用）在CSS中，list-style-type属性用于控制列表项显示符号的类型，其取值有多个同。list-style-type属性的取值-23.5列表样式属性3.5.1list-style-type属性案例演示注意：由于各个浏览器对list-style-type属性的解析不同。因此，在实际网页制作过程中不推荐使用list-style-type属性。3.5列表样式属性3.5.1list-style-type属性掌握list-style-image属性的用法，能够为各个列表项设置图像符号。学习目标3.5.2list-style-image属性3.5列表样式属性3.5.2list-style-image属性3.5列表样式属性使用list-style-image属性可以为各个列表项设置图像符号，使列表的样式更加美观，属性值为图像的url。案例演示3.5.2list-style-image属性3.5列表样式属性list-style-image属性对列表项目图像的控制能力不强。因此，实际工作中不建议使用list-style-image属性，常通过为<li>标签设置背景图像的方式实现列表项目图像。掌握list-style-position属性的用法，能够设置项目符号的位置。学习目标3.5.3list-style-position属性3.5列表样式属性3.5列表样式属性在CSS中，list-style-position属性用于控制列表项目符号的位置，其取值有inside和outside2个。3.5.3list-style-position属性inside：列表项目符号位于列表文本以内。outside：列表项目符号位于列表文本以外（默认值）。3.5列表样式属性3.5.3list-style-position属性案例演示掌握list-style属性的用法，能够综合设置列表样式。学习目标3.5.4list-style属性3.5列表样式属性3.5列表样式属性在CSS中，列表样式也是一个复合属性，可以将列表相关的样式都综合定义在一个复合属性list-style中。3.5.4list-style属性使用list-style属性综合设置列表样式的语法格式list-style:列表项目符号列表项目符号的位置列表项目图像;3.5列表样式属性3.5.4list-style属性案例演示3.5列表样式属性3.5.4list-style属性在实际网页制作过程中，为了更高效地控制列表项目符号，通常将list-style的属性值定义为none，然后通过为<li>设置背景图像的方式实现不同的列表项目符号。3.5列表样式属性3.5.4list-style属性案例演示CSS层叠性和继承性3.63.6CSS层叠性和继承性层叠性和继承性是CSS的基本特征。在网页制作中，合理利用CSS的层叠性和继承性能够简化代码结构，提升网页代码的运行速度。下面将对CSS的层叠性和继承性进行详细讲解。了解层叠性的特点，能够运用层叠性优化代码结构。学习目标3.6.1层叠性3.6CSS层叠性和继承性3.6.1层叠性3.6CSS层叠性和继承性层叠性是指CSS样式具有相互叠加的特性。例如：当使用内嵌式CSS样式表定义<p>标签字号为12像素，链入式CSS样式定义<p>标签颜色为红色，那么段落文本将显示字号为12像素，颜色为红色，也就是说这两种样式产生了叠加。3.6.1层叠性3.6CSS层叠性和继承性案例演示了解继承性的特点，能够运用继承性优化代码结构。学习目标3.6.2继承性3.6CSS层叠性和继承性3.6CSS层叠性和继承性继承性是指子标签会继承父标签的某些样式。例如：定义主体标签<body>的文本颜色为黑色，那么页面中所有的文本都将显示为黑色，这是因为页面其他的标签都嵌套在<body>标签中，是<body>标签的子标签。这些子标签继承了父标签<body>的属性。3.6.2继承性p,div,h1,h2,h3,h4,ul,ol,dl,li{color:black;}body{color:black;}等价！3.6CSS层叠性和继承性3.6.2继承性继承性这么优秀，那让所有元素都继承样式！正确错误3.6CSS层叠性和继承性3.6.2继承性继承性这么优秀，那让所有元素都继承样式！正确错误√3.6CSS层叠性和继承性3.6.2继承性恰当地使用CSS继承性可以简化代码。但是在网页中如果所有的元素都大量继承样式，判断样式的来源就会很困难。所以，在实际工作中，网页中通用的全局样式可以使用继承。例如，字体、字号、颜色、行距等可以在<body>标签选择器中统一设置，通过继承性控制文档中的文本。其他标签可以使用CSS基础选择器单独设置。3.6CSS层叠性和继承性3.6.2继承性不

人人文库> 全部分类> 教育资料 > 考试试卷

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论