跨平台的移动Web开发实战(HTML5+CSS3).pptx

,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,Page,#,点击此处结束放映,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,Page,#,点击此处结束放映,跨平台的移动,Web,开发实战,（,HTML5+CSS3,）,单元,1,跨平台的网站首页设计,HTML5,的语义化标签及属性，可以让开发者非常方便地实现清晰的,Web,页面布局，加上,CSS3,的效果渲染，使快速建立丰富灵活的,Web,页面变得相对简单一些。,本单元通过对网站首页设计的探析与训练，重点熟悉,HTML5,网页的基本结构及组成元素、,HTML5,的语义和结构标签、,声明等，学会,CSS,样式的定义与样式表的插入，掌握网站首页的设计方法。,教学导航,教学目标,（,1,）认识,HTML5,和,CSS3,，了解,HTML5,的主要特性、主要变化及其发展趋势,（,2,）了解,HTML5,新增的标签和废除的标签，了解,HTML5,新增的标签和废除的属性,（,3,）掌握,HTML5,网页的基本结构及组成元素,（,4,）掌握,HTML5,的语义和结构标签及其使用方法,（,5,）掌握,CSS,样式的定义与样式表的插入,（,6,）学会移动平台网站首页的设计,关 键 字,网站首页,HTML5,语义和结构标签,CSS,样式,参考资料,（,1,）,HTML5,的新特性简介参考附录,A,（,2,）,HTML5,的常用标签及其属性、方法与事件参考附录,B,（,3,）,CSS,的属性参考附录,C,（,4,）,CSS,的各种选择器的含义和用法参考附录,D,教学方法,任务驱动法、分组讨论法、理论实践一体化、探究学习法,课时建议,8,课时,实例探析,【任务,1-1,】探析携程旅行网的首页,【效果展示】,携程旅行网首页,0101.html,的浏览效果如图,1-1,所示。,图,1-1,携程旅行网首页,0101.html,的浏览效果,携程旅行网首页,0101.html,的主体结构包括,4,个组成部分，分别为顶部、中部、底部和侧边栏，顶部内容为广告图片，中部内容为多个图片超链接，底部包括多个导航链接，侧边栏为长形按钮。,【网页探析】,1,网页,0101.html,的,HTML,代码探析,2,网页,0101.html,的,CSS,代码探析,知识梳理,1,HTML5,印象,HTML5,是万维网的核心语言，是标准,通用置标语言下的一个应用超文本标记语言,（,HTML,）的第五次重大修改，,HTML5,草案,的前身名为,Web Applications 1.0,，于,2004,年被,WHATWG,（,Web Hypertext Application Technology Working Group,）提出，于,2007,年被万维网联盟（,W3C,）接纳，并成立了新的,HTML,工作团队。,2,CSS3,印象,CSS,即层叠样式表（,Cascading Style Sheet,）。,在网页制作时采用层叠样式表技术，可以有,效地对页面的布局、字体、颜色、背景和其他效,果实现更加精确的控制。,只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者不同网页的外观和格式。,CSS3,是,CSS,技术的升级版本，,CSS3,语言开发是朝着模块化发展的。,以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。,这些模块包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等。,3,HTML5,的主要特性,（,1,）语义特性（,Class,：,Semantic,）,（,2,）本地存储特性（,Class,：,Offline&Storagf,）,（,3,）设备兼容特性（,Class,：,Device Access,）,（,4,）连接特性（,Class,：,Connectivity,）,（,5,）网页多媒体特性（,Class,：,Multimedia,）,（,6,）三维、图形及特效特性（,Class,：,3D,Graphics&Effects,）,（,7,）性能与集成特性（,Class,：,Performance&Integration,）,（,8,）,CSS3,特性（,Class,：,CSS3,）,4,HTML5,的主要变化,HTML5,提供了一些新的元素和属性，如,（网站导航块）和,。,这种标签将有利于搜索引擎的索引整理，同时更好地帮助小屏幕装置和视障人士使用，除此之外，还为其他浏览要素提供了新的功,能，如,和,标记。,（,1,）取消了一些过时的,HTML4,标记,。,（,2,）将内容和展示分离,。,（,3,）一些全新的表单输入对象,。,（,4,）全新的、更合理的,Tag,。,（,5,）本地数据库,。,（,6,）,Canvas,对象,。,（,7,）浏览器中的真正程序,。,（,8,）,HTML5,取代,Flash,在移动设备的地位。,（,9,）,HTML5,突出的特点就是强化了,Web,页的表现性，增加了本地数据库。,5,HTML5,的发展趋势,HTML5,规范开发完成时，将成为主流。,据统计，,2013,年全球约有,10,亿手机浏览器支持,HTML5,，同时,HTML Web,开发者数量已达到,200,多万。毫无疑问，,HTML5,将成为未来,5,10,年内，移动互联网领域的主宰者。,6,HTML5,新增的标签和废除的标签,HTML5,中，新增加了多个标签元素，同时也废除了多个标签元素。,（,1,）,HTML5,新增的标签,（,2,）,HTML5,废除的标签,序号,新增标签名称,新增标签的功能说明,01,表示页面中的一个内容区块，如章节、页眉、页脚或页面的其他部分。可以和,、,等元素结合起来使用，表示文档结构,02,表示页面中一块与上下文不相关的独立内容，如一篇文章,03,表示,元素内容之外的并与,元素内容相关的辅助信息,04,表示页面中一个内容区块或整个页面的标题,05,表示对整个页面或页面中的一个内容区块的标题进行组合,06,表示页面或页面中一个内容区块的页脚,表,1-9,HTML5,新增的标签及其功能说明,序号,新增标签名称,新增标签的功能说明,07,表示页面中导航链接的部分,08,表示一段独立的流内容，一般表示主体文档内容中的一个独立单元。使用,元素为,元素组添加标题,09,定义视频，如电影片段或其他视频流等,10,定义音频，如音乐或其他音频流,11,用来嵌入内容（包括各种媒体），格式可以是,midi,、,wav,、,MP3,、,flash,等,12,主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字，典型应用搜索结果中高亮显示搜素关键字,13,表示运行中的进程，如等待中、请稍后等，可以使用,元素显示,JavaScript,中耗时函数的进程,14,表示日期或时间，也可以两者结合使用,15,由一个或多个字符（需要一个解释,/,发音）和一个提供该信息的,元素组成，还包括可选的,元素,16,定义字符（中文注音或字符）的解释或发音,17,在,注释中使用，以定义不支持,元素的浏览器所显示的内容,18,表示软换行。与,元素的区别：,br,元素表示此处必须换行；,表示浏览器窗口或父级元素足够宽时（没必要换行时）不换行，而宽度不够时主动在此处换行,19,定义图形，如图表和其他图像。,元素只是图形容器（画布），必须使用脚本来绘制图形,20,表示用户能够调用的命令，该标签可以定义命令按钮，如单选按钮、复选框或按钮。只有当,元素位于,元素内时，该元素才是可见的。否则不会显示这个元素，但是可以用它规定键盘快捷键,21,用于定义命令的列表或菜单列表，该标签用于上下文菜单、工具栏以及用于列出表单控件和命令,22,用于描述文档或文档某个部分的细节，可以与,标签配合使用，,可以为,定义标题。标题是可见的，用户单击标题时，会显示出,标签定义的内容。,应该是,的第一个子元素。目前只有,Chrome,浏览器支持,标签,23,定义选项列表。与,元素配合使用该元素来定义,可能的值。,及其选项不会被显示出来，它仅仅是合法的输入值列表。使用,元素的,list,属性来绑定,24,定义可选数据的列表。,作为树列表来显示。如果把该元素的,multiple,属性设置为,true,，则可以在列表中选取一个以上的项目,25,规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器,26,定义不同类型的输出，如脚本的输出,27,该标签为媒介元素（如,和,）定义媒介资源,续表,序号,被废除的标签,替代方案,序号,被废除的元素,替代方案,01,、,、,、,、,、,、,、,使用,CSS,代替,07,使用,替代,02,、,、,使用,框架或服务器方创建的由多个页面组成的复合页面代替,08,、,、,、,等标签,只有部分浏览器支持,03,使用,替代,09,使用,GUIDS,替代,04,使用,替代,10,使用,替代,05,使用,form,与,相结合的方式替代,11,使用“,text/plian,”,MIME,类型替代,06,使用,替代,表,1-10,HTML5,废除的标签,7,HTML5,新增和废除的标签属性,（,1,）,HTML5,新增的属性,（,2,）,HTML5,废除的属性,序号,属性类型,新增的属性,属性说明,01,与表单相关的属性,对,（,type=text,）、,、,与,指定,autofocus,属性,以指定属性的方式让元素在画面打开时自动获得焦点,02,对,（,type=text,）、,指定,placeholder,属性,对用户的输入进行提示，提示用户可以输入的内容,03,对,、,、,、,、,与,指定,form,属性,声明属于哪个表单，然后将其放置在页面的任何位置，而不在表单之内,04,对,input,（,type=text,）、,textarea,指定,required,属性,表示用户提交时进行检查，检查该元素内必定要有输入内容,05,为,标签增加几个新的属性：,autocomplete,、,min,、,max,、,multiple,、,pattern,与,step,。,还有,list,属性与,元素配合使用。,元素与,autocomplete,属性配合使用。,multiple,属性允许上传时一次上传多个文件。,pattern,属性用于验证输入字段的模式，其实就是正则表达式。,step,属性规定输入字段的合法数字间隔（假如,step=3,，则合法数字应该是,-3,、,0,、,3,、,6,，以此类推），,step,属性可以与,max,及,min,属性配合使用，以创建合法值的范围,表,1-11,HTML5,新增的属性列表,序号,属性类型,新增的属性,属性说明,06,与表单相关的属性,为,、,元素增加,formaction,、,formenctype,、,formmethod,、,formnovalidate,与,formtarget,属性,用户重载,元素的,action,、,enctype,、,method,、,novalidate,与,target,属性。为,fieldset,元素增加,disabled,属性，可以把它的子元素设为,disabled,状态,07,为,、,、,增加,novalidate,属性,可以取消提交时进行的有关检查，表单可以被无条件地提交,08,与链接相关属性,为,、,增加,media,属性,规定目标,URL,是为什么类型的媒介,/,设备进行优化的。该属性用于规定目标,URL,是为特殊设备（如,iPhone,）、语音或打印媒介设计的。该属性可接受多个值。只能在,href,属性存在时使用,09,为,增加,herflang,和,rel,属性,hreflang,属性规定在被链接文档中的文本的语言。只有当设置了,href,属性时，才能使用该属性。,rel,属性规定当前文档与被链接文档,/,资源之间的关系。只有当使用,href,属性时，才能使用,rel,属性,10,为,增加,size,属性,sizes,属性规定被链接资源的尺寸。只有当被链接资源是图标时（,rel=icon,），才能使用该属性。该属性可接受多个值，并且值由空格分隔,11,为,增加,target,属性,主要是保持与,元素的一致性,12,其他属性,为,增加,reversed,属性,它指定列表倒序显示,13,为,增加,charset,属性,定义,HTML,文档的字符集,14,为,增加,label,和,type,属性,label,属性规定菜单的可见标签，,type,属性规定要显示哪种菜单类型,15,为,增加,scoped,属性,它允许我们为文档的指定部分定义样式，而不是整个文档。如果使用“,scoped,”属性，那么所规定的样式只能应用到,元素的父元素及其子元素,16,为,增加,manifest,属性,开发离线,Web,应用程序时，它与,API,结合使用，定义一个,URL,，在这个,URL,上描述文档的缓存信息,17,为,增加,sandbox,、,seamless,和,srcdoc3,个属性,用来提高页面安全性，防止不信任的,Web,页面执行某些操作,续表,序号,在,HTML4,中使用的属性,使用该属性的元素,在,HTML5,中的替代方案,01,rev,、,rel,02,charset,、,在被链接的资源的中使用,HTTP Content-type,头元素,03,shape,、,coords,使用,元素代替,元素,04,longdesc,、,使用,元素链接到较长描述,05,target,多余属性，被省略,06,nohref,多余属性，被省略,07,profile,多余属性，被省略,08,version,多余属性，被省略,09,name,id,10,scheme,只为某个表单域使用,scheme,11,archive,、,chlassid,、,codebose,、,codetype,、,declare,、,standby,使用,data,与,typc,属性类调用插件。需要使用这些属性来设置参数时，使用,param,属性,12,valuetype,、,type,使用,name,与,value,属性，不声明其,MIME,类型,13,axis,、,abbr,、,使用以明确简洁的文字开头、后跟详述文字的形式。可以对更详细内容使用,title,属性，来使单元格的内容变得简短,14,scope,在被链接的资源的中使用,HTTP Content-type,头元素,15,align,、,、,、,、,、,、,、,、,、,、,使用,CSS,样式表替代,16,alink,、,link,、,text,、,vlink,、,background,、,bgcolor,使用,CSS,样式表替代,17,align,、,bgcolor,、,border,、,cellpadding,、,cellspacing,、,frame,、,rules,、,width,使用,CSS,样式表替代,18,align,、,char,、,charoff,、,height,、,nowrap,、,valign,、,、,使用,CSS,样式表替代,19,align,、,bgcolor,、,char,、,charoff,、,height,、,nowrap,、,valign,、,width,、,使用,CSS,样式表替代,20,align,、,bgcolor,、,char,、,charoff,、,valign,使用,CSS,样式表替代,表,1-12,HTML5,废除的属性列表,序号,在,HTML4,中使用的属性,使用该属性的元素,在,HTML5,中的替代方案,21,align,、,char,、,charoff,、,valign,、,width,、,使用,CSS,样式表替代,22,align,、,border,、,hspace,、,vspace,使用,CSS,样式表替代,23,clear,使用,CSS,样式表替代,24,compace,、,type,、,、,使用,CSS,样式表替代,25,compace,使用,CSS,样式表替代,26,compace,使用,CSS,样式表替代,27,width,使用,CSS,样式表替代,28,align,、,hspace,、,vspace,使用,CSS,样式表替代,29,align,、,noshade,、,size,、,width,使用,CSS,样式表替代,30,align,、,frameborder,、,scrolling,、,marginheight,、,marginwidth,使用,CSS,样式表替代,续表,8,HTML5,语义和结构标签实例代码探析,图,1-2,example01.html,网页的浏览效果,（,1,）,HTML5,的文档声明,说明：第一行,是,HTML5,对文档类型的简化描述，文档类型的作用是验证器依据它来判断该采用何种规则去验证代码；强制浏览器以标准模式渲染页面。,（,2,）头部,（,2,）头部,（,3,）尾部,（,4,）导航,（,5,）区块和文章,（,6,）旁白和侧边栏,9,HTML5中典型的标记方法,（,1,）内容类型（,ContentType,）,（,2,）,DOCTYPE,声明,（,3,）指定字符编码,（,4,）具有,boolean,值的属性,（,5,）引号,10,HTML5,主要的语义和结构标签说明,（,1,）,标签,（,2,）,标签,（,3,）,标签,（,4,）,标签,（,5,）,标签,（,6,）,标签,11,声明的用法,声明必须是,HTML,文档的第一行，位于,标签之前。,声明不是,HTML,标签，它是指示,Web,浏览器关于页面应使用哪个,HTML,版本进行编写的指令。,12,HTML,的注释标签,的用法,13,如何插入样式表,浏览网页时，当浏览器读到一个样式表时，浏览器会根据它来格式化,HTML,文档。,插入样式表的方法有以下,3,种。,（,1,）外部样式表,（,2,）内部样式表,（,3,）内联样式,14,网页中的多重样式,15,标记,-moz-,、,-webkit-,、,-o-,和,-ms-,的解释,引导训练,【任务,1-2,】设计苏宁易购网的首页,【任务描述】,【任务实施】,1,网页,0102.html,的主体结构设计,在本地硬盘的文件夹“,01,跨平台的网站首页设计,0102”中创建苏宁易购网的首页0102.html,。,（,1,）定义网页,0102.html,通用,CSS,代码,（,2,）定义网页,0102.html,主体结构的,CSS,代码,（,3,）编写网页,0102.html,主体结构的,HTML,代码,2,网页,0102.html,的局部内容设计,（,1,）网页,0102.html,的顶部内容设计,（,2,）网页,0102.html,的中部内容设计,（,3,）网页,0102.html,的底部内容设计,【网页浏览】,保存网页,0102.html,，在浏览器中的浏览效果如图,1-3,所示。,【任务,1-3,】设计穷游网的首页,【任务描述】,图,1-4,穷游网首页,0103.html,的浏览效果,穷游网首页,0103.html,主体结构为左、右结构，左侧为首页的导航栏，右侧为首页的主体内容，如图,1-4,所示。,左侧结构使用,标签和,标签嵌套实现，右侧结构使用,标签实现。,网页右侧的主体内容部分又分为上、中、下,3,个组成部分，网页右侧上部使用,标签实现，右侧中部使用,标签实现，右侧底部使用,标签实现。,网页左侧的导航栏也分为上、中、下,3,个组成部分，分别使用,、,和,标签实现。,【任务实施】,1,网页,0103.html,的主体结构设计,（,1,）定义网页,0103.html,通用,CSS,代码,（,2,）定义网页,0103.html,主体结构的,CSS,代码,（,3,）编写网页,0103.html,主体结构的,HTML,代码,2,网页,0103.html,的局部内容设计,（,1,）网页,0103.html,的主体顶部内容设计,（,2,）网页,0103.html,的主体中部内容设计,（,3,）网页,0103.html,的主体底部内容设计,（,4,）网页,0103.html,的侧边栏设计,同步训练,【任务,1-4,】设计同程旅游网的首页,【任务描述】,编写,HTML,代码和,CSS,代码，设计图,1-5,所示同程旅游网的首页,0104.html,。,图,1-5,同程旅游网首页,0104.html,的浏览效果,同程旅游网首页,0104.html,的主体结构为上、中、下结构，如图,1-5,所示。,顶部内容包括返回链接按钮、标题文字和主页链接按钮，中部内容为多个热点链接按钮，底部内容包括多个超链接和版权信息。,网页,0104.html,顶部结构使用,标签实现，中部结构使用,标签实现，底部结构使用,标签实现。,【任务实施】,1,网页,0104.html,的主体结构设计,在本地硬盘的文件夹“,01,跨平台的网站首页设计,0104”中创建,同程旅游网的首页,0104.html,。,（,1,）定义网页,0104.html,通用,CSS,代码,（,2,）定义网页,0104.html,主体结构的,CSS,代码,（,3,）编写网页,0104.html,主体结构的,HTML,代码,2,网页,0104.html,的局部内容设计,（,1,）网页,0104.html,的顶部内容设计,网页,0104.html,顶部内容的,CSS,代码定义见本书提供的电子资源。,在网页,0104.html,顶部代码“,”与“,”之,间编写,HTML,代码，实现其功能。,（,2,）网页,0104.html,的中部内容设计,网页,0104.html,中部内容的,CSS,代码定义见本书提供的电子资源。,在网页,0104.html,中部代码“,”和“,”之间编写,HTML,代码，实现其功能。,（,3,）网页,0104.html,的底部内容设计,网页,0104.html,底部内容的,CSS,代码定义见,本书提供的电子资源。,在网页,0104.html,底部代码“,”和“,”之间编写,HTML,代码，实现其功,能。,拓展训练,【任务,1-5,】设计酷狗音乐网的首页,【任务描述】,编写,HTML,代码和,CSS,代码，设计图,1-6,所示酷狗音乐网的首页,0105.html,。,图,1-6,酷狗音乐网首页,0105.html,的浏览效果,酷狗音乐网的首页,0105.html,从上至下由,4,个部分组成，依次为,Logo,图片和下载链接按钮、,返回链接按钮和标题文字、用于导航的主体内,容、用于播放音乐的按钮和进度条，如图,1-6,所,示。,【任务实施】,（,1,）网页,0105.html,的,HTML,代码编写提示,（,2,）网页,0105.html,的,CSS,代码定义提示,单元小结,本单元通过对网站首页设计的探析与三步训练，对,HTML5,和,CSS3,有了初步印象，对,HTML5,的主要特性、主要变化及其发展趋势有了初步了解，对,HTML5,新增的标签和废除的标签、,HTML5,新增和废除的标签属性有了初步认识。,也逐步掌握了,HTML5,网页的基本结构及组成元素、,HTML5,的语义和结构标签及其使用方法，掌握了,CSS,样式的定义与样式表的插入，学会了移动平台网站首页的设计方法。,单元,2,文本新闻浏览网页设计,新闻网站通常以文本新闻为主体，本单元通过对新闻网站的导航网页和文本新闻网页设计的探析与训练，重点学习,HTML5,中常用的文本标签、,CSS,文本属性、字体属性、颜色值及颜色表示方法、,CSS,链接属性等，学会网页元素的水平对齐、,CSS,导航栏的设计，掌握文本新闻网页和导航网页的设计方法。,教学导航,教学目标,（,1,）熟悉,HTML5,中常用的文本标签和,CSS,文本属性,（,2,）熟悉,CSS,的字体属性、颜色值及颜色表示方法、,CSS,链接属性,（,3,）学会网页元素的水平对齐设置方法,（,4,）学会,CSS,导航栏的设计方法,（,5,）掌握文本新闻网页和导航网页的设计方法,关,键,字,新闻网站文本网页导航网页文本标签与属性字体属性颜色值链接属性,参考资料,（,1,）,HTML5,的常用标签及其属性、方法与事件参考附录,B,（,2,）,CSS,的属性参考附录,C,（,3,）,CSS,的各种选择器的含义和用法参考附录,D,教学方法,任务驱动法、分组讨论法、理论实践一体化、探究学习法,课时建议,8,课时,【任务,2-1,】探析手机搜狐网的名站导航网页,【效果展示】,手机搜狐网的名站导航网页,0201.html,的浏览效果如图,2-1,所示。,手机搜狐网的名站导航网页,0201.html,的主体结构为上、中、下结构，顶部为标题文本，中部包括多个热点网站的链接按钮和多行分类网站导航链接，底部包括多个导航链接和版权信息。,图,2-1,手机搜狐网的名站导航网页,0201.html,的浏览效果,【网页探析】,1,网页,0201.html,的,HTML,代码探析,2,网页,0201.html,的,CSS,代码探析,知识梳理,1,HTML5,中常用的文本标签,（,1,）,标签与,标签,标签用于描述文档或文档某个部分的细节，目前只有,Chrome,浏览器支持,标签，可以与,标签配合使用。,（,2,）,标签,标签用于设置一段文本，使其脱离其父元素的文本方向设置。,（,3,）,标签、,标签与,标签,标签用于定义,ruby,注释（中文注音或字符）。与,标签一同使用。,元素由一个或多个字符（需要一个解释或发音）和一个提供该信息的,元素组成，还包括可选的,元素，定义当浏览器不支持,标签时显示的内容。,（,4,）,标签,标签主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字，典型应用是搜索结果中高亮显示搜索关键字。,（,5,）,标签,标签用于定义日期或时间，也可以两者同时。,（,6,）,标签,标签用于定义度量衡。仅用于已知最大和最小值的度量。,（,7,）,标签,标签用于定义任何类型任务的运行进度，可以使用,元素显示,JavaScript,中耗时时间函数的进程。,（,8,）,标签与,标签,标签可插入一个简单的换行符，使用,来输入空行，而不是分割段落。,标签是空标签（意味着它没有结束标签，因此这是错误的：,）。在,XHTML,中，把结束标签放在开始标签中，也就是,。,2,CSS,文本属性（,Text,）,CSS,文本属性可定义文本的外观，通过文本属性，可以改变文本的颜色、字符间距、对齐文本、装饰文本，以及对文本进行缩进等。,（,1,）缩进文本,把,Web,页面中段落的第一行缩进，这是一种最常用的文本格式化效果。,CSS,提供了,text-indent属性,，该属性可以方便地实现文本缩进。,通过使用,text-indent,属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。,（,2,）水平对齐,text-align,是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式，其取值,left,、,right,和,center,会导致元素中的文本分别左对齐、右对齐和居中。,（,3,）字间隔,word-spacing属性,可以改变字（单词）之间的标准间隔，其默认值,normal,与设置值为,0,是一样的。,word-spacing,属性接受一个正长度值或负长度值。,如果提供一个正长度值，那么文字之间的间隔就会增加。,为,word-spacing,设置一个负值，就,会把文字拉近,。,（,4,）字母间隔,与,word-spacing,属性一样，,letter-spacing,属性的可取值包括所有长度，默认关键字是,normal,（这与,letter-spacing:,0,相同）。,输入的长度值会使字母之间的间隔增加或减少指定的量,。,（,5,）字符转换,text-transform属性,处理文本的大小,写，该属性有,4,个取值：,none,、,uppercase,、,lowercase,和,capitalize,。,默认值,none,对文本不做任何改动，将,使用源文档中的原有大小写。,顾名思义，,uppercase,和,lowercase,将文本转换为全大写和全小写字符，,capitalize,只对每个单词的首字母大写。,（,6,）文本装饰,text-decoration属性,提供了很多非常有,趣的行为，,text-decoration,有,5,个值：,none,、,underline,、,overline,、,line-through,、,blink,，,不出所料，,underline,会对元素加下划线，,overline,的作用恰好相反，会在文本的顶端,画一个上划线，,line-through,则在文本中间,画一个贯穿线，,blink,会让文本闪烁。,注意：如果显式地用这样一个规则去掉链接的下划线，那么超链接与正常文本之间在视觉上的唯一差别就是颜色。,（,7,）文本阴影,在,CSS3,中，,text-shadow,可向文本应用阴影，允许规定水平阴影、垂直阴影、模糊距离及阴影的颜色。,（,8,）处理空白符,white-space属性,会影响到对源文档中的空格、换行和,tab,字符的处理。,通过使用该属性，可以影响浏览器处理字之间和文本行之间的空白符的方式。,从某种程度上讲，默认的,XHTML,处理已经完成了空白符处理它会把所有空白符合并为一个空格。,3,CSS,字体属性（,Font,）,CSS,字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）。,（,1,）,CSS,字体系列,在,CSS,中，有两种不同类型的字体系列：,通用字体系列：拥有相似外观的字体系统组合（如“,serif,”或“,monospace,”）。,特定字体系列：具体的字体系列（如“,Times,”或“,Courier,”）。除了各种特定的字体系列外，,CSS,定义了,5,种通用字体系列：,serif,字体、,sans-serif,字体、,monospace,字体、,cursive,字体,、,fantasy,字体。,（,2,）字体风格,font-style属性,最常用于规定斜体文本，该属性有,3,个取值：,normal,（文本正常显示）、,italic,（文本斜体显示）、,oblique,（文本倾斜显示）。,（,3,）字体变形,font-variant属性,可以设定小型大写字母，小型大写字母不是一般的大写字母，也不是小写字母，这种字母采用不同大小的大写字母。,（,4,）字体加粗,font-weight属性,设置文本的粗细，使用,bold,关键字可以将文本设置为粗体。,关键字,100,900,为字体指定了,9,级加粗度。,如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，,100,对应最细的字体变形，,900,对应最粗的字体变形。,数字,400,等价于,normal,，而,700,等价于,bold,。,（,5,）字体大小,font-size属性,设置文本的大小，,font-size,值可以是绝对或相对值。,绝对值是指将文本设置为指定的大小，不允许用户在所有浏览器中改变文本大小，绝对大小在确定了输出的物理尺寸时很有用。,相对大小是指相对于周围的元素来设置大小，允许用户在浏览器改变文本大小。,注意：如果没有规定字体大小，普通文本（如段落）的默认大小是,16px,（,16px=1em,）。,（,6,）,CSS3 font-face,规则,在,CSS3,之前，我们必须使用已在用户计算机上安装好的字体，通过,CSS3,，则可以使用我们喜欢的任意字体。,当我们找到或购买到希望使用的字体时，可将该字体文件存放到,Web,服务器上，它会在需要时被自动下载到用户的计算机上。,描述符名称,允许的取值,使用说明,font-family,name,必需项，规定字体的名称,src,URL,必需项，定义字体文件的,URL,font-stretch,normal,、,condensed,、,ultra-condensed,、,extra-condensed,、,semi-condensed,、,expanded,、,semi-expanded,、,extra-expanded,、,ultra-expanded,可选项，定义如何拉伸字体，默认是“,normal,”,表,2-6,能够在,font-face,规则中定义的字体描述符,描述符名称,允许的取值,使用说明,font-style,normal,、,italic,、,oblique,可选项，定义字体的样式，默认是“,normal,”,font-weight,normal,、,bold,、,100,、,200,、,300,、,400,、,500,、,600,、,700,、,800,、,900,可选项，定义字体的粗细，默认是“,normal,”,unicode-range,unicode-range,可选项，定义字体支持的,UNICODE,字符范围，默认是,“,U+0-10FFFF,”,续表,4,CSS,颜色,颜色是通过对红、绿和蓝光的组合来显示的。,（,1,）颜色值,CSS,颜色使用组合了红、绿、蓝颜色值（,RGB,）的十六进制（,HEX,）表示法进行定义。,对光源进行设置的最低值可以是,0,（十,六进制,00,），最高值是,255,（十六进制,FF,）。,十六进制值使用,3,个两位数来编写，并,以,#,符号开头。,CSS,常用颜色的,HEX,表示法,与,RGB,表示法如表,2-7,所示。,颜色,HEX,表示法,颜色,RGB,表示法,颜色,HEX,表示法,颜色,RGB,表示法,#000000,rgb(0,0,0),#00FFFF,rgb(0,255,255),#FF0000,rgb(255,0,0),#FF00FF,rgb(255,0,255),#00FF00,rgb(0,255,0),#FFFFFF,rgb(255,255,255),#0000FF,rgb(0,0,255),#CCCCCC,rgb(204,204,204),#FFFF00,rgb(255,255,0),#C0,rgb(192,192,192),表,2-7,CSS,常用颜色的,HEX,表示法与,RGB,表示法,（,2,）,CSS,中的颜色的表示方法,十六进制颜色,十六进制颜色是这样规定的：,#RRGGBB,，其中的,RR,（红色）、,GG,（绿色）、,BB,（蓝色）十六进制整数规定了颜色的成分，所有值必须介于,0,与,FF,之间。,所有浏览器都支持十六进制颜色值。,RGB,颜色,RGB,颜色值的表示方式为,rgb(red,green,blue),，每个参数,(red,、,green,及,blue),定义颜色的强度，可以是介于,0,255,之间的整数，或者是百分比值（从,0%,100%,）。所有浏览器都支持,RGB,颜色值。,RGBA,颜色,RGBA,颜色值是,RGB,颜色值的扩展，带有一个,alpha,通道（它规定了对象的不透明度）。,RGBA,颜色值的表示方式为：,rgba(red,green,blue,alpha),，其中,alpha,参数是介于,0.0,（完全透明）与,1.0,（完全不透明）之间的数字。,RGBA,颜色值得到以下浏览器的支持：,IE9+,、,Firefox 3+,、,Chrome,、,Safari,及,Opera 10+,。,HSL,颜色,HSL,指的是,Bue,（色调）、,Saturation,（饱和度）、,Lightness,（亮度）。,HSL,颜色值的表示方式为：,hsl(hue,saturation,lightness),。,HSLA,颜色,HSLA,颜色值是,HSL,颜色值的扩展，带有一个,alpha,通道（它规定了对象的,不透明度）。,HSLA,颜色值表示方式为：,hsla(hue,saturation,lightness,alpha),，其中的,alpha,参数定义不透明度，,alpha,参数是介于,0.0,（完全透明）与,1.0,（完全