学习笔记——CSS

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.../>元素。

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

使用内部样式定义：

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

格式：

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

使用内联样式：

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

格式：

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

在XML中导入CSS样式：

 

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

格式：

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

CSS属性分类：

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

选择器定义：

一般格式：

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种选择器的优先基本一次升高，建议只使用第一种，因为只有第一种在游览器中得到了广泛的支持。

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。