CSS基础教程:控制XML文档的显示

作者: 来源: 更新时间:2012-12-30 15:11:04 点击:

Cascading Style Sheet(CSS,级联样式单)也被称为层叠样式单。

作用:主要用于网页风格设计,控制HTML页面中的元素大小、位置、背景、颜色等外观,其提供了一种机制让程序员开发时可以暂不考虑显示和界面,显示问题由美工或程序员在后期解决,也可以用于控制XML文档的显示。

 

样式菜单的优势:

1:表达效果丰富;

2:文档小;

3:便于信息检索;

4:可读性好。

 

W3C给出了两种样式单语言的标准:

1:CSS;

2:XSL(eXtensible Stylesheet Language,可扩展样式单语言):主要用于控制XML文档。

 

定义一个CSS样式需要指定两个部分:

1:Selector:指定对哪些HTML元素起作用;

2:属性:其怎样的作用效果。

 

在HTML中导入CSS的三种方式:

1:导入外部样式文件

2:使用内部样式定义

3:使用内联样式

外部导入的方法:

在<head.../>中使用<link.../>元素。

[html]view plaincopyprint?

<linktype="text/css"rel="stylesheet"href="xxx.css"/>

 

使用内部样式定义:

内部样式只是把外部定义方式的文件内容拿到html文件中,其在<head.../>元素中是<style.../>元素来定义。

格式:

[html]view plaincopyprint?

<styletype="text/css">... </style>

[html]view plaincopyprint?

 

 

使用内联样式:

几乎所有HTML元素都有一个style属性,其属性值就是N个CSS样式,多个样式用;隔开。

格式:

[html]view plaincopyprint?

style="property1:value1;property2:value2..."

[html]view plaincopyprint?

 

在XML中导入CSS样式:

在XML只能使用外部导入的方法;

格式:

[html]view plaincopyprint?

<?xml-stylesheettype="text/css"href="xxx.css"?>

 

 

CSS属性分类:

背景、文本、字体、列表、表格、轮廓、定位、框模型。

 

选择器定义:

一般格式:

[html]view plaincopyprint?

Selector,Selector...{property : value; ... }

属性选择器格式:

Tag { ... }:对所有Tag元素起作用;

Tag[ attr ] { ... }:对具有attr属性的Tag元素起作用;

Tag[ attr = value ]  { ... }:对具有attr属性的Tag元素起作用,且attr=value;

Tag[attr ~= value ] { ... }:对具有attr属性的Tag元素起作用,且attr属性值为以空格为分隔符系列值,其中某个值为value。

Tag[attr |= value ] { ... }:对具有attr属性的Tag元素起作用,且attr属性值为以连字符为分隔符系列值,其中第一个值为value。

 

这5种选择器的优先基本一次升高,建议只使用第一种,因为只有第一种在游览器中得到了广泛的支持。

 

[html]view plaincopyprint?

div[id] { ... }

 

ID选择器:

这是一种非常准确的选择器,其作用于具有指定ID的元素。

格式:

#idValue { ... }:指定对id为idValue的元素起作用。

 

class选择器:

其作用于具有指定class的属性的元素。

格式:

Tag.classValue { ... }:指定对class为classValue的Tag元素起作用,若省略Tag,则对所有class为classValue的元素起作用。

 

后代选择器:

作用于指定元素位于指定父元素之内的元素,两元素之间可多层次间隔。

格式:

ancestorTag posterityTag{ ... }:只要posterityTag位于ancestorTag之内即可。

 

子元素选择器:

作用于指定元素必须直接在特定父元素之内。

格式:

fatherTag>SonTag{ .. }

 

相邻兄弟选择器:

如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)。

格式:

Tag1 + Tag2 { ... }:指定Tag2必须与Tag1在相同的父元素内。

 

超级链接选择器:

超级链接默认样式都是蓝色,通过CSS可改变这种效果,下面是关于超级连接的4个选择器:

a:link{ ... }:超级链接未被访问时的CSS样式;

a:visited{ ... }:被访问过的超级链接CSS样式;

a:hover{ .. }:鼠标悬浮在超级链接上时的CSS样式;

a:active{ ... }:超级链接被激活时的CSS样式。

 

在脚本中修改CSS样式:

步骤:

1:获取需要更改CSS样式的目标元素,可使用document对象的getElementById()方法。

2:更改目标元素的CSS样式,其常用方式:

  修改内联CSS属性值:使用如“obj.style.attributeName=value”的JavaScript脚本。

  修改HTML元素的class属性值:使用方法“obj.className=class选择器”的JavaScript脚本。

 

注意事项:脚本中的CSS属性名与页面中的静态CSS属性名并不完全相同,例如:脚本中属性名background-color,脚本中该属性名为backgroudColor。