HTML_层叠样式表-个人_finished.ppt

层叠样式表,3.,色调与风格,2.,字体控制,1.,页面控制方法,学习统一控制页面风格的方法,学习如何统一控制页面的色调与风格,学习如何统一控制页面字体,目标,3.,2.,1.,Web,标准和,CSS,（层叠样式表）简介,层叠样式表的语法结构,添加层叠样式表的方法,内容摘要,5,.,4,.,控制外观样式,控制文字样式,3.,行为（,behavior,）,2.,表现（,Presentation,）,1.,结构（,Structure,）,HTMLXML XHTML,DOM ECMAScript,（,JavaScript,等）,CSS,Web,标准的构成,Web,标准由一系列规范组成，由于,Web,设计越来越趋向于整体与结构化，目前,Web,标准也逐步变为由三大部分组成的标准集,高效率的开发与简单维护,信息跨平台的可用性,降低服务器成本,便于改版,加快网页解析速度,与未来兼容,更良好的用户体验,Web,标准的好处,CSS,（,C,ascading,S,tyle,S,heets,，层叠样式表）是一种制作网页的新技术，现在已经为大多数的浏览器所支持，成为网页设计必不可少的工具之一。使用,CSS,能够简化网页的格式代码，加快下载显示的速度，也减少了需要上传的代码数量，大大减少了重复劳动的工作量，尤其是当你面对的是有数百个网页的站点时。,内容,结构和,格式,控制相分离。,CSS,层叠样式表简介,3.,链接到外部文件,2.,添加在,中,1.,直接添加,网页内容,添加层叠样式表的方法,4,.,联合使用样式表,import“*.,css,”;,要添加的其他样式表具体内容,2,.,群组选择符,1,.,类型选择符,对一组对象进行相同样式指派,比如：,h1,h2,h3,以网页中已有的标签类型作为名称的选择符,比如,:,body p,层叠样式表的语法结构,4,.,Id,及,class,3,.,包含选择符,CSS,提供的由用户自定标签名称的一种选择符模式，用户可以使用,id,和,class,对页面中的,HTML,标签进行自定义名称，从而达到扩展,HTML,标签及组合,HTML,标签的目的,.,Hello world China,对某一个对象中的子对象进行样式指定时使用,比如：,p,li,表示,p,内的,li,标签将被指定样式,CSS,属性与选择符,:,选择符,属性：值,控制字体的样式,属性名,描述,font-family,：,字体名称,font-size:,：,字号参数,font-style:,斜体字的名称,font-weight:,字体粗细,控制文字的样式,属性名,描述,值,text-transform:,文字的大小写,uppercase,：所有文字大写显示,lowercase,：所有文字小写显示,capitalize,：每个单词头字母大写显示,none,：不继承母体的文字变形参数,text-decoration:,文字修饰,underline,：为文字加下划线,overline,：为文字加上划线,line-through,：为文字加删除线,blink,：使文字闪烁,none,：不显示上述任何效果,属性名,描述,值,word-spacing:,间隔距离,间隔距离的取值：,points,、,em,、,pixes,、,in,、,cm,、,mm,、,pc,、,ex,、,normal,等。,letter-spacing:,字母间距,数字,line-height:,行间距离,数字,text-align:,文本水平对齐,left,：左对齐,right,：右对齐,center,：居中对齐,justify,：相对左右对齐,vertical-align:,文本垂直对齐,top,：顶对齐；,bottom,：底对齐,text-top,：相对文本顶对齐,text-bottom,：相对文本底对齐,baseline,：基准线对齐,middle,：中心对齐,sub,：以下标的形式显示,super,：以上标的形式显示,text-indent:,缩进距离,数字,控制文本的样式,属性名,描述,值,color:,颜色属性,1,）用十六进制方式,#ff0000,2,）用,rgb(R,G,B,),方式进行，例如：,color:rgb(255,255,0);,3,）,CSS,内定的颜色名称，例如：,red,yellow,。,background-color:,设置对象背景颜色,同,color,，可以设置,transparent,透明,background-image:,设置对象背景图片,url(URL,),background-repeat:,背景图片重复,no-repeat,：不重复平铺背景图片,repeat-x,：在水平方向上平铺,repeat-y,：在垂直方向上平铺,默认：不设定，水平,+,垂直平铺,background-attachment:,背景图片固定,fixed,：网页滚动，图片不动,scroll,：网页滚动，图片一起移动,background-position:,背景图片定位,top:,相对前景对象顶对齐,Bottom:,相对前景对象底对齐,Left:,左对齐,Right:,右对齐,Center:,中心对齐,控制颜色和背景的样式,属性名,描述,值,list-style-type:,列表符号标识,取值：,disc,circle,square,decimal,lower-roman,upper-roman,lower-alpha,upper-alpha,none,list-style-,image:URL,列表图形符号,用图像代替列表项目符号,list-style-position:,列表位置,inside:,在,BOX,模型内部显示,outside,：在,BOX,模型外部显示,控制列表的样式,属性名,描述,值,cursor,：,变更鼠标形状,hand:,手形,crosshair,：十字形,text:,文本形,wait:,沙漏形,move:,十字箭头形,help:,问号形,e-resize:,有箭头形,n-resize,：上箭头,nw,-resize:,左上箭头,w-resize:,左箭头,s-resize:,下箭头,se-resize:,右下箭头,sw,-resize,：左下箭头,控制用户界面的样式,属性名,描述,值,margin:,边框空白,margin-top:,顶部空白距离,margin-right:,右边,margin-bottom:,底部,margin-left:,左边,border,：,对象边框,border-top,：顶边框宽度,border-right:,右边框宽度,border-bottom,：底边,border-left,：左,border-width:,所有边框宽度,border-color:,边框颜色（同时设置四面边框颜色，用空格分离,top-right-bottom-left,）,border-style,：边框样式参数,(none,，,dotted,，,dashed,，,solid,，,double,，,groove,，,ridge,，,inset,，,outset),padding:,对象间隙,padding-top:,顶部间隙,padding-right,：右边,padding-bottom,：底部,padding-left,：左边间隙,控制框与边框的样式,属性名,描述,值,display,：,控制显示样式,block,：默认，在对象前后都换行,inline,：在对象前后都不换行,list-item,：在对象前后都换行，增加了项目符号,none,：无显示,控制显示的样式,属性名,描述,值,white-space,：,处理元素内空格,normal,：把多个空格替换为一个来显示,pre,：忠实地按输入显示空格,nowrap,：禁止换行,控制空白的样式,什么是,CSS,，它有什么样的功能和效果？,CSS,样式表有几种选择方式，如何使用？,如何控制文本颜色和大小？,如何更改鼠标的外形？,如何使用,CSS,控制网页背景颜色？,小测试,制作一个样式表，用来控制本页的字体颜色,制作一个外部样式表，进行链接使用,制作一个登录页面，运用,CSS,改写要求尽量美观,上机练习,(,完,),