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:
一般说来所有样式有下面的规则(第四个最有优先性)

Browser default
浏览器默认
External style sheet
外部样式表
Internal style sheet (inside the <head> tag)
内嵌样式表(在<head>标签内)
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
两个例子

查看案例1
查看案例2

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
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 疯一样的自由阅读(1541) 评论(0) 编辑收藏举报

刷新页面返回顶部

繁华落尽，如疯轻狂

CSS 实例库

CSS 参考资料

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

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

What is CSS?什么是CSS？

CSS DemoCSS演示

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

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

Multiple Styles Will Cascade Into One

Cascading Order

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

Syntax语法

Grouping组合

The class Selector选择器类

The id Selectorid 选择器

CSS CommentsCSS 注释

使用 CSSw3pop.com / 2006-09-21

Examples两个例子

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

External Style Sheet外部样式表

Internal Style Sheet内嵌样式表

Inline Styles行内样式

Multiple Style Sheets多重样式表

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

实例

CSS Background PropertiesCSS 背景属性

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

实例

CSS Text PropertiesCSS 文字属性

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

实例

CSS Font PropertiesCSS 字体属性

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

Examples例 子

CSS Border PropertiesCSS 边框属性

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

Examples

CSS Margin PropertiesCSS 边距属性

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

Examples

CSS Padding PropertiesCSS填充属性

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

Examples

CSS List PropertiesCSS列表属性

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

Examples

CSS Dimension PropertiesCSS尺寸属性

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

实例

CSS Classification PropertiesCSS类别属性

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

实例

CSS Positioning PropertiesCSS定位属性

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

实例

语法

Anchor Pseudo-classes锚点伪类

Pseudo-classes and CSS Classes伪类和CSS类

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

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

Pseudo-classes伪类

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

实例

语法

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

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

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

Multiple Pseudo-elements多重伪元素

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

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

Pseudo-elements伪元素

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

Media Types媒介类型

The @media Rule@media 规则

Different Media Types 不同的媒介类型

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

CSS 摘要

现在你已经了解CSS，下面呢？

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

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

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

What is CSS?
什么是CSS？

CSS Demo
CSS演示

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

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

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

Syntax
语法

Grouping
组合

The class Selector
选择器类

The id Selector
id 选择器

CSS Comments
CSS 注释

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

Examples
两个例子

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

External Style Sheet
外部样式表

Internal Style Sheet
内嵌样式表

Inline Styles
行内样式

Multiple Style Sheets
多重样式表

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

CSS Background Properties
CSS 背景属性

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

CSS Text Properties
CSS 文字属性

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

CSS Font Properties
CSS 字体属性

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

Examples
例子

CSS Border Properties
CSS 边框属性

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

CSS Margin Properties
CSS 边距属性

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

CSS Padding Properties
CSS填充属性

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

CSS List Properties
CSS列表属性

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

CSS Dimension Properties
CSS尺寸属性

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

CSS Classification Properties
CSS类别属性

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

CSS Positioning Properties
CSS定位属性

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

Anchor Pseudo-classes
锚点伪类

Pseudo-classes and CSS Classes
伪类和CSS类

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

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

Pseudo-classes
伪类

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

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

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

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

Multiple Pseudo-elements
多重伪元素

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

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

Pseudo-elements
伪元素

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

Media Types
媒介类型

The @media Rule
@media 规则

Different Media Types
不同的媒介类型

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

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

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

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

CSS2 Aural
w3pop.com / 2006-09-21

Aural Style Sheets
声音样式表

CSS2 Aural Reference
CSS2中的声音参考

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

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

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

Shades of Gray
灰度梯度

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