# CSS教程 [转]

CSS教程

## CSS 实例库

70多个实例，在查看演示的同时动手尝试，可以让你更快的理解CSS的用途

# 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 DemoCSS演示

With CSS, your HTML documents can be displayed using different output styles:

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.

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.

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!

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.

What style will be used when there is more than one style specified for an HTML element?

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)
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).

# 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:

 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.

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:

 

This paragraph will be right-aligned.



This paragraph will be center-aligned.

Note: Only one class attribute can be specified per HTML element! The example below is wrong:

 

This is a paragraph.

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:

 .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:

 



This paragraph will also be center-aligned.

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

## The id Selectorid 选择器

You can also define styles for HTML elements with the id selector. The id selector is defined as a #.

The style rule below will match the element that has an id attribute with a value of "green":

 #green {color: green}

The style rule below will match the p element that has an id with a value of "para1":

 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中正常运作了

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:

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

# 使用 CSSw3pop.com / 2006-09-21

CSS 语法 CSS 背景

## 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:

 

The browser will read the style definitions from the file mystyle.css, and format the document according to it.

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:

 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:

 

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:

 

### 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:

 

This is a paragraph

## 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 {color: red;text-align: left;font-size: 8pt}

And an internal style sheet has these properties for the h3 selector:

 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:

 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

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.

## CSS Background PropertiesCSS 背景属性

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.

W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or 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 PropertiesCSS 文字属性

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.

W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or 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

none
underline
overline
line-through
4 1 4 1
text-indent Indents the first line of text in an element

length
%
4 1 4 1
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 PropertiesCSS 字体属性

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.

Browser support: 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
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

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 PropertiesCSS 边框属性

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.

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 PropertiesCSS 边距属性

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!

Browser support: 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
Sets the bottom margin of an element

auto
length
%
4 1 4 1
Sets the left margin of an element

auto
length
%
3 1 4 1
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

This example demonstrates how to set the left padding of a tablecell.

This example demonstrates how to set the right padding of a tablecell.

This example demonstrates how to set the top padding of a tablecell.

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.

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.

Browser support: 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

4 1 4 1

Sets the bottom padding of an element

length
%
4 1 4 1

Sets the left padding of an element

length
%
4 1 4 1

Sets the right padding of an element

length
%
4 1 4 1

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 PropertiesCSS列表属性

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.

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
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 PropertiesCSS尺寸属性

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.

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

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.

Use float with a list of hyperlinks to create a horizontal menu.

Creating a homepage without tables

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 PropertiesCSS类别属性

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.

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

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-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
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.

## 实例

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.

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.

## CSS Positioning PropertiesCSS定位属性

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.

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

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伪类可用来给一些选择器加上特殊效果。

## 实例

This example demonstrates how to add different colors to a hyperlink in a document.

:first-child (不能在IE中运行)
This example demonstrates the use of the :first-child pseudo-class.

:lang (不能在IE中运行)
This example demonstrates the use of the :lang pseudo-class.

## 语法

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:

 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!!

Note: a:active MUST come after a:hover in the CSS definition in order to be effective!!

Note: Pseudo-class names are not case-sensitive.

## Pseudo-classes and CSS Classes伪类和CSS类

Pseudo-classes can be combined with CSS classes:

 a.red:visited {color: #FF0000}CSS Syntax

If the link in the example above has been visited, it will be displayed in red.

## CSS2 - The :first-child Pseudo-classCSS2 中: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里第一个段落：

First paragraph in div. This paragraph will be indented.

Second paragraph in div. This paragraph will not be indented.

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

The first paragraph inside the div. This paragraph will not be indented.



 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就为段落的第一子元素：

I am a strong man.

 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中第一个连接就没有下横线显示，但第二个连接就有：

Visit W3Schools and learn CSS! Visit W3Schools and learn HTML!



## CSS2 - The :lang Pseudo-classCSS2 :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元素的引号类型:

  

Some text A quote in a paragraph Some text.



## Pseudo-classes伪类

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

: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

3 1 4 1

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}

Some text that ends up on two or more lines

The output could be something like this:

 Some text that endsup 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.

Note: The "first-line" pseudo-element can only be used with block-level elements.

Note: The following properties apply to the "first-line" pseudo-element:

• 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}

The first words of an article.

The output could be something like this:

 ___  |  he first   |  words of anarticle.

Note: The "first-letter" pseudo-element can only be used with block-level elements.

Note: The following properties apply to the "first-letter" pseudo- element:

• font 属性
• color 属性
• background 属性
• margin 属性
• 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:

 p.article:first-letter {color: #FF0000}

A paragraph in an article

The example above will make the first letter of all paragraphs with class="article" red.

## 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}

The first words of an article

The output could be something like this:

 ___  |  he first   |  words of anarticle.

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.

## CSS2 - The :before Pseudo-elementCSS2中的: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-elementCSS2中的: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伪元素

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

: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.

## 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:

  .... 

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.

## 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.

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，下面呢？

The next step is to learn XHTML and JavaScript.

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版本

JavaScript

JavaScript can make your web site more dynamic.

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是非常流行的脚本揄扬，它可以在所有主流浏览器上运行

# 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边框

Margin外补丁（边距）

List列表

Dimension维度

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

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定位

Pseudo-classes伪类

The use of the :first-child pseudo-class

The use of the :lang pseudo-class

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.

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

## Background

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

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

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-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

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

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
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

content Generates content in a document. Used with the :before and :after pseudo-elements

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

none
identifier number
2
counter-reset Sets the value the counter is set to on each occurrence of a selector

none
identifier number
2
quotes Sets the type of quotation marks

none
string string
- 1 6 2

## List and Marker

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
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

margin A shorthand property for setting the margin properties in one declaration
快速设置各边距属性
margin-top
margin-right
margin-bottom
margin-left
4 1 4 1
Sets the bottom margin of an element
设置底部边距
auto
length
%
4 1 4 1
Sets the left margin of an element
设置左部边距
auto
length
%
3 1 4 1
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

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 A shorthand property for setting all of  the padding properties in one declaration

4 1 4 1

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

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

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

## Positioning

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

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)

length length - 1 6 2
caption-side Sets the position of the caption according to the table

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)

show
hide
- 1 6 2
table-layout Sets the algorithm used to lay out the table

auto
fixed
5 1 6 2

## Text

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
添加文字修饰（下划线等等）
none
underline
overline
line-through
4 1 4 1
text-indent Indents the first line of text in an element
首行文字缩进
length
%
4 1 4 1
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

: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
连接在未被访问前的样式
3 1 4 1
在其链接地址已被访问过时的样式
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

: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.

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）。

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 Auralw3pop.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 ReferenceCSS2中的声音参考

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

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

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)

pt point (1 pt is the same as 1/72 inch)

pc pica (1 pc is the same as 12 points)

px pixels (a dot on the computer screen)

### 颜色

color_name A color name (e.g. 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:.

#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.

#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).

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.

 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).

## 16384 种不同的颜色

Most modern monitors are capable of displaying at least 16384 different colors.

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.

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.

 #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)

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.

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
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
HoneyDew  #F0FFF0
HotPink  #FF69B4
IndianRed   #CD5C5C
Indigo   #4B0082
Ivory  #FFFFF0
Khaki  #F0E68C
Lavender  #E6E6FA
LavenderBlush  #FFF0F5
LawnGreen  #7CFC00
LemonChiffon  #FFFACD
LightCoral  #F08080
LightCyan  #E0FFFF
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
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
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编辑  收藏