|
Web标准的基本组成函数 所谓表现层技术，即网页前台技术，包括HTML、XHTML、CSS、JavaScript Web标准大体可分为3大块技术集：结构、表现和行为 结构：即用于网站数据的分类及整合 表现：即信息在浏览器显示上的控件 行为：用于用户对网页文档进行交互操作的技术 表现与内容分离的好处： (1)、代码可读性提高，代码维护复杂性降低 (2)、网页数据移植更简单，跨平台更方便 (3)、加快浏览速度，提升浏览体验 (4)、可扩展性强 XHTML与CSS的概念 由"XHTML+CSS"制作网页通常符合Web标准的内容与表现分离，"XHTML+CSS"常被外界称为"DIV+CSS",实际上是不严谨 Dreamweaver创建XHTML新文档类型： HTML4.01 Transitional HTML4.01 Strict HTML1.0 Transitional HTML 1.0 Strict transitional：代表使用过渡型的XHTML规则，即和HTML相兼容，允许使用HTML标签 Strict：代表使用严谨的XHTML规则 XHTML基础知识 XHTML的单标签必须使用正斜杠结束，双标签必须有结束标签闭合 <p>段落内容</p> <img src="nbc.jpg"/> 说明：HTML对标签的编写管理非常松散，标签无须闭合，导致很多网页编写不严谨，可读性差 CSS的声明方式 声明CSS的三种方法 行间样式表：指CSS编写在XHTML标签的style属性中 <p style=" width:200px ; height:300px ; ">....</p> 行间表使用XHTML标签的style的属性描述CSS代码，使用分号隔开不同的属性值的代码片段 内部样式表：把CSS代码集中编写在头部信息的<style></style>标签内，很好地做到了样式与内容分离 <style type=text/css > p{width:200px height:300px } </style> 外部样式表：即把CSS代码编写在一个css文档(扩展名为css的文本文件)中，通过网页调用 p{width:200px; height:300px; } 注意：css文件放置于需要调用的文件同级目录 调用方式： <link rel="stylesheet" rev="stylesheeet" href="index.css" type="text/css"/> <link href="red.css" rel="stylesheet" type="text/css"/> 优点： （1）减少重复代码编写，也提高了页面载入的速度 （2）表现（CSS）和内容（XHTML）真正分离 说明：对于多个页面共同调用同一个css文档时，每个页面独立的样式部分还是使用内部样式表。内部样式表的优先级高于外部样式表 行间样式表>内部样式表>外部样式表 XHTML元素被多种CSS声明样式时，采取就近原则 CSS的媒介控制： <link rel="stylesheet" type="text/css" media="print" href="print.css"/> <link rel="stylesheet" type="text/css" media="screen" href="index.css"/> media属性值： all：应用于所有的设备 screen：应用于彩色计算机屏幕 print：应用于不透明的页面材料，以及文档在打印的状态 handheld：应用于手持设备（小屏幕、单色、宽带有限制） projection：应用于投影演示 braille：应用于盲文触摸式反馈设备 aural：应用于语音合成器 CSS属性和选择符： CSS语法的核心：选择符、属性和值 选择符：指CSS这段代码所控制的对象，如id和class；还可以是XHTML标签，如p、body等 属性：指CSS所控制对象的各项样式属性，类型非常多，例如，文本颜色、对齐、宽度、高度........ 值：指属性所对应的量化或描述设置。不同的属性有不同的值，例如，font-size属性值为12px、14px、16px等 CSS代码实质上就是由选择符、属性和值的代码组合而成的 CSS各种选择符 CSS选择符有“5”中：标签选择符、id选择符、class选择符、伪类及对象选择符、通配选择符 标签选择符：XHTML中已有的标签作为选择符 p{width:250px;} h1{color:red;} id选择符：通过 id 的不同名称设置多个标签独一无二的样式，id名称可以自定义，但不能以数字开头，CSS代码中id名称前面须加上“#”符号 #hello{color:red;} class选择符：多个标签可用使用同一个class属性名称，使多个标签拥有统一的样式，class 名称可以自定义，但不能以数字开头，CSS代码中class名称前面须加上".(点号)" .reader{ color:red } 伪类及对象选择符：是一组CSS预定义好的类和对象，不需要进行id和class属性的声明 a:visited{ color:red } 表示页面中的超链接被访问过后，其样式设置为红色文本 伪类及伪对象选择符编写格式： 选择符：伪类 :link:超级链接未被访问时 :hover:对象(一般为超级链接)在鼠标滑过时 :active：对象(一般为超级链接)被用户单击时(鼠标单击未释放) :visited：超级链接未被访问过 :focus：对象成为输入焦点时 :first-child:对象的第一个子对象 :first:页面的第一页 选择符：伪对象 :after:设置某个对象之后的内容 :first-letter:对象内第一个字符 :first-line:对象第一行 :before：设置某一个对象之前的内容 说明：使用最多的超级链接的4中状态是 :link、 :active、 :hover和:visited 通配选择符：在DOS操作系统中有一个通配符，如*.*代表任何文件、*.mp3代表所有的mp3文件。CSS中也有星号" * "代表所有对象。 *{ margin:0px } 表示所有对象的外边距为0像素 群组选择符：指对多个选择符进行相同的样式设置时，可以把多个选择符写在一起，并用逗号分隔 p,span,div,li{ color:red; } 优点： （1）、压缩了代码量 （2）、代码容易维护 包含选择符：指标签的嵌套包含关系组合选择符，包含关系的两个选择符用空格分隔 p span { color:red; } 表示只有p标签内的span标签所包含文本被设置为红色 标签指定式选择符：指标签选择符和id或class的组合，两者之间不需分隔 p#hello{ color:red } p.reader{ color:red } 表示id名称为hello的p标签文本为红色，class名称为reader的p标签文本为蓝色 自由组合选择符：指综合以上选择符类型自由组合的选择符 p#hello h1{ color:red } 表示id名称为hello的p标签内h1标签的文本为红色 |
|
|
