代码jquery下拉菜单

第3章Web元素的显示XHTML代码结构只是构成了Web元素本身的内容部分,并非是呈现给Web终端用户的最终效果.
在Web应用中,所有的Web元素都需要采用各种方式重新布局定位,并且用多种手法进行美化和修整,才能组合成为符合终端用户审美观和使用习惯的用户界面.
在标准化的Web开发中,为Web元素布局定位、美化修整都需要使用到CSS样式表技术,此技术决定了Web应用的显示效果,以便为终端用户提供直观而方便的操作界面.
本章将以实用的角度介绍CSS样式表技术在现代Web站点开发过程中的应用,帮助开发者更快地了解CSS样式表技术的原理和应用的方式.
3.
1结构和样式的松耦合传统的Web站点和Web应用往往采用旧的HTML内置标记来实现页面的排版,再通过对表格单元格的拆分、合并、修改单元格的宽度和高度实现布局.
这种简陋而粗糙的手法可以做出十分美观的网站,在20世纪90年代,这种手法颇为流行,很多图像设计软件(例如AdobePhotoshop、AdobeFireworks等)甚至直接提供切片工具来辅助传统的网站美工、艺术工作者生成这类网页.
此时,Web开发的分工并不明确,很多中小型Web站点或Web应用往往由学习美术、艺术专业的Web设计师设计和制作.
随着现代Web技术的发展,美观已经不再是衡量一个Web站点或Web应用的唯一标准,一个成功的现代Web站点或Web应用应该且必须符合以下要求.
可维护性、可扩展性和前瞻性交互的便捷性能够被搜索引擎快速抓取内容以上三点要求中,可维护性、可扩展性和前瞻性决定了Web站点和Web应用是否具有快速更新、修复、改版,不断适应用户新需求和期望的能力;交互的便捷性决定了用户的操作体验;被搜索引擎快速抓取内容决定了是否能招揽更多的终端用户.
这三方面的需求决定了传统的Web开发模式、HTML表格包打天下的实现方式已经不再适合开发现代的Web站点和Web应用.
随着开发Web站点的复杂度逐渐增加,现代的Web设计和开发也逐渐分工,由传统的Web设计师包揽全部工作转换为Web设计师设计用户界面,前端开发者完成前端界面的开发和部署.
基于以上背景,现代的Web开发引入了CSS样式表技术和严格模式的XHTML技术,将站点的内容和显示效果分离开来,使得站点内容的维护更加便捷,修改更加迅速,同时也便于更快地改版和形成新的界面效果,结构化的XHTML更符合XML标准,可以更容第3章Web元素的显示75易地被搜索引擎检索.
前端开发结构和样式的松耦合的意义在于,将结构和表现完全从依赖关系上分离出来,结构即结构,表现即表现.
通过降低结构和表现之间的依赖性,来提高整体Web代码维护的效率.
具体到代码层级,松耦合采用XHTML的严格型声明(StrictMode)来编写结构代码,拒绝任何表现样式的HTML标记,编写"纯"结构的数据.
然后通过XHTML标记的id或class等核心属性的值建立一个完整的Web元素关系表,将各种显示元素的id和class整理记录.
最后根据Web元素关系表进行针对性的Web元素界面效果代码开发.
在对Web站点或应用的界面进行更新时,可以针对Web元素关系表直接编写全新的CSS样式表,在不改变结构的情况下构建新的界面样式.
作为典型的CSS松耦合推广站点,CSS禅意花园(http://www.
csszengarden.
com/),采用了完全规范化的结构代码开发,并允许第三方的设计者为其编写各式各样的界面CSS代码,完全实现了一个站点多种样式的效果.
3.
2使用样式表所有的CSS样式表必须被XHTML结构代码加载,才能在Web页中实现样式的效果.
XHTML结构语言支持三种类型的CSS样式表,即外部样式表、内部样式表和内联样式表.
通常情况下,其优先级为外部样式表最低,内部样式表其次,内联样式表最高.
与其他编程语言类似,CSS支持通过注释的方式禁止某些代码的执行,或为代码进行解释和说明.
3.
2.
1外部样式表外部样式表是指在Web文档外部书写的样式表,其需要将CSS样式表的代码书写到外部独立的扩展名为CSS的样式表文件中,然后再通过XHTML结构语言提供的LINK标记将样式表文件导入到Web文档中生效.
外部样式表的优点在于其将各种CSS样式代码存储在外部,与Web文档本身隔离,因此可以提高样式代码和结构代码的独立性,增强样式代码的复用性,实现一段样式代码应用于多个Web页.
在复杂的大型Web项目开发中,多数样式代码都以外部样式表的方式存在.
外部样式表的缺陷也十分明显,其执行的优先级较低,经常会被内部样式表和内联样式表覆盖.
另外,由于其往往和多个Web页关联,因此在开发和调试时很可能对其做出的任何修改都将影响到所有相关的Web页.
另外,Web页在加载外部样式表时需要占用一个独立的HTTP线程,因此加载速度可能会比其他两种样式表慢一些.
1.
CSS样式表文件CSS样式表文件分为两个部分,第一部分为编码声明,第二个部分则为所有样式的代高效Web前端开发之路——YUI3.
1576码.
编码声明的作用是向Web浏览器提供该CSS样式表文件所采用的语言编码,如下所示.
@charset'Code';在上面的伪代码中,关键字Code表示当前CSS样式表文件的基本语言编码,其可以是utf-8、utf-16、gbk、gb2312等.
在此需要注意的是,编码声明必须书写在CSS样式表文档的第一行,且之前不能有任何其他内容,否则一些兼容性较差的Web浏览器(例如Google的Chrome等)将无法正常识别该CSS文档.
选择CSS编码声明是非常重要的,通常情况下建议选择utf-8编码,以提高在不同语言版本的Web浏览器中样式代码的通用型.
另外,不提倡在CSS代码中书写中文(CSS的注释除外),在一些非中文版本的Web浏览器中,很可能会无法识别这些中文字符.
在编码声明之后,开发者即可直接书写CSS的注释和普通代码,例如,在下面的代码中,就展示了一个简单CSS文件的内容.
@charset'utf-8';body{margin:0px;padding:0px;}2.
链接资源标记在Web页中,外部CSS样式表必须通过XHTML结构语言的链接资源标记(LINK)才能正确地加载.
链接资源标记(LINK)在XHTML1.
0规范中被赋予了强大的功能,允许将各种类型的外部文档加载和导入到当前文档中.
但是在实际的应用中,Web浏览器只支持从外部导入CSS样式表文档的功能.
链接资源标记仅能出现在头部标记(HEAD)中,且不限制出现的次数.
为Web页链接一个外部样式表文件的代码如下所示.
除了以上代码中的rel属性和type属性外,链接资源标记还支持media属性,其作用是根据用户客户端的媒体类型,决定外部样式表是否被启用.
media属性支持以下几种属性值,如表3-1所示.
表3-1链接资源标记支持的媒体类型属性值作用属性值作用screen定义外链文档用于PC显示器或其他计算机屏幕ttv定义外链文档用于电传打字机以及类似的使用等宽字符网格的媒介tv定义外链文档用于电视机类型设备(低分辨率、有限的滚屏能力)projection定义外链文档用于放映机第3章Web元素的显示77续表属性值作用属性值作用handheld定义外链文档用于手持设备(小屏幕、有限带宽)print定义外链文档用于打印预览模式/打印页面braille定义外链文档用于盲人点字法反馈设备aural定义外链文档用于语音合成器all定义外链文档适用于所有设备例如,针对手机屏幕加载一个外部的CSS文件,即可为链接资源标记添加media属性,设置其属性值为handheld,代码如下.
3.
2.
2内部样式表内部样式表是基于Web文档自身的一种样式表存储形式,其特点是与Web结构代码结合十分紧密,优先级高于外部样式表,低于内部样式表.
相比外部样式表,内部样式表的优点是加载效率更高,不需要多占用一个HTTP联接下载线程,其缺点是样式表代码的复用性较差,只能应用于当前的Web文档.
为Web文档添加内部样式表时,需要使用到XHTML结构语言的内部样式标记(STYLE).
内部样式标记(STYLE)支持以下属性,如表3-2所示.
表3-2内部样式标记(STYLE)的属性属性属性值是否必选作用DTDtypetext/css是定义CSS样式的MIME类型STFscreen定义样式代码用于PC显示器或其他计算机屏幕ttv定义样式代码用于电传打字机以及类似的使用等宽字符网格的媒介tv定义样式代码用于电视机类型设备(低分辨率、有限的滚屏能力)projection定义样式代码用于放映机handheld定义样式代码用于手持设备(小屏幕、有限带宽)print定义样式代码用于打印预览模式/打印页面braille定义样式代码用于盲人点字法反馈设备aural定义样式代码用于语音合成器mediaall否定义样式代码适用于所有设备STF内部样式标记(STYLE)与链接资源标记(LINK)类似,都只能书写在文档头标记HEAD以内.
例如,为一个Web页添加一段内部样式代码,代码如下所示.
高效Web前端开发之路——YUI3.
1578h1{color:red}p{color:blue}如果仅仅需要编写单独的XHTML文档,可以使用内部样式标记,而如果是为整个站点的所有Web页面编写样式,推荐采用链接资源标记(LINK).
3.
2.
3内联样式表内联样式也是一种CSS样式的类型,其与外部样式和内部样式相比,优先级更高,更灵活,可以和XHTML的各种标记直接紧密结合,为Web元素直接提供定义CSS样式的接口.
当然,其缺点也同样明显,就是需要针对每一个XHTML结构标记编写CSS代码,代码的复用性更差,修改和维护也更为复杂.
在为XHTML结构标记添加内联样式时,需要使用到其核心属性style,该属性的属性值为一个长字符串,可以包含用于描述该结构标记的大量CSS样式代码.
例如,为一个段落定义段首缩进、字体、前景色、字号、行高等样式,代码如下.
先帝创业未半而中道崩殂,今天下三分,益州疲弊,此诚危急存亡之秋也.
然侍卫之臣不懈于内,忠志之士忘身于外者,盖追先帝之殊遇,欲报之于陛下也.
诚宜开张圣听,以光先帝遗德,恢弘志士之气,不宜妄自菲薄,引喻失义,以塞忠谏之路也.
在实际开发中,内联样式由于其复用性差,且维护性比其他两种样式表的复杂度更高,因此除非通过脚本修改,否则并不推荐一般开发者使用.
3.
2.
4注释与其他编程语言类似,CSS样式表也支持注释功能,可以帮助开发者禁用某一段代码,或者为某些代码提供文字说明.
CSS提供两种注释方式,一种是基于单行内容的行注释,另一种则是基于连续多行内容的块注释.
1.
行注释行注释的作用是将当前行的局部内容注释,禁止Web浏览器对这些内容进行解析.
CSS的行注释需要使用到双反斜杠"//"将内容标记起来,例如,在下面的代码中,第一行内容就已被行注释.
//定义页面主体内容的间距body{margin:0px;}第3章Web元素的显示79行注释不仅可以用于注释整行内容,也可以临时注释某一行内由某个字符起始直至行尾的所有内容.
例如,在下面的代码中,就将代码块内第二句CSS样式代码提升至前一行行尾并实现了注释.
//定义页面主体内容的间距body{margin:0px;//margin-left:20px;margin-top:10px;padding:20px;}行注释适合为代码块提供语义类型的说明内容,例如注释某一段CSS代码在整个Web页中的功能和作用等.
在使用行注释时,尽量注意用简短而精确的文本实现代码的注释.
另外,要按照Javascript代码的规范保障每一行的字符数不要超过80,如果需要注释的内容超过了80个字符的限制,则勿使用行注释.
2.
块注释块注释的作用是提供一个开始标记和结束标记,并强制将标记内包含的若干代码或文本注释起来,禁止Web浏览器解析和执行.
块注释比行注释更加自由灵活,其起始标记为连写的反斜杠"/"和星号"*",结束标记为连写的星号"*"和反斜杠"/".
例如,在下面的代码中,就使用了块注释来禁止Web浏览器解析一些CSS样式语句.
body{margin-left:20px;/*margin-top:10px;padding:20px;*/}块注释既可以注释若干行代码,也可以注释一行代码中的局部内容,实现行注释的功能.
例如,在下面的代码中,就使用了块注释注释局部行的内容.
p{margin:0px5px;padding:0px;text-indent:2em;font-size:12px;font-family:SimSun,Arial;/*font-weight:normal;*/color:#000;line-height:18px;}块注释适合将若干行代码快速禁用,也适合为局部的代码添加详细的多行注释内容.
在使用块注释时,在此同样推荐遵循行字符数80的限制,以最大限度保障各种开发工具下的浏览性能.
高效Web前端开发之路——YUI3.
15803.
3选择Web元素纯粹的XHTML结构代码构成的Web元素在Web浏览器中显示的结果往往十分粗糙,因此需要开发者为其建立CSS样式表,通过CSS样式表对这些Web元素进行排版、布局、美化,赋予Web元素各种效果.
CSS样式表是一种基于数据表的语言,其可以包含若干条规则,每一条规则由选择器语句和样式代码构成.
每一个选择器语句对应一段样式代码.
其中,选择器语句可以是独立的基本选择器,或基本选择器与伪选择器的集合,也可以是若干基本选择器、基本选择器与伪选择器的集合共同构成的复合选择方法语句.
3.
3.
1基本选择器选择器是CSS样式表的表头,是每一条数据的基本标题,其本身用于在样式代码与对应的Web元素间建立关联,通过选择和筛选两种方式帮助Web浏览器确认样式代码是否应应用到某个Web元素上.
选择器语句可以是单独的选择器代码,也可以是选择器和伪类选择器、若干种选择器的集合.
CSS样式表的基本选择器包括标记选择器、类选择器、ID选择器等.
1.
标记选择器标记选择器是基于XHTML标记衍生而来的CSS选择器,其与Web页中的某一种XHTML标记紧密关联.
定义这些标记的CSS样式,其使用方法如下所示.
TagName{Statements;}在上面的伪代码中,TagName关键字表示XHTML标记的名称,Statements关键字表示定义的CSS代码.
在下面的代码中,就采用了标记选择器来定义Web页中HTML标记以及超链接标记A的样式.
html{}a{}2.
类选择器类选择器是基于XHTML标记的class属性值产生的CSS选择器,其与Web页中所有class属性值相等的Web元素紧密关联,以定义这些标记的CSS样式.
其使用方法如下第3章Web元素的显示81所示.
.
ClassName{Statements;}在上面的伪代码中,ClassName关键字表示对应XHTML标记的class属性值,Statements关键字表示定义的CSS代码.
类选择器的选择器之前必须添加英文句点".
"以将其和其他选择器区分开来.
带有英文句点".
"的前缀也是类选择器的唯一标识.
例如,在Web页中存在以下代码,如下所示.
这里的字体以红色显示这里的字体以绿色显示这里的字体仍然以红色来显示在编写针对以上代码的CSS样式时,即可采用类选择器的方式将这些文本的前景色区分开来,代码如下.
.
front_color_red{color:#f00;}.
front_color_green{color:#0f0;}类选择器是CSS选择器中使用最灵活的选择器,其特性决定了样式代码和XHTML标记中的class属性可以通过复合的拆分组合,实现CSS样式的碎片化,以最简洁的代码实现复杂的样式.
例如,以下代码中每一个标记仅包含一个class属性值,代码如下.
这里的字体以红色显示,背景为灰色这里的字体以绿色显示,背景为灰色这里的字体以红色显示,背景为白色这里的字体以绿色显示,背景为白色在编写针对以上代码的CSS样式时,只能针对每一个标记编写完整的针对该标记的样式,如下所示.
.
front_color_red_background_color_gray{color:#f00;background-color:#eee;}.
front_color_green_background_color_gray{高效Web前端开发之路——YUI3.
1582color:#0f0;background-color:#eee;}.
front_color_red_background_color_white{color:#f00;background-color:#fff;}.
front_color_green_background_color_white{color:#0f0;background-color:#fff;}上面的代码中,每条CSS代码都必须包含两种属性,这种写法效率较低,同时也比较繁冗.
在实际开发中,完全可以采用碎片化的方式编写XHTML代码,为其赋予多个class属性,然后针对每一个class属性编写更简洁的CSS代码,如下所示.
这里的字体以红色显示,背景为灰色这里的字体以绿色显示,背景为灰色这里的字体以红色显示,背景为白色这里的字体以绿色显示,背景为白色在编写针对以上代码的CSS样式时,则可以只编写单条定义前景色或背景色的样式代码,如下所示.
.
front_color_red{color:#f00;}.
front_color_green{color:#0f0;}.
background_color_gray{background-color:#eee;}.
background_color_white{background-color:#fff;}碎片化的CSS样式代码更加简洁,其选择器和代码含义的关联也更加直接,因此在开发过程中,推荐采用这种方式以提高代码的效率.
3.
ID选择器ID选择器是基于XHTML标记的id属性值产生的CSS选择器.
在XHTML标准中,第3章Web元素的显示83一个Web页内所有XHTML标记的id属性值是不能重复的,即一个XHTML标记的id属性值如果为"a",则其他任何XHTML标记的id属性值都不能再是"a".
基于此特点,CSS的ID选择器可以为Web页中某一个唯一的元素定义CSS样式.
ID选择器的使用方法如下所示.
#ID{Statements;}在上面的伪代码中,ID关键字表示对应XHTML标记的id属性,Statements关键字表示定义的CSS语句.
ID选择器的选择器之前必须添加符号"#"以将其和其他选择器区分开来.
带有符号"#"前缀也是ID选择器的唯一标识.
例如,在一个Web页中,包含以下模块,代码如下.