资源描述
单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,*,HTML,框架及,CSS,层叠样式表,回顾,HTML,相关概念,HTML,简介,HTML,文档结构,HTML,标记,文件结构标记,链接标识,表格标记,表单标记,其它标记,本章目标,HTML,框架标记,CSS,相关概念及作用,如何在网页中引入,CSS,CSS,基本语法,(,定义规则,),选择器分类,常用样式,HTML,框架标记,HTML,中框架标记主要用于划分浏览器窗口,使用,FRAMESET,创建框架,其属性有：,Rows,框架上下划分属性,Cols,框架左右划分属性,FRAME,元素的属性包括：,Name,该框架名称，为超链接和,javascript,定位,Src,该框架显示的页面,Noresize,框架是否可以伸缩,Scrolling,是否使用滚动条值为,:yes no auto,Frameborder,框架是否显示边框，同,border,一起使用,Marginwidth,框架内页面同框架的宽度距离,Marginheight,框架内页面同框架的高度距离,嵌套的框架集,嵌套框架,NOFRAMES,元素,未显示框架。请单击这里,查看无框架版本,内嵌框架,IFRAME,属性,Name,框架名称，为超链接和,javascript,定位,Width,框架的宽度,Height,框架的高度,Src,框架显示的页面,url,CSS,相关概念,CSS(Cascade Style Sheet),即层叠样式表,;,CSS,作用,:,将格式和结构分离,可以方便的更新网页格式和外观,强大的控制页面格式和布局的功能,制作美观的界面,在网页中引用,CSS,style,元素,style,属性,link,元素,使用,style,元素,STYLE,元素应插入文档的,元素部分中，所有规则都放置在开始标记和结束标记之间。显示页面时，只有嵌入了,STYLE,元素的文档会受到影响,H1color:maroon;,Pcolor:hotpink;font-family:Arial;,博洋,博洋教育,使用,style,属性,style,属性用于将样式表应用于单个元素。直接将在,HTML,标记里加入,style,参数，而,style,参数的内容就是,CSS,的属性和值。样式表可以只有一条规则。使用,Style,属性，可以绕过,Style,元素，而将声明直接放入单个的开始标记中。,设置属性,本段应用了内嵌样,本段以默认样式显示,不同之处吗？,使用,link,元素,链入外部样式表是把样式表保存为一个样式表文件，然后在页面中用,标记链接到这个样式表文件，这个,标记必须放到页面的,区内,设置属性,博洋,博洋教育,CSS,定义的基本语法,用法：,RuleSelector,property:value;property:value;.,规则选择器,声明,属性,属性值,样式表选择器,HTML,选择器,div;p;span,等,html,标记名,类选择器,ID,选择器,伪类选择器,a:link;a:hover;a:active;a:hover,等,样式表的使用,Pfont-style:italic;font-weight:bold;color:limegreen,.buttoncolor:blue;font-size:18,#controlcolor:red,样式一,样式三,样式二,Html,选择器,类选择器,ID,选择器,样式表的使用,-,伪类选择器,A FONT-SIZE:12px;COLOR:#333333;LINE-HEIGHT:22px;TEXT-DECORATION:none,A:hover,FONT-SIZE:12px;COLOR:#ff0000;LINE-HEIGHT:22px;TEXT-DECORATION:underline,A.firstfont-size:12px;text-decoration:none,A.first:hover,font-size:18px;text-decoration:none,网址备忘录,博洋,HTML,和类选择器混用,New Document,P.first font-size:18px;color:red;font-family:,楷体,_gb2312,P.second font-size:25px;color:blue;font-family:,隶书,P.third font-size:18px;color:yellow,第一个类型,第二个类型,第三个类型,样式表属性,类型,CSS,属性,值,字体,属性,font-family,Arial,，,serif,，宋体,font-size,Small,，,medium,，,large,或直接指定字体大小,font-style,normal,italic,font-weight,normal,bold,lighter,100,200,文本,属性,text-align,left,right,center,justify,text-indent,度量,text-decoration,none,blink,underline,overline,line-through,text-transform,none,capitalize,uppercase,lowercase,vertical-align,Baseline,super,sub,top,text-top,middle-bottom,text-bottom,word-spacing,度量,letter-spacing,度量,line-height,行距,(,数字,1,、度量单位,10px,、比例,50%),样式表属性,类型,CSS,属性,值,框,属,性,border,或者,border-top,border-left,等,border-style,None,solid,double,ridge,inset,outset,groove,dotted dashed,border-width,度量，,thick,，,medium,，,thin,border-color,#RRGGBB,，颜色名称,Margin,简写；元素与框的间距,margin-Bottom,度量或,%,Margin-left,度量或,%,Margin-right,度量或,%,Margin-top,度量或,%,Padding,简写；框内元素的填充,Padding-top,Padding-left,Padding-bottom,Padding-right,样式表属性,类型,CSS,属性,值,定位,属性,top,度量,width,度量或,%,height,度量或,%,left,度量,鼠标属性,cursor,auto crosshair default,move hand text wait help,颜色,属性,background,简写,Color,#RRGGBB,，颜色名称,background-color,#RRGGBB,，颜色名称，,transparent,background-image,url,background-repeat,repeat,repeat-x,repeat-y,no-repeat,度量单位说明,度量缩写,度量单位,说明,pt,Points,点阵,常用,em,同上,一般用于相关母体要素,px,pixel,像素,常用,in,Inch,英寸,cm,厘米,mm,毫米,示例,-,文本定位,P.lefttext-align:left;line-height:2,P.righttext-align:right;text-transform:upper,Ptext-indent:1px;letter-spacing:2px,abc,博洋,abc,abc,博洋,abc,abc,博洋,abc,示例,-,控制表格,表格加边框,table border-style:solid;border-width:5px;border-color:red,或者,tableborder:”5px solid red”,单元格格式,td text-align:center;line-height:2;vertical-align:top;letter-spacing:2px,单元格边框属性,td.border1border-top:”1px solid blue”,或者,td.border2border-width:3px 10px 20px;border-color:blue red yellow,补白,td.pad1padding:2px 3px 1px,总结,HTML,框架标记,CSS,相关概念及作用,如何在网页中引入,CSS,CSS,基本语法,(,定义规则,),选择器分类,常用样式,
展开阅读全文