0%

CSS3样式表手册

CSS样式单的功能及历史背景

HTML5规范推荐把页面外观交给CSS去控制,而HTML标签则负责标签、语议部分。HTML5删除了传统的专门控制页面外观的标签,而把页面外观的控制交给了CSS负责。

CSS的主要功能

  • 对页面的字体、颜色控制更加细腻,让页面内容更富表现力,CSS的表现效果远远超出传统HTML页面的color、bgcolor等属性的表现力。
  • 通过CSS控制整站风格,CSS样式单可以同时控制整个站点所有页面的风格,如果整个站点所有的页面效果都需要改变,则可以直接通过CSS样式单控制,避免逐个修改每个页面文件。

CSS的发展历史

  • CSS 1.0:1996年12月,CSS1.0作为第一个正式规范面世,其中已经加入了字体、颜色等相关属性。
  • CSS 2.0:1998年5月,CSS2.0规范正式推出。这个版本的CSS也是最广为人知的一个版本。
  • CSS 2.1:2004年2月,CSS2.1对原来的CSS2.0进行了一些小范围的修改,删除了一些浏览器不成熟的属性。CSS2.1可认为是CSS2.0的修订版。
  • CSS 3.0:2010年,CSS3规范推出,这个版本的CSS完善了前面CSS存在的一些不足,例如,颜色模块增加了色彩校正、透明度等功能;字体模块则增加了文字效果、服务器字体支持等;还增加了变形和动画模块等。

使用外部CSS样式单的两种方式

引入外部样式文件

HTML文档中使用<link.../>元素来引用外部样式文件,引入外部样式文件应在<head.../>元素中增加如下<link.../>子元素:

1
<link type="text/css" rel="stylesheet" href="CSS样式文件的URL">

导入外部样式单

导入外部样式单的功能与链接外部样式单的功能差不多,只是语法上存在差别。导入外部样式单需要在<style.../>元素中使用@import来执行导入。

1
2
3
4
<style type="text/css">
@import "outer.css";
@import url("mycss.css");
</style>

以前的很多浏览器不支持@import导入,因此一些CSS开发人员会把一些浏览器可能不支持的高级CSS属性放在外部样式单中导入,这样保证只有支持@import导入的浏览器才会导入这些高级CSS属性。但实际上,由于某些浏览器(例如:IE浏览器)会在导入外部样式单时导致“屏闪”,因此开发者谨慎使用。

使用内部样式单的方式

如果想让某些CSS样式仅对某个页面有效,而不会影响整个站点,则应该选择使用内部CSS样式定义。

内部CSS样式需要放在<style.../>元素中定义

1
2
3
4
5
6
7
8
9
10
11
12
<style type="text/css">
<!-- 样式单文件定义-->
table {
backgroud-color: #003366;
}
td {
backgroud-color: #FFFFFF;
font-family: "楷体_GB2312";
font-size: 20pt;
text-shadow: -8px 6px 2px #333;
}
</style>

使用内联样式单的方式

内联CSS样式只对单个标签有效,它甚至不会影响整个文件。内联样式定义可以精确控制某个HTML元素的外观表现,并且允许通过JavaScript动态修改XHTML元素的CSS样式,从而改变该元素的外观。

为了使用内联样式,CSS扩展了HTML元素,几乎所有的HTML元素都增加了一个style通过卂性,该属性是一个或多个CSS样式定义,多个CSS样式定义之间以英文逗号隔开。简单地说,使用内联样式定义时,style属性值就是由一个或多个property:value组成的,此处的property:value与前面CSS样式单文件中的完全相同。

定义内联CSS样式的语法格式如下:

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

CSS的元素选择器

正如前面看到的,除了内联样式之外,定义CSS样式的语法总遵守如下格式:

1
2
3
4
Selector {
property1: values1;
property1: values2;
}

上面的语法格式分为两个部分:

  • Selector(选择器):选择器决定该样式定义对哪些元素起作用。
  • {property1: value1; property2:value2}(属性定义):属性定义部分决定这些样式起怎样的作用(字体、颜色、布局)等。

因此不难看出掌握CSS需要两部分:选择器的定义方法与CSS属性的定义

元素选择器

元素选择器是最简单的选择器,其语法格式如下:

1
E { ... }  /* 其中E代表有效的HTML元素名 */

属性选择器

属性选择器一共有如下几种语法格式:

  • E {....} :指定该CSS样式对所有E元素起作用。
  • E[attr] { ... } :指定该CSS样式对具有attr属性的E元素起作用
  • E[attr=value] { ... } :指定该CSS样式对所有包含attr属性,且attr属性为value的E元素起作用。
  • E[attr~=value]{ ... } :指定该CSS样式对所有包含attr属性,且attr属性的值为以空格隔开的系列值,其中某个值为value的E元素起作用。
  • E[attr|=value]{ ... } :指定该CSS样式对所有包含attr属性,且attr属性的值为以连字符分隔的系列值,其中第一个值为value的Tag元素起作用。
  • E[attr^="value"]{ ... } :指定该CSS样式对所有包含attr属性,且attr属性的值以value开头的字符串的E元素起作用。
  • E[attr$="value"]{ ... } :指定该CSS样式对所有包含attr属性,且attr属性的值以value结尾的字符串的E元素起作用。
  • E[attr*="value"]{ ... } :指定该CSS样式对所有包含attr属性,且attr属性的值包含value的字符串的E元素起作用。

上面和个属性选择器并没有得到所有浏览器的广泛支持,只有第一种形式可以在所有浏览器中运行良好,最后3种CSS选择器是CSS 3.0新增的选择器。

ID选择器

ID选择器指定CSS样式将会对具有指定id属性值的HTML元素起作用。ID选择器的语法格式如下:

1
#idvalue {...}

上面语法指定该CSS样式对id为idValue的HTML元素起作用。

各种浏览器对ID选择器都有很好的支持。

仅对指定元素起作用的ID选择器

定义仅对指定元素起作用的ID选择器的语法格式如下:

1
E#idValue {...} /* 其中E是有效的HTML元素 */

该语法指定该CSS样式对ID为idValue的E元素起作用。

class选择器

九、包含选择器

十、子选择器

十一、CSS3.0新增的兄弟选择器

十二、 选择器组合

十三、伪选择器

十四、 使用伪元素选择器插入内容

十五、配置counter-increment属性添加编号

十六、插入自定义编号

十七、插入多级编号

十八、CSS3新增的结构性伪类选择器

十九、 CSS3新增的UI元素状态伪类选择器

二十、 CSS3新增的:not和:target伪类选择器

二十一、 在脚本中修改CSS样式

分隔符不要忘了!!!!!!!!!