天学会DIVCSS.doc

第一天　XHTML? CSS基础?知识 作者:×××　来源:标准之路　【大?中?小】　浏览:42034?2　添加日期：2010-07-11　我要评论(155)　???? 欢迎大家学?习《十天学会w?eb标准》，也就是我们?常说的DI?V+CSS。不过这里的?DIV+CSS是一?种错误的叫?法，建议大家还?是称之为w?eb标准。 学习本系列?教程需有一?定html?和css基?础，也就是指您?之前做过网?页，会用表格布?局。如果您刚开?始学习网页?制作，不知道什么?是表格布局?及html?和css，建议您先去?充电，否则学习本?教程会非常?吃力或者根?本就听不懂?。 由于时间关?系，本教程只讲?解一些基础?知识，让您从原来?的表格布局?跨入到we?b标准（div+css）布局，会使用we?b标准制作?出常见的页?面，这也达到了?本教程的目?的。 本教程多以?实例形式循?序渐进讲解?，实例涉及到?哪些关键点?或难点就讲?解什么，较少讲解概?念。因为概念这?些东西很难?说明白，或者说明白?你也不一定?能听懂，听懂了也不?一定能理解?。所以把概念?留给大家以?后再深入研?究。 由于章节关?系，没有把cs?s和css? hack单?独分出，只是在用到?的时候穿插?入讲解了。html基?础和css?基础只在第?一节中介绍?了几点重要?的。 下面我们开?始第一天的?学习 一、xhtml? css基础?知识 首先说一下?我们这节课?的知识点 文档类型 语言编码 html标?签 css样式? css优先?级 css盒模?型组成 1）文档类型 当我们用d?reamw?eaver?新建一下h?tml格式?文档时，查看源代码?，会发现代码?最上部有如?下这句话： !DOCTY?PE html PUBLI?C -//W3C//DTD XHTML? 1.0 Trans?ition?al//EN /TR/xhtml?1/DTD/xhtml?1-trans?ition?al.dtd 这句话标明?本文档是过?渡类型，另外还有框?架和严格类?型，目前一般都?采用过渡类?型，因为浏览器?对XHTM?L的解析比?较宽松，允许使用H?TML4.01中的标?签，但必须符合?XHTML?的语法。许多朋友在?制作页面时?，往往喜欢把?这句删除掉?，在这里建议?大家一定要?保留这句话?，删除它后可?能引起某些?样式表失效?或其它意想?不到的问题?。 2）语言编码 接下来我们?还会发现这?样一句话： meta http-equiv?=Conte?nt-Type conte?nt=text/html; chars?et=gb231?2 / 它标示文档?的语言编码?。就像我们平?时所说的汉?语、英语一样。这里的gb?2312告?诉浏览器，本文档采用?简体中文编?码；还有一种常?用的编码是?UTF-8编码，它是国际通?用的编码。不管我们采?用哪种编码?，有一点就是?包含的cs?s样式表和?其它文件也?必须和本文?档的编码一?样，要不就会出?现乱码。 ?3）html标?签 html标?签在页面中?都必须结束?。成对的标签?以“/标签名”结束，有些单一的?标签在本身?的结尾打上?/来结束，这是xht?ml代码编?写的规范。 成对的标签?： head{...}/headbody{...}/bodydiv{...}/divspan{...}/spanp{...}/p...... 单一的标签?： img src= /br /....... 还需说明一?点的是按x?html规?范，标签必须用?小写。 4）css样式? 加载css?样式有以下?四种 外部样式 内部样式 行内样式 导入样式 link href=layou?t.css rel=style?sheet? type=text/css / 这种形式是?把css单?独写到一个?css文件?内，然后在源代?码中以li?nk方式链?接。它的好处是?不但本页可?以调用，其它页面也?可以调用，是最常用的?一种形式。 style?h2 { color?:#f00;}/style? 这种形式是?内部样式表?，它是以style?和/style?结尾，写在源代码?的head?标签内。这样的样式?表只能针对?本页有效。不能作用于?其它页面。 p style?=font-size:18px;内部样式/p 这种在标签?内以sty?le标记的?为行内样式?，行内样式只?针对标签内?的元素有效?，因其没有和?内容相分离?，所以不建议?使用。 @impor?t url(/css/globa?l.css); 链接样式是?以@impor?t url标记?所链接的外?部样式表，它一般常用?在另一个样?式表内部。如layo?ut.css为主?页所用样式?，那么