当前位置:首页 > 电子商务系统开发考试通关秘籍 - By - wander
则。
CSS
1.什么是CSS
CSS(Cascading Style Sheet,层叠样式表)技术上一种格式化网页的标准方式,它扩展了HTML的功能,使网页设计者能够以更有效的方式设置网页格式。
CSS的分类
内联式样式表、嵌入样式表、外部样式表
?内联式样式表
内联式样式表是在现有HTML元素的基础上,用style属性把特殊的样式直接加入到那些控制信息的标记中,比如下面的例子: ?嵌入样式表
嵌入式样式表通常包含在HTML,文档的头部,即HEAD元素中,并且有一个专门的元素style来标记这种样式表。 ?外部样式表
外部式样式表是指将样式表作为一个独立的文件保存在计算机上,这个文件以―.css‖作为文件的扩展名。样式在样式表文件中定义和在嵌入式样式表中的定义是一样的,只是不再需要style元素,比如要将本例中的嵌入式样式定义到一个样式表文件mystyle.css中,这个样式表文件的内容应该为嵌入式样式表中的所有样式,如下所示: h1{
font-size: 36px; font-family: \隶书\ font-weight: bold; color: #993366; }
1.HTML标记符选择器
HTML标记符是最典型的选择器类型,网页设计者可以为某个或某些具体的HTML元素应用样式定义。对于不同的标记符选择器,我们可以采用编组的方式简化样式定义(对于其他选择器,也可以用类似的编组方法)。前面的实例已有介绍。此例中的标记选择器是
}/*html标记选择器*/
显示的结果从图4-3可以看到。规定所有的标题1都使用此样式。 2.具有上下文关系的HTML标记符选择器
如果需要为位于某个标记符内的标记符设置特定的样式规则,则应将选择器指定为具有上下文关系的HTML标记符。例如,如果只想使位于h2标记符内的b标记符具
有特定的属性,则应使用以下格式:
h2 b{color:blue}/*注意h2和b之间以空格分隔*/ 这表示只有位于h2一标记符内的b元素具有指定样式,而其他b元素不具有该样式。实际上,这种嵌套关系可以有多层,不过通常仅用一层。本例中的结果见图4-3所示。
?提示:在定义样式表项时可以添加注释,以便增强文挡的可读性。CSS的文字注释形式与C语言相似,都是将注释语句放置在―/*‖和―*/‖之间,并且注释不能嵌套。 3.用户定义的类选择器
可以使用类(class)来为单一HTML标记符创建多个样式。要想将一个类包括到样式定义中,可将一个句点和一个类名称添加到选择器后,如下所示: selector.classname{property:value:……} 4.用户定义的ID选择器
当网页设计者想在整个网页或几个页面上多处以相同样式显示标记符时,除了使用.classname的方式定义一个通用类样式以外,还可以使用ID定义样式。要将一个ID样式包括在样式定义中,应用一个井号(#)作为ID名称的前缀,如下所示: #IDname{property:value……} 5.虚类选择器
对于a标记符,可以用虚类的方式设置不同类型链接的显示方式,所谓不同类型超链接,是指访问过的、未访问过的、激活的以及鼠标指钍悬停于其上的这4种状态的超链接。
/*以下是虚类的定义*/
a:link{ color:red}/*未访问的链接*/ a:visited{ color:blue}/*已访问的链接*/ a:active{ color:yellow}/*活动链接*/
a:hover{ color:#990000; text-decoration:underline }/*鼠标指针移到上面链接的颜色*/ ?提示:如果要是所有的超链接都具有特定的效果,只需为a标记指定特定的样式即可。另外,虚类选选择器也可以与类选择器联合使用,例如: a:hover.green{color:green}
表示只有class属性为green的超链接悬停时才显示为绿色文字。
1.链接外部样式表
在STYLE标记符中定义样式对于单独网页的格式设置和维护很有效,但如果在一个大网站中,为每个页面都定义类似的样式,显然叉是效率不高的,这时最好的办法就是将重复在多个网页中使用的样式放在外部样式文件中(不具有重复使用特点的样式仍旧放在单独网页的STYLE标记符中),然后通过链接的方式引用其中的样式。链接式样式的优点很明显,网页设计者可以在一个链接的CSS文件上做修改,然后所有引用它的网页都会自动更新。
链接引用外部样式表的方法为:在HEAD标记符内使用LINK标记符,通过指定相应属性链接到外部样式表。
当链接处部样式表时,LINK标记符的用法如下:
其中,rel属性规定了被链接文件的关系,在链接样式表文件(.css文件)的情况下,取值永远是\属性规定了链接文件的MIME类型,它的值永远是\;href属性指定了要链接的样式表文件。 2.导入外部样式表
导入外部样式表的方法与链接到外部样式表,稍有区别,其语法结构是: @import url(?样式表文件?);
3.同时使用多层样式表
很可能的情况是在一个网页中既定义了内联式样式表和嵌入式样式表又链接了外部样式表,这时网页会变得怎么样昵?其实前面也已说过,这三种样式表具有不同的优先级,其中内联式样式表的优先级大于嵌入式样式表的优先级,嵌入式样式表的优先级又大于外部式样式表的优先级,所以某个元素在挑选多层样式表时,会首先选择优先级最高的样式,即就近原则。这个网页的显示如图4-4所示。
4.在样式表中设置属性
可以在样式表中设置各种属性。表4-1显示了样式表可以使用的各种属性。
1、下列哪一项表示的不是按钮。(c)
A.type=\.type=\.type=\.type=\
2、关于表格的描述正确的一项是。(d)
A.在单元格内不能继续插入整个表格 B.可以同时选定不相邻的单元格
C.粘贴表格时,不粘贴表格的内容 D.在网页中,水平方向可以并排多个独立的表格
3 CSS优点:
CSS样式表可以将格式和结构分离 CSS样式表可以控制页面的布局 CSS样式表可以使许多网页同时更新 CSS样式表能制作体积更小下载更快的网页
4
</p>