《web标准+html+css.pptx》由会员分享，可在线阅读，更多相关《web标准+html+css.pptx（31页珍藏版）》请在三一文库上搜索。
1、WEB标准+XHTML+CSS 5 月 培 训 计 划 第 一 讲 主讲：移动应用软件部 赵兵 CSS WEB标准 XHTM L 什么是WEB标准 WEB标准不是某一个标准，而是一系列标准的集 合。 Web标准包括哪些内容？ 网页 结构（Structure） 表现（Presentation） 行为（Behavior） 网页 结构（Structure） XHTML XML 表现（Presentation） CSS 行为（Behavior） 对象模型（如 W3C DOM） ECMAScript 有备注 XHTML 什么是DOCTYPE DOCTYPE是DOCUMENT TYPE(文档类型)的简写
2、，用来说明你用的XHTML或者HTML是什么版 本。 注：DOCTYPE声明是必不可少的关键组成部分；除非你的 XHTML确定了一个正确的DOCTYPE，否则你的标识和CSS都 不会生效。 例如： xhtml1-transitional.dtd叫文档类型定义，里面包 含了文档的规则，浏览器就根据你定义的DTD来 解释你页面的标识，并展现出来。 XHTML 1.0 的三种DTD 要求非常宽松的DTD，它允许你继续 使用HTML4.01的标识 (但是要符合xhtml的写法) 。 过渡的 (Transitional) 要求严格的DTD，你不能使用任何表现层 的标识 和属性，例如。 严格的(Stric
3、t) 专门针对 框架页面设计 使用的DTD，如果你的页面中包含有框架，需要采用这种 DTD。 框架的(Frameset) 名字空间 这个“xmlns“是XHTML namespace的 缩写，叫做“名字空间“声明。 由于xml允许你自己定义自己的标识，你定义的标识和其他人定义的标识有可能相 同，但表示不同的意义。当文件交换或者共享的时候就容易产生错误。为了避免这 种错误发生，XML采用名字空间声明，允许你通过一个网址指向来识别你的标识。 小王和小李都定义了一个标识，如果小王的名字空间是 “http:/“，小李的名字空间是“http:/“，那么当两 个文档交换数据时，也不会混淆标识，因为它属于不
4、同的名字空间。 语言编码 为了被浏览器正确解释和通过W3C代码校验，所有的XHTML文档都必 须声明它们所使用的编码语言，我们一般使用gb2312(简体中文)，制作 多国语言页面也有可能用Unicode、ISO-8859-1等，根据你的需要定 义。 语言编码 调用样式表 就是将样式表直接写在页面代码的head区 页面内嵌法 将样式表写在一个独立的.css文件中，然后在页面head 区用类似以下代码调用。 外部调用法 Head区的其他设置（详见备注 ） XHTML代码规范 1.所有的标记都必须要有一个相应的结束标记 2.所有标签的元素和属性的名字都必须使用小写 3.所有的XML标记都必须合理嵌套
5、 4.所有的属性必须用引号“括起来 5.把所有 #menubar MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666; 其中“menubar“是你自己定义的id名称。注意在前面加“#“号。 类别选择器 在CSS里用一个点开头表示类别选择器定义，例如： .14px color : #f60 ;font-size:14px ; 在页面中，用class=“类别名“的方法调用 ： 14px大小的字体 定义链接样式 CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、 a:hover和a : active，例如： a:linkfont-wei
6、ght : bold ;text-decoration : none ;color : #c00 ; a:visited font-weight : bold ;text-decoration : none ;color : #c30 ; a:hover font-weight : bold ;text-decoration : underline ;color : #f60 ; a:active font-weight : bold ;text-decoration : none ;color : #F90 ; 以上语句分别定义了“链接、已访问过的链接、鼠标停在上方时、点 下鼠标时“的样式。
7、注意，必须按以上顺序写，否则显示可能和你预 想的不一样。记住它们的顺序是“LVHA”。 CSS布局 CSS布局与传统表格(table)布局最大的区别在于：原来的定位都是采用表格， 通过表格的间距或者用无色透明的GIF图片来控制文布局版块的间距；而现在 则采用层(div)来定位，通过层的margin,padding,border等属性来控制版块的间 距。 CSS2盒模型 自从1996年CSS1的推出，W3C组织就建议把所有网页上的对像都放在 一个盒(box)中，设计师可以通过创建定义来控制这个盒的属性，这些对 像包括段落、列表、标题、图片以及层。盒模型主要定义四个区 域：内容(content)、边框距(padding)、边界(border)和边距(margin)。 布局模型 1. 布局模型与盒模型一样都是css最基本、最核心的概念。 2. 布局模型是建立在盒模型的基础之上。 3. Css包括3种基本布局模型，用英文概括为：Flow、Layer和 Float。 布局模型 流动模型 层模型 浮动模型 详见备注 下一讲 “JavaScript”