一篇极好的 CSS 教程（ZZ）

这是我codeproject上面看到的极好的css教程
CSS stands for Cascading Style Sheets. This is a simple styling language which allows attaching style to HTML elements. Every element type as well as every occurance of a specific element within that type can be declared an unique style, e.g. margins, positioning, color or size. So you might consider these style sheets as templates, very similar to templates in desktop publishing applications. For example:<?XML:NAMESPACE PREFIX = O />

body { background-color: white; color: darkblue;font-size: <?XML:NAMESPACE PREFIX = ST1 />10pt;

font-family: Arial; margin-left: 10%}

Linking and Embedding

There are many ways to link style sheets to HTML, each carrying its own advantages and disadvantages. New HTML elements and attributes have been introduced to allow easy incorporation of style sheets into HTML documents.

External style sheets

An external style sheet can be linked with any number of HTML documents by using <link> that is placed in the document HEAD. The tag's various attributes indicate things about the style sheet - the rel attribute the type of link (a style sheet); the type attribute the type of style sheet (always text/css); and the href attribute the location of the style sheet. This is a very convenient way of formatting the entire site as well as restyling it by editing just one file. For example:

</HEAD>

</HTML>

Once you have linked the style sheet to your page, you then have to create the style sheet. For example:

body { font-family: Verdana, Helvetica, Arial, sans-serif;

color: darkblue; background-color: #ffeeff}

If you saved the example above as a style sheet, then every page that links to it will have the specified styles. Files containing style information must have extension .css.

Embedded Style Sheets

If you have a single document that has a unique style, you can use an embedded style sheet. If the same style sheet is used in multiple documents, then an external style sheet would be more appropriate. A embedded style sheet is inside the HEAD element with the STYLE element and will apply to the entire document:

<!--

body { background: url(flower.gif) lightyellow; color: darkblue }

.zn { margin-left: 8em; margin-right: 8em }

-->

</STYLE>

The required TYPE attribute is used to specify a media type, as is its function with the LINK element. You should write the style sheet as a HTML comment, that is, between  to hide the content in browsers without CSS support which would otherwise be displayed.

Importing Style Sheets

You can import a style sheet with CSS's @import statement:

<!--

@import url(http://www.tongchiu.com/gen.css);

@import url(/product/file.css);

table { background: yellow; color: #003366 }

-->

</STYLE>

The @import allows you to keep some things the same while having others different; and follows this syntax: @import url(gen.css);

Note: If more than one sheet is imported they will cascade in order they are imported - the last imported sheet will override the next last; the next last will override the second last, and so on. If the imported style is in conflict with the rules declared in the main sheet then it will be overridden.

Inline Style

Inline style is the style attached to one specific element. Any opening tag may take the style attribute:

<P style="font-size: 10pt">.

To use inline style, one must declare a single style sheet language for the entire document using the Content-Style-Type HTTP header extension. With inlined CSS, an author must send text/css as the Content-Style-Type HTTP header or include the following tag in the HEAD:

Syntax

Basic syntax as follows:

selector { property: value }

That is a property (such as color) followed by a colon (:) and a value. A property is assigned to a selector in order to manipulate its style. Examples of properties include color, margin, and font. The value is an assignment that a property receives. Multiple style declarations for a single selector may be separated by a semicolon. The following example defines the color and font-size properties for H1 and P elements:

<HEAD>

<TITLE>CSS Example</TITLE>

H1 { font-size: x-large; color: darkred }

P { font-size: 12pt; color: darkblue }

</STYLE>

</HEAD>

You can use grouping of selectors and declarations to decrease repetitious statements within style sheets. For example:

H1, H2, H3, H4 { color: #666666; font-family: Arial }

Selectors

Selectors are used to associate style declarations with an element or elements. This is done by placing the declarations within a block (enclosed in {}) and preceding it with a selector. For example:

p {color: #008000}

div {color: #cccccc; font-size: 14pt}

Tag selectors

You can take any opening HTML tag and use it as a selector:

h3 {color: red}

Class selectors

These allow you to give elements a particular name. For example:

In a style sheet, The syntax as the below:

P.zn { color: blue }

Or like this:

.zn { color: blue }

Pseudo-class selectors

Pseudo-classes can be assigned to the A element to display links, visited links and active links differently. The anchor element can give the pseudo-classes link, visited, or active. A visited link could be defined to render in a different color and even a different font size and style. The sample style sheet might look like this:

A:link { color: red }

A:active { color: blue; font-size: 150% }

A:visited { color: green }

ID selectors

These selectors are very similar to classes except there can only be one element with a given ID in a document. An ID selector is assigned by using the indicator "#". For example:

#abc { text-style: bold }

To use an ID selector:

<P ID=abc>Welcome to my website</P>

Note: IDs like classes they should be in lowercase, may not start with a number or contain spaces. This selector type should only be used sparingly due to its inherent limitations.

Span

This element may be used as a selector in a style sheet, and it also accepts the STYLE, CLASS, and ID attributes. Some examples of SPAN follow:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<!--

.zn { font-size: 28pt }

-->

</STYLE>

</HEAD>

<BODY>

<P><SPAN CLASS=zn>These words could be big.</SPAN></p>

<p><SPAN STYLE="font-family: Arial;font-size:12"> And these ones are different.</SPAN>.</P>

</BODY></HTML>

Div

DIV (short for "division") is a block-level element that, in function, is similar to the SPAN. But DIV may contain paragraphs, headings, and tables. For example:

<H1>Welcome</H1>

<P>Hello World</P>

<P>Welcome to my website!</P>

</DIV>

Properties

Color

You can declare a color as the following example:

P {color: red}

H2 { color: #000080 }

LI {color: rgb(12%, 51%, 62%)}

Background

Background-color This sets the background color of an element. For example:

BODY { background-color: white }

H1 { background-color: #000080 }

Note:
1. To help avoid conflicts with user style sheets, background-image should be specified whenever background-color is used. In most cases, background-image: none is suitable.
2. Netscape 4.* does not color in the background of block elements if they are given a background color that is different from BODY - it does not color in the spaces between words. To avoid this, explicitly set border: none

Background-image Specified with background-image. For example:

BODY { background-image: url(/images/cloud.gif) }

P { background-image: url(http://www.internetcollege.com/bg1.gif) }

Background-repeat This states the tiling of the background image. The possible values include: repeat | repeat-x | repeat-y | no-repeat.

The repeat-x value will repeat the image horizontally while the repeat-y value will repeat the image vertically. For example:

BODY { background: white url(candybar.gif);

background-repeat: repeat-x }

In the above example, the image will only be tiled horizontally. IE only draws repeat-x to the right, and repeat-y down, not left and right and up and down as it should do.

Background This allows one or more of the properties to be specified in the order color, image, repeat, attachment, position. For examples:

BODY { background: white url(http://www.internetcollege.com/bg1.gif) }

BLOCKQUOTE { background: #6699ff }

P { background: url(image/line.gif) #e2e9ee fixed }

TABLE { background: #ffeeff url(house.gif) no-repeat top center }

Fonts

Font-family This allows a specific font to be used. For example:

P { font-family: Times }

You may specify a couple fonts separated by comma. In case that if your preferred font is not available, your second choice is used. For example, font-family: Times, Arial. Note that any font name containing whitespace must be quoted, with either single or double quotes. For example:

P { font-family: "New Times Roman", Times, serif }

Font-size This can be specified as a length, or one of the following keywords: xx-small, x-small, small, medium (initial), large, x-large, xx-large. For example:

H2 { font-size: large }

P { font-size: 10pt }

LI { font-size: 80% }

Table { font-size: small}

Note: Internet Explorer 3 and Netscape 4.* treat all relative units and % as relative to the element default rather than as relative to the parent element.

Font-style This defines that the font be displayed in one of three ways: normal, italic or oblique (slanted). For example:

P {font-style: italic}

Font-weight This is used for specifying the weight of the font that can be specified as normal (initial value), or bold. For example:

P {font-weight: bold}

It can also be specified as an absolute number, being one of 100, 200, 300, 400 (the same as normal), 500, 600, 700 (the same as bold), 800, or 900, where 100 is the lightest and 900 the most bold. For example:

H1 { font-weight: 800 }

Font This may be used as a shorthand for the various font properties. For example:

P { font: italic bold 12pt/14pt Times, serif }

This specifies paragraphs with a bold and italic Times or serif font with a size of 12 points and a line height of 14 points.

Text

Text-align The value can be left (initial value), right, center, or justify (aligns to both margins). Text-align only applies to block elements and is inherited. For example:

H1 { text-align: center }

P.newspaper { text-align: justify }

Text-decoration This allows text to be decorated through one of five properties:

underline, overline, line-through, blink, or the default, none. For example:

A:link, A:visited, A:active { text-decoration: none }

Text-transform allows text to be transformed by one of four properties: none (initial value), lowercase, uppercase, or capitalize (capitalize the first letter of every word). It applies to all elements and is inherited. For example:

H1 { text-transform: uppercase }

H2 { text-transform: capitalize }

Margin

This property sets the margin of an element by specifying a length or a percentage. Each element can have four margins - left, right, bottom and top. These are defined by the margin-left, margin-right, margin-top, margin-bottom properties. For example:

P {margin-left: 20px}

The margins can be specified for all four sides at once with the margin shorthand. Margins can be negative, and initially margins are 0.

P {margin: 10px 12px 6cm8pt}

This would give P a top margin of 10 pixel, a right margin of 12 pixel, a bottom margin of 6 pixel and a left margin of 8 pixel.

Rules

Inheritance Basically a selector which is nested within another selector will inherit the property values assigned to the outer selector. For example, a font defined for the BODY will also be applied to text in a paragraph.

! important A style can be designated as important by specifying ! important. A style that is designated as important will win out over contradictory styles of otherwise equal weight. A ! important statement like this:

BODY { background: url(man.gif) white; background-repeat: repeat-x ! important }

The weight sort The weight sort sorts declarations according to their weight. Declarations can have normal weight or important weight. Declarations are made important by the addition of !important (or ! important). For example:

P {font-size: 36pt !important} P {font-size: 16pt}

36 pt will result because that declaration has greater weight.

The order sort When two rules have the same weight, the last rule specified wins. Thus:

P {color: red}

P {color: green}

It would result in green.

Case sensitivity All CSS is case insensitive.

posted on 2006-12-18 13:29 Steveson 阅读(...) 评论(...) 编辑收藏

转载于:https://www.cnblogs.com/Steveson/archive/2006/12/18/595599.html

一篇极好的 CSS 教程（ZZ）相关推荐

一篇极好的 CSS 教程
这是我codeproject上面看到的极好的css教程,今日放上让大家看看,待我明日青岛归来翻译给大家看看. CSS stands for Cascading Style Sheets. This i ...
【CSS 教程系列第 3 篇】CSS 如何添加注释
这是[CSS 教程系列第 3 篇],如果觉得有用的话,欢迎关注专栏. 语法 /* 这里填写注释内容 */ 说明 CSS 注释是以 "斜杠+星号" 开始,以"星号+斜杠&q ...
【CSS 教程系列第 12 篇】什么是 CSS 中的伪类选择器
这是[CSS 教程系列第 12 篇],如果觉得有用的话,欢迎关注专栏. CSS 的选择器有很多,常用的有元素选择器.id 选择器.class 选择器.后代选择器.子代选择器.并集选择器.交集选择器. ...
【CSS 教程系列第 13 篇】什么是 CSS 中的通配符选择器
这是[CSS 教程系列第 13 篇],如果觉得有用的话,欢迎关注专栏. CSS 的选择器有很多,常用的有元素选择器.id 选择器.class 选择器.后代选择器.子代选择器.并集选择器.交集选择器. ...
【CSS 教程系列第 8 篇】什么是 CSS 中的后代选择器
这是[CSS 教程系列第 8 篇],如果觉得有用的话,欢迎关注专栏. CSS 的选择器有很多,常用的有元素选择器.id 选择器.class 选择器.后代选择器.子代选择器.并集选择器.交集选择器.伪 ...
【CSS 教程系列第 7 篇】什么是 CSS 中的 class 选择器（类选择器）、多类名选择器
这是[CSS 教程系列第 7 篇],如果觉得有用的话,欢迎关注专栏. CSS 的选择器有很多,常用的有元素选择器.id 选择器.class 选择器.后代选择器.子代选择器.并集选择器.交集选择器.伪 ...
43个PSD to XHTML，CSS教程
在中国,很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS,甚至很多人都还不知道xHTML+CSS是什么意思,只知道盲目的追求DIV+CSS,但在国外,是没有DIV+CSS这个概念的 ...
html段落排版,美化网页段落排版的css教程
美化网页段落排版的css教程上四篇的内容是把常用的XHTML标签拿出来介绍了一下,不是很详细.不过没关系,重点是要能先知道用他们,以后深入了再去细细研究更为详细的特性以及使用方法就容易多了.上篇已经 ...
dede css文件,dede css教程
dede css教程 [2021-02-12 18:25:39] 简介: php去除nbsp的方法:首先创建一个PHP代码示例文件:然后通过"preg_replace("/(\s ...
css教程之简写与手写应该什么时候使用
下面的css教程的速记实例- 一个是简洁和其他精确.一来存在了想为简便起见,而其他仍然坚定地保持透明.无论哪种方式,他们有他们的目的,优点和缺点,可以这么说.这个职位将照耀在两个简写符号和符号速记一些 ...

一篇极好的 CSS 教程（ZZ）

一篇极好的 CSS 教程（ZZ）相关推荐

最新文章

热门文章

一篇极好的 CSS 教程 （ZZ）

一篇极好的 CSS 教程 （ZZ）相关推荐

最新文章

热门文章

一篇极好的 CSS 教程（ZZ）

一篇极好的 CSS 教程（ZZ）相关推荐