搜索
本讲目标Copyright©2010-2012HdwntInc.AllRightsReserved.HTML与XHTML(X)HTML与CSS构造CSS规则基本CSS选择器掌握在HTML中使用CSS的方法通过前面的学习，我们已经理解了HTML的核心原理。实际上使用HTML非常简单，其核心思想就是需要设置什么样式，就使用相应的HTML标记或者属性。在前讲中，初步地分析了由于历史原因和HTML自身的局限性，所带来的一些问题。为了解决这些问题，HTML逐步地发展到了XHTML，而XHTML也更加便于和CSS相配合。本讲将着重介绍HTML、XHTML和CSS三者之间的关系，重点是理解使用CSS的核心目的。Copyright©2010-2012HdwntInc.AllRightsReserved.HTML与XHTML追根溯源从HTML到XHTML，大致经历了以下版本。●HTML2.0：1995年11月发布。●HTML3.2：1996年1月14日发布。●HTML7.0：1997年12月18日发布。●HTML7.01（微小改进）：1999年12月24日发布。●XHTML1.0：2000年1月发布，后又经过修订于2002年8月1日重新发布。●XHTML1.1：2001年5月31日发布。●XHTML2.0：正在制订中。XHTML与HTML的重要区别1．在XHTML中标记名称必须小写2．在XHTML中属性名称必须小写3．在XHTML中标记必须严格嵌套4．在XHTML中标记必须封闭5．在XHTML中即使是空元素的标记也必须封闭6．在XHTML中属性值用双引号括起来7．在XHTML中属性值必须使用完整形式传统HTML的缺点其实传统HTML的缺陷远不止上例中所反映的这一个方面，相比CSS为基础的页面设计方法，其所体现出的劣势主要有以下几点。（1）维护困难为了修改某个特殊标记（如h2标记）的格式，需要花费很多的时间，尤其对于整个网站而言，后期修改和维护的成本很高。（2）标记不足HTML本身的标记很少，很多标记都是为网页内容服务的，而对于美工样式的标记，如文字间距、段落缩进等标记在HTML中很难找到。（3）网页过“胖”由于没有统一对各种风格样式进行控制，因此HTML的页面往往体积过大，占用网络带宽。（4）定位困难在整体布局页面时，HTML对于各个模块的位置调整显得捉襟见肘，过多的其他标记同样也导致页面的复杂和后期维护的困难。Copyright©2010-2012HdwntInc.AllRightsReserved.CSS引入、如何编辑CSS？为什么需要CSS样式表演示能换皮肤的页面HTML标签的外观样式比较单一颜色只有黑白字体类型和大小无变化样式表的作用相当于华丽的衣服内容相同外观不同样式表能实现内容与样式的分离，方便团队开发程序员写代码美工做样式内容与样式和谐统一的完整网页Dreamweaver的代码模式Dreamweaver语法提示调色板浏览器与CSSIE浏览器和Firefox浏览器的标志IE与Firefox的效果区别Copyright©2010-2012HdwntInc.AllRightsReserved.构造CSS规则样式表的基本语法样式表的基本结构STYLEtype=text/cssP{color:red;font-size:30px;font-family:隶书;}……/STYLE声明文档样式表结束文档样式表开始，类型为CSS样式样式规则选择器样式规则P{color:red;font-size:30px;font-family:隶书;}属性属性的值HTMLHEADTITLE样式规则/TITLESTYLEtype=text/cssP{color:red;font-family:隶书;font-size:24px;}/STYLE/HEADBODYH2静夜思/H2P床前明月光，/PP疑是地上霜。/PP我是郭德刚，/PP低头思故乡。/P/BODY/HTML本页面中所有的P标签都应用了此样式所有的段落都采用P样式，保证风格统一用分号隔开选择器如何编写此样式?字体类型为律书、大小24pxSTYLEtype=text/css.red{color:red;font-family:隶书;font-size:24px;}……/STYLE如果希望其他的标签也能采用P标签的样式，怎么办？其他标签和P标签应该采用相同的样式，所以要为它们定义一个共享样式。类样式(class).类名样式规则HEADTITLE样式规则/TITLESTYLEtype=text/css.red{color:red;font-family:隶书;}/STYLE/HEADBODYH2class=red静夜思/H2Pclass=red床前明月光，/PPclass=red疑是地上霜。/PP我是郭德刚，/PPclass=red低头思故乡。/P/BODYCLASS类选择器为类选择器定义的样式规则应用类选择器class＝”类名“H2和P标签要应用同一样式如何实现这样的样式效果？字体类型都为隶书Copyright©2010-2012HdwntInc.AllRightsReserved.在HTML中使用CSS的方法导入式和链接式的区别：1：语法上的区别2：使用链接式方式时，会在装载页面主题部分之前装载css文件，这样显示出来的网页从一开始就是带有样式效果的。而使用导入式时，会在整个页面装载完成后在装载CSS文件，对于有的浏览器来说，在一些情况下。如果网页文件的体积比较大，则会出现先显示无样式的页面，闪烁一下之后在出现设置样式后的效果。3：链接式便于维护；导入式不便于维护。常用的样式属性文本属性文本属性说明font-size字体大小font-family字体类型font-style字体样式color设置或检索文本的颜色text-align文本对齐使用font-size、font-family、color实现宋体，字体大小12px字体大小16px要实现如下图所示的文本样式，该如何编写？STYLEtype=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＝”类名“编写如下图所示效果对应的HTML代码黑体，字体大小20px字体大小14px，蓝色背景属性背景属性说明background-color设置背景颜色background-image设置背景图像background-repeat设置一个指定的图像如何被重复可取值repeat-x、repeat、no-repeat、repeat-ySTYLEtype=text/css……table{background-image:url(images/type_back1.jpg);background-repeat:no-repeat;}/STYLE……设置背景图像为images文件夹下的type_back1.jpg设置背景图像不平铺要实现下图细边框的效果，该如何编写样式规则？文本框宽度为1px,边框样式为solid使用border-width和border-style属性STYLEtype=text/css.textBorder{border-width:1px;border-style:solid;}/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……超链接文本的样式鼠标在超链接上悬停时，超链接文本变为红色如何编写此超链接样式？编写如下图所示效果对应的HTML代码细边框solid样式无下划线的超连接样式鼠标在超链接上悬停时，超链接文本变为红色千里之行始于足下37