E 样式表1

回顾表单的作用表单的元素页面动态效果滚动文字显示flash动画iframe内嵌框架的使用本章目标样式表的用途样式表的三种应用方式样式表语法和三种选择器样式表常用的各种属性简介CSS可算是网页设计的一个突破，它解决了网页界面排版的难题。可以这么说，HTML的Tag主要是定义网页的内容(Content)，而CSS决定这些网页内容如何显示(Layout)。CSS的英文是CascadingStyleSheets，中文可以翻译成串联式样式表。4样式表用途HTML标签的样式比较单一,很难维护样式表的切换可以改变网站整体界面风格样式表能实现内容与样式的分离，方便团队开发内容相同外观不同=css属性:值;css属性:值;…styletype=text/css…/stylelinkhref=../css/*.cssrel=stylesheet“type=text/css选择器：如何选择用css属性修饰的html标签元素标签选择器标签名{css属性:值}类(class)选择器.类值{css属性:值}id选择器#id值{css属性:值}？6样式表的基本语法一个样式(Style)的语法由三部分构成：Selector(中文叫选择器)，属性(Property)，属性值(Value)。selector{property:value}选择器p{color:red;font-size:30px;font-family:隶书;}属性属性的值HTML中所有的Tag都可以作为selector。7内嵌样式表内嵌样式表是写在Tag(标签)里面的。内嵌样式只对所在的Tag有效。示例：pstyle=font-size:20pt;color:red这个style定义p/p里面的文字是20pt字体，字体颜色是红色。/p8内部样式表内部样式表是写在HTML的head/head里面的。内部样式表只对所在的网页有效。内部样式表要用到style这个Tag，写法如下：styletype=text/css....../style问题：1.想去掉一个页面里所有图像链接的边框，有什么简单的方法?2.如果想去掉多个页面里所有图像链接的边框呢？9外部样式表如果很多网页需要用到同样的样式(Styles)，要用外部样式表外部样式表需要将样式写在一个css文件中,然后在页面中用link标签引入示例:css文件加下有名为a.css文件内容为：img{border:0}在需要应用该样式的每个页面中引入该文件：HTMLHEADlinkhref=../css/a.cssrel=stylesheettype=text/css/HEADBODY…/BODY/HTML样式表的选择器标签选择器根据HTML标签选择样式应用的属性标签名{…}类选择器根据HTML标签的class属性选择样式应用的属性.类值{…}ID选择器根据HTML标签的ID属性选择样式应用的元素#id值{…}样式规则/titlestyletype=text/css.red{color:red;font-family:隶书;}/style/headbodyh2class=red自勉/h2pclass=red多少白发翁，/ppclass=red蹉跎悔歧路。/pp寄语少年人，/ppclass=red莫将少年误。/p/bodyCLASS类选择器应用类选择器class＝样式名H2和P标签要应用同一样式样式规则/titlestyletype=text/css#red{color:red;font-family:隶书;}#one{color:blue;}/style/headbodyh2id=red自勉/h2pid=one多少白发翁，/pp蹉跎悔歧路。/pp寄语少年人，/pp莫将少年误。/p/bodyID选择器应用ID选择器id＝样式名文本属性文本属性文本属性说明font-size字体大小font-family字体类型font-style字体样式color设置或检索文本的颜色text-align文本对齐font-weight字体粗细line-height文字行高text-decoration文本样式(none,underline,overline,line-through,blink)=text/cssp{font-size:12px;font-family:宋体;text-align:left;}.bigFont{font-size:16px;color:red;}/style/headbody【新闻】[设搜狐为首页]9月1日pclass=bigFont·世锦赛刘翔12秒95夺冠成就大满贯/pp·我国实施不安全食品召回制度遏制非法出口/p…..声明P标签样式声明名称为bigFont类样式,它可被多个标签共享应用类样式用class＝类名{color:#888888;font-size:14px;word-spacing:10px;letter-spacing:2px;font-weight:700;line-height:1.5;width:500px;}/stylebodypAbramwentnorthoutofEgypttothesouthernpartofCanaanwithhiswifeandeverythingheowned,andLotwentwithhim./p/body背景属性背景属性背景属性说明background-color设置背景颜色background-image设置背景图像background-repeat设置一个指定的图像如何被重复可取值repeat-x、repeat、no-repeat、repeat-y=text/css……table{background-image:url(images/type_back1.jpg);background-repeat:no-repeat;}/style……设置背景图像为images文件夹下的type_back1.jpg设置背景图像不平铺方框属性方框属性margin-right右边界margin-left左边界margin-top上边界margin-bottom下边界marginborderpaddingborder-width边框的宽度padding-left左填充padding-bottom下填充设置边框的样式（包括border-top-style,border-right-style,border-bottom-style,border-right-style）border-width设置边框的宽度(同样可以设置top,right,bottom,left四个方向的边框宽度)border-color设置边框的颜色(同样可以设置top,right,bottom,left四个方向的边框颜色)填充属性padding-top设置内容与上边框之间的距离padding-right设置内容与右边框之间的距离padding-bottom设置内容与下边框之间的距离padding-left设置内容与左边框之间的距离方框属性=text/css.tableBorder{border-right-width:3px;border-right-color:red;border-right-style:dashed;padding-top:20px;padding-left:10px;}tr{background:yellow;}/styletabletrtdclass=tableBorder手机冲值/tdtdclass=tableBorder电子彩票/td/tr……设置单元格右边框宽度为3像素设置单元格右边框为虚线框设置单元格里文字与左边框的距离为10像素表格行的背景色=text/css.textBorder{border-width:1px;border-style:solid;border-color:black;}/style……formname=form1method=postaction=p名字：inputname=fnametype=textclass=textBorder/pp密码：inputname=passtype=passwordclass=textBordersize=21/p/form……文本框为实线边框边框宽度为1像素伪类特殊样式（超连接）a:link{color:#FF0000}/*未被访问的链接红色*/a:visited{color:#00FF00}/*已被访问过的链接绿色*/a:hover{color:#FFCC00}/*鼠标悬浮在上的链接橙色*/a:active{color:#0000FF}/*鼠标点中激活链接蓝色*/styletype=text/cssa{color:blue;text-decoration:none;}a:hover{color:red;}/style……trtdahref=#诺基亚/a|ahref=#摩托罗拉/a/tdtdahref=#联想/a|ahref=#戴尔/a/td/tr……超链接文本的样式鼠标在超链接上悬停时，超链接文本变为红色如何编写此超链接样式？设置超链接在未被访问前的样式。a:hover设置超链接在其鼠标悬停时的样式。a:active设置超链接在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。a:visited设置超链接在其链接地址已被访问过时的样式div元素是用来为HTML文档内区域的内容提供结构和背