CSS教程 [转]

CSS教程

使用CSS可以在制作页面时帮你节省不少时间
我们的CSS教程可以让你学习到怎样去使用CSS来控制页面的样子。

CSS 实例库

使用我们为您提供的在线编辑器
70多个实例,在查看演示的同时动手尝试,可以让你更快的理解CSS的用途

前往实例库

CSS 参考资料

您可以在这里找到完整的CSS2参考资料,里面列有属性,长度单位,颜色等其他一些与CSS有关的资料信息

CSS2 参考资料

CSS 介绍
w3pop.com / 2006-09-19

CSS 语法

What You Should Already Know
哪些是你应该已经知道的

Before you continue you should have some basic understanding of the following:
在继续前你应该具备下面相关的基础知识:

  • HTML / XHTML

If you want to study this subject first, find the tutorials on our Home page.
如果你想先学习这个主题,请在我们的首页查找相关教程


What is CSS?
什么是CSS?

  • CSS stands for Cascading Style Sheets
    CSS 意思就是 叠层样式表
  • Styles define how to display HTML elements
    样式定义了HTML元素怎样去显示
  • Styles are normally stored in Style Sheets
    样式一般存储在样式表中
  • Styles were added to HTML 4.0 to solve a problem
    样式添加到HTML4.0中用来解决问题
  • External Style Sheets can save you a lot of work
    利用外部样式表可以提高你的工作效率
  • External Style Sheets are stored in CSS files
    外部样式表存储在CSS文件中
  • Multiple style definitions will cascade into one

CSS Demo
CSS演示

With CSS, your HTML documents can be displayed using different output styles:
使用CSS,你的HTML文档可以用不同的样式输出来显示:

See how it works
看看它工作的情况


Styles Solve a Common Problem
用样式来解决一个共同的问题

HTML tags were originally designed to define the content of a document. They were supposed to say "This is a header", "This is a paragraph", "This is a table", by using tags like <h1>, <p>, <table>, and so on. The layout of the document was supposed to be taken care of by the browser, without using any formatting tags.
HTML标签起初被设计成为定义文档的内容。通过使用像<h1>,<p>,<table>这样的标签他们应该表达的是"这是一个标题","这是一个段落","这是一张表格",而布局该由浏览器来处理并非使用格式化标签.

As the two major browsers - Netscape and Internet Explorer - continued to add new HTML tags and attributes (like the <font> tag and the color attribute) to the original HTML specification, it became more and more difficult to create Web sites where the content of HTML documents was clearly separated from the document's presentation layout.
作为两大浏览器 - 网景 和 IE - 不断的添加新的HTML标签和属性(像<font>标签和颜色属性)来初始HTML的规格,这让建立清晰的HTML文档内容并从形式中分离出来变的越来越困难.

To solve this problem, the World Wide Web Consortium (W3C) - the non profit, standard setting consortium, responsible for standardizing HTML - created STYLES in addition to HTML 4.0.  
为了解决这个难题,W3C 这个非赢利的,建立标准的组织,为HTML4.0增加了样式

All major browsers support Cascading Style Sheets.
所有主流浏览器都支持样式表


Style Sheets Can Save a Lot of Work
样式表可以提高工作效率

Styles sheets define HOW HTML elements are to be displayed, just like the font tag and the color attribute in HTML 3.2. Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in your Web, just by editing one single CSS document!
样式表定义元素怎样去显示,就像在HTML3.2中字体标签和颜色属性一般保存在一个外部的.css文件一样.外部样式表能够让你改变所有出现在你WEB中的外观和布局,而仅仅通过编辑一个单独的CSS文档.(原理就是一动多变)

CSS is a breakthrough in Web design because it allows developers to control the style and layout of multiple Web pages all at once. As a Web developer you can define a style for each HTML element and apply it to as many Web pages as you want. To make a global change, simply change the style, and all elements in the Web are updated automatically.
CSS是一个在设计领域中的突破,因为它允许开发者一下就能控制多个WEB页的样式和布局.作为译名WEB开发者你可以为每个HTML元素和应用他的每个页面定义一个你想要的样式.来实现全面的改变,简单的改变样式,所有与之相关的元素都会自动更新


Multiple Styles Will Cascade Into One

Style sheets allow style information to be specified in many ways. Styles can be specified inside a single HTML element, inside the <head> element of an HTML page, or in an external CSS file. Even multiple external style sheets can be referenced inside a single HTML document. 
样式表允许样式信息用多种方式来定义.样式可以在一单独的HTML元素中指定,在<head>元素中或在一外部CSS文件中.甚至多个外部样表能集中在一个单一的HTML文档中

Cascading Order

What style will be used when there is more than one style specified for an HTML element?
当多于一种的样式指定一HTML元素时使用怎样的样式呢?

Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority:
一般说来所有样式有下面的规则(第四个最有优先性)

  1. Browser default
    浏览器默认
  2. External style sheet
    外部样式表
  3. Internal style sheet (inside the <head> tag)
    内嵌样式表(在<head>标签内)
  4. Inline style (inside an HTML element)
    行内样式(在一HTML元素内)

So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style declared inside the <head> tag, in an external style sheet, or in a browser (a default value).
所以写在HTML元素中的样式有最高的优先权(写在HTML元素内的),它会替代其他形式的样式.

CSS 语法
w3pop.com / 2006-09-21

CSS 介绍 使用 CSS

Syntax
语法

The CSS syntax is made up of three parts: a selector, a property and a value:
CSS的语法由三部分组成: 一个选择器,一个属性和一个值:

selector {property: value}

The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colon, and surrounded by curly braces:
选择器是你希望去定义的HTML元素/标签,改变属性,每个属性可以有一个值,属性和值由冒号区分开外面用大括号括起来:

body {color: black}

Note: If  the value is multiple words, put quotes around the value:
注意:如果值为多个单词则用双引号括起来:

p {font-family: "sans serif"}

Note: If you wish to specify more than one property, you must separate each property with a semicolon. The example below shows how to define a center aligned paragraph, with a red text color:
注意:如果你想指定多个属性,你就必须将每个属性用分号隔开,下面的例子就演示了怎样定义居中红色文字段落:

p {text-align:center;color:red}

To make the style definitions more readable, you can describe one property on each line, like this:
为了让样式定义更有可读性,你可以像这样分行描述属性:

p
{
text-align: center;
color: black;
font-family: arial
}


Grouping
组合

You can group selectors. Separate each selector with a comma. In the example below we have grouped all the header elements. All header elements will be displayed in green text color:
你可以将选择器组合。用逗号分隔每个选择器。下的例子将所有的标题元素组合起来,它们的颜色都变为绿色:

h1,h2,h3,h4,h5,h6 
{
color: green
}


The class Selector
选择器类

With the class selector you can define different styles for the same type of HTML element.
用选择器类你可以将同一类型的HTML元素定义出不同的样式。

Say that you would like to have two types of paragraphs in your document: one right-aligned paragraph, and one center-aligned paragraph. Here is how you can do it with styles:
比如你想在你的文档中有两种不同样式的段落:一种是右对齐,另外是居中的。这就告诉你该怎么用样式来做到这点:

p.right {text-align: right}
p.center {text-align: center}

You have to use the class attribute in your HTML document:
你必须在你的HTML文档中使用类属性(才能显示出效果):

<p class="right">
This paragraph will be right-aligned.
</p>
<p class="center">
This paragraph will be center-aligned.
</p>

Note: Only one class attribute can be specified per HTML element! The example below is wrong:
注意:每个HTML元素只能有一个类属性,下面的例子是错误的:

<p class="right" class="center">
This is a paragraph.
</p>

You can also omit the tag name in the selector to define a style that will be used by all HTML elements that have a certain class. In the example below, all HTML elements with class="center" will be center-aligned:
你也可以省略标签名称直接去定义,这样就可以在所有的HTML元素中使用了。下面的例子就能让所有HTML中所有带class="center"的元素居中文字:

.center {text-align: center}

In the code below both the h1 element and the p element have class="center". This means that both elements will follow the rules in the ".center" selector:  
下面的代码中H1和P元素都有class="center"。这就意味着这两个元素都将遵循选择器"center"的规则:

<h1 class="center">

This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>

 Do NOT start a class name with a number! It will not work in Mozilla/Firefox.
请不要用以数字开头为名称的类,在Mozilla/Firefox中不能正常运作。



The id Selector
id 选择器

You can also define styles for HTML elements with the id selector. The id selector is defined as a #.
你可以使用id选择器来定义HTML元素的样式。id选择器可用#来定义。

The style rule below will match the element that has an id attribute with a value of "green":
下面的样式规则对任何一个带有id属性值为"green"的元素都是匹配的

#green {color: green}

The style rule below will match the p element that has an id with a value of "para1":
下面的样式规则将匹配带有id属性值为"para1"的p元素

p#para1
{
text-align: center;
color: red
}

 Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.
和CLASS一样ID的名称的开头也不要使用数字,不然就无法在Mozilla/Firefox中正常运作了


CSS Comments
CSS 注释

Comments are used to explain your code, and may help you when you edit the source code at a later date. A comment will be ignored by browsers. A CSS comment begins with "/*", and ends with "*/", like this:
注释可用来解释你的代码,起码在以后你需要重新编辑这块代码的时候这些注释会给你些帮助。浏览器会忽略这些注释。CSS注释的开头为"/*",结束符号为"*/",就像这样:

/* 这就是一句注释 */
p
{
text-align: center;
/* 这是另一条注释 */
color: black;
font-family: arial
}

使用 CSS
w3pop.com / 2006-09-21

CSS 语法 CSS 背景

Examples
两个例子


How to Insert a Style Sheet
怎样插入样式表

When a browser reads a style sheet, it will format the document according to it. There are three ways of inserting a style sheet:
当浏览器阅读样式表,它会依据它(样式表)来格式化文档。有三种方法可以插入样式表:

External Style Sheet
外部样式表

An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section:
使用外部样式表是使样式应用于多张网页的理想方法。通过这个方法你只需改动一个文件就能改变整个网站的外观。使用<link>标签让每个页面都连接到样式表。<link>标签在head区域使用:

<head>
<link rel="stylesheet" type="text/css"

href="mystyle.css" />
</head>

The browser will read the style definitions from the file mystyle.css, and format the document according to it.
浏览器将从mystyle.css文件中读取样式定义信息,并依据它来格式化文档

An external style sheet can be written in any text editor. The file should not contain any html tags. Your style sheet should be saved with a .css extension. An example of a style sheet file is shown below:
外部样式表可以用任何一个文字编辑器来书写。文件不应该包含任何的html标签。并保存为一个后缀为.css的文件.下面是一个样式表文件的内容:

hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}

 Do NOT leave spaces between the property value and the units! If you use "margin-left: 20 px" instead of "margin-left: 20px" it will only work properly in IE6 but it will not work in Mozilla/Firefox or Netscape.
请不要在属性值和其单位间加上空格!如果你用"margin-left: 20 px“来代替"margin-left: 20px"的话,这也许在IE6中能正常工作,但在Mozilla/Firefox或Netscape中就无法正常显示了。

Internal Style Sheet
内嵌样式表

An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section by using the <style> tag, like this:
一份内嵌样式表应该在当有单独文档有特殊样式的时候使用。使用<style>标签在head区域内定义样式,像这样:

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

hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head>

The browser will now read the style definitions, and format the document according to it.
浏览器将立即读取样式定义,并依据它来格式化文档。

Note: A browser normally ignores unknown tags. This means that an old browser that does not support styles, will ignore the <style> tag, but the content of the <style> tag will be displayed on the page. It is possible to prevent an old browser from displaying the content by hiding it in the HTML comment element: 
注意:浏览器一般会忽略未知的标签。这就意味着老的浏览器不能支持样式,会忽略<style>标签,但<style>里的内容会显示在页面上。在HTML注释元素中隐藏它可以来避免这类情况在老的浏览器中发生:

<head>
<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</style>
</head>

Inline Styles
行内样式

An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly, such as when a style is to be applied to a single occurrence of an element.
使用行内样式就失去了样式表的优势而将内容和形式相混淆了。一般这类方法在个别元素需要改变样式的时候使用。

To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph:
在相关的标签上用style属性来加入行内样式。样式属性可以包含任何CSS属性。链子中将展示怎样给一个段落加上左外补丁并将颜色改为sienna:

<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>


Multiple Style Sheets
多重样式表

If some properties have been set for the same selector in different style sheets, the values will be inherited from the more specific style sheet. 
如果一些属性被相同的选择器设置成不同的样式,值就会向更为具体的样式所继承(具体化)。

For example, an external style sheet has these properties for the h3 selector:
举个例子,一个外部样式表有这样的h3选择器属性:

h3 
{
color: red;
text-align: left;
font-size: 8pt
}

And an internal style sheet has these properties for the h3 selector:
同时有一个内嵌样式表有这样的h3选择器属性:

h3 
{
text-align: right;
font-size: 20pt
}

If the page with the internal style sheet also links to the external style sheet the properties for h3 will be:
如果页面在有内嵌样式表的同时又连接到外部样式表的话h3的属性将变为:

color: red; 
text-align: right;
font-size: 20pt

The color is inherited from the external style sheet and the text-alignment and the font-size is replaced by the internal style sheet.
颜色是继承了外部样式表而文字对齐和文字大小被内嵌的样式表所替换。

CSS 背景
w3pop.com / 2006-09-21

使用 CSS CSS 文字

The CSS background properties define the background effects of an element.
CSS的background属性可为元素定义背景效果。


实例

Set the background color
This example demonstrates how to set the background color for an element.
怎样为元素设置背景颜色

Set an image as the background
This example demonstrates how to set an image as the background
将图片设置为背景

How to repeat a background image
This example demonstrates how to repeat a background image.
如何重复背景图片

How to repeat a background image only vertically
This example demonstrates how to repeat a background image only vertically.
如何让背景图片垂直重复

How to repeat a background image only horizontally
This example demonstrates how to repeat a background image only horizontally.
如何让背景图片水平重复

How to place the background image
This example demonstrates how to place the image on the page.
如何将图片放在页面上

How to set a fixed background image
This example demonstrates how to set a fixed background image. The image will not scroll with the rest of the page.
怎样让背景图片固定在背景上,不跟随页面一起移动

All the background properties in one declaration
This example demonstrates how to use the shorthand property for setting all of the background properties in one declaration.
怎样使用一句声明就能设置所有与background属性有关的值


CSS Background Properties
CSS 背景属性

The CSS background properties allow you to control the background color of an element, set an image as the background, repeat a background image vertically or horizontally, and position an image on a page.
CSS背景属性允许你控制元素的背景颜色,设置一图片做为背景,垂直或水平的重复背景图片,和图片在页面上的位置。

Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.
浏览器支持: IE: Internet Explorer, F: Firefox, N: Netscape.

W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).
在W3C中的数字代表CSS的版本(CSS1或CSS2)

Property属性 Description描述 Values值 IE F N W3C
background A shorthand property for setting all background properties in one declaration
一个速记属性来用一个声明设置所有背景属性
background-color
background-image
background-repeat background-attachment background-position
4 1 6 1
background-attachment Sets whether a background image is fixed or scrolls with the rest of the page
设置背景图片为固定还是滚屏的
scroll
fixed
4 1 6 1
background-color Sets the background color of an element
为一元素设置背景颜色
color-rgb
color-hex
color-name
transparent
4 1 4 1
background-image Sets an image as the background
设置一图片做为背景
url
none
4 1 4 1
background-position Sets the starting position of a background image
设置背景图片的起始位置
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos
4 1 6 1
background-repeat Sets if/how a background image will be repeated
如果背景有重复图片的话就用这个设置
repeat
repeat-x
repeat-y
no-repeat
4 1 4 1

CSS 文字
w3pop.com / 2006-09-21

CSS 背景 CSS 字体

The CSS text properties define the appearance of text.
CSS文字属性可用来定义文字的外观


实例

Set the color of the text
This example demonstrates how to set the color of the text.
设置文字的颜色

Set the background-color of the text
This example demonstrates how to set the background-color of a part of the text.
设置文字背景色

Specify the space between characters
This example demonstrates how to increase or decrease the space between characters.
指定相邻字符的间隙

Align the text
This example demonstrates how to align the text.
对齐文字

Decorate the text
This example demonstrates how to add decoration to text.
文字修饰

Indent text
This example demonstrates how to indent the first line of a paragraph.
文字在段落中缩进

Control the letters in a text
This example demonstrates how to control the letters in a text.
控制文字中的字母


CSS Text Properties
CSS 文字属性

The CSS text properties allow you to control the appearance of text. It is possible to change the color of a text, increase or decrease the space between characters in a text, align a text, decorate a text, indent the first line in a text, and more.
CSS文字属性允许你控制文字的外观。这可以改变文字的颜色,增加或者缩短文字的间距,文字的对齐,装饰,第一行文字的缩进,还有其他...

Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.
浏览器支持: IE: Internet Explorer, F: Firefox, N: Netscape.

W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).
在W3C中的数字代表CSS的版本(CSS1或CSS2)

Property属性 Description描述 Values IE F N W3C
color Sets the color of a text
设置文字颜色
color 3 1 4 1
direction Sets the text direction
设置文字的书写方向
ltr
rtl
6 1 6 2
letter-spacing Increase or decrease the space between characters
字符间距
normal
length
4 1 6 1
text-align Aligns the text in an element
在一元素中怎么对齐文字(向左,向右..)
left
right
center
justify
4 1 4 1
text-decoration Adds decoration to text
添加文字修饰(下划线等等)
none
underline
overline
line-through
blink
4 1 4 1
text-indent Indents the first line of text in an element
首行文字缩进
length
%
4 1 4 1
text-shadow   none
color
length
       
text-transform Controls the letters in an element
控制字母(大写,小写。。)
none
capitalize
uppercase
lowercase
4 1 4 1
unicode-bidi   normal
embed
bidi-override
5     2
white-space Sets how white space inside an element is handled
设置怎样给一元素控件留白
normal
pre
nowrap
5 1 4 1
word-spacing Increase or decrease the space between words
单词间距
normal
length
6 1 6 1

CSS 字体
w3pop.com / 2006-09-21

CSS 文字 CSS 边框

The CSS font properties define the font in text.
CSS字体属性可定义文字所使用的字体。


实例

Set the font of a text
This example demonstrates how to set a font of a text.
设置一文字的字体

Set the size of the font
This example demonstrates how to set the size of a font.
设置字体的大小

Set the style of the font
This example demonstrates how to set the style of a font.
设置字体的样式

Set the variant of the font
This example demonstrates how to set the variant of a font.
设置字体的形态

Set the boldness of the font
This example demonstrates how to set the boldness of a font.
设置字体粗细

All the font properties in one declaration
This example demonstrates how to use the shorthand property for setting all of the font properties in one declaration.
一个声明搞定所有字体属性


CSS Font Properties
CSS 字体属性

The CSS font properties allow you to change the font family, boldness, size, and the style of a text.
CSS字体属性允许你改变字体以及它的粗细,大小和样式。

Note: In CSS1 fonts are identified by a font name. If a browser does not support the specified font, it will use a default font.
注意:在CSS1中字体由字体名称识别。如果浏览器不支持指定的字体,它将用默认字体替换。

Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.
浏览器支持:IE: Internet Explorer, F: Firefox, N: Netscape.

W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).
W3C:里面的数字代表CSS版本号

Property属性 Description描述 Values值 IE F N W3C
font
A shorthand property for setting all of the properties for a font in one declaration
快速设置所有字体属性的声明
font-style
font-variant
font-weight
font-size/line-height
font-family
caption
icon
menu
message-box
small-caption
status-bar
4 1 4 1
font-family
A prioritized list of font family names and/or generic family names for an element
一份为元素准备的字体系列优先列表
family-name
generic-family
3 1 4 1
font-size
Sets the size of a font
设置字体大小
xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%
3 1 4 1
font-size-adjust Specifies an aspect value for an element that will preserve the x-height of the first-choice font
指定首选字体x高度
none
number
- - - 2
font-stretch Condenses or expands the current font-family
当前字体系列的合并或扩展
normal
wider
narrower
ultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded
- - - 2
font-style
Sets the style of the font
设置字体样式
normal
italic
oblique
4 1 4 1
font-variant
Displays text in a small-caps font or a normal font
让字体显示为小号或正常
normal
small-caps
4 1 6 1
font-weight
Sets the weight of a font
设置字体的粗细
normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
4 1 4 1

CSS 边框
w3pop.com / 2006-09-21

CSS 字体 CSS 边距

The CSS border properties define the borders around an element.
CSS边框属性用来定义环绕元素的边框(样式)


Examples
例 子

Set the style of the four borders
This example demonstrates how to set the style of the four borders.
设置四个边框的样式

Set different borders on each side
This example demonstrates how to set different borders on each side of the element.
分别设置每个边框

Set the color of the four borders
This example demonstrates how to set the color of the four borders. It can have from one to four colors.
四边框颜色设置

Set the width of the bottom border
This example demonstrates how to set the width of the bottom border.
设置底部边框宽度

Set the width of the left border
This example demonstrates how to set the width of the left border.
设置左边框宽度

Set the width of the right border
This example demonstrates how to set the width of the right border.
设置右边框宽度

Set the width of the top border
This example demonstrates how to set the width of the top border.
设置顶部边框宽度

All the bottom border properties in one declaration
This example demonstrates a shorthand property for setting all of the properties for the bottom border in one declaration.
在一次声明后设置所有边框的属性

All the left border properties in one declaration
This example demonstrates a shorthand property for setting all of the properties for the left border in one declaration.
在一次声明后设置左边框所有的属性

All the right border properties in one declaration
This example demonstrates a shorthand property for setting all of the properties for the right border in one declaration.
在一次声明后设置右边框所有的属性

All the top border properties in one declaration
This example demonstrates a shorthand property for setting all of the properties for the top border in one declaration.
在一次声明后设置顶部边框所有的属性

All the width of the border properties in one declaration
This example demonstrates a shorthand property for setting the width of the four borders in one declaration, can have from one to four values.
在一次声明后设置所有边框宽度的属性

All the border properties in one declaration
This example demonstrates a shorthand property for setting all of the properties for the four borders in one declaration, can have from one to three values.
在一次声明后设置所有边框所有的属性


CSS Border Properties
CSS 边框属性

The CSS border properties allow you to specify the style and color of an element's border. In HTML we use tables to create borders around a text, but with the CSS border properties we can create borders with nice effects, and it can be applied to any element.
CSS边框属性可以让你指定元素边框的样式和颜色。HTML中我们可以用表格来建立文字的边框,但使用CSS边框属性能让我们建立更好看的效果而且它可以支持任何元素。

Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.
浏览器支持:IE: Internet Explorer, F: Firefox, N: Netscape.

W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).
W3C:里面的数字代表CSS版本号

Property属性 Description描述 Values值 IE F N W3C
border A shorthand property for setting all of the properties for the four borders in one declaration
设置四边属性的快速声明
border-width
border-style
border-color
4 1 4 1
border-bottom A shorthand property for setting all of the properties for the bottom border in one declaration
设置底部边框属性的快速声明
border-bottom-width
border-style
border-color
4 1 6 1
border-bottom-color Sets the color of the bottom border
设置底部边框颜色
border-color 4 1 6 2
border-bottom-style Sets the style of the bottom border
设置低部边框样式
border-style 4 1 6 2
border-bottom-width Sets the width of the bottom border
设置底部边框宽度
thin
medium
thick
length
4 1 4 1
border-color Sets the color of the four borders, can have from one to four colors
设置四边颜色
color 4 1 6 1
border-left A shorthand property for setting all of the properties for the left border in one declaration
设置左边框属性
border-left-width
border-style
border-color
4 1 6 1
border-left-color Sets the color of the left border
设置左边框颜色
border-color 4 1 6 2
border-left-style Sets the style of the left border
设置左边框样式
border-style 4 1 6 2
border-left-width Sets the width of the left border
设置左边框宽度
thin
medium
thick
length
4 1 4 1
border-right A shorthand property for setting all of the properties for the right border in one declaration
设置右边框所有属性
border-right-width
border-style
border-color
4 1 6 1
border-right-color Sets the color of the right border
设置右边框颜色
border-color 4 1 6 2
border-right-style Sets the style of the right border
设置右边框样式
border-style 4 1 6 2
border-right-width Sets the width of the right border
设置右边框宽度
thin
medium
thick
length
4 1 4 1
border-style Sets the style of the four borders, can have from one to four styles
设置四边样式
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
4 1 6 1
border-top A shorthand property for setting all of the properties for the top border in one declaration
设置顶边所有属性
border-top-width
border-style
border-color
4 1 6 1
border-top-color Sets the color of the top border
设置顶边颜色
border-color 4 1 6 2
border-top-style Sets the style of the top border
设置顶边样式
border-style 4 1 6 2
border-top-width Sets the width of the top border
设置顶边宽度
thin
medium
thick
length
4 1 4 1
border-width A shorthand property for setting the width of the four borders in one declaration, can have from one to four values
设置四边宽度
thin
medium
thick
length
4 1 4 1

CSS 边距
w3pop.com / 2006-09-21

CSS 边框 CSS 填充

The CSS margin properties define the space around elements.
CSS的边距属性定义元素周围的空间范围


Examples

Set the left margin of a text
This example demonstrates how to set the left margin of a text.
设置文字左边距

Set the right margin of a text
This example demonstrates how to set the right margin of a text.
设置文字右边距

Set the top margin of a text
This example demonstrates how to set the top margin of a text.
设置文字顶边距

Set the bottom margin of a text
This example demonstrates how to set the bottom margin of a text.
底部边距

All the margin properties in one declaration
This example demonstrates how to set a shorthand property for setting all of the margin properties in one declaration.
快速定义四边边距


CSS Margin Properties
CSS 边距属性

The CSS margin properties define the space around elements. It is possible to use negative values to overlap content. The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used to change all of the margins at once.
CSS边距定义元素周围的空间范围。它可让内容重叠。也可用分离的属性分别对上,下,左,右进行样式改变。用margin属性可以快速的设置所有边距。

Note: Netscape and IE give the body tag a default margin of 8px. Opera does not! Instead, Opera applies a default padding of 8px, so if one wants to adjust the margin for an entire page and have it display correctly in Opera, the body padding must be set as well!
注意: 网景和IE默认给body标签加上了8px的边距。OPERA就没有这样的情况,相反的,OPERA有个默认的8px填充,所以要让页面在几个不同主流浏览器上的效果都相同就需要将属性设置妥当!

Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.
浏览器支持:IE: Internet Explorer, F: Firefox, N: Netscape

W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).
W3C:里面的数字代表CSS版本号

Property属性 Description描述 Values值 IE F N W3C
margin A shorthand property for setting the margin properties in one declaration
快速设置各边距属性
margin-top
margin-right
margin-bottom
margin-left
4 1 4 1

margin-bottom

Sets the bottom margin of an element
设置底部边距
auto
length
%
4 1 4 1

margin-left

Sets the left margin of an element
设置左部边距
auto
length
%
3 1 4 1

margin-right

Sets the right margin of an element
设置右部边距
auto
length
%
3 1 4 1
margin-top Sets the top margin of an element
设置上部边距
auto
length
%
3 1 4 1

CSS 填充
w3pop.com / 2006-09-21

CSS 边距 CSS 列表

The CSS padding properties define the space between the element border and the element content.
CSS填充属性定元素边框到内部内容间的距离


Examples

Set the left padding
This example demonstrates how to set the left padding of a tablecell.
设置左填充

Set the right padding
This example demonstrates how to set the right padding of a tablecell.
设置右填充

Set the top padding
This example demonstrates how to set the top padding of a tablecell.
设置上填充

Set the bottom padding
This example demonstrates how to set the bottom padding of a tablecell.
设置底部填充

All the padding properties in one declaration
This example demonstrates a shorthand property for setting all of the padding properties in one declaration, can have from one to four values.
快速设置所有填充属性


CSS Padding Properties
CSS填充属性

The CSS padding properties define the space between the element border and the element content. Negative values are not allowed. The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property is also created to control multiple sides at once.
可用padding属性快速设置各方向填充的属性

Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.
浏览器支持:IE: Internet Explorer, F: Firefox, N: Netscape

W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).
W3C:里面的数字代表CSS版本号

Property属性 Description描述 Values值 IE F N W3C
padding A shorthand property for setting all of  the padding properties in one declaration
一种可针对所有填充属性进行一次声明的速记属性
padding-top
padding-right
padding-bottom
padding-left
4 1 4 1

padding-bottom

Sets the bottom padding of an element
设置元素的底填充
length
%
4 1 4 1

padding-left

Sets the left padding of an element
设置元素的左填充
length
%
4 1 4 1

padding-right

Sets the right padding of an element
设置元素的右填充
length
%
4 1 4 1
padding-top Sets the top padding of an element
设置元素的顶部填充
length
%
4 1 4 1

CSS 列表
w3pop.com / 2006-09-21

CSS 填充 CSS 尺寸

The CSS list properties allow you to place the list-item marker, change between different list-item markers, or set an image as the list-item marker.
CSS列表属性允许你来安置列表项标记,改变标记的样子或者将图片变为列表项的标记


Examples

The different list-item markers in unordered lists
This example demonstrates the different list-item markers in CSS.
无序列表不同样子的列表标记

The different list-item markers in ordered lists
This example demonstrates the different list-item markers in CSS.
有序列表不同样子的列表标记

Set an image as the list-item marker
This example demonstrates how to set an image as the list-item marker.
设置图片做为标记

Place the list-item marker
This example demonstrates where to place the list-item marker.
安置列表标记

All list properties in one declaration
This example demonstrates a shorthand property for setting all of the properties for a list in one declaration.
快速声明所有列表属性


CSS List Properties
CSS列表属性

The CSS list properties allow you to place the list-item marker, change between different list-item markers, or set an image as the list-item marker.
CSS列表属性允许你安置列表标记,改变列表标记的样子或设置一图片做列表的标记

Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.
浏览器支持:IE: Internet Explorer, F: Firefox, N: Netscape

W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).
W3C:里面的数字代表CSS版本号

Property Description Values IE F N W3C
list-style A shorthand property for setting all of the properties for a list in one declaration
一种可以用一句生命设置所有列表属性的快速属性
list-style-type
list-style-position
list-style-image
4 1 6 1
list-style-image Sets an image as the list-item marker
设置列表项目标记用图标表示
none
url
4 1 6 1
list-style-position Sets where the list-item marker is placed in the list
设置列表项目标志的位置
inside
outside
4 1 6 1
list-style-type Sets the type of the list-item marker
设置列表项目标志的类型
none
disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha 
4 1 4 1
marker-offset   auto
length
  1 7 2

CSS 尺寸
w3pop.com / 2006-09-21

CSS 列表 CSS 类别

The CSS dimension properties allow you to control the height and width of an element. It also allows you to increase the space between two lines.
CSS尺寸属性允许你控制元素的高度和宽度,还允许你增加两行的间距


Examples

Increase the space between lines
This example demonstrates how to increase the space between the lines.
增加两行的间距


CSS Dimension Properties
CSS尺寸属性

The CSS dimension properties allow you to control the height and width of an element. It also allows you to increase the space between two lines.
同上的意思

Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.
浏览器支持:IE: Internet Explorer, F: Firefox, N: Netscape

W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).
W3C:里面的数字代表CSS版本号

属性 描述 IE F N W3C
height Sets the height of an element
设置元素的高度
auto
length
%
4 1 6 1
line-height Sets the distance between lines
设置两行间的距离(行高)
normal
number
length
%
4 1 4 1
max-height Sets the maximum height of an element
设置元素的最大高度
none
length
%
- 1 6 2
max-width Sets the maximum width of an element
设置元素的最大宽度
none
length
%
- 1 6 2
min-height Sets the minimum height of an element
设置元素的最小高度
length
%
- 1 6 2
min-width Sets the minimum width of an element
设置元素的最小宽度
length
%
- 1 6 2
width Sets the width of an element
设置元素的宽度
auto
%
length
  
4 1 4 1

CSS 类别
w3pop.com / 2006-09-21

CSS 尺寸 CSS 定位

The CSS classification properties allow you to specify how and where to display an element.
CSS分类属性允许你指定元素怎样显示并在哪显示。


实例

How to display an element
This example demonstrates how to display an element.
怎样显示一元素

A simple use of the float property
Let an image float to the right in a paragraph.
一个简单的浮动属性

An image with border and margins that floats to the right in a paragraph
Let an image float to the right in a paragraph. Add border and margins to the image.
一个带边框和边距的图片浮动到一个段落的右边

An image with a caption that floats to the right
Let an image with a caption float to the right.
带说明的图片浮动到右边

Let the first letter of a paragraph float to the left
Let the first letter of a paragraph float to the left and style the letter.
让一段落的第一个字符浮动到左边

Creating a horizontal menu
Use float with a list of hyperlinks to create a horizontal menu.
建立一水平菜单

Creating a homepage without tables
Use float to create a homepage with a header, footer, left content and main content.
使用float来建立一个带有标题,脚标,左内容和主内容的首页

Position:relative
This example demonstrates how to position an element relative to its normal position.
样式让元素相对于它的原始位置来进行相对定位

Position:absolute
This example demonstrates how to position an element using an absolute value.
如何使用绝对值来定位一个元素

How to make an element invisible
This example demonstrates how to make an element invisible. Do you want the element to show or not?
怎样使一元素不可见。

Change the cursor
This example demonstrates how to change the cursor.
如何改变游标的样子


CSS Classification Properties
CSS类别属性

The CSS classification properties allow you to control how to display an element, set where an image will appear in another element, position an element relative to its normal position, position an element using an absolute value, and how to control the visibility of an element.
CSS类别属性允许你控制元素的显示效果,设置图象将在显示在另一元素的哪个位置,相对于元素正常位置的定位,以绝对值来定位一元素,并控制元素的可见性。

Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.
浏览器支持:IE: Internet Explorer, F: Firefox, N: Netscape.

W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).
W3C:里面的数字代表CSS版本号

属性 描述 IE F N W3C
clear Sets the sides of an element where other floating elements are not allowed
设置一元素的两边都不允许有其他元素进行浮动
left
right
both
none
4 1 4 1
cursor Specifies the type of cursor to be displayed
指定游标所显示的类型
url
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
4 1 6 2
display Sets how/if an element is displayed
设置元素(是否/怎样)显示
none
inline
block
list-item
run-in
compact
marker
table
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption
4 1 4 1
float Sets where an image or a text will appear in another element
设置在另一元素里的图片或是文字将在哪个位置显示
left
right
none
4 1 4 1
position Places an element in a static, relative, absolute or fixed position
将元素以static, relative, absolute或是固定的方式进行定位
static
relative
absolute
fixed
4 1 4 2
visibility Sets if an element should be visible or invisible
设置元素显示或是不显示
visible
hidden
collapse
4 1 6 2

CSS 定位
w3pop.com / 2006-09-21

CSS 类别 CSS 伪类

The CSS positioning properties allows you to position an element.
使用CSS定位属性可以让你定义元素的位置


实例

Position:relative
This example demonstrates how to position an element relative to its normal position.
如何让一元素相对于原始位置进行相对定位

Position:absolute
This example demonstrates how to position an element using an absolute value.
如何使用绝对值来定位元素

Set the shape of an element
This example demonstrates how to set the shape of an element. The element is clipped into this shape, and displayed.
何如设置元素的形状,并以这个形状显示

Overflow
This example demonstrates how to set the overflow property to specify what should happen when an element's content is too big to fit in a specified area.
当元素的内容超过了指定的范围,overflow属性就可以指定应该以怎样的形式来处理

Vertical align an image
This example demonstrates how to vertical align an image in a text.
如何垂直对齐一张图片

Z-index
Z-index can be used to place an element "behind" another element.
Z-index可以让一元素放到另一元素的"后面"

Z-index
The elements in the example above have now changed their Z-index.
上面例子中的元素现在Z-index值已经发生的变化


CSS Positioning Properties
CSS定位属性

The CSS positioning properties allow you to specify the left, right, top, and bottom position of an element. It also allows you to set the shape of an element, place an element behind another, and to specify what should happen when an element's content is too big to fit in a specified area.
CSS定位属性允许你指定元素上下左右的位置。也允许你设置元素的形状,将元素安置在另一个元素的后面,并指定当元素内容超出范围后应该怎么做。

Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.
支持的浏览器:IE,F,N

W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).

属性 描述 IE F N W3C
bottom Sets how far the bottom edge of an element is above/below the bottom edge of the parent element
设置对象与其最近一个具有定位设置的父对象底边相关的位置
auto
%
length
5 1 6 2
clip Sets the shape of an element. The element is clipped into this shape, and displayed
设置对象的可视区域。
shape
auto
4 1 6 2
left Sets how far the left edge of an element is to the right/left of the left edge of the parent element
设置对象与其最近一个具有定位设置的父对象左边相关的位置
auto
%
length
4 1 4 2
overflow
Sets what happens if the content of an element overflow its area
设置当对象的内容超过其指定高度及宽度时如何管理内容
visible
hidden
scroll
auto
4 1 6 2
position Places an element in a static, relative, absolute or fixed position
决定元素的定位方式
static
relative
absolute
fixed
4 1 4 2
right Sets how far the right edge of an element is to the left/right of the right edge of the parent element
设置对象与其最近一个具有定位设置的父对象右边相关的位置
auto
%
length
5 1 6 2
top Sets how far the top edge of an element is above/below the top edge of the parent element
置对象与其最近一个具有定位设置的父对象顶边相关的位置
auto
%
length
4 1 4 2
vertical-align Sets the vertical alignment of an element
设置元素垂直对齐方式
baseline
sub
super
top
text-top
middle
bottom
text-bottom
length
%
4 1 4 1
z-index Sets the stack order of an element
设置对象的层叠顺序
auto
number
4 1 6 2

CSS 伪类
w3pop.com / 2006-09-21

CSS 定位 CSS 伪元素

CSS pseudo-classes are used to add special effects to some selectors.
CSS伪类可用来给一些选择器加上特殊效果。


实例

Hyperlink
This example demonstrates how to add different colors to a hyperlink in a document.
如何在文档内给超级连接加上不同的颜色

Hyperlink 2
This example demonstrates how to add other styles to hyperlinks.
如何给超级连接加上其他样式

:first-child (不能在IE中运行)
This example demonstrates the use of the :first-child pseudo-class.
演示  :first-child伪类的用法

:lang (不能在IE中运行)
This example demonstrates the use of the :lang pseudo-class.
演示  :lang伪类的使用方法


语法

The syntax of pseudo-classes:
伪类语法:

selector:pseudo-class {property: value}

CSS classes can also be used with pseudo-classes:
类也可以使用伪类:

selector.class:pseudo-class {property: value}


Anchor Pseudo-classes
锚点伪类

A link that is active, visited, unvisited, or when you mouse over a link can all be displayed in different ways in a CSS-supporting browser:
当一个连接处于 活动,被访问,未访问或是当你鼠标移动到上面的时候都可以给它以不同的方式来表现,前提是浏览器支持CSS:

a:link {color: #FF0000}     /* unvisited link */
a:visited {color: #00FF00}  /* visited link */
a:hover {color: #FF00FF}   /* mouse over link */
a:active {color: #0000FF}   /* selected link */

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!
注意 a:hover 必须在a:link和 a:visited后出现,要有顺序才能正常显示效果!

Note: a:active MUST come after a:hover in the CSS definition in order to be effective!!
注意: CSS中a:active必须出现在a:hover定义后才能有效果!

Note: Pseudo-class names are not case-sensitive.
注意:伪类名称不区分大小写


Pseudo-classes and CSS Classes
伪类和CSS类

Pseudo-classes can be combined with CSS classes: 
伪类可以与CSS类组合使用:

a.red:visited {color: #FF0000}
<a class="red" href="css_syntax.asp">CSS Syntax</a>

If the link in the example above has been visited, it will be displayed in red.
如果上面的连接已经被访问过了,它就会显示为红色


CSS2 - The :first-child Pseudo-class
CSS2 中:first-child伪类

The :first-child pseudo-class matches a specified element that is the first child of another element.
:first-child伪类会匹配指定元素的子元素

In this example, the selector matches any p element that is the first child of a div element, and indents the first paragraph inside a div element:
在这个例子中,选择器匹配任何一个在DIV元素中第一个P子元素,而且它的首个段落会缩进:

div > p:first-child
{
text-indent:25px
}

This selector will match the first paragraph inside the div in the following HTML:
选择器会匹配下面HTML中DIV里第一个段落:

<div>
<p>
First paragraph in div.
This paragraph will be indented.
</p>
<p>
Second paragraph in div.
This paragraph will not be indented.
</p>
</div>

but it will not match the paragraph in this HTML:
但它就无法在这个HTML中匹配段落了:

<div>
<h1>Header</h1>
<p>
The first paragraph inside the div.
This paragraph will not be indented.
</p>
</div>

In this example, the selector matches any em element that is the first child of a p element, and sets the font-weight to bold for the first em inside a p element:
在这个例子中选择器会与任何一个P元素的第一子em元素进行匹配,并且设置P元素内的第一个em为粗体:

p:first-child em
{
font-weight:bold
}

For example, the em in the HTML below is the first child of the paragraph:
举个例子,下面HTML中的em就为段落的第一子元素:

<p>I am a <em>strong</em> man.</p>

In this example, the selector matches any a element that is the first child of any element, and sets the text-decoration to none:
在这个例子中,选择器将与任何一个以a为第一子元素的元素进行匹配,并且没有文字修饰:

a:first-child
{
text-decoration:none
}

For example, the first a in the HTML below is the first child of the paragraph and will not be underlined. But the second a in the paragraph is not the first child of the paragraph and will be underlined:
举个例子,下面HTML中第一个连接就没有下横线显示,但第二个连接就有:

<p>
Visit <a href="http://www.w3schools.com">W3Schools</a>

and learn CSS!
Visit <a href="http://www.w3schools.com">W3Schools</a>
and learn HTML!
</p>


CSS2 - The :lang Pseudo-class
CSS2 :lang伪类

The :lang pseudo-class allows you to define special rules for different languages. In the example below, the :lang class defines the type of quotation marks for q elements with a lang attribute with a value of "no":
:lang伪类允许定义不同语言的特殊规则。在下面的例子里:lang类通过一个lang属性值为"no"定义了q元素的引号类型:

<html>
<head>
<style type="text/css">
q:lang(no)
{
quotes: "~" "~"
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q>
Some text.</p>
</body>
</html>


Pseudo-classes
伪类

浏览器支持: IE: Internet Explorer, F: Firefox, N: Netscape.

W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).

伪类 意图 IE F N W3C
:active Adds special style to an activated element
指定活动元素的样式
4 1 8 1
:focus Adds special style to an element while the element has focus
为焦点元素加上指定样式
- - - 2
:hover Adds special style to an element when you mouse over  it
指定当你的鼠标移到元素上时所要表现的样式
4 1 7 1
:link Adds special style to an unvisited link
连接在未被访问前的样式
3 1 4 1
:visited Adds special style to a visited link
在其链接地址已被访问过时的样式
3 1 4 1
:first-child Adds special style to an element that is the first child of some other element
第一个子对象的样式
  1 7 2
:lang Allows the author to specify a language to use in a specified element
设置元素使用特殊语言的内容的样式。
  1 8 2

CSS 伪元素
w3pop.com / 2006-09-21

CSS 伪类 CSS2 Media类型

CSS pseudo-elements are used to add special effects to some selectors.
CSS的伪元素可用来给一些选择器加上特殊的效果。


实例

Make the first letter special
This example demonstrates how to add a special effect to the first letter of a text.
如何给文字的首个字加上特殊效果

Make the first line special
This example demonstrates how to add a special effect to the first line of a text.
如何给文字的第一行加上特殊效果


语法

The syntax of pseudo-elements:
伪元素的语法为:

selector:pseudo-element {property: value}

CSS classes can also be used with pseudo-elements:
CSS类也可以使用伪元素:

selector.class:pseudo-element {property: value}


The :first-line Pseudo-element
:first-line伪元素

The "first-line" pseudo-element is used to add special styles to the first line of the text in a selector:
一般这个伪元素使用在为文字首行添加特殊样式上:

p {font-size: 12pt}
p:first-line {color: #0000FF; font-variant: small-caps}
<p>Some text that ends up on two or more lines</p>

The output could be something like this:
输出的样子就是这样:

Some text that ends
up on two or more lines

In the example above the browser displays the first line formatted according to the "first-line" pseudo element. Where the browser breaks the line depends on the size of the browser window.
上面的例子中浏览器就会依据"first-line"伪元素将第一行格式化,浏览器的分行是根据它的窗口大小来定的。

Note: The "first-line" pseudo-element can only be used with block-level elements.
注意:"first-line"伪元素只可以通过block-level元素来使用

Note: The following properties apply to the "first-line" pseudo-element: 
以下属性适用"first-line"伪元素:

  • font 属性
  • color 属性
  • background 属性
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

The :first-letter Pseudo-element
:first-letter伪元素

The "first-letter" pseudo-element is used to add special style to the first letter of the text in a selector:
这个伪元素用在要为文字的第一字母添加特殊样式的时候:

p {font-size: 12pt}
p:first-letter {font-size: 200%; float: left}
<p>The first words of an article.</p>

The output could be something like this:
输出就成这个样子:

___
  |  he first 
  |  words of an
article.

Note: The "first-letter" pseudo-element can only be used with block-level elements.
注意:和"first-line"伪属性一样,"first-letter"也只有通过block-level元素才能使用

Note: The following properties apply to the "first-letter" pseudo- element: 
注意:以下属性适用于 "first-letter"伪元素:

  • font 属性
  • color 属性
  • background 属性
  • margin 属性
  • padding 属性
  • border 属性
  • text-decoration
  • vertical-align (only if 'float' is 'none')
  • text-transform
  • line-height
  • float
  • clear

Pseudo-elements and CSS Classes
伪元素和CSS类

Pseudo-elements can be combined with CSS classes: 
伪元素可以和CSS类混合使用:

p.article:first-letter {color: #FF0000}
<p class="article">A paragraph in an article</p>

The example above will make the first letter of all paragraphs with class="article" red.
以上的例子会让所有class="article"的段落首字母为红色。


Multiple Pseudo-elements
多重伪元素

Several pseudo-elements can be combined:
几个伪元素可以混合使用:

p {font-size: 12pt}
p:first-letter {color: #FF0000; font-size: 200%}
p:first-line {color: #0000FF}
<p>The first words of an article</p>

The output could be something like this:
输出就成这样:

___
  |  he first 
  |  words of an
article.

In the example above the first letter of the paragraph will be red with a font size of 24pt. The rest of the first line would be blue while the rest of the paragraph would be the default color.
上面的例子段落的首个字母会成为大小为24pt的红色字体,余下首行的部分会变为兰色,再余下的就是默认的颜色了。


CSS2 - The :before Pseudo-element
CSS2中的:before伪元素

The ":before" pseudo-element can be used to insert some content before an element.
":before"伪元素可以用来在一元素前插入一些内容

The style below will play a sound before each occurrence of a header one element.
下面的样式就会在每个标题元素前播放一段声音

h1:before
{
content: url(beep.wav)
}



CSS2 - The :after Pseudo-element
CSS2中的:after 伪元素

The ":after" pseudo-element can be used to insert some content after an element.
":after"伪元素用在给一元素后插入一些内容

The style below will play a sound after each occurrence of a header one element.
下面的样式就会在每个标题元素后播放一段声音

h1:after
{
content: url(beep.wav)
}



Pseudo-elements
伪元素

支持的浏览器: IE: Internet Explorer, F: Firefox, N: Netscape.

W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).
W3C:下表中“W3C”纵栏中的数字指明了支持该属性的CSS版本(CSS1或CSS2)。

伪元素 意图 IE F N W3C
:first-letter Adds special style to the first letter of a text
设置文字第一个字符的样式
5 1 8 1
:first-line Adds special style to the first line of a text
为文字的第一行加上特殊样式
5 1 8 1
:before Inserts some content before an element
在元素前插入一些内容
  1.5 8 2
:after Inserts some content after an element
在元素后插入一些内容
  1.5 8 2

CSS2 Media类型
w3pop.com / 2006-09-21

CSS 伪元素 CSS 摘要

Media Types allow you to specify how documents will be presented in different media. The document can be displayed differently on the screen, on the paper, with an aural browser, etc. 
Media Type可以让你的文档在不同的媒介上有不同的呈现形式,它们可以是显示器、纸张、发声浏览器等等。


Media Types
媒介类型

Some CSS properties are only designed for a certain media. For example the "voice-family" property is designed for aural user agents. Some other properties can be used for different media types. For example, the "font-size" property can be used for both screen and print media, but perhaps with different values. A document usually needs a larger font-size on a screen than on paper, and sans-serif fonts are easier to read on the screen, while serif fonts are easier to read on paper.
一些CSS属性只为某些媒介所设计。举例来说 "voice-family"属性就是为那些只能用听的用户(盲人)设计的。一些其他的属性可以使用在不同的媒介上,但可能得用不同的值(标准不一)。举例来说"font-size"属性既可在显示屏上也可以在打印媒体上使用,但或许得用不同的值。文档一般在显示屏上需要的字体要大于纸上,sans-serif 字体在显示屏幕上容易阅读,然而纸上使用seri字体更好些。


The @media Rule
@media 规则

The @media rule allows different style rules for different media in the same style sheet.
@media规则允许在同一样式表中为不同的媒介使用不同的样式规则

The style in the example below tells the browser to display a 14 pixels Verdana font on the screen. But if the page is printed, it will be in a 10 pixels Times font. Notice that the font-weight is set to bold, both on screen and on paper:
下面例子中的样式告诉浏览器在显示屏幕上使用14象素Verdana字体,但在打印时字体就变为10象素的Times。注意下,不管是在显示屏幕上还是在纸上字体都加粗:

<html>
<head>
<style>
@media screen
{
p.test {font-family:verdana,sans-serif; font-size:14px}
}

@media print
{
p.test {font-family:times,serif; font-size:10px}
}
@media screen,print
{
p.test {font-weight:bold}
}
</style>
</head>
<body>
....
</body>
</html>

See it yourself ! If you are using Mozilla/Firefox or IE 5+ and print this page, you will see that the paragraph under "Media Types" will be displayed in another font, and have a smaller font size than the rest of the text.
你自己来见证一下!如果你使用了Mozilla/Firefox 或 IE 5+的浏览器并打印这张页面,你就会看见在"Media Types"下面的段落会显示成另外种字体,而且比其余的字体都小。


Different Media Types
不同的媒介类型

Note: The media type names are not case-sensitive.
注意:媒体类型名称不区分大小写

Media Type 描述
all Used for all media type devices
可用在所有媒介设备上
aural Used for speech and sound synthesizers[发音]
braille Used for braille tactile feedback devices[触觉]
embossed Used for paged braille printers[盲人专用打印机]
handheld Used for small or handheld devices[移动]
print Used for printers[普通打印]
projection Used for projected presentations, like slides[幻灯片]
screen Used for computer screens[屏幕]
tty Used for media using a fixed-pitch character grid, like teletypes and terminals[电报]
tv Used for television-type devices[电视]

CSS 摘要
w3pop.com / 2006-09-21

CSS2 Media类型 CSS 实例

CSS 摘要

This tutorial has taught you how to create style sheets to control the style and layout of multiple web sites at once.
通过本章教程的学习你已经知道如何去建立样式表,让它来控制网站的样式和布局

You have learned how to use CSS to add backgrounds, format text, add and format borders, and specify padding and margins of elements.
你已经学习如何使用CSS来为页面加上背景,格式化文字,以及为元素加上边框,边距,填充等一系列的样式。

You have also learned how to position an element, control the visibility and size of an element, set the shape of an element, place an element behind another, and to add special effects to some selectors, like links.
你还学习了怎样去定位元素,控制它们的大小,形状和可见性,以及为一些选择器加上特殊的效果,比如连接:

For more information on CSS, please take a look at our CSS examples and our CSS reference.
如果要寻找更多有关CSS的信息,可以看看我们的CSS实例以及CSS参考


现在你已经了解CSS,下面呢?

The next step is to learn XHTML and JavaScript.
下一步是去学习XHTML和JS

XHTML

XHTML is the "new" HTML. The latest HTML recommendation is HTML 4.01. This is the last and final HTML version.
XHTML是"新一代"HTML。最新的HTML推荐标准是HTML4.01但同时它是HTML的最后一版本。

HTML will be replaced by XHTML, which is a stricter and cleaner version of HTML.
HTML将被XHTML所取代,XHTML将是更为严密和清晰的HTML版本

If you want to learn more about XHTML, please visit our XHTML tutorial.
如果你想要学习更多有关XHTML的知识,可以访问我们的XHTML教程

JavaScript

JavaScript can make your web site more dynamic.
使用JavaScript可以让你的站点更加具有交互

A static web site is nice when you just want to show flat content, but a dynamic web site can react to events and allow user interaction.
当你只是想展示一些直白的内容那么静态的页面非常理想,动态站点可以让用户产生互动

JavaScript is the most popular scripting language on the internet and it works with all major browsers.
JavaScript是非常流行的脚本揄扬,它可以在所有主流浏览器上运行

If you want to learn more about JavaScript, please visit our JavaScript tutorial.
想要学习更多有关JavaScript的知识,可以访问我们的JS教程

CSS 实例
w3pop.com / 2006-09-21

CSS 摘要 CSS2 参考资料

Background背景

Set the background color
 怎样为元素设置背景颜色
Set an image as the background
设置一张图片做为背景
How to repeat a background image
重复背景图片
How to repeat a background image only vertically
垂直重复背景图片
How to repeat a background image only horizontally
水平重复背景图片
How to place the background image
怎样放置背景图片(位置摆放)
A fixed background image (this image will not scroll with the rest of the page)
固定背景图片(不会滚动)
All the background properties in one declaration
背景属性一行解决(用一行文字定义背景属性)

Text文字

Set the color of the text
设置文字颜色
Specify the space between characters
指定字符间的距离
Align the text
对齐文字
Decorate the text
文字的修饰
Indent text
文字的缩进
Control the letters in a text
控制文字字符(大小写)

Font字体

Set the font of a text
设置文字的字体
Set the size of the font
设置文字的大小
Set the style of the font
设置文字的样式
Set the variant of the font
字体变形
Set the boldness of the font
设置文字的粗细
All the font properties in one declaration
所有文字的属性一行解决

Border边框

Set the style of the four borders
设置四边框的样式
Set different borders on each side
设置各边的边框
Set the color of the four borders
设置四边框的颜色
Set the width of the bottom border
设置底边框的宽
Set the width of the left border
设置左边框的宽
Set the width of the right border
设置右边框的宽
Set the width of the top border
设置上边框的宽
All the bottom border properties in one declaration
所有底边框的属性一行解决
All the left border properties in one declaration
左....
All the right border properties in one declaration
右.....
All the top border properties in one declaration
上.....
All the width of the border properties in one declaration
所有边框的宽度属性一行解决
All the border properties in one declaration
所有边框的属性一行解决

Margin外补丁(边距)

Set the left margin of a text
设置文字的左边距
Set the right margin of a text
右....
Set the top margin of a text
上....
Set the bottom margin of a text
下....
All the margin properties in one declaration
所有边距属性一行解决

Padding内补丁(填充)

Set the left padding of a tablecell
左单元格填充
Set the right padding of a tablecell
右...
Set the top padding of a tablecell
上...
Set the bottom padding of a tablecell
下...
All the padding properties in one declaration
所有填充属性一行解决

List列表

The different list-item markers in unordered lists
无序列表的不同项目标号
The different list-item markers in ordered lists
有序的...
Set an image as the list-item marker
设置一个图片做为标号
Place the list-item marker
放置标号
All list properties in one declaration
所有列表属性一行解决

Dimension维度

Increase the space between lines
增加两行间距

Classification分类

How to display an element?
怎样显示一个元素?
A simple use of the float property
一个简单的浮动属性使用
An image with border and margins that floats to the right in a paragraph
一个有着边框和边距的图象浮动到一个段落的右边
An image with a caption that floats to the right
一个带说明的图片浮动到右边
Let the first letter of a paragraph float to the left
让一个段落中首个字母浮动到左边
Creating a horizontal menu
建立水平菜单
Position an element relative to its normal position
将一个元素的相对定位到它的正常位置
Position an element with an absolute value
用一个绝对值来定位一个元素
How to make an element invisible
怎样让一个元素不可见
Change the cursor
改变鼠标样子

Positioning定位

Position an element relative to its normal position
相对定位
Position an element with an absolute value
绝对定位
Set the shape of an element
设置元素的大小
What should happen when an element's content is too big to fit in a specified area
当元素的内容超过一个指定的范围时会发生什么
Vertical alignment of an image
一个图片的垂直对齐
Place an element "behind" another element
将一个元素放到另一个元素的后面
Place an element "behind" another element 2
将一个元素放到另一个元素的后面2

Pseudo-classes伪类

Add different colors to a hyperlink
给超级链接加上不同的颜色
Add other styles to hyperlinks
给超级链接增加其他样式
The use of the :first-child pseudo-class
使用:first-child伪类
The use of the :lang pseudo-class
使用:lang伪类

Pseudo-elements伪元素

Make the first letter special in a text
让文字的第一个字母特殊化
Make the first line special in a text
让文字的第一行特殊化

CSS2 参考资料
w3pop.com / 2006-09-21

CSS 实例 CSS2 打印

The links in the "Property" column point to more useful information about the specific property.
在"属性"列中的连接可以提供更详尽的属性信息。

支持的浏览器: IE: Internet Explorer, F: Firefox, N: Netscape.

W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).
在W3C栏目下显示的数字为CSS版本(CSS1或CSS2)

Background

在线实例

属性 描述 IE F N W3C
background A shorthand property for setting all background properties in one declaration
 一个速记属性来用一个声明设置所有背景属性
background-color
background-image
background-repeat background-attachment background-position
4 1 6 1
background-attachment Sets whether a background image is fixed or scrolls with the rest of the page
 设置背景图片为固定还是滚屏的
scroll
fixed
4 1 6 1
background-color Sets the background color of an element
 为一元素设置背景颜色
color-rgb
color-hex
color-name
transparent
4 1 4 1
background-image Sets an image as the background
 设置一图片做为背景
url
none
4 1 4 1
background-position Sets the starting position of a background image
 设置背景图片的起始位置
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos
4 1 6 1
background-repeat Sets if/how a background image will be repeated
 如果背景有重复图片的话就用这个设置
repeat
repeat-x
repeat-y
no-repeat
4 1 4 1

Border

在线实例

属性 描述 IE F N W3C
border A shorthand property for setting all of the properties for the four borders in one declaration
 设置四边属性的快速声明
border-width
border-style
border-color
4 1 4 1
border-bottom A shorthand property for setting all of the properties for the bottom border in one declaration
 设置底部边框属性的快速声明
border-bottom-width
border-style
border-color
4 1 6 1
border-bottom-color Sets the color of the bottom border
 设置底部边框颜色
border-color 4 1 6 2
border-bottom-style Sets the style of the bottom border
 设置低部边框样式
border-style 4 1 6 2
border-bottom-width Sets the width of the bottom border
 设置底部边框宽度
thin
medium
thick
length
4 1 4 1
border-color Sets the color of the four borders, can have from one to four colors
 设置四边颜色
color 4 1 6 1
border-left A shorthand property for setting all of the properties for the left border in one declaration
 设置左边框属性
border-left-width
border-style
border-color
4 1 6 1
border-left-color Sets the color of the left border
 设置左边框颜色
border-color 4 1 6 2
border-left-style Sets the style of the left border
 设置左边框样式
border-style 4 1 6 2
border-left-width Sets the width of the left border
 设置左边框宽度
thin
medium
thick
length
4 1 4 1
border-right A shorthand property for setting all of the properties for the right border in one declaration
 设置右边框所有属性
border-right-width
border-style
border-color
4 1 6 1
border-right-color Sets the color of the right border
 设置右边框颜色
border-color 4 1 6 2
border-right-style Sets the style of the right border
 设置右边框样式
border-style 4 1 6 2
border-right-width Sets the width of the right border
 设置右边框宽度
thin
medium
thick
length
4 1 4 1
border-style Sets the style of the four borders, can have from one to four styles
 设置四边样式
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
4 1 6 1
border-top A shorthand property for setting all of the properties for the top border in one declaration
 设置顶边所有属性
border-top-width
border-style
border-color
4 1 6 1
border-top-color Sets the color of the top border
 设置顶边颜色
border-color 4 1 6 2
border-top-style Sets the style of the top border
 设置顶边样式
border-style 4 1 6 2
border-top-width Sets the width of the top border
 设置顶边宽度
thin
medium
thick
length
4 1 4 1
border-width A shorthand property for setting the width of the four borders in one declaration, can have from one to four values
 设置四边宽度
thin
medium
thick
length
4 1 4 1

Classification

在线实例

属性 描述 IE F N W3C
clear Sets the sides of an element where other floating elements are not allowed
 设置一元素的两边都不允许有其他元素进行浮动
left
right
both
none
4 1 4 1
cursor Specifies the type of cursor to be displayed
 指定游标所显示的类型
url
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
4 1 6 2
display Sets how/if an element is displayed
 设置元素(是否/怎样)显示
none
inline
block
list-item
run-in
compact
marker
table
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption
4 1 4 1
float Sets where an image or a text will appear in another element
 设置在另一元素里的图片或是文字将在哪个位置显示
left
right
none
4 1 4 1
position Places an element in a static, relative, absolute or fixed position
 将元素以static, relative, absolute或是固定的方式进行定位
static
relative
absolute
fixed
4 1 4 2
visibility Sets if an element should be visible or invisible
 设置元素显示或是不显示
visible
hidden
collapse
4 1 6 2

Dimension

在线实例

属性 描述 IE F N W3C
height Sets the height of an element
 设置元素的高度
auto
length
%
4 1 6 1
line-height Sets the distance between lines
 设置两行间的距离(行高)
normal
number
length
%
4 1 4 1
max-height Sets the maximum height of an element
 设置元素的最大高度
none
length
%
- 1 6 2
max-width Sets the maximum width of an element
 设置元素的最大宽度
none
length
%
- 1 6 2
min-height Sets the minimum height of an element
 设置元素的最小高度
length
%
- 1 6 2
min-width Sets the minimum width of an element
 设置元素的最小宽度
length
%
- 1 6 2
width Sets the width of an element
 设置元素的宽度
auto
%
length
  
4 1 4 1

Font

在线实例

属性 描述 IE F N W3C
font
A shorthand property for setting all of the properties for a font in one declaration
 快速设置所有字体属性的声明
font-style
font-variant
font-weight
font-size/line-height
font-family
caption
icon
menu
message-box
small-caption
status-bar
4 1 4 1
font-family
A prioritized list of font family names and/or generic family names for an element
 一份为元素准备的字体系列优先列表
family-name
generic-family
3 1 4 1
font-size
Sets the size of a font
 设置字体大小
xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%
3 1 4 1
font-size-adjust Specifies an aspect value for an element that will preserve the x-height of the first-choice font
 指定首选字体x高度
none
number
- - - 2
font-stretch Condenses or expands the current font-family
 当前字体系列的合并或扩展
normal
wider
narrower
ultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded
- - - 2
font-style
Sets the style of the font
 设置字体样式
normal
italic
oblique
4 1 4 1
font-variant
Displays text in a small-caps font or a normal font
 让字体显示为小号或正常
normal
small-caps
4 1 6 1
font-weight
Sets the weight of a font
 设置字体的粗细
normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
4 1 4 1

Generated Content

属性 描述 IE F N W3C
content Generates content in a document. Used with the :before and :after pseudo-elements
通过使用 :before和 :after 伪元素 生成文档里的内容
string
url
counter(name)
counter(name, list-style-type)
counters(name, string)
counters(name, string, list-style-type)
attr(X)
open-quote
close-quote
no-open-quote
no-close-quote
  1 6 2
counter-increment Sets how much the counter increments on each occurrence of a selector 
设定当一个选择符(selector)发生时计数器增加的值。
none
identifier number
      2
counter-reset Sets the value the counter is set to on each occurrence of a selector
将指定选择符(selector)的计数器复位
none
identifier number
      2
quotes Sets the type of quotation marks
设置引用标记类型
none
string string
- 1 6 2

List and Marker

在线实例

属性 描述 IE F N W3C
list-style A shorthand property for setting all of the properties for a list in one declaration
设置列表项目相关样式
list-style-type
list-style-position
list-style-image
4 1 6 1
list-style-image Sets an image as the list-item marker
设置列表项目标记用图标表示
none
url
4 1 6 1
list-style-position Sets where the list-item marker is placed in the list
设置列表项目标志的位置
inside
outside
4 1 6 1
list-style-type Sets the type of the list-item marker
设置列表项目标志的类型
none
disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha 
4 1 4 1
marker-offset   auto
length
  1 7 2

Margin

在线实例

属性 描述 IE F N W3C
margin A shorthand property for setting the margin properties in one declaration
 快速设置各边距属性
margin-top
margin-right
margin-bottom
margin-left
4 1 4 1

margin-bottom

Sets the bottom margin of an element
 设置底部边距
auto
length
%
4 1 4 1

margin-left

Sets the left margin of an element
 设置左部边距
auto
length
%
3 1 4 1

margin-right

Sets the right margin of an element
 设置右部边距
auto
length
%
3 1 4 1
margin-top Sets the top margin of an element
 设置上部边距
auto
length
%
3 1 4 1

Outlines

属性 描述 IE F N W3C
outline A shorthand property for setting all the outline properties in one declaration
设置所有线条轮廓
outline-color
outline-style
outline-width
- 1.5 - 2
outline-color Sets the color of the outline around an element
设置线条轮廓的颜色
color
invert
- 1.5 - 2
outline-style Sets the style of the outline around an element
设置线条轮廓的类型
none
dotted
dashed
solid
double
groove
ridge
inset
outset
- 1.5 - 2
outline-width Sets the width of the outline around an element
设置线条轮廓的宽度
thin
medium
thick
length
- 1.5 - 2

Padding

在线实例

属性 描述 IE F N W3C
padding A shorthand property for setting all of  the padding properties in one declaration
一种可针对所有填充属性进行一次声明的速记属性
padding-top
padding-right
padding-bottom
padding-left
4 1 4 1

padding-bottom

Sets the bottom padding of an element
 设置元素的底填充
length
%
4 1 4 1

padding-left

Sets the left padding of an element
 设置元素的左填充
length
%
4 1 4 1

padding-right

Sets the right padding of an element
 设置元素的右填充
length
%
4 1 4 1
padding-top Sets the top padding of an element
 设置元素的顶部填充
length
%
4 1 4 1

Positioning

在线实例

属性 描述 IE F N W3C
bottom Sets how far the bottom edge of an element is above/below the bottom edge of the parent element
 设置元素与其最近一个具有定位设置的父元素底边相关的位置
auto
%
length
5 1 6 2
clip Sets the shape of an element. The element is clipped into this shape, and displayed
 设置元素的可视区域。
shape
auto
4 1 6 2
left Sets how far the left edge of an element is to the right/left of the left edge of the parent element
 设置元素与其最近一个具有定位设置的父元素左边相关的位置
auto
%
length
4 1 4 2
overflow
Sets what happens if the content of an element overflow its area
 设置当对象的内容超过其指定高度及宽度时如何管理内容
visible
hidden
scroll
auto
4 1 6 2
position Places an element in a static, relative, absolute or fixed position
 决定元素的定位方式
static
relative
absolute
fixed
4 1 4 2
right Sets how far the right edge of an element is to the left/right of the right edge of the parent element
 设置对象与其最近一个具有定位设置的父对象右边相关的位置
auto
%
length
5 1 6 2
top Sets how far the top edge of an element is above/below the top edge of the parent element
 置对象与其最近一个具有定位设置的父对象顶边相关的位置
auto
%
length
4 1 4 2
vertical-align Sets the vertical alignment of an element
 设置元素垂直对齐方式
baseline
sub
super
top
text-top
middle
bottom
text-bottom
length
%
4 1 4 1
z-index Sets the stack order of an element
 设置对象的层叠顺序
auto
number
4 1 6 2

Table

属性 描述 IE F N W3C
border-collapse Sets the border model of a table
设置表格模型的边框
collapse
separate
5 1 7 2
border-spacing Sets the distance between the borders of adjacent cells (only for the "separated borders" model)
设置或检索当表格边框独立(例如当 border-collapse 属性等于 separate 时),行和单元格的边在横向和纵向上的间距。
length length - 1 6 2
caption-side Sets the position of the caption according to the table
设置或检索表格( table )的 caption 对象是在表格的那一边。它是和 caption 对象一起使用的属性。
top
bottom
left
right
- 1 6 2
empty-cells Sets whether cells with no visible content should have borders or not (only for the "separated borders" model) 
设置或检索当表格的单元格无内容时,是否显示该单元格的边框。
只有当表格行和列的边框独立(例如当 border-collapse 属性等于 separate )时此属性才起作用。
show
hide
- 1 6 2
table-layout Sets the algorithm used to lay out the table
设置或检索表格的布局算法。
auto
fixed
5 1 6 2

Text

在线实例

属性 描述 IE F N W3C
color Sets the color of a text
设置文字颜色
color 3 1 4 1
direction Sets the text direction
设置文字的书写方向
ltr
rtl
6 1 6 2
letter-spacing Increase or decrease the space between characters
字符间距
normal
length
4 1 6 1
text-align Aligns the text in an element
 在一元素中怎么对齐文字(向左,向右..)
left
right
center
justify
4 1 4 1
text-decoration Adds decoration to text
 添加文字修饰(下划线等等)
none
underline
overline
line-through
blink
4 1 4 1
text-indent Indents the first line of text in an element
 首行文字缩进
length
%
4 1 4 1
text-shadow   none
color
length
       
text-transform Controls the letters in an element
 控制字母(大写,小写。。)
none
capitalize
uppercase
lowercase
4 1 4 1
unicode-bidi   normal
embed
bidi-override
5     2
white-space Sets how white space inside an element is handled
 设置怎样给一元素控件留白
normal
pre
nowrap
5 1 4 1
word-spacing Increase or decrease the space between words
 单词间距
normal
length
6 1 6 1

Pseudo-classes

在线实例

伪类 意图 IE F N W3C
:active Adds special style to an activated element
 指定活动元素的样式
4 1 8 1
:focus Adds special style to an element while the element has focus
 为焦点元素加上指定样式
- - - 2
:hover Adds special style to an element when you mouse over  it
 指定当你的鼠标移到元素上时所要表现的样式
4 1 7 1
:link Adds special style to an unvisited link
 连接在未被访问前的样式
3 1 4 1
:visited Adds special style to a visited link
 在其链接地址已被访问过时的样式
3 1 4 1
:first-child Adds special style to an element that is the first child of some other element
 第一个子对象的样式
  1 7 2
:lang Allows the author to specify a language to use in a specified element
 设置元素使用特殊语言的内容的样式。
  1 8 2

Pseudo-elements

在线实例

伪元素 意图 IE F N W3C
:first-letter Adds special style to the first letter of a text
 设置文字第一个字符的样式
5 1 8 1
:first-line Adds special style to the first line of a text
 为文字的第一行加上特殊样式
5 1 8 1
:before Inserts some content before an element
 在元素前插入一些内容
  1.5 8 2
:after Inserts some content after an element
 在元素后插入一些内容
  1.5 8 2

CSS2 打印
w3pop.com / 2006-09-21

CSS2 参考资料 CSS2 Aural

Print 属性

Printing HTML documents has always been problematic. In CSS2 the print properties are added to make it easier to print from the Web.
打印HTML文档总是问题不断。在CSS2里加入了print属性使得打印WEB文档变的容易了些。


The links in the "Property" column point to more useful information about the specific property.
下面"属性"列中的连接有更多相关属性的有用信息

W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).
W3C:下表中“W3C”纵栏中的数字指明了支持该属性的CSS版本(CSS1或CSS2)。

属性 描述 W3C
orphans Sets the minimum number of lines for a paragraph that must be left at the bottom of a page
设置起码得有多少数量的段落行留在页面的底部
number 2
marks Sets what sort of marks should be rendered outside the page box
设置或检索什么样的标志是应该在页容器外边被给予
none
crop
cross
 
page Sets a page type to use when displaying an element
检索或指定显示对象容器时使用的页面类型
auto
identifier
2
page-break-after Sets the page-breaking behavior after an element
检索或设置对象后出现的页分割符
auto
always
avoid
left
right
2
page-break-before

Sets the page-breaking behavior before an element
检索或设置对象前出现的页分割符

auto
always
avoid
left
right
2
page-break-inside Sets the page-breaking behavior inside an element
检索或设置对象容器中出现的页分割符。
auto
avoid
2
size Sets the orientation and size of a page
页面的定位与大小
auto
portrait
landscape
 
widows Sets the minimum number of lines for a paragraph that must be left at the top of a page
检索或指定一定要留在页面顶部的行数
number 2

CSS2 Aural
w3pop.com / 2006-09-21

CSS2 打印 CSS 单位

Aural Style Sheets
声音样式表

Aural style sheets use a combination of speech synthesis and sound effects to make the user listen to information, instead of reading information.
声音样式表使用了结合演讲与声音的效果来让用户可以听信息而不必阅读信息。

Aural presentation can be used:
声音信息可以在下面这些领域得到普及:

  • by blind people
    针对盲人
  • to help users learning to read
    学习阅读
  • to help users who have reading problems
    帮助那些在阅读上有障碍的人
  • for home entertainment
    家庭娱乐
  • in the car
    汽车中
  • by print-impaired communities
    印刷资源不足的地区

The aural presentation converts the document to plain text and feed this to a screen reader (a program that reads all the characters on the screen).
把文字转换为声音的形式(程序可以阅读所有屏幕上的字符)

An example of an Aural style sheet:
声音样式表的举例:

h1, h2, h3, h4
{
voice-family: male;
richness: 80;
cue-before: url("beep.au")
}

The example above will make the speech synthesizer play a sound, then speak the headers in a very rich male voice.
上述例子将起到良好的综合发言,标题会由非常富有磁性的男声来一一道出。


CSS2 Aural Reference
CSS2中的声音参考

W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).

属性 描述 W3C
azimuth Sets where the sound/voices should come from (horizontally)
设置或检索当前声音的音场角度(水平)
angle
left-side
far-left
left
center-left
center
center-right
right
far-right
right-side
behind
leftwards
rightwards
2
cue A shorthand property for setting the cue-before and cue-after properties in one declaration
设置在对象前后播放的声音
cue-before
cue-after
2
cue-after Specifies a sound to be played after speaking an element's content to delimit it from other
设置在对象后播放的声音。
none
url
2
cue-before Specifies a sound to be played before speaking an element's content to delimit it from other
设置在对象前播放的声音。
none
url
2
elevation Sets where the sound/voices should come from (vertically)
设置或检索当前声音的音场角度(垂直)
angle
below
level
above
higher
lower 
2
pause A shorthand property for setting the pause-before and pause-after properties in one declaration
设置对象前后的声音暂停。
pause-before
pause-after
2
pause-after Specifies a pause after speaking an element's content
定义对象内容被发音后的暂停。
time
%
2
pause-before Specifies a pause before speaking an element's content
定义对象内容发音前的暂停。
time
%
2
pitch Specifies the speaking voice
设置或检索音高。
frequency
x-low
low
medium
high
x-high 
2
pitch-range Specifies the variation in the speaking voice. (Monotone voice or animated voice?)
设置或检索声音的平滑程度
number 2
play-during Specifies a sound to be played while speaking an element's content
设置或检索背景音乐的播放
auto
none
url
mix
repeat
2
richness Specifies the richness in the speaking voice. (Rich voice or thin voice?)
设置或检索当前声音的音色。
number 2
speak Specifies whether content will render aurally
设置或检索声音是否给出
normal
none
spell-out
2
speak-header Specifies how to handle table headers. Should the headers be spoken before every cell, or only before a cell with a different header than the previous cell
指定怎样出列表格的标题
always
once
2
speak-numeral Specifies how to speak numbers
设置或检索数字如何发音
digits
continuous
2
speak-punctuation Specifies how to speak punctuation characters
设置或检索标点符号如何发音。
none
code
2
speech-rate Specifies the speed of the speaking
设置或检索发音速度
number
x-slow
slow
medium
fast
x-fast
faster
slower 
2
stress Specifies the "stress" in the speaking voice
和 pitch-range 相似。设置或检索当前声音波形的最高峰值。
number 2
voice-family A prioritized list of voice family names that contain specific voices
设置或检索当前声音类型。
specific-voice
generic-voice
2
volume Specifies the volume of the speaking
设置或检索音量
number
%
silent
x-soft
soft
medium
loud
x-loud 
2

CSS 单位
w3pop.com / 2006-09-21

CSS2 Aural CSS 颜色

尺寸

单位 描述
% percentage 百分比
in inch 英尺
cm centimeter 厘米
mm millimeter 公厘
em one em is equal to the current font size of the current element
相对长度单位。相对于当前对象内文本的字体尺寸
ex one ex is the x-height of a font (x-height is usually about half the font-size)
相对长度单位。相对于字符“x”的高度。此高度通常为字体尺寸的一半。
pt point (1 pt is the same as 1/72 inch)
绝对长度单位 (1pt等于 1/72英寸)
pc pica (1 pc is the same as 12 points)
绝对长度单位。派卡(Pica)
px pixels (a dot on the computer screen)
相对长度单位。像素(Pixel)

颜色

单位 描述
color_name A color name (e.g. red)
颜色的名称(比如 red)
rgb(x,x,x) An RGB value (e.g. rgb(255,0,0))
RGB值
rgb(x%, x%, x%) An RGB percentage value (e.g. rgb(100%,0%,0%))
RGB占有百分比值
#rrggbb A HEX number (e.g. #ff0000)
十六位数

CSS 颜色
w3pop.com / 2006-09-21

CSS 单位 CSS 颜色值

Colors are displayed combining  RED, GREEN, and BLUE light sources.
颜色是由红色,绿色和蓝色光所组合起来的


颜色值

CSS colors are defined using a hexadecimal notation for the combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one light source is 0 (hex #00). The highest value is 255 (hex #FF).
CSS颜色可以使用RGB记号法来表示,或是十六进制数来表示。

This table shows the result of combining Red, Green, and Blue light sources:.
这张表所显示的结果就是三原色混合后的结果:

颜色 十六进制色 RGB色
  #000000 rgb(0,0,0)
  #FF0000 rgb(255,0,0)
  #00FF00 rgb(0,255,0)
  #0000FF rgb(0,0,255)
  #FFFF00 rgb(255,255,0)
  #00FFFF rgb(0,255,255)
  #FF00FF rgb(255,0,255)
  #C0C0C0 rgb(192,192,192)
  #FFFFFF rgb(255,255,255)


颜色名称

A collection of color names is supported by most browsers.
一组基本上所有浏览器都支持的颜色名称

Note: Only 16 color names are supported by the W3C CSS standard (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow). For all other colors you should use the Color HEX value.
注意:只有16种颜色名称是符合W3S中CSS标准的,它们分别是(aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow)。所有其它的颜色应该使用十六进制色

颜色 十六进制色 颜色名称
  #F0F8FF AliceBlue
  #FAEBD7 AntiqueWhite
  #7FFFD4 Aquamarine
  #000000 Black
  #0000FF Blue
  #8A2BE2 BlueViolet
  #A52A2A Brown


Web 安全色

A few years ago, when most computers supported only 256 different colors, a list of 216 Web Safe Colors was suggested as a Web standard. The reason for this was that the Microsoft and Mac operating system used 40 different "reserved" fixed system colors (about 20 each).
几年前,当大多数计算机只支持256种颜色的时候,有一列216色的网页安全色是被WEB所支持的。原因是微软公司和MAC的操作系统使用了40种不同的颜色混合系统。(大约每二十个就有一个)

We are not sure how important this is now, since more and more computers are equipped with the ability to display millions of different colors, but the choice is left to you.
我么不敢肯定这个有多么重要,尤其是现在的计算机越来越先进,可以显示上百万种不同的颜色,但这个最终的决定权还是取决于你自己。

216色交织平台

This 216 cross platform web safe color palette was originally created to ensure that all computers would display all colors correctly when running a 256 color palette.
这个平台最初只是为了来确定在256色的颜色模式下计算机是否能正常显示这些颜色。

000000 000033 000066 000099 0000CC 0000FF
003300 003333 003366 003399 0033CC 0033FF
006600 006633 006666 006699 0066CC 0066FF
009900 009933 009966 009999 0099CC 0099FF
00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
330000 330033 330066 330099 3300CC 3300FF
333300 333333 333366 333399 3333CC 3333FF
336600 336633 336666 336699 3366CC 3366FF
339900 339933 339966 339999 3399CC 3399FF
33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF
33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF
660000 660033 660066 660099 6600CC 6600FF
663300 663333 663366 663399 6633CC 6633FF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF
66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF
66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF
990000 990033 990066 990099 9900CC 9900FF
993300 993333 993366 993399 9933CC 9933FF
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF
99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF
99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF
CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF
CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF
CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF
FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF
FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF
FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF

CSS 颜色值
w3pop.com / 2006-09-21

CSS 颜色 CSS 颜色名称

Colors are displayed combining  RED, GREEN, and BLUE light sources.
颜色是由红、绿、蓝三色光源混合而成。


Color 值

CSS colors are defined using a hexadecimal notation for the combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one light source is 0 (hex #00). The highest value is 255 (hex #FF).
颜色为了表达红色、绿色和蓝色的混合值被定义成一套16位进制的记号法用(RGB)一种颜色的最低值为0(#00),最高为255(#FF)


16384 种不同的颜色

Most modern monitors are capable of displaying at least 16384 different colors.
现在绝大多数显示器可显示出起码16384种不同的颜色

If you look at the color table below, you will see the result of varying the red light from 0 to 255, while keeping the green and blue light at zero.
如果你注意下面那个颜色表格的话,你就会发现当绿色和蓝色都保持0的时候红色的值从0变化到255的话依然会有很多不同的结果。

To see a full list of 16384 different colors based on red light varying from 0 to 255, click on one of the hexadecimal or rgb values below.
想要看到16384种基于红色值从0到255不同颜色的列表的话就点下面16进制或者RGB值。

  #000000  rgb(0,0,0) 
  #080000  rgb(8,0,0) 
  #100000  rgb(16,0,0) 
  #180000  rgb(24,0,0) 
  #200000  rgb(32,0,0) 
  #280000  rgb(40,0,0) 
  #300000  rgb(48,0,0) 
  #380000  rgb(56,0,0) 
  #400000  rgb(64,0,0) 
  #480000  rgb(72,0,0) 
  #500000  rgb(80,0,0) 
  #580000  rgb(88,0,0) 
  #600000  rgb(96,0,0) 
  #680000  rgb(104,0,0) 
  #700000  rgb(112,0,0) 
  #780000  rgb(120,0,0) 
  #800000  rgb(128,0,0) 
  #880000  rgb(136,0,0) 
  #900000  rgb(144,0,0) 
  #980000  rgb(152,0,0) 
  #A00000  rgb(160,0,0) 
  #A80000  rgb(168,0,0) 
  #B00000  rgb(176,0,0) 
  #B80000  rgb(184,0,0) 
  #C00000  rgb(192,0,0) 
  #C80000  rgb(200,0,0) 
  #D00000  rgb(208,0,0) 
  #D80000  rgb(216,0,0) 
  #E00000  rgb(224,0,0) 
  #E80000  rgb(232,0,0) 
  #F00000  rgb(240,0,0) 
  #F80000  rgb(248,0,0) 
  #FF0000  rgb(255,0,0) 


Shades of Gray
灰度梯度

Gray colors are displayed using an equal amount of power to all of the light sources. To make it easier for you to select the right gray color we have compiled a table of gray shades for you:
灰色通过让三原色使用相同的数值来显示。为了让你更容易的选择合适的灰色我们编辑了灰度梯度表:

  RGB(0,0,0)  #000000 
  RGB(8,8,8)  #080808 
  RGB(16,16,16)  #101010 
  RGB(24,24,24)  #181818 
  RGB(32,32,32)  #202020 
  RGB(40,40,40)  #282828 
  RGB(48,48,48)  #303030 
  RGB(56,56,56)  #383838 
  RGB(64,64,64)  #404040 
  RGB(72,72,72)  #484848 
  RGB(80,80,80)  #505050 
  RGB(88,88,88)  #585858 
  RGB(96,96,96)  #606060 
  RGB(104,104,104)  #686868 
  RGB(112,112,112)  #707070 
  RGB(120,120,120)  #787878 
  RGB(128,128,128)  #808080 
  RGB(136,136,136)  #888888 
  RGB(144,144,144)  #909090 
  RGB(152,152,152)  #989898 
  RGB(160,160,160)  #A0A0A0 
  RGB(168,168,168)  #A8A8A8 
  RGB(176,176,176)  #B0B0B0 
  RGB(184,184,184)  #B8B8B8 
  RGB(192,192,192)  #C0C0C0 
  RGB(200,200,200)  #C8C8C8 
  RGB(208,208,208)  #D0D0D0 
  RGB(216,216,216)  #D8D8D8 
  RGB(224,224,224)  #E0E0E0 
  RGB(232,232,232)  #E8E8E8 
  RGB(240,240,240)  #F0F0F0 
  RGB(248,248,248)  #F8F8F8 
  RGB(255,255,255)  #FFFFFF 

CSS 颜色名称
w3pop.com / 2006-09-21

CSS 颜色值

On this page you will find a table of color names that are supported by most browsers.
在这页你会找到一张支持大多数浏览器的颜色名称表格。

Note: Only 16 color names are supported by the W3C CSS standard (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow). For all other colors you should use the Color HEX value.
注意:只有16种颜色名称是W3C 标准所支持的 (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow)要使用所有的颜色就得使用16位进制的颜色值。


Click on a color name, or a hex value, to see the color as the background color along with different text colors.
点击其中一个颜色名称或者它的颜色数值,看看这些颜色成为背景色后与其他文字颜色的搭配。

Color Name
颜色名称
Color HEX
十六进制值
Color
颜色
AliceBlue  #F0F8FF  
AntiqueWhite  #FAEBD7  
Aqua  #00FFFF  
Aquamarine  #7FFFD4  
Azure  #F0FFFF  
Beige  #F5F5DC  
Bisque  #FFE4C4  
Black  #000000  
BlanchedAlmond  #FFEBCD  
Blue  #0000FF  
BlueViolet  #8A2BE2  
Brown  #A52A2A  
BurlyWood  #DEB887  
CadetBlue  #5F9EA0  
Chartreuse  #7FFF00  
Chocolate  #D2691E  
Coral  #FF7F50  
CornflowerBlue  #6495ED  
Cornsilk  #FFF8DC  
Crimson  #DC143C  
Cyan  #00FFFF  
DarkBlue  #00008B  
DarkCyan  #008B8B  
DarkGoldenRod  #B8860B  
DarkGray  #A9A9A9  
DarkGrey  #A9A9A9  
DarkGreen  #006400  
DarkKhaki  #BDB76B  
DarkMagenta  #8B008B  
DarkOliveGreen  #556B2F  
Darkorange  #FF8C00  
DarkOrchid  #9932CC  
DarkRed  #8B0000  
DarkSalmon  #E9967A  
DarkSeaGreen  #8FBC8F  
DarkSlateBlue  #483D8B  
DarkSlateGray  #2F4F4F  
DarkSlateGrey  #2F4F4F  
DarkTurquoise  #00CED1  
DarkViolet  #9400D3  
DeepPink  #FF1493  
DeepSkyBlue  #00BFFF  
DimGray  #696969  
DimGrey  #696969  
DodgerBlue  #1E90FF  
FireBrick  #B22222  
FloralWhite  #FFFAF0  
ForestGreen  #228B22  
Fuchsia  #FF00FF  
Gainsboro  #DCDCDC  
GhostWhite  #F8F8FF  
Gold  #FFD700  
GoldenRod  #DAA520  
Gray  #808080  
Grey  #808080  
Green  #008000  
GreenYellow  #ADFF2F  
HoneyDew  #F0FFF0  
HotPink  #FF69B4  
IndianRed   #CD5C5C  
Indigo   #4B0082  
Ivory  #FFFFF0  
Khaki  #F0E68C  
Lavender  #E6E6FA  
LavenderBlush  #FFF0F5  
LawnGreen  #7CFC00  
LemonChiffon  #FFFACD  
LightBlue  #ADD8E6  
LightCoral  #F08080  
LightCyan  #E0FFFF  
LightGoldenRodYellow  #FAFAD2  
LightGray  #D3D3D3  
LightGrey  #D3D3D3  
LightGreen  #90EE90  
LightPink  #FFB6C1  
LightSalmon  #FFA07A  
LightSeaGreen  #20B2AA  
LightSkyBlue  #87CEFA  
LightSlateGray  #778899  
LightSlateGrey  #778899  
LightSteelBlue  #B0C4DE  
LightYellow  #FFFFE0  
Lime  #00FF00  
LimeGreen  #32CD32  
Linen  #FAF0E6  
Magenta  #FF00FF  
Maroon  #800000  
MediumAquaMarine  #66CDAA  
MediumBlue  #0000CD  
MediumOrchid  #BA55D3  
MediumPurple  #9370D8  
MediumSeaGreen  #3CB371  
MediumSlateBlue  #7B68EE  
MediumSpringGreen  #00FA9A  
MediumTurquoise  #48D1CC  
MediumVioletRed  #C71585  
MidnightBlue  #191970  
MintCream  #F5FFFA  
MistyRose  #FFE4E1  
Moccasin  #FFE4B5  
NavajoWhite  #FFDEAD  
Navy  #000080  
OldLace  #FDF5E6  
Olive  #808000  
OliveDrab  #6B8E23  
Orange  #FFA500  
OrangeRed  #FF4500  
Orchid  #DA70D6  
PaleGoldenRod  #EEE8AA  
PaleGreen  #98FB98  
PaleTurquoise  #AFEEEE  
PaleVioletRed  #D87093  
PapayaWhip  #FFEFD5  
PeachPuff  #FFDAB9  
Peru  #CD853F  
Pink  #FFC0CB  
Plum  #DDA0DD  
PowderBlue  #B0E0E6  
Purple  #800080  
Red  #FF0000  
RosyBrown  #BC8F8F  
RoyalBlue  #4169E1  
SaddleBrown  #8B4513  
Salmon  #FA8072  
SandyBrown  #F4A460  
SeaGreen  #2E8B57  
SeaShell  #FFF5EE  
Sienna  #A0522D  
Silver  #C0C0C0  
SkyBlue  #87CEEB  
SlateBlue  #6A5ACD  
SlateGray  #708090  
SlateGrey  #708090  
Snow  #FFFAFA  
SpringGreen  #00FF7F  
SteelBlue  #4682B4  
Tan  #D2B48C  
Teal  #008080  
Thistle  #D8BFD8  
Tomato  #FF6347  
Turquoise  #40E0D0  
Violet  #EE82EE  
Wheat  #F5DEB3  
White  #FFFFFF  
WhiteSmoke  #F5F5F5  
Yellow  #FFFF00  
YellowGreen  #9ACD32  
posted @ 2006-11-18 13:42  疯一样的自由  阅读(1299)  评论(0编辑  收藏