WEB前台技术专题.docx

标签被用来组合文档中的行内元素。

可以通过样式来格式化它们。

span没有固定的格式表现。

当对它应用样式时，它才会产生视觉上的变化。

可以为span应用id或class属性，这样既可以增加适当的语义，又便于对span应用样式。

提示：

.........

CSS:

p.tipspan{

font-weight:

bold;

color:

#ff9955;

}

2XML-XSLT技术

2.1基本概念

XSL指扩展样式表语言（EXtensibleStylesheetLanguage）。

XSL-不仅仅是样式表语言。

包括三部分：

∙XSLT一种用于转换XML文档的语言。

∙XPath一种用于在XML文档中导航的语言。

∙XSL-FO一种用于格式化XML文档的语言。

什么是XSLT？

∙XSLT指XSL转换（XSLTransformations）。

∙XSLT是XSL中最重要的部分。

∙XSLT可将一种XML文档转换为另外一种XML文档。

∙XSLT使用XPath在XML文档中进行导航。

2.2关键内容

2.2.1XSLT将XML转换为XHTML

从一个原始的XML文档开始

我们现在要把下面这个XML文档（"cdcatalog.xml"）转换为XHTML：

xmlversion="1.0"encoding="ISO-8859-1"?

>

BobDylan

USA

Columbia

10.90

1985

创建XSL样式表

然后创建一个带有转换模板的XSL样式表（"cdcatalog.xsl"）：

xmlversion="1.0"encoding="ISO-8859-1"?

>

stylesheetversion="1.0"xmlns:

xsl="http:

//www.w3.org/1999/XSL/Transform">

templatematch="/">

MyCDCollection

Title

Artist

for-eachselect="catalog/cd">

value-ofselect="title"/>

value-ofselect="artist"/>

for-each>

template>

stylesheet>

3CSS技术

3.1基本概念

CSS指层叠样式表（CascadingStyleSheets）

∙样式定义如何显示HTML元素

∙样式通常存储在样式表中

∙把样式添加到HTML4.0中，是为了解决内容与表现分离的问题

∙外部样式表可以极大提高工作效率

∙外部样式表通常存储在CSS文件中

∙多个样式定义可层叠为一

样式层叠次序

当同一个HTML元素被不止一个样式定义时，会使用哪个样式呢？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字4拥有最高的优先权。

∙浏览器缺省设置

∙外部样式表

∙内部样式表（位于标签内部）

∙内联样式（在HTML元素内部）

3.2关键内容

3.2.1CSS语法

CSS规则由两个主要的部分构成：

选择器，以及一条或多条声明。

selector{declaration1;declaration2;...declarationN}

选择器通常是您需要改变样式的HTML元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（styleattribute）。

每个属性有一个值。

属性和值被冒号分开。

多重声明

提示：

如果要定义不止一个声明，则需要用分号将每个声明分开。

最后一条规则是不需要加分号的，因为分号在英语中是一个分隔符号，不是结束符号。

然而，大多数有经验的设计师会在每条声明的末尾都加上分号，这么的好处是，当你从现有的规则中增减声明时，会尽可能的减少出错的可能性。

空格和大小写

大多数样式表包含不止一条规则，而大多数规则包含不止一个声明。

多重声明和空格的使用使得样式表更容易被编辑：

是否包含空格不会影响CSS在浏览器的工作效果，同样，与XHTML不同，CSS对大小写不敏感。

不过存在一个例外：

如果涉及到与HTML文档一起工作的话，class和id名称对大小写是敏感的。

选择器的分组

你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。

用逗号将需要分组的选择器分开。

在下面的例子中，我们对所有的标题元素进行了分组。

所有的标题元素都是绿色的。

h1,h2,h3,h4,h5,h6{

color:

green;

}

继承及其问题

根据CSS，子元素从父元素继承属性。

但是它并不总是按此方式工作。

看看下面这条规则：

body{

font-family:

Verdana,sans-serif;

}

根据上面这条规则，站点的body元素将使用Verdana字体（假如访问者的系统中存在该字体的话）。

通过CSS继承，子元素将继承最高级元素（在本例中是body）所拥有的属性（这些子元素诸如p,td,ul,ol,ul,li,dl,dt,和dd）。

不需要另外的规则，所有body的子元素都应该显示Verdana字体，子元素的子元素也一样。

并且在大部分的现代浏览器中，也确实是这样的。

但是在那个浏览器大战的血腥年代里，这种情况就未必会发生，那时候对标准的支持并不是企业的优先选择。

比方说，Netscape4就不支持继承，它不仅忽略继承，而且也忽略应用于body元素的规则。

IE/Windows直到IE6还存在相关的问题，在表格内的字体样式会被忽略。

3.2.2CSS选择器

派生选择器

通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。

在CSS1中，通过这种方式来应用规则的选择器被称为上下文选择器（contextualselectors），这是由于它们依赖于上下文关系来应用或者避免某项规则。

在CSS2中，它们称为派生选择器，但是无论你如何称呼它们，它们的作用都是相同的。

派生选择器允许你根据文档的上下文关系来确定某个标签的样式。

通过合理地使用派生选择器，我们可以使HTML代码变得更加整洁。

比方说，你希望列表中的strong元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：

listrong{

font-style:

italic;

font-weight:

normal;

}

id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式。

id选择器以"#"来定义。

下面的两个id选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：

#red{color:

red;}

#green{color:

green;}

下面的HTML代码中，id属性为red的p元素显示为红色，而id属性为green的p元素显示为绿色。

这个段落是红色。

这个段落是绿色。

id选择器和派生选择器

在现代布局中，id选择器常常用于建立派生选择器。

#sidebarp{

font-style:

italic;

text-align:

right;

margin-top:

0.5em;

}

上面的样式只会应用于出现在id是sidebar的元素内的段落。

这个元素很可能是div或者是表格单元，尽管它也可能是一个表格或者其他块级元素。

CSS类选择器

在CSS中，类选择器以一个点号显示：

.center{text-align:

center}

在上面的例子中，所有拥有center类的HTML元素均为居中。

在下面的HTML代码中，h1和p元素都有center类。

这意味着两者都将遵守".center"选择器中的规则。

Thisheadingwillbecenter-aligned

Thisparagraphwillalsobecenter-aligned.

和id一样，class也可被用作派生选择器：

.fancytd{

color:

#f60;

background:

#666;

}

在上面这个例子中，类名为fancy的更大的元素内部的表格单元都会以灰色背景显示橙色文字。

（名为fancy的更大的元素可能是一个表格或者一个div）

元素也可以基于它们的类而被选择：

td.fancy{

color:

#f60;

background:

#666;

}

在上面的例子中，类名为fancy的表格单元将是带有灰色背景的橙色。

属性选择器

下面的例子为带有title属性的所有元素设置样式：

[title]

{

color:

red;

}

属性和值选择器

下面的例子为title="W3School"的所有元素设置样式：

[title=W3School]

{

border:

5pxsolidblue;

}

属性选择器在为不带有class或id的表单设置样式时特别有用：

input[type="text"]

{

width:

150px;

display:

block;

margin-bottom:

10px;

background-color:

yellow;

font-family:

Verdana,Arial;

}

input[type="button"]

{

width:

120px;

margin-left:

35px;

display:

block;

font-family:

Verdana,Arial;

}

3.2.3CSS框模型

元素框的最内部分是实际的内容，直接包围内容的是内边距。

内边距呈现了元素的背景。

内边距的边缘是边框。

边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

提示：

背景应用于由内容和内边距组成的区域。

内边距、边框和外边距都是可选的，默认值是零。

但是，许多元素将由用户样式表设置外边距和内边距。

可以通过将元素的margin和padding设置为零来覆盖这些浏览器样式。

这可以分别进行，也可以使用通用选择器对所有元素进行设置：

*{

margin:

0;

padding:

0;

}

在CSS中，width和height指的是内容区域的宽度和高度。

增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

提示：

内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。

提示：

外边距可以是负值，而且在很多情况下都要使用负值的外边距。

浏览器兼容性

一旦为页面设置了恰当的DTD，大多数浏览器都会按照上面的图示来呈现内容。

然而IE5和6的呈现却是不正确的。

根据W3C的规范，元素内容占据的空间是由width属性设置的，而内容周围的padding和border值是另外计算的。

不幸的是，IE5.X和6在怪异模式中使用自己的非标准模型。

这些浏览器的width属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。

虽然有方法解决这个问题。

但是目前最好的解决方案是回避这个问题。

也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。

3.2.4CSS定位

CSS定位（Positioning）属性允许你对元素进行定位。

CSS定位和浮动

CSS为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。

定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

显然，这个功能非常强大，也很让人吃惊。

要知道，用户代理对CSS2中定位的支持远胜于对其它方面的支持，对此不应感到奇怪。

另一方面，CSS1中首次提出了浮动，它以Netscape在Web发展初期增加的一个功能为基础。

浮动不完全是定位，不过，它当然也不是正常流布局。

一切皆为框

div、h1或p元素常常被称为块级元素。

这意味着这些元素显示为一块内容，即“块框”。

与之相反，span和strong等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。

您可以使用display属性改变生成的框的类型。

这意味着，通过将display属性设置为block，可以让行内元素（比如元素）表现得像块级元素一样。

还可以通过把display设置为none，让生成的元素根本没有框。

这样的话，该框及其所有内容就不再显示，不占用文档中的空间。

但是在一种情况下，即使没有进行显式定义，也会创建块级元素。

这种情况发生在把一些文本添加到一个块级元素（比如div）的开头。

即使没有把这些文本定义为段落，它也会被当作段落对待：

在这种情况下，这个框称为无名块框，因为它不与专门定义的元素相关联。

块级元素的文本行也会发生类似的情况。

假设有一个包含三行文本的段落。

每行文本形成一个无名框。

无法直接对无名块或行框应用样式，因为没有可以应用样式的地方（注意，行框和行内框是两个概念）。

但是，这有助于理解在屏幕上看到的所有东西都形成某种框。

CSS定位机制

CSS有三种基本的定位机制：

普通流、浮动和绝对定位。

除非专门指定，否则所有框都在普通流中定位。

也就是说，普通流中的元素的位置由元素在（X）HTML中的位置决定。

块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。

行内框在一行中水平布置。

可以使用水平内边距、边框和外边距调整它们的间距。

但是，垂直内边距、边框和外边距不影响行内框的高度。

由一行形成的水平框称为行框（LineBox），行框的高度总是足以容纳它包含的所有行内框。

不过，设置行高可以增加这个框的高度。

CSSposition属性

通过使用position属性，我们可以选择4种不同类型的定位，这会影响元素框生成的方式。

position属性值的含义：

∙static

元素框正常生成。

块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一