CSS - Quick Guide - 極客書

優於HTML的樣式具有比HTML更廣泛的屬性數組，因此與HTML屬性相比，您可以更好地查看HTML頁面。

多設備兼容性−樣式表允許爲多個設備類型優化內容。通過使用相同的HTML文檔，可以爲pda和手機等手持設備或列印提供不同版本的網站。

全球網絡標準−現在不推薦使用HTML屬性，建議使用CSS。因此，開始在所有的HTML頁面中使用CSS以使它們與未來的瀏覽器兼容是一個好主意。

Who Creates and Maintains CSS?

CSS是通過W3C中一組名爲CSS工作組的人員創建和維護的。CSS工作組創建稱爲規範的文檔。當W3C成員討論並正式批准規範時，它就成爲一個建議。

這些已批准的規範稱爲推薦規範，因爲W3C無法控制語言的實際實現。獨立的公司和組織創造了這個軟體。

注意−全球資訊網聯盟（W3C）是一個就網際網路如何工作以及它應該如何發展提出建議的組織。

CSS Versions

層疊樣式表level 1（CSS1）是W3C在1996年12月提出的一項建議。此版本描述了CSS語言以及所有HTML標記的簡單視覺格式模型。

CSS2於1998年5月成爲W3C的推薦標準，並建立在CSS1的基礎上。此版本增加了對媒體特定樣式表的支持，例如印表機和音頻設備、可下載字體、元素定位和表格。

CSS - Syntax
selector { property: value }

Example − You can define a table border as follows −

table{ border :1px solid #C00; }

Here table is a selector and border is a property and given value 1px solid #C00 is the value of that property.

You can define selectors in various simple ways based on your comfort. Let me put these selectors one by one.

The Type Selectors

這就是我們在上面看到的選擇器。再一次，再舉一個例子給所有級別1的標題加上顏色;

h1 { color: #36CFFF; }

The Universal Selectors

通用選擇器沒有選擇特定類型的元素，而是非常簡單地匹配任何元素類型的名稱−

* { color: #000000; }

此規則將文檔中每個元素的內容呈現爲黑色。

The Descendant Selectors

假設您只想將樣式規則應用於位於特定元素內的特定元素。如下例所示，樣式規則僅在元素位於標記中時才應用於元素。

ul em { color: #000000; }

The Class Selectors

可以基於元素的類屬性定義樣式規則。具有該類的所有元素都將根據定義的規則進行格式化。

.black { color: #000000; }

此規則爲文檔中class屬性設置爲black的每個元素以黑色呈現內容。你可以讓它更特別一點。例如−

h1.black { color: #000000; }

此規則僅爲類屬性設置爲黑色的<h1>元素以黑色呈現內容。

可以對給定元素應用多個類選擇器。考慮下面的例子−

<p class = "center bold"> This para will be styled by the classes center and bold. </p>

The ID Selectors

可以基於元素的id屬性定義樣式規則。所有具有id的元素都將根據定義的規則格式化。

#black { color: #000000; }

此規則將文檔中屬性設置爲id的每個元素的內容呈現爲黑色。你可以讓它更特別一點。例如−

h1#black { color: #000000; }

此規則僅爲id屬性設置爲black的<h1>元素以黑色呈現內容。

< I> ID> I/>選擇器的真正功率是當它們用作後代選擇器的基礎時，例如減去;

#black h2 { color: #000000; }

在本例中，當這些標題位於id屬性設置爲black的標記中時，所有2級標題將顯示爲黑色。

The Child Selectors

您已經看到了後代選擇器。還有一種選擇器類型，它與子體非常相似，但具有不同的功能。考慮下面的例子−

body > p { color: #000000; }

如果所有段落都是<body>元素的直接子級，則此規則會將它們呈現爲黑色。放在其他元素中的其他段落，如<div>或<td>，將不受此規則的任何影響。

The Attribute Selectors

您還可以將樣式應用於具有特定屬性的HTML元素。下面的樣式規則將匹配所有具有type屬性的輸入元素，其值爲text−

input[type = "text"] { color: #000000; }

此方法的優點是，<input type=「submit」/>元素不受影響，並且顏色僅應用於所需的文本欄位。

有以下規則應用於屬性選擇器。

p[lang]−選擇具有lang屬性的所有段落元素。

p[lang=「fr」]−選擇其lang屬性值正好爲「fr」的所有段落元素。

p[lang~=「fr」]−選擇其lang屬性包含單詞「fr」的所有段落元素。

p[lang |=「en」]−選擇其lang屬性包含完全爲「en」或以「en-」開頭的值的所有段落元素。

Multiple Style Rules

可能需要爲單個元素定義多個樣式規則。您可以定義這些規則，以便將多個特性和相應的值組合到一個塊中，如以下示例中所定義的−

h1 { color: #36C; font-weight: normal; letter-spacing: .4em; margin-bottom: 1em; text-transform: lowercase; }
這裡所有的屬性和值對都用分號（;）分隔。您可以將它們放在一行或多行中。爲了更好的可讀性，我們將它們放在單獨的行中。

暫時不要爲上面提到的屬性操心。這些屬性將在接下來的章節中解釋，您可以在CSS引用中找到有關屬性的完整詳細信息<！--css引用。
-->
Grouping Selectors

如果願意，可以將樣式應用於多個選擇器。只需用逗號分隔選擇器，如下例所示−

h1, h2, h3 { color: #36C; font-weight: normal; letter-spacing: .4em; margin-bottom: 1em; text-transform: lowercase; }

此定義樣式規則也適用於h1、h2和h3元素。名單的順序無關緊要。選擇器中的所有元素都將應用相應的聲明。

您可以將各種id選擇器組合在一起，如下所示−

#content, #footer, #supplement { position: absolute; left: 510px; width: 200px; }

CSS - Inclusion
<head> <style type = "text/css" media = "全部的"> body { background-color: linen; } h1 { color: maroon; margin-left: 40px; } </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
它將產生以下結果&負;

Attributes

與<樣式>元素相關聯的屬性爲減號;

Attribute Value Description

type text/css Specifies the style sheet language as a content-type (MIME type). This is required attribute.

media
螢幕

tty公司公司

電視

投影

手持式

列印

盲文

聽覺的

全部的
Specifies the device the document will be displayed on. Default value is 全部的. This is an optional attribute.

Inline CSS - The style Attribute

您可以使用任何HTML元素的style屬性來定義樣式規則。這些規則將僅應用於該元素。這裡是通用語法−

<element style = "...style rules....">

Attributes

Attribute Value Description

style style rules The value of style attribute is a combination of style declarations separated by semicolon (;).

Example

下面是基於上述語法的內聯CSS示例−

Live Demo

<html> <head> </head> <body> <h1 style = "color:#36C;"> This is inline CSS </h1> </body> </html>

它將產生以下結果&負;

External CSS - The <link> Element

<link>元素可用於在HTML文檔中包含外部樣式表文件。

An external style sheet is a separate text file with .css extension. You define 全部的 the Style rules within this text file and then you can include this file in any HTML document using <link> element.

下面是包含外部CSS文件的通用語法−

<head> <link type = "text/css" href = "..." media = "..." /> </head>

Attributes

與<樣式>元素相關聯的屬性爲減號;

Attribute Value Description

type text css Specifies the style sheet language as a content-type (MIME type). This attribute is required.

href URL Specifies the style sheet file having Style rules. This attribute is a required.

media
螢幕

tty公司公司

電視

投影

手持式

列印

盲文

聽覺的

全部的
Specifies the device the document will be displayed on. Default value is 全部的. This is optional attribute.

Example

考慮一個名爲mystyle.css的簡單樣式表文件，其規則如下−

h1, h2, h3 { color: #36C; font-weight: normal; letter-spacing: .4em; margin-bottom: 1em; text-transform: lowercase; }

現在您可以將這個文件mystyle.css包含在任何HTML文檔中，如下所示−

<head> <link type = "text/css" href = "mystyle.css" media = " 全部的" /> </head>

Imported CSS - @import Rule

@導入用於以類似於<link>元素的方式導入外部樣式表。以下是@import rule的通用語法。

<head> <@import "URL"; </head>

這裡的URL是具有樣式規則的樣式表文件的URL。您也可以使用另一種語法−

<head> <@import url("URL"); </head>

Example

下面的示例演示如何將樣式表文件導入到HTML文檔中;

<head> @import "mystyle.css"; </head>

CSS Rules Overriding

我們討論了在HTML文檔中包含樣式表規則的四種方法。下面是覆蓋任何樣式表規則的規則。

任何內聯樣式表都具有最高優先級。因此，它將覆蓋在任何外部樣式表文件中定義的標記或規則中定義的任何規則。

在標記中定義的任何規則都將覆蓋在任何外部樣式表文件中定義的規則。

在外部樣式表文件中定義的任何規則都具有最低優先級，並且只有當以上兩個規則不適用時，才會應用在此文件中定義的規則。

Handling old Browsers

仍然有許多舊的瀏覽器不支持CSS。因此，在HTML文檔中編寫嵌入的CSS時，我們應該小心。下面的代碼片段展示了如何使用注釋標記隱藏舊瀏覽器中的CSS−

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

CSS Comments

很多時候，您可能需要在樣式表塊中添加其他注釋。因此，在樣式表中注釋任何部分都非常容易。你可以簡單地把你的評論放在/*….這是一個樣式表中的評論…..*/。

您可以使用/*./以類似C和C++程式語言的方式注釋多行塊。

Example

Live Demo

<!DOCTYPE html> <html> <head> <style> p { color: red; /* This is a single-line comment */ text-align: center; } /* This is a multi-line comment */ </style> </head> <body> <p>Hello World!</p> </body> </html>

它將產生以下結果&負;

CSS - Measurement Units
% Defines a measurement as a percentage relative to another value, typic全部的y an enclosing element. p {font-size: 16pt; line-height: 125%;} cm Defines a measurement in centimeters. div {margin-bottom: 2cm;} em A relative measurement for the height of a font in em spaces. Because an em unit is equivalent to the size of a given font, if you assign a font to 12pt, each "em" unit would be 12pt; thus, 2em would be 24pt. p {letter-spacing: 7em;} ex This value defines a measurement relative to a font's x-height. The x-height is determined by the height of the font's lowercase letter x. p {font-size: 24pt; line-height: 3ex;} in Defines a measurement in inches. p {word-spacing: .15in;} mm Defines a measurement in millimeters. p {word-spacing: 15mm;} pc Defines a measurement in picas. A pica is equivalent to 12 points; thus, there are 6 picas per inch. p {font-size: 20pc;} pt Defines a measurement in points. A point is defined as 1/72nd of an inch. body {font-size: 18pt;} px Defines a measurement in 螢幕 pixels. p {padding: 25px;}
CSS - Colors
Hex Code #RRGGBB p{color:#FF0000;} Short Hex Code #RGB p{color:#6A7;} RGB % rgb(rrr%,ggg%,bbb%) p{color:rgb(50%,50%,50%);} RGB Absolute rgb(rrr,ggg,bbb) p{color:rgb(0,0,255);} keyword aqua, black, etc. p{color:teal;}
這些格式在以下各節中有更詳細的說明;

CSS Colors - Hex Codes

十六進位是一種顏色的6位表示法。前兩位數字（RR）表示紅色值，後兩位數字表示綠色值（GG），最後一位數字表示藍色值（BB）。

十六進位值可以從任何圖形軟體（如Adobe Photoshop、Jasc Paintshop Pro）中獲取，甚至可以使用高級畫筆。

每個十六進位代碼前面都會有一個磅或哈希符號「35;」。下面是使用十六進位表示法的示例。

Color Color HEX

#000000

#FF0000

#00FF00

#0000FF

#FFFF00

#00FFFF

#FF00FF

#C0C0C0

#FFFFFF

CSS Colors - Short Hex Codes

這是六位數表示法的簡稱。在這種格式中，每個數字都被複製，以得到一個相等的六位數值。例如：#6A7變爲#66AA77。

十六進位值可以從任何圖形軟體（如Adobe Photoshop、Jasc Paintshop Pro）中獲取，甚至可以使用高級畫筆。

每個十六進位代碼前面都會有一個磅或哈希符號「35;」。下面是使用十六進位表示法的示例。

Color Color HEX

#000

#F00

#0F0

#0FF

#FF0

#0FF

#F0F

#FFF

CSS Colors - RGB Values

此顏色值是使用rgb（）屬性指定的。此屬性接受三個值，分別爲紅色、綠色和藍色。該值可以是0到255之間的整數或百分比。

注意−所有瀏覽器都不支持顏色的rgb（）屬性，因此建議不要使用它。

下面是使用RGB值顯示少數顏色的示例。

Color Color RGB

rgb(0,0,0)

rgb(255,0,0)

rgb(0,255,0)

rgb(0,0,255)

rgb(255,255,0)

rgb(0,255,255)

rgb(255,0,255)

rgb(192,192,192)

rgb(255,255,255)

Building Color Codes

你可以用我們的顏色代碼生成器生成數百萬個顏色代碼。檢查我們的HTML顏色代碼生成器。要使用這個工具，您需要一個支持Java的瀏覽器。

Browser Safe Colors

Here is the list of 216 colors which are supposed to be most safe and computer independent colors. These colors vary from hexa code 000000 to FFFFFF. These colors are safe to use because they ensure that 全部的 computers would display the 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 - Backgrounds

Set the Background Color

下面的示例演示如何設置元素的背景色。

Live Demo

<html> <head> </head> <body> <p style = "background-color:yellow;"> This text has a yellow background color. </p> </body> </html>

這將產生以下結果&負;

Set the Background Image

We can set the background image by c全部的ing local stored images as shown below −

Live Demo

<html> <head> <style> body { background-image: url("/css/images/css.jpg"); background-color: #cccccc; } </style> </head> <body> <h1>Hello World!</h1> </body> <html>

它將產生以下結果&負;

Repeat the Background Image

The following example demonstrates how to repeat the background image if an image is sm全部的. You can use no-repeat value for background-repeat property if you don't want to repeat an image, in this case image will display only once.

默認情況下，background repeat屬性將具有repeat值。

Live Demo

<html> <head> <style> body { background-image: url("/css/images/css.jpg"); background-repeat: repeat; } </style> </head> <body> <p>Tutorials point</p> </body> </html>

它將產生以下結果&負;

The following example which demonstrates how to repeat the background image vertic全部的y.

Live Demo

<html> <head> <style> body { background-image: url("/css/images/css.jpg"); background-repeat: repeat-y; } </style> </head> <body> <p>Tutorials point</p> </body> </html>

它將產生以下結果&負;

The following example demonstrates how to repeat the background image horizont全部的y.

Live Demo

<html> <head> <style> body { background-image: url("/css/images/css.jpg"); background-repeat: repeat-x; } </style> </head> <body> <p>Tutorials point</p> </body> </html>

它將產生以下結果&負;

Set the Background Image Position

下面的示例演示如何將背景圖像位置設置爲距左側100像素。

Live Demo

<html> <head> <style> body { background-image: url("/css/images/css.jpg"); background-position:100px; } </style> </head> <body> <p>Tutorials point</p> </body> </html>

它將產生以下結果&負;

下面的示例演示如何將背景圖像位置設置爲距左側100像素，距頂部200像素。

Live Demo

<html> <head> <style> body { background-image: url("/css/images/css.jpg"); background-position:100px 200px; } </style> </head> <body> <p>Tutorials point</p> </body> </html>

它將產生以下結果&負;

Set the Background Attachment

背景附件確定背景圖像是固定的還是與頁面的其餘部分一起滾動。

下面的示例演示如何設置固定的背景圖像。

Live Demo

<!DOCTYPE html> <html> <head> <style> body { background-image: url('/css/images/css.jpg'); background-repeat: no-repeat; background-attachment: fixed; } </style> </head> <body> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> </body> </html>

它將產生以下結果&負;

下面的示例演示如何設置滾動背景圖像。

Live Demo

<!DOCTYPE html> <html> <head> <style> body { background-image: url('/css/images/css.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-attachment:scroll; } </style> </head> <body> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> </body> </html>

它將產生以下結果&負;

Shorthand Property

You can use the background property to set 全部的 the background properties at once. For example −

<p style = "background:url(/images/pattern1.gif) repeat fixed;"> This parapgraph has fixed repeated background image. </p>

CSS - Fonts

Set the Font Family

下面是一個示例，演示如何設置元素的字體系列。可能的值可以是任何字體系列名稱。

Live Demo

<html> <head> </head> <body> <p style = "font-family:georgia,garamond,serif;"> This text is rendered in either georgia, garamond, or the default serif font depending on which font you have at your system. </p> </body> </html>

這將產生以下結果&負;

Set the Font Style

下面是一個示例，演示如何設置元素的字體樣式。可能的值爲正常、斜體和斜。

Live Demo

<html> <head> </head> <body> <p style = "font-style:italic;"> This text will be rendered in italic style </p> </body> </html>

這將產生以下結果&負;

Set the Font Variant

The following example demonstrates how to set the font variant of an element. Possible values are normal and sm全部的-caps.

Live Demo

<html> <head> </head> <body> <p style = "font-variant:sm全部的-caps;"> This text will be rendered as sm全部的 caps </p> </body> </html>

這將產生以下結果&負;

Set the Font Weight

下面的示例演示如何設置元素的字體粗細。font weight屬性提供指定字體粗體的功能。可能的值可以是普通、粗體、粗體、淺色、100、200、300、400、500、600、700、800、900。

Live Demo

<html> <head> </head> <body> <p style = "font-weight:bold;"> This font is bold. </p> <p style = "font-weight:bolder;"> This font is bolder. </p> <p style = "font-weight:500;"> This font is 500 weight. </p> </body> </html>

這將產生以下結果&負;

Set the Font Size

The following example demonstrates how to set the font size of an element. The font-size property is used to control the size of fonts. Possible values could be xx-sm全部的, x-sm全部的, sm全部的, medium, large, x-large, xx-large, sm全部的er, larger, size in pixels or in %.

Live Demo

<html> <head> </head> <body> <p style = "font-size:20px;"> This font size is 20 pixels </p> <p style = "font-size:sm全部的;"> This font size is sm全部的 </p> <p style = "font-size:large;"> This font size is large </p> </body> </html>

這將產生以下結果&負;

Set the Font Size Adjust

下面的示例演示如何設置元素的字體大小調整。此屬性使您能夠調整x高度以使字體更清晰。可能的值可以是任何數字。

Live Demo

<html> <head> </head> <body> <p style = "font-size-adjust:0.61;"> This text is using a font-size-adjust value. </p> </body> </html>

這將產生以下結果&負;

Set the Font Stretch

下面的示例演示如何設置元素的字體拉伸。此屬性依賴於用戶的計算機使用擴展或壓縮版本的字體。

可能的值可以是正常值、更寬值、更窄值、超濃縮值、超濃縮值、濃縮值、半濃縮值、半膨脹值、膨脹值、超膨脹值、超膨脹值。

Live Demo

<html> <head> </head> <body> <p style = "font-stretch:ultra-expanded;"> If this doesn't appear to work, it is likely that your computer doesn't have a <br>condensed or expanded version of the font being used. </p> </body> </html>

這將產生以下結果&負;

Shorthand Property

You can use the font property to set 全部的 the font properties at once. For example −

Live Demo

<html> <head> </head> <body> <p style = "font:italic sm全部的-caps bold 15px georgia;"> Applying 全部的 the properties on the text at once. </p> </body> </html>

這將產生以下結果&負;

CSS - Text

文本裝飾屬性用於下劃線、上劃線和刪除線文本。

文本轉換屬性用於將文本大寫或將文本轉換爲大寫或小寫字母。

空白屬性用於控制文本的流動和格式。

文本陰影屬性用於設置文本周圍的文本陰影。

Set the Text Color

下面的示例演示如何設置文本顏色。可能的值可以是任何有效格式的任何顏色名稱。

Live Demo

<html> <head> </head> <body> <p style = "color:red;"> This text will be written in red. </p> </body> </html>

它將產生以下結果&負;

Set the Text Direction

下面的示例演示如何設置文本的方向。可能的值是ltr或rtl。

Live Demo

<html> <head> </head> <body> <p style = "direction:rtl;"> This text will be rendered from right to left </p> </body> </html>

它將產生以下結果&負;

Set the Space between Characters

下面的示例演示如何設置字符之間的間距。可能的值是正常值或指定空格的數字。。

Live Demo

<html> <head> </head> <body> <p style = "letter-spacing:5px;"> This text is having space between letters. </p> </body> </html>

它將產生以下結果&負;

Set the Space between Words

下面的示例演示如何設置單詞之間的空格。可能的值是normal或指定空格的數字。

Live Demo

<html> <head> </head> <body> <p style = "word-spacing:5px;"> This text is having space between words. </p> </body> </html>

這將產生以下結果&負;

Set the Text Indent

下面的示例演示如何縮進段落的第一行。可能的值是%或指定縮進空間的數字。

Live Demo

<html> <head> </head> <body> <p style = "text-indent:1cm;"> This text will have first line indented by 1cm and this line will remain at its actual position this is done by CSS text-indent property. </p> </body> </html>

它將產生以下結果&負;

Set the Text Alignment

下面的示例演示如何對齊文本。可能的值爲左、右、中、對正。

Live Demo

<html> <head> </head> <body> <p style = "text-align:right;"> This will be right aligned. </p> <p style = "text-align:center;"> This will be center aligned. </p> <p style = "text-align:left;"> This will be left aligned. </p> </body> </html>

這將產生以下結果&負;

Decorating the Text

下面的示例演示如何裝飾文本。可能的值有無、下劃線、上劃線、直線穿過、閃爍。

Live Demo

<html> <head> </head> <body> <p style = "text-decoration:underline;"> This will be underlined </p> <p style = "text-decoration:line-through;"> This will be striked through. </p> <p style = "text-decoration:overline;"> This will have a over line. </p> <p style = "text-decoration:blink;"> This text will have blinking effect </p> </body> </html>

這將產生以下結果&負;

Set the Text Cases

下面的示例演示如何設置文本的大小寫。可能的值爲無、大寫、大寫、小寫。

Live Demo

<html> <head> </head> <body> <p style = "text-transform:capitalize;"> This will be capitalized </p> <p style = "text-transform:uppercase;"> This will be in uppercase </p> <p style = "text-transform:lowercase;"> This will be in lowercase </p> </body> </html>

這將產生以下結果&負;

Set the White Space between Text

下面的示例演示如何處理元素中的空白。可能的值爲正常值、pre值、nowrap值。

Live Demo

<html> <head> </head> <body> <p style = "white-space:pre;"> This text has a line break and the white-space pre setting tells the browser to honor it just like the HTML pre tag. </p> </body> </html>

這將產生以下結果&負;

Set the Text Shadow

The following example demonstrates how to set the shadow around a text. This may not be supported by 全部的 the browsers.

Live Demo

<html> <head> </head> <body> <p style = "text-shadow:4px 4px 8px blue;"> If your browser supports the CSS text-shadow property, this text will have a blue shadow. </p> </body> </html>

它將產生以下結果&負;

CSS - Using Images

The Image Border Property

圖像的邊框屬性用於設置圖像邊框的寬度。此屬性可以具有長度值或%中的值;。

零像素的寬度意味著沒有邊框。

下面是一個例子;

Live Demo

<html> <head> </head> <body> <img style = "border:0px;" src = "/css/images/logo.png" /> <br /> <img style = "border:3px dashed red;" src = "/css/images/logo.png" /> </body> </html>

它將產生以下結果&負;

The Image Height Property

圖像的高度屬性用於設置圖像的高度。此屬性可以具有長度值或%中的值;。當在%中賦值時，它會將其應用於圖像可用的框。

下面是一個例子;

Live Demo

<html> <head> </head> <body> <img style = "border:1px solid red; height:100px;" src = "/css/images/logo.png" /> <br /> <img style = "border:1px solid red; height:50%;" src = "/css/images/logo.png" /> </body> </html>

它將產生以下結果&負;

The Image Width Property

圖像的寬度屬性用於設置圖像的寬度。此屬性可以具有長度值或%中的值;。當在%中賦值時，它會將其應用於圖像可用的框。

下面是一個例子;

Live Demo

<html> <head> </head> <body> <img style = "border:1px solid red; width:150px;" src = "/css/images/logo.png" /> <br /> <img style = "border:1px solid red; width:100%;" src = "/css/images/logo.png" /> </body> </html>

它將產生以下結果&負;

The -moz-opacity Property

圖像的-moz opacity屬性用於設置圖像的不透明度。此屬性用於在Mozilla中創建透明圖像。IE使用過濾器：alpha（不透明度=x）創建透明圖像。

在Mozilla中（-moz opacity:x）x可以是0.0到1.0之間的值。較低的值使元素更透明（CSS3的有效語法opacity:x也是如此）。

在IE（filter:alpha（opacity=x））中，x可以是0-100之間的值。值越低，元素越透明。

下面是一個例子;

Live Demo

<html> <head> </head> <body> <img style = "border:1px solid red; -moz-opacity:0.4; filter:alpha(opacity=40);" src = "/css/images/logo.png" /> </body> </html>

它將產生以下結果&負;

CSS - Links

Usu全部的y, 全部的 these properties are kept in the header part of the HTML document.

記住：懸停必須在CSS定義中的a:link和a:visited之後才能生效。此外，a:active必須出現在CSS定義中a:hover之後，如下所示−

<style type = "text/css"> a:link {color: #000000} a:visited {color: #006600} a:hover {color: #FFCC00} a:active {color: #FF00CC} </style>

現在，我們將了解如何使用這些屬性爲超連結提供不同的效果。

Set the Color of Links

下面的示例演示如何設置連結顏色。可能的值可以是任何有效格式的任何顏色名稱。

Live Demo

<html> <head> <style type = "text/css"> a:link {color:#000000} </style> </head> <body> <a href = "">Link</a> </body> </html>

它將產生以下黑色連結&負;

Set the Color of Visited Links

下面的示例演示如何設置已訪問連結的顏色。可能的值可以是任何有效格式的任何顏色名稱。

Live Demo

<html> <head> <style type = "text/css"> a:visited {color: #006600} </style> </head> <body> <a href = ""> link</a> </body> </html>

它將生成以下連結。一旦你點擊這個連結，它就會把顏色改成綠色。

Change the Color of Links when Mouse is Over

下面的示例演示如何在將滑鼠指針移到連結上時更改連結的顏色。可能的值可以是任何有效格式的任何顏色名稱。

Live Demo

<html> <head> <style type = "text/css"> a:hover {color: #FFCC00} </style> </head> <body> <a href = "">Link</a> </body> </html>

它將生成以下連結。現在，將滑鼠移到這個連結上，您將看到它的顏色變爲黃色。

Change the Color of Active Links

下面的示例演示如何更改活動連結的顏色。可能的值可以是任何有效格式的任何顏色名稱。

Live Demo

<html> <head> <style type = "text/css"> a:active {color: #FF00CC} </style> </head> <body> <a href = "">Link</a> </body> </html>

它將生成以下連結。當用戶單擊它時，它會將顏色更改爲粉紅色。

CSS - Tables

現在，我們將通過示例了解如何使用這些屬性。

The border-collapse Property

此屬性可以有兩個值collapse和separate。下面的示例同時使用值−

Live Demo

<html> <head> <style type = "text/css"> table.one {border-collapse:collapse;} table.two {border-collapse:separate;} td.a { border-style:dotted; border-width:3px; border-color:#000000; padding: 10px; } td.b { border-style:solid; border-width:3px; border-color:#333333; padding:10px; } </style> </head> <body> <table class = "one"> <caption>Collapse Border Example</caption> <tr><td class = "a"> Cell A Collapse Example</td></tr> <tr><td class = "b"> Cell B Collapse Example</td></tr> </table> <br /> <table class = "two"> <caption>Separate Border Example</caption> <tr><td class = "a"> Cell A Separate Example</td></tr> <tr><td class = "b"> Cell B Separate Example</td></tr> </table> </body> </html>

它將產生以下結果&負;

The border-spacing Property

border spacing屬性指定分隔相鄰單元格的距離。邊界。它可以取一個或兩個值;這些值應該是長度單位。

如果您提供一個值，它將同時應用於垂直和水平邊框。或者您可以指定兩個值，在這種情況下，第一個值表示水平間距，第二個值表示垂直間距−

注意−很遺憾，此屬性在Netscape 7或IE 6中不起作用。

<style type="text/css"> /* If you provide one value */ table.example {border-spacing:10px;} /* This is how you can provide two values */ table.example {border-spacing:10px; 15px;} </style>

現在讓我們修改前面的示例並查看效果−

Live Demo

<html> <head> <style type = "text/css"> table.one { border-collapse:separate; width:400px; border-spacing:10px; } table.two { border-collapse:separate; width:400px; border-spacing:10px 50px; } </style> </head> <body> <table class = "one" border = "1"> <caption>Separate Border Example with border-spacing</caption> <tr><td> Cell A Collapse Example</td></tr> <tr><td> Cell B Collapse Example</td></tr> </table> <br /> <table class = "two" border = "1"> <caption>Separate Border Example with border-spacing</caption> <tr><td> Cell A Separate Example</td></tr> <tr><td> Cell B Separate Example</td></tr> </table> </body> </html>

它將產生以下結果&負;

The caption-side Property

The caption-side property 全部的ows you to specify where the content of a <caption> element should be placed in relationship to the table. The table that follows lists the possible values.

此屬性可以有四個值之一：頂部、底部、左側或右側。下面的示例使用每個值。

注意−這些屬性可能不適用於您的IE瀏覽器。

Live Demo

<html> <head> <style type = "text/css"> caption.top {caption-side:top} caption.bottom {caption-side:bottom} caption.left {caption-side:left} caption.right {caption-side:right} </style> </head> <body> <table style = "width:400px; border:1px solid black;"> <caption class = "top"> This caption will appear at the top </caption> <tr><td > Cell A</td></tr> <tr><td > Cell B</td></tr> </table> <br /> <table style = "width:400px; border:1px solid black;"> <caption class = "bottom"> This caption will appear at the bottom </caption> <tr><td > Cell A</td></tr> <tr><td > Cell B</td></tr> </table> <br /> <table style = "width:400px; border:1px solid black;"> <caption class = "left"> This caption will appear at the left </caption> <tr><td > Cell A</td></tr> <tr><td > Cell B</td></tr> </table> <br /> <table style = "width:400px; border:1px solid black;"> <caption class = "right"> This caption will appear at the right </caption> <tr><td > Cell A</td></tr> <tr><td > Cell B</td></tr> </table> </body> </html>

它將產生以下結果&負;

The empty-cells Property

空單元格屬性指示沒有任何內容的單元格是否應顯示邊框。

此屬性可以有三個值之一-show、hide或inherit。

以下是空單元格屬性，用於隱藏<table>元素中空單元格的邊框。

Live Demo

<html> <head> <style type = "text/css"> table.empty { width:350px; border-collapse:separate; empty-cells:hide; } td.empty { padding:5px; border-style:solid; border-width:1px; border-color:#999999; } </style> </head> <body> <table class = "empty"> <tr> <th></th> <th>Title one</th> <th>Title two</th> </tr> <tr> <th>Row Title</th> <td class = "empty">value</td> <td class = "empty">value</td> </tr> <tr> <th>Row Title</th> <td class = "empty">value</td> <td class = "empty"></td> </tr> </table> </body> </html>

它將產生以下結果&負;

The table-layout Property

「表布局」屬性應該幫助您控制瀏覽器應如何呈現或布局表。

此屬性可以有以下三個值之一：fixed、auto或inherit。

下面的示例顯示了這些屬性之間的差異。

注意−許多瀏覽器不支持此屬性，因此不依賴此屬性。

Live Demo

<html> <head> <style type = "text/css"> table.auto { table-layout: auto } table.fixed { table-layout: fixed } </style> </head> <body> <table class = "auto" border = "1" width = "100%"> <tr> <td width = "20%">1000000000000000000000000000</td> <td width = "40%">10000000</td> <td width = "40%">100</td> </tr> </table> <br /> <table class = "fixed" border = "1" width = "100%"> <tr> <td width = "20%">1000000000000000000000000000</td> <td width = "40%">10000000</td> <td width = "40%">100</td> </tr> </table> </body> </html>

它將產生以下結果&負;

CSS - Borders

The border-color property 全部的ows you to change the color of the border surrounding an element. You can individu全部的y change the color of the bottom, left, top and right sides of an element's border using the properties −

邊框底部顏色更改底部邊框的顏色。

邊框頂部顏色更改頂部邊框的顏色。

邊框左邊框顏色更改左邊框的顏色。

邊框右邊框顏色更改右邊框的顏色。

The following example shows the effect of 全部的 these properties −

Live Demo

<html> <head> <style type = "text/css"> p.example1 { border:1px solid; border-bottom-color:#009900; /* Green */ border-top-color:#FF0000; /* Red */ border-left-color:#330000; /* Black */ border-right-color:#0000CC; /* Blue */ } p.example2 { border:1px solid; border-color:#009900; /* Green */ } </style> </head> <body> <p class = "example1"> This example is showing 全部的 borders in different colors. </p> <p class = "example2"> This example is showing 全部的 borders in green color only. </p> </body> </html>

它將產生以下結果&負;

The border-style Property

The border-style property 全部的ows you to select one of the following styles of border −

無無邊框。（相當於邊框寬度：0;）

實線−Border是一條實線。

點−Border是一系列點。

虛線是一系列短線。

double−Border是兩條實線。

groove−邊框看起來就像是刻在頁面上的。

脊−邊框看起來與凹槽相反。

插入−邊框使框看起來像是嵌入到頁面中。

開始−邊框使框看起來像是從畫布中出來的。

隱藏−與「無」相同，但表元素的邊界衝突解決方法不同。

You can individu全部的y change the style of the bottom, left, top, and right borders of an element using the following properties −

邊框底部樣式更改底部邊框的樣式。

邊框頂部樣式更改頂部邊框的樣式。

border left style更改左邊框的樣式。

邊框右樣式更改右邊框的樣式。

The following example shows 全部的 these border styles −

Live Demo

<html> <head> </head> <body> <p style = "border-width:4px; border-style:none;"> This is a border with none width. </p> <p style = "border-width:4px; border-style:solid;"> This is a solid border. </p> <p style = "border-width:4px; border-style:dashed;"> This is a dashed border. </p> <p style = "border-width:4px; border-style:double;"> This is a double border. </p> <p style = "border-width:4px; border-style:groove;"> This is a groove border. </p> <p style = "border-width:4px; border-style:ridge"> This is a ridge border. </p> <p style = "border-width:4px; border-style:inset;"> This is a inset border. </p> <p style = "border-width:4px; border-style:outset;"> This is a outset border. </p> <p style = "border-width:4px; border-style:hidden;"> This is a hidden border. </p> <p style = "border-width:4px; border-top-style:solid; border-bottom-style:dashed; border-left-style:groove; border-right-style:double;"> This is a a border with four different styles. </p> </body> </html>

它將產生以下結果&負;

The border-width Property

The border-width property 全部的ows you to set the width of an element borders. The value of this property could be either a length in px, pt or cm or it should be set to thin, medium or thick.

You can individu全部的y change the width of the bottom, top, left, and right borders of an element using the following properties −

邊框底部寬度更改底部邊框的寬度。

邊框頂部寬度更改頂部邊框的寬度。

border left width更改左邊框的寬度。

border right width更改右邊框的寬度。

The following example shows 全部的 these border width −

Live Demo

<html> <head> </head> <body> <p style = "border-width:4px; border-style:solid;"> This is a solid border whose width is 4px. </p> <p style = "border-width:4pt; border-style:solid;"> This is a solid border whose width is 4pt. </p> <p style = "border-width:thin; border-style:solid;"> This is a solid border whose width is thin. </p> <p style = "border-width:medium; border-style:solid;"> This is a solid border whose width is medium; </p> <p style = "border-width:thick; border-style:solid;"> This is a solid border whose width is thick. </p> <p style = "border-bottom-width:4px;border-top-width:10px; border-left-width: 2px;border-right-width:15px;border-style:solid;"> This is a a border with four different width. </p> </body> </html>

它將產生以下結果&負;

Border Properties Using Shorthand

The border property 全部的ows you to specify color, style, and width of lines in one property −

The following example shows how to use 全部的 the three properties into a single property. This is the most frequently used property to set border around any element.

Live Demo

<html> <head> </head> <body> <p style = "border:4px solid red;"> This example is showing shorthand property for border. </p> </body> </html>

它將產生以下結果&負;

CSS - Margins

右邊距指定元素的右邊距。

現在，我們將通過示例了解如何使用這些屬性。

The Margin Property

The margin property 全部的ows you set 全部的 of the properties for the four margins in one declaration. Here is the syntax to set margin around a paragraph −

下面是一個例子;

Live Demo

<html> <head> </head> <body> <p style = "margin: 15px; border:1px solid black;"> 全部的 four margins will be 15px </p> <p style = "margin:10px 2%; border:1px solid black;"> top and bottom margin will be 10px, left and right margin will be 2% of the total width of the document. </p> <p style = "margin: 10px 2% -10px; border:1px solid black;"> top margin will be 10px, left and right margin will be 2% of the total width of the document, bottom margin will be -10px </p> <p style = "margin: 10px 2% -10px auto; border:1px solid black;"> top margin will be 10px, right margin will be 2% of the total width of the document, bottom margin will be -10px, left margin will be set by the browser </p> </body> </html>

它將產生以下結果&負;

The margin-bottom Property

The margin-bottom property 全部的ows you set bottom margin of an element. It can have a value in length, % or auto.

下面是一個例子;

Live Demo

<html> <head> </head> <body> <p style = "margin-bottom: 15px; border:1px solid black;"> This is a paragraph with a specified bottom margin </p> <p style = "margin-bottom: 5%; border:1px solid black;"> This is another paragraph with a specified bottom margin in percent </p> </body> </html>

它將產生以下結果&負;

The margin-top Property

The margin-top property 全部的ows you set top margin of an element. It can have a value in length, % or auto.

下面是一個例子;

Live Demo

<html> <head> </head> <body> <p style = "margin-top: 15px; border:1px solid black;"> This is a paragraph with a specified top margin </p> <p style = "margin-top: 5%; border:1px solid black;"> This is another paragraph with a specified top margin in percent </p> </body> </html>

它將產生以下結果&負;

The margin-left Property

The margin-left property 全部的ows you set left margin of an element. It can have a value in length, % or auto.

下面是一個例子;

Live Demo

<html> <head> </head> <body> <p style = "margin-left: 15px; border:1px solid black;"> This is a paragraph with a specified left margin </p> <p style = "margin-left: 5%; border:1px solid black;"> This is another paragraph with a specified top margin in percent </p> </body> </html>

它將產生以下結果&負;

The margin-right Property

The margin-right property 全部的ows you set right margin of an element. It can have a value in length, % or auto.

下面是一個例子;

Live Demo

<html> <head> </head> <body> <p style = "margin-right: 15px; border:1px solid black;"> This is a paragraph with a specified right margin </p> <p style = "margin-right: 5%; border:1px solid black;"> This is another paragraph with a specified right margin in percent </p> </body> </html>

它將產生以下結果&負;

CSS - Lists

現在，我們將通過示例了解如何使用這些屬性。

The list-style-type Property

The list-style-type property 全部的ows you to control the shape or style of bullet point (also known as a marker) in the case of unordered lists and the style of numbering characters in ordered lists.

以下是可用於無序列表的值−

Sr.No. Value & Description

1
無

不適用

2
光碟（默認）

填充圓

3
圓圈

空圓圈

4
正方形

填充正方形

以下是可用於有序列表的值;

Value Description Example

decimal Number 1,2,3,4,5

decimal-leading-zero 0 before the number 01, 02, 03, 04, 05

lower-alpha Lowercase alphanumeric characters a, b, c, d, e

upper-alpha Uppercase alphanumeric characters A, B, C, D, E

lower-roman Lowercase Roman numerals i, ii, iii, iv, v

upper-roman Uppercase Roman numerals I, II, III, IV, V

lower-greek The marker is lower-greek alpha, beta, gamma

lower-latin The marker is lower-latin a, b, c, d, e

upper-latin The marker is upper-latin A, B, C, D, E

hebrew The marker is traditional Hebrew numbering

armenian The marker is traditional Armenian numbering

georgian The marker is traditional Georgian numbering

cjk-ideographic The marker is plain ideographic numbers

hiragana The marker is hiragana a, i, u, e, o, ka, ki

katakana The marker is katakana A, I, U, E, O, KA, KI

hiragana-iroha The marker is hiragana-iroha i, ro, ha, ni, ho, he, to

katakana-iroha The marker is katakana-iroha I, RO, HA, NI, HO, HE, TO

下面是一個例子;

Live Demo

<html> <head> </head> <body> <ul style = "list-style-type:circle;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ul> <ul style = "list-style-type:square;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ul> <ol style = "list-style-type:decimal;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ol> <ol style = "list-style-type:lower-alpha;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ol> <ol style = "list-style-type:lower-roman;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ol> </body> </html>

它將產生以下結果&負;

The list-style-position Property

列表樣式位置屬性指示標記應顯示在包含項目符號點的框的內部還是外部。它可以有兩個值之一&負;

Sr.No. Value & Description

1
無

不適用

2
內部

如果文本轉到第二行，文本將在標記下換行。如果列表的值爲outside，則它也將縮進到文本開始的位置。

3
外面

如果文本轉到第二行，則文本將與第一行的開頭對齊（在項目符號的右側）。

下面是一個例子;

Live Demo

<html> <head> </head> <body> <ul style = "list-style-type:circle; list-stlye-position:outside;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ul> <ul style = "list-style-type:square;list-style-position:inside;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ul> <ol style = "list-style-type:decimal;list-stlye-position:outside;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ol> <ol style = "list-style-type:lower-alpha;list-style-position:inside;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ol> </body> </html>

它將產生以下結果&負;

The list-style-image Property

The list-style-image 全部的ows you to specify an image so that you can use your own bullet style. The syntax is similar to the background-image property with the letters url starting the value of the property followed by the URL in brackets. If it does not find the given image then default bullets are used.

下面是一個例子;

Live Demo

<html> <head> </head> <body> <ul> <li style = "list-style-image: url(/images/bullet.gif);">Maths</li> <li>Social Science</li> <li>Physics</li> </ul> <ol> <li style = "list-style-image: url(/images/bullet.gif);">Maths</li> <li>Social Science</li> <li>Physics</li> </ol> </body> </html>

它將產生以下結果&負;

The list-style Property

The list-style 全部的ows you to specify 全部的 the list properties into a single expression. These properties can appear in any order.

下面是一個例子;

Live Demo

<html> <head> </head> <body> <ul style = "list-style: inside square;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ul> <ol style = "list-style: outside upper-alpha;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ol> </body> </html>

它將產生以下結果&負;

The marker-offset Property

The marker-offset property 全部的ows you to specify the distance between the marker and the text relating to that marker. Its value should be a length as shown in the following example −

很遺憾，IE 6或Netscape 7不支持此屬性。

下面是一個例子;

Live Demo

<html> <head> </head> <body> <ul style = "list-style: inside square; marker-offset:2em;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ul> <ol style = "list-style: outside upper-alpha; marker-offset:2cm;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ol> </body> </html>

它將產生以下結果&負;

CSS - Paddings

填充用作前面屬性的簡寫。

現在，我們將通過示例了解如何使用這些屬性。

The padding-bottom Property

padding bottom屬性設置元素的底部填充（空格）。這可以採用長度爲%的值;。

下面是一個例子;

Live Demo

<html> <head> </head> <body> <p style = "padding-bottom: 15px; border:1px solid black;"> This is a paragraph with a specified bottom padding </p> <p style = "padding-bottom: 5%; border:1px solid black;"> This is another paragraph with a specified bottom padding in percent </p> </body> </html>

它將產生以下結果&負;

The padding-top Property

padding top屬性設置元素的頂部填充（空格）。這可以採用長度爲%的值;。

下面是一個例子;

Live Demo

<html> <head> </head> <body> <p style = "padding-top: 15px; border:1px solid black;"> This is a paragraph with a specified top padding </p> <p style = "padding-top: 5%; border:1px solid black;"> This is another paragraph with a specified top padding in percent </p> </body> </html>

它將產生以下結果&負;

The padding-left Property

padding left屬性設置元素的左填充（空格）。這可以採用長度爲%的值;。

下面是一個例子;

Live Demo

<html> <head> </head> <body> <p style = "padding-left: 15px; border:1px solid black;"> This is a paragraph with a specified left padding </p> <p style = "padding-left: 15%; border:1px solid black;"> This is another paragraph with a specified left padding in percent </p> </body> </html>

它將產生以下結果&負;

The padding-right Property

padding right屬性設置元素的右padding（空格）。這可以採用長度爲%的值;。

下面是一個例子;

Live Demo

<html> <head> </head> <body> <p style = "padding-right: 15px; border:1px solid black;"> This is a paragraph with a specified right padding </p> <p style = "padding-right: 5%; border:1px solid black;"> This is another paragraph with a specified right padding in percent </p> </body> </html>

它將產生以下結果&負;

The Padding Property

padding屬性設置元素的左、右、頂部和底部填充（空格）。這可以採用長度爲%的值;。

下面是一個例子;

Live Demo

<html> <head> </head> <body> <p style = "padding: 15px; border:1px solid black;"> 全部的 four padding will be 15px </p> <p style = "padding:10px 2%; border:1px solid black;"> top and bottom padding will be 10px, left and right padding will be 2% of the total width of the document. </p> <p style = "padding: 10px 2% 10px; border:1px solid black;"> top padding will be 10px, left and right padding will be 2% of the total width of the document, bottom padding will be 10px </p> <p style = "padding: 10px 2% 10px 10px; border:1px solid black;"> top padding will be 10px, right padding will be 2% of the total width of the document, bottom padding and top padding will be 10px </p> </body> </html>

它將產生以下結果&負;

CSS - Cursors
1
自動

光標的形狀取決於它所在的上下文區域。例如I over文本，hand over連結，等等。。。
2
十字線

十字線或加號
3
違約

箭
4
指針

指針（在IE 4中，這個值是指針）
5
移動

酒吧
6
電子調整大小

光標指示框的邊將向右（東）移動
7
東北調整大小

光標指示框的邊將向上和向右移動（北/東）
8
西北調整大小

光標指示將向上和向左移動框的邊緣（北/西）
9
不，不，不，不。

光標指示要向上（北）移動框的邊緣
10
他是一個很好的人。

光標指示框的邊將向下和向右移動（南/東）
11
軟體大小調整

光標指示框的邊將向下和向左移動（南/西）
12
s-調整大小

光標指示要向下（南）移動框的邊緣
13
w-調整大小

光標指示框的邊緣將向左（西）移動
14
文本

酒吧
15
等等

一小時玻璃杯
16
幫助

A question mark or b全部的oon, ideal for use over help buttons
17
<url>

光標圖像文件的源

注意−您應該嘗試僅使用這些值爲用戶添加有用的信息，並且在某些地方，用戶會希望看到該光標。例如，當某人懸停在某個連結上時使用十字準線可能會使訪問者感到困惑。

下面是一個例子;

Live Demo

<html> <head> </head> <body> <p>Move the mouse over the words to see the cursor change:</p> <div style = "cursor:auto">Auto</div> <div style = "cursor:crosshair">Crosshair</div> <div style = "cursor:default">Default</div> <div style = "cursor:pointer">Pointer</div> <div style = "cursor:move">Move</div> <div style = "cursor:e-resize">e-resize</div> <div style = "cursor:ne-resize">ne-resize</div> <div style = "cursor:nw-resize">nw-resize</div> <div style = "cursor:n-resize">n-resize</div> <div style = "cursor:se-resize">se-resize</div> <div style = "cursor:sw-resize">sw-resize</div> <div style = "cursor:s-resize">s-resize</div> <div style = "cursor:w-resize">w-resize</div> <div style = "cursor:text">text</div> <div style = "cursor:wait">wait</div> <div style = "cursor:help">help</div> </body> </html>

它將產生以下結果&負;

CSS - Outlines

outline width屬性用於設置輪廓的寬度。

大綱樣式屬性用於設置大綱的線條樣式。

outline color屬性用於設置大綱的顏色。

The outline property is used to set 全部的 the above three properties in a single statement.

The outline-width Property

outline width屬性指定要添加到框中的輪廓的寬度。它的值應該是長度或薄、中或厚的值之一，就像border width屬性一樣。

零像素的寬度意味著沒有輪廓。

下面是一個例子;

Live Demo

<html> <head> </head> <body> <p style = "outline-width:thin; outline-style:solid;"> This text is having thin outline. </p> <br /> <p style = "outline-width:thick; outline-style:solid;"> This text is having thick outline. </p> <br /> <p style = "outline-width:5px; outline-style:solid;"> This text is having 5x outline. </p> </body> </html>

它將產生以下結果&負;

The outline-style Property

outline style屬性指定元素周圍的線（實線、虛線或虛線）的樣式。它可以取下列值之一&負;

無 − No border. (Equivalent of outline-width:0;)

實線−輪廓是一條實線。

虛線−輪廓是一系列點。

虛線是一系列短線。

double−Outline是兩條實線。

groove−輪廓看起來像是刻在頁面上的。

脊−輪廓看起來與凹槽相反。

inset−Outline使框看起來像是嵌入到頁面中。

開始−大綱使框看起來像是從畫布中出來的。

隱藏−與無相同。

下面是一個例子;

Live Demo

<html> <head> </head> <body> <p style = "outline-width:thin; outline-style:solid;"> This text is having thin solid outline. </p> <br /> <p style = "outline-width:thick; outline-style:dashed;"> This text is having thick dashed outline. </p> <br /> <p style = "outline-width:5px;outline-style:dotted;"> This text is having 5x dotted outline. </p> </body> </html>

它將產生以下結果&負;

The outline-color Property

The outline-color property 全部的ows you to specify the color of the outline. Its value should either be a color name, a hex color, or an RGB value, as with the color and border-color properties.

下面是一個例子;

Live Demo

<html> <head> </head> <body> <p style = "outline-width:thin; outline-style:solid;outline-color:red"> This text is having thin solid red outline. </p> <br /> <p style = "outline-width:thick; outline-style:dashed;outline-color:#009900"> This text is having thick dashed green outline. </p> <br /> <p style = "outline-width:5px;outline-style:dotted;outline-color:rgb(13,33,232)"> This text is having 5x dotted blue outline. </p> </body> </html>

它將產生以下結果&負;

The outline Property

The outline property is a shorthand property that 全部的ows you to specify values for any of the three properties discussed previously in any order but in a single statement.

下面是一個例子;

Live Demo

<html> <head> </head> <body> <p style = "outline:thin solid red;"> This text is having thin solid red outline. </p> <br /> <p style = "outline:thick dashed #009900;"> This text is having thick dashed green outline. </p> <br /> <p style = "outline:5px dotted rgb(13,33,232);"> This text is having 5x dotted blue outline. </p> </body> </html>

它將產生以下結果&負;

CSS - Dimension

max width屬性用於設置框的最大寬度。

min width屬性用於設置框的最小寬度。

The Height and Width Properties

The height and width properties 全部的ow you to set the height and width for boxes. They can take values of a length, a percentage, or the keyword auto.

下面是一個例子;

Live Demo

<html> <head> </head> <body> <p style = "width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;"> This paragraph is 400pixels wide and 100 pixels high </p> </body> </html>

它將產生以下結果&負;

The line-height Property

The line-height property 全部的ows you to increase the space between lines of text. The value of the line-height property can be a number, a length, or a percentage.

下面是一個例子;

Live Demo

<html> <head> </head> <body> <p style = "width:400px; height:100px; border:1px solid red; padding:5px; margin:10px; line-height:30px;"> This paragraph is 400pixels wide and 100 pixels high and here line height is 30pixels. This paragraph is 400 pixels wide and 100 pixels high and here line height is 30pixels. </p> </body> </html>

它將產生以下結果&負;

The max-height Property

The max-height property 全部的ows you to specify maximum height of a box. The value of the max-height property can be a number, a length, or a percentage.

注意−此屬性在Netscape 7或IE 6中都不起作用。

下面是一個例子;

Live Demo

<html> <head> </head> <body> <p style = "width:400px; max-height:10px; border:1px solid red; padding:5px; margin:10px;"> This paragraph is 400px wide and max height is 10px This paragraph is 400px wide and max height is 10px This paragraph is 400px wide and max height is 10px This paragraph is 400px wide and max height is 10px </p> <br> <br> <br> <img alt = "logo" src = "/css/images/logo.png" width = "195" height = "84" /> </body> </html>

它將產生以下結果&負;

The min-height Property

The min-height property 全部的ows you to specify minimum height of a box. The value of the min-height property can be a number, a length, or a percentage.

注意−此屬性在Netscape 7或IE 6中都不起作用。

下面是一個例子;

Live Demo

<html> <head> </head> <body> <p style = "width:400px; min-height:200px; border:1px solid red; padding:5px; margin:10px;"> This paragraph is 400px wide and min height is 200px This paragraph is 400px wide and min height is 200px This paragraph is 400px wide and min height is 200px This paragraph is 400px wide and min height is 200px </p> <img alt = "logo" src = "/css/images/logo.png" width = "95" height = "84" /> </body> </html>

它將產生以下結果&負;

The max-width Property

The max-width property 全部的ows you to specify maximum width of a box. The value of the max-width property can be a number, a length, or a percentage.

注意−此屬性在Netscape 7或IE 6中都不起作用。

下面是一個例子;

Live Demo

<html> <head> </head> <body> <p style = "max-width:100px; height:200px; border:1px solid red; padding:5px; margin:10px;"> This paragraph is 200px high and max width is 100px This paragraph is 200px high and max width is 100px This paragraph is 200px high and max width is 100px This paragraph is 200px high and max width is 100px This paragraph is 200px high and max width is 100px </p> <img alt = "logo" src = "/images/css.gif" width = "95" height = "84" /> </body> </html>

這將產生以下結果&負;

The min-width Property

The min-width property 全部的ows you to specify minimum width of a box. The value of the min-width property can be a number, a length, or a percentage.

注意−此屬性在Netscape 7或IE 6中都不起作用。

下面是一個例子;

Live Demo

<html> <head> </head> <body> <p style = "min-width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;"> This paragraph is 100px high and min width is 400px This paragraph is 100px high and min width is 400px </p> <img alt = "logo" src = "/css/images/css.gif" width = "95" height = "84" /> </body> </html>

它將產生以下結果&負;

CSS - Scrollbars
1
可見的

允許內容溢出其包含元素的邊框。
2
隱藏的

嵌套元素的內容只在包含元素的邊界處被截斷，並且不顯示滾動條。
3
捲軸

The size of the containing element does not change, but the scrollbars are added to 全部的ow the user to scroll to see the content.
4
自動

其目的與scroll相同，但只有在內容溢出時才會顯示scrollbar。

下面是一個例子;

Live Demo

<html> <head> <style type = "text/css"> .scroll { display:block; border: 1px solid red; padding:5px; margin-top:5px; width:300px; height:50px; overflow:scroll; } .auto { display:block; border: 1px solid red; padding:5px; margin-top:5px; width:300px; height:50px; overflow:auto; } </style> </head> <body> <p>Example of scroll value:</p> <div class = "scroll"> I am going to keep lot of content here just to show you how scrollbars works if there is an overflow in an element box. This provides your horizontal as well as vertical scrollbars. </div> <br /> <p>Example of auto value:</p> <div class = "auto"> I am going to keep lot of content here just to show you how scrollbars works if there is an overflow in an element box. This provides your horizontal as well as vertical scrollbars. </div> </body> </html>

它將產生以下結果&負;

CSS - Visibility
1
可見的

該框及其內容將顯示給用戶。
2
隱藏的

儘管框及其內容仍會影響頁面的布局，但它們將變爲不可見。
3
塌陷

這僅用於動態表列和行效果。

下面是一個例子;

Live Demo

<html> <head> </head> <body> <p> This paragraph should be visible in normal way. </p> <p style = "visibility:hidden;"> This paragraph should not be visible. </p> </body> </html>

它將產生以下結果&負;

CSS - Positioning

Move Up - Use a negative value for top.

Move Down - Use a positive value for top.

注意−您可以使用底部或右側值，方法與頂部和左側相同。

下面是一個例子;

Live Demo

<html> <head> </head> <body> <div style = "position:relative; left:80px; top:2px; background-color:yellow;"> This div has relative positioning. </div> </body> </html>

它將產生以下結果&負;

Absolute Positioning

An element with position: absolute is positioned at the specified coordinates relative to your 螢幕 top-left corner.

您可以使用兩個值top和left以及position屬性將HTML元素移動到HTML文檔中的任何位置。

Move Left - Use a negative value for left.

Move Right - Use a positive value for left.

Move Up - Use a negative value for top.

Move Down - Use a positive value for top.

注意−您可以使用bottom或right值，方法與top和left相同。

下面是一個例子;

Live Demo

<html> <head> </head> <body> <div style = "position:absolute; left:80px; top:20px; background-color:yellow;"> This div has absolute positioning. </div> </body> </html>

Fixed Positioning

Fixed positioning 全部的ows you to fix the position of an element to a particular spot on the page, regardless of scrolling. Specified coordinates will be relative to the browser window.

您可以使用兩個值top和left以及position屬性將HTML元素移動到HTML文檔中的任何位置。

Move Left - Use a negative value for left.

Move Right - Use a positive value for left.

Move Up - Use a negative value for top.

Move Down - Use a positive value for top.

注意−您可以使用底部或右側值，方法與頂部和左側相同。

下面是一個例子;

Live Demo

<html> <head> </head> <body> <div style = "position:fixed; left:80px; top:20px; background-color:yellow;"> This div has fixed positioning. </div> </body> </html>

CSS - Layers
<body> <div style = "background-color:red; width:300px; height:100px; position:relative; top:10px; left:80px; z-index:2"> </div> <div style = "background-color:yellow; width:300px; height:100px; position:relative; top:-60px; left:35px; z-index:1;"> </div> <div style = "background-color:green; width:300px; height:100px; position:relative; top:-220px; left:120px; z-index:3;"> </div> </body> </html>
它將產生以下結果&負;

CSS - Pseudo Classes

最常用的僞類如下−

Sr.No. Value & Description

1
：連結

使用此類可向未訪問的連結添加特殊樣式。

2
：已訪問

使用此類可向訪問的連結添加特殊樣式。

3
：懸停

當您將滑鼠懸停在某個元素上時，使用此類可將特殊樣式添加到該元素。

4
：活動

使用此類可向活動元素添加特殊樣式。

5
：聚焦

使用此類可在元素具有焦點時向元素添加特殊樣式。

6
：第一個孩子

使用此類可將特殊樣式添加到某個元素的第一個子元素中。

7
：lang
使用此類指定要在指定元素中使用的語言。

在<style>…<style>塊中定義僞類時，應注意以下幾點&負;

a：懸停必須在CSS定義中的a:link和a:visited之後才能生效。

a： active必須在CSS定義中的：hover之後才能生效。

僞類名不區分大小寫。

僞類不同於CSS類，但它們可以組合在一起。

The :link pseudo-class

下面的示例演示如何使用：link類設置連結顏色。可能的值可以是任何有效格式的任何顏色名稱。

Live Demo

<html> <head> <style type = "text/css"> a:link {color:#000000} </style> </head> <body> <a href = "">Black Link</a> </body> </html>

它將產生以下黑色連結&負;

The :visited pseudo-class

下面的示例演示如何使用：visited類設置已訪問連結的顏色。可能的值可以是任何有效格式的任何顏色名稱。

Live Demo

<html> <head> <style type = "text/css"> a:visited {color: #006600} </style> </head> <body> <a href = "">Click this link</a> </body> </html>

這將產生以下連結。一旦你點擊這個連結，它就會把顏色改成綠色。

The :hover pseudo-class

下面的示例演示如何使用：hover類在將滑鼠指針移到連結上時更改連結的顏色。可能的值可以是任何有效格式的任何顏色名稱。

Live Demo

<html> <head> <style type = "text/css"> a:hover {color: #FFCC00} </style> </head> <body> <a href = "">Bring Mouse Here</a> </body> </html>

它將生成以下連結。現在你把滑鼠移到這個連結上，你會看到它的顏色變爲黃色。

The :active pseudo-class

下面的示例演示如何使用：active類更改活動連結的顏色。可能的值可以是任何有效格式的任何顏色名稱。

Live Demo

<html> <head> <style type = "text/css"> a:active {color: #FF00CC} </style> </head> <body> <a href = "">Click This Link</a> </body> </html>

它將生成以下連結。當用戶單擊它時，顏色變爲粉紅色。

The :focus pseudo-class

下面的示例演示如何使用：focus類更改聚焦連結的顏色。可能的值可以是任何有效格式的任何顏色名稱。

Live Demo

<html> <head> <style type = "text/css"> a:focus {color: #0000FF} </style> </head> <body> <a href = "">Click this Link</a> </body> </html>

它將生成以下連結。當此連結聚焦時，其顏色將變爲橙色。當失去焦點時，顏色會變回原來的顏色。

The :first-child pseudo-class

：first child僞類匹配一個指定的元素，該元素是另一個元素的第一個子元素，並向該元素添加特殊樣式，該元素是另一個元素的第一個子元素。

使：第一個孩子在IE<工作;！DOCTYPE>必須在文檔頂部聲明。

For example, to indent the first paragraph of 全部的 <div> elements, you could use this definition −

Live Demo

<html> <head> <style type = "text/css"> div > p:first-child { text-indent: 25px; } </style> </head> <body> <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> <p>But it will not match the paragraph in this HTML:</p> <div> <h3>Heading</h3> <p>The first paragraph inside the div. This paragraph will not be effected.</p> </div> </body> </html>

它將產生以下結果&負;

The :lang pseudo-class

The language pseudo-class :lang, 全部的ows constructing selectors based on the language setting for specific tags.

This class is useful in documents that must appeal to multiple languages that have different conventions for certain language constructs. For example, the French language typic全部的y uses angle brackets (< and >) for quoting purposes, while the English language uses quote marks (' and ').

在需要解決這個差異的文檔中，可以使用：lang僞類適當地更改引號。下面的代碼會根據所使用的語言更改<blockquote>標記;

Live Demo

<html> <head> <style type = "text/css"> /* Two levels of quotes for two languages*/ :lang(en) { quotes: '"' '"' "'" "'"; } :lang(fr) { quotes: "<<" ">>" "<" ">"; } </style> </head> <body> <p>...<q lang = "fr">A quote in a paragraph</q>...</p> </body> </html>

The :lang selectors will apply to 全部的 the elements in the document. However, not 全部的 elements make use of the quotes property, so the effect will be transparent for most elements.

它將產生以下結果&負;

CSS - Pseudo Elements

最常用的僞元素如下−

Sr.No. Value & Description

1
：第一行

使用此元素可將特殊樣式添加到選擇器中文本的第一行。

2
：第一個字母

使用此元素可向選擇器中文本的第一個字母添加特殊樣式。

3
：之前

使用此元素在元素之前插入一些內容。

4
：之後

使用此元素在元素後插入一些內容。

The :first-line pseudo-element

下面的示例演示如何使用：first-line元素向文檔中的第一行元素添加特殊效果。

Live Demo

<html> <head> <style type = "text/css"> p:first-line { text-decoration: underline; } p.noline:first-line { text-decoration: none; } </style> </head> <body> <p class = "noline"> This line would not have any underline because this belongs to nline class. </p> <p> The first line of this paragraph will be underlined as defined in the CSS rule above. Rest of the lines in this paragraph will remain normal. This example shows how to use :first-line pseduo element to give effect to the first line of any HTML element. </p> </body> </html>

它將產生以下連結&負;

The :first-letter pseudo-element

下面的示例演示如何使用：first letter元素向文檔中元素的第一個字母添加特殊效果。

Live Demo

<html> <head> <style type = "text/css"> p:first-letter { font-size: 5em; } p.normal:first-letter { font-size: 10px; } </style> </head> <body> <p class = "normal"> First character of this paragraph will be normal and will have font size 10 px; </p> <p> The first character of this paragraph will be 5em big as defined in the CSS rule above. Rest of the characters in this paragraph will remain normal. This example shows how to use :first-letter pseduo element to give effect to the first characters of any HTML element. </p> </body> </html>

它將產生以下黑色連結&負;

The :before pseudo-element

下面的示例演示如何使用：before元素在任何元素之前添加一些內容。

Live Demo

<html> <head> <style type = "text/css"> p:before { content: url(/images/bullet.gif) } </style> </head> <body> <p> This line will be preceded by a bullet.</p> <p> This line will be preceded by a bullet.</p> <p> This line will be preceded by a bullet.</p> </body> </html>

它將產生以下黑色連結&負;

The :after pseudo-element

下面的示例演示如何使用：after元素在任何元素之後添加一些內容。

Live Demo

<html> <head> <style type = "text/css"> p:after { content: url(/images/bullet.gif) } </style> </head> <body> <p> This line will be succeeded by a bullet.</p> <p> This line will be succeeded by a bullet.</p> <p> This line will be succeeded by a bullet.</p> </body> </html>

它將產生以下黑色連結&負;

CSS - @ Rules

The @import rule

The @import rule 全部的ows you to import styles from another style sheet. It should appear right at the start of the style sheet before any of the rules, and its value is a URL.

它可以用以下兩種方式之一寫&負;

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

The significance of the @import rule is that it 全部的ows you to develop your style sheets with a modular approach. You can create various style sheets and then include them wherever you need them.

The @charset Rule

如果使用ASCII或ISO-8859-1以外的字符集編寫文檔，則可能需要在樣式表頂部設置@charset規則，以指示樣式表使用的字符集。

@charset規則必須寫在樣式表的開頭，前面甚至沒有空格。該值用引號括起來，應該是標準字符集之一。例如−

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

The @font-face Rule

@font face規則用於詳盡地描述文檔中使用的字體。@字體字體還可以用來定義下載字體的位置，儘管這可能會遇到特定於實現的限制。

一般來說，@font face非常複雜，除了擅長字體度量的人之外，不建議任何人使用它。

下面是一個例子;

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

The !important Rule

層疊樣式表層疊。這意味著應用樣式的順序與瀏覽器讀取樣式的順序相同。應用第一種樣式，然後應用第二種樣式，依此類推。

這個！重要規則提供了一種使CSS層疊的方法。它還包括要始終應用的規則。有一條規則！重要屬性將始終應用，無論該規則出現在CSS文檔中的何處。

例如，在以下樣式表中，即使應用的第一個樣式屬性爲紅色，段落文本也將爲黑色：

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

所以，如果您想確保始終應用某個屬性，您可以添加！標記的重要屬性。因此，要使段落文本始終爲紅色，您應該按以下方式編寫它&負;

Live Demo

<html> <head> <style type = "text/css"> p { color: #ff0000 !important; } p { color: #000000; } </style> </head> <body> <p>Tutorialspoint.com</p> </body> </html>

在這裡你已經做了p{顏色：#ff0000！重要信息;}強制，現在即使您定義了另一個規則p{color:#000000;}

它將產生以下結果&負;

CSS Filters - Text and Image Effects
1
不透明度

不透明度級別。0是完全透明的，100是完全不透明的。
2
有限性

對象另一端的不透明度級別。
3
style
不透明度漸變的形狀。

0=均勻

1=線性

2=徑向

3=矩形
4
startX公司

開始不透明漸變的X坐標。
5
starty

開始不透明度漸變的Y坐標。
6
完成

不透明度漸變到結束的X坐標。
7
有限的

不透明度漸變結束的Y坐標。

Example

Live Demo

<html> <head> </head> <body> <p>Image Example:</p> <img src = "/css/images/logo.png" alt = "CSS Logo" style = "Filter: Alpha(Opacity=100, FinishOpacity = 0, Style = 2, StartX = 20, StartY = 40, FinishX = 0, FinishY = 0)" /> <p>Text Example:</p> <div style = "width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: blue; Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=580, FinishY=0)">CSS Tutorials</div> </body> </html>

它將產生以下結果&負;

Motion Blur

運動模糊用於創建方向和強度模糊的圖片或文本。此篩選器中可以使用以下參數−

Sr.No. Parameter & Description

1
添加

是真是假。如果爲真，則圖像將添加到模糊圖像;如果爲假，則圖像不會添加到模糊圖像。

2
direction
模糊的方向，順時針方向，四捨五入到45度增量。默認值爲270（左）。

0=頂部

45=右上

90=右

135=右下

180=底部

225=左下

270=左

315=左上角

3
力量

模糊將擴展的像素數。默認值爲5像素。

Example

Live Demo

<html> <head> </head> <body> <p>Image Example:</p> <img src = "/css/images/logo.png" alt = "CSS Logo" style = "Filter: Blur(Add = 0, Direction = 225, Strength = 10)"> <p>Text Example:</p> <div style = "width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: blue; Filter: Blur(Add = 1, Direction = 225, Strength = 10)">CSS Tutorials </div> </body> </html>

它將產生以下結果&負;

Chroma Filter

Chroma Filter is used to make any particular color transparent and usu全部的y it is used with images. You can use it with scrollbars also. The following parameter can be used in this filter −

Sr.No. Parameter & Description

1
顏色

你想要透明的顏色。

Example

Live Demo

<html> <head> </head> <body> <p>Image Example:</p> <img src = "/images/css.gif" alt = "CSS Logo" style = "Filter: Chroma(Color = #FFFFFF)"> <p>Text Example:</p> <div style = "width: 580; height: 50; font-size: 30pt; font-family: Arial Black; color: #3300FF; Filter: Chroma(Color = #3300FF)">CSS Tutorials</div> </body> </html>

它將產生以下結果&負;

Drop Shadow Effect

放置陰影用於在指定的X（水平）和Y（垂直）偏移和顏色處創建對象的陰影。

此篩選器中可以使用以下參數−

Sr.No. Parameter & Description

1
顏色

dropshadow的顏色，採用RRGGBB格式。

2
離合

放置陰影沿x軸從視覺對象偏移的像素數。正整數向右移動陰影，負整數向左移動陰影。

3
奧菲

放置陰影沿y軸從視覺對象偏移的像素數。正整數向下移動下拉陰影，負整數向上移動下拉陰影。

4
積極的

If true, 全部的 opaque pixels of the object have a dropshadow. If false, 全部的 transparent pixels have a dropshadow. The default is true.

Example

Live Demo

<html> <head> </head> <body> <p>Image Example:</p> <img src = "/css/images/logo.png" alt = "CSS Logo" style = "filter:drop-shadow(2px 2px 1px #FF0000);"> <p>Text Example:</p> <div style = "width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; filter:drop-shadow(3px 3px 2px #000000);">CSS Tutorials</div> </body> </html>

它將產生以下結果&負;

Flip Effect

Flip effect is used to create a mirror image of the object. 此篩選器中可以使用以下參數−

Sr.No. Parameter & Description

1
翻轉

創建水平鏡像

2
翻轉電視

創建垂直鏡像

Example

Live Demo

<html> <head> </head> <body> <p>Image Example:</p> <img src = "/css/images/logo.png" alt = "CSS Logo" style = "filter: FlipH"> <img src = "/css/images/logo.png" alt = "CSS Logo" style = "filter: FlipV"> <p>Text Example:</p> <div style = "width: 300; height: 50; font-size: 30pt; font-family: Arial Black; color: red; filter: FlipV">CSS Tutorials</div> </body> </html>

它將產生以下結果&負;

Glow Effect

Glow effect is used to create a glow around the object. If it is a transparent image, then glow is created around the opaque pixels of it. 此篩選器中可以使用以下參數−

Sr.No. Parameter & Description

1
顏色

你想要的發光顏色。

2
力量

輝光的強度（從1到255）。

Example

Live Demo

<html> <head> </head> <body> <p>Image Example:</p> <img src = "/css/images/logo.png" alt = "CSS Logo" style = "filter: Chroma(Color = #000000) Glow(Color=#00FF00, Strength=20)"> <p>Text Example:</p> <div style = "width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; filter: Glow(Color=#00FF00, Strength=20)">CSS Tutorials</div> </body> </html>

它將產生以下結果&負;

Grayscale Effect

灰度效果用於將對象的顏色轉換爲256個灰度。此篩選器中使用了以下參數−

Sr.No. Parameter & Description

1
Grayscale，Grayscale，Grayscale，Grayscale

將對象的顏色轉換爲256個灰度。

Example

Live Demo

<html> <head> </head> <body> <p>Image Example:</p> <img src = "/css/images/logo.png" alt = "CSS Logo" style = "filter: grayscale(50%)"> <p>Text Example:</p> <div style = "width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; filter: grayscale(50%)">CSS Tutorials</div> </body> </html>

它將產生以下結果&負;

Invert Effect

反轉效果用於將對象的顏色映射到其在顏色譜中的相反值，即創建負圖像。此篩選器中使用了以下參數−

Sr.No. Parameter & Description

1
反轉

將對象的顏色映射到其在顏色譜中的相反值。

Example

Live Demo

<html> <head> </head> <body> <p>Image Example:</p> <img src = "/css/images/logo.png" alt = "CSS Logo" style = "filter: invert(100%)"> <p>Text Example:</p> <div style = "width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; filter: invert(100%)">CSS Tutorials</div> </body> </html>

它將產生以下結果&負;

Mask Effect

遮罩效果用於將透明像素轉換爲指定顏色並使不透明像素透明。此篩選器中使用了以下參數−

Sr.No. Parameter & Description

1
顏色

透明區域將變成的顏色。

Example

Live Demo

<html> <head> </head> <body> <p>Image Example:</p> <img src = "/css/images/logo.png" alt = "CSS Logo" style = "filter: Chroma(Color = #000000) Mask(Color=#00FF00)"> <p>Text Example:</p> <div style = "width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; filter: Mask(Color=#00FF00)">CSS Tutorials </div> </body> </html>

它將產生以下結果&負;

Shadow Filter

Shadow filter is used to create an attenuated shadow in the direction and color specified. This is a filter that lies in between Dropshadow and Glow. 此篩選器中可以使用以下參數−

Sr.No. Parameter & Description

1
顏色

你想要陰影的顏色。

2
direction
模糊的方向，順時針方向，四捨五入到45度增量。默認值爲270（左）。

0=頂部

45=右上

90=右

135=右下

180=底部

225=左下

270=左

315=左上角

Example

Live Demo

<html> <head> </head> <body> <p>Image Example:</p> <img src = "/css/images/logo.png" alt = "CSS Logo" style = "filter: Chroma(Color = #000000) Shadow(Color=#00FF00, Direction=225)"> <p>Text Example:</p> <div style = "width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; filter: Shadow(Color=#0000FF, Direction=225)">CSS Tutorials </div> </body> </html>

它將產生以下結果&負;

Wave Effect

Wave effect is used to give the object a sine wave distortion to make it look wavy. 此篩選器中可以使用以下參數−

Sr.No. Parameter & Description

1
添加

值爲1會將原始圖像添加到波形圖像，0不會。

2
freq
波數。

3
輕

光在波上的強度（從0到100）。

4
相位

正弦波應該在什麼程度開始（從0到100）。

5
力量

波浪效應的強度。

Example

Live Demo

<html> <head> </head> <body> <p>Image Example:</p> <img src = "/css/images/logo.png" alt = "CSS Logo" style = "filter: Chroma(Color = #000000) Wave(Add=0, Freq=1, LightStrength=10, Phase=220, Strength=10)"> <p>Text Example:</p> <div style = "width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; filter: Wave(Add=0, Freq=1, LightStrength=10, Phase=20, Strength=20)">CSS Tutorials </div> </body> </html>

它將產生以下結果&負;

X-Ray Effect

X射線效果灰度化並展平顏色深度。此篩選器中使用以下參數：

Sr.No. Parameter & Description

1
X射線

灰度化並展平顏色深度。

Example

Live Demo

<html> <head> </head> <body> <p>Image Example:</p> <img src = "/css/images/logo.png" alt = "CSS Logo" style = "filter: Xray"> <p>Text Example:</p> <div style = "width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; filter: Xray">CSS Tutorials </div> </body> </html>

它將產生以下結果&負;

CSS - Media Types

下面是一個例子;

<style tyle = "text/css">  </style>

The Document Language

在HTML 4.0中，LINK元素上的media屬性指定外部樣式表的目標媒體−

下面是一個例子−

<style tyle = "text/css">  </style>

Recognized Media Types

爲CSS媒體類型選擇的名稱反映了相關屬性有意義的目標設備。它們提供了媒體類型所指的設備的含義。下面列出了各種媒體類型的列表;

Sr.No. Value & Description

1
全部的

Suitable for 全部的 devices.

2
聽覺的

用於語音合成器。

3
盲文

Intended for 盲文 tactile feedback devices.

4
浮雕

Intended for paged 盲文列印ers.

5
手持式

Intended for 手持式 devices (typic全部的y sm全部的螢幕, monochrome, limited bandwidth).

6
列印

Intended for paged, opaque material and for documents viewed on 螢幕 in 列印 preview mode. Please consult the section on paged media.

7
投影

Intended for projected presentations, for example projectors or 列印 to transparencies. Please consult the section on paged media.

8
螢幕

Intended primarily for color computer 螢幕s.

9
tty公司公司

用於使用固定間距字符網格的媒體，如電傳打字機、終端或顯示能力有限的可攜式設備。

10
電視

用於電視類設備。

注意−媒體類型名稱不區分大小寫。

CSS Paged Media - @page Rule

CSS2定義了一個「頁面框」，這是一個有限維的框，內容在其中呈現。頁面框是一個矩形區域，包含兩個區域−

頁面區域−頁面區域包括該頁上列出的框。頁面區域的邊緣用作分頁符之間發生的布局的初始包含塊。

頁邊距區域−包圍頁面區域。

您可以在@page規則中指定頁面框的尺寸、方向、邊距等。頁面框的維度是用「size」屬性設置的。頁面區域的尺寸是頁面框的尺寸減去邊距區域的尺寸。

For example, the following @page rule sets the page box size to 8.5 × 11 inches and creates '2cm' margin on 全部的 sides between the page box edge and the page area −

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

您可以使用@page規則中的頁邊距、頁邊距頂部、頁邊距底部、頁邊距左側和頁邊距右側屬性來設置頁面的頁邊距。

Fin全部的y, the marks property is used within the @page rule to create crop and registration marks outside the page box on the target sheet. By default, no marks are 列印ed. You may use one or both of the crop and cross keywords to create crop marks and registration marks, respectively, on the target 列印 page.

Setting Page Size

size屬性指定頁框的大小和方向。有四個值可用於頁面大小−

自動 − The page box will be set to the size and orientation of the target sheet.

橫向覆蓋目標的方向。頁面框的大小與目標相同，較長的邊是水平的。

縱向覆蓋目標的方向。頁面框與目標大小相同，較短的邊是水平的。

length − Length values for the 'size' property create an absolute page box. If only one length value is specified, it sets both the width and height of the page box. Percentage values are not 全部的owed for the 'size' property.

在下面的示例中，頁面框的外邊緣將與目標對齊。「margin」屬性的百分比值與目標大小有關，因此如果目標圖紙尺寸爲21.0cm×29.7cm（即A4），則邊距爲2.10cm和2.97cm。

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

以下示例將頁框的寬度設置爲8.5英寸，高度設置爲11英寸。本例中的頁框要求目標頁大小爲8.5「×11」或更大。

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

Once you create a named page layout, you can use it in your document by adding the page property to a style that is later applied to an element in your document. For example, this style renders 全部的 the tables in your document on landscape pages −

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

Due to the above rule, while 列印ing, if the browser encounters a <table> element in your document and the current page layout is the default portrait layout, it starts a new page and 列印s the table on a landscape page.

Left, Right, and First pages

When 列印ing double-sided documents, the page boxes on left and right pages should be different. It can be expressed through two CSS pseudo-classes as follows −

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

您可以使用：first pseudo class−指定文檔第一頁的樣式;

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

Controlling Pagination
除非另行指定，否則只有當頁面格式更改或內容溢出當前頁面框時才會發生分頁符。若要強制或禁止分頁符，請在屬性中使用分頁符before、分頁符after、和分頁符。
在之前分頁符和在之後分頁符都接受自動、始終、避免、左、和右關鍵字。

關鍵字auto是默認值，它允許瀏覽器根據需要生成分頁符。關鍵字always在元素之前或之後強制換頁，而avoid在元素之前或之後禁止換頁。left和right關鍵字強制一個或兩個分頁符，以便元素呈現在左側或右側頁面上。

使用分頁屬性非常簡單。假設您的文檔有一級標題，則用二級標題開始新的章節以表示節。您希望每一章都從一個新的右側頁面開始，但不希望將節標題拆分爲後續內容的分頁符。您可以使用以下規則來實現這一點−

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

僅使用auto和avoid值以及分頁符內的屬性。如果您希望您的表在可能的情況下不被分頁，那麼您可以編寫規則−

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

Controlling Widows and Orphans

In typographic lingo, orphans are those lines of a paragraph stranded at the bottom of a page due to a page break, while widows are those lines remaining at the top of a page following a page break. Gener全部的y, 列印ed pages do not look attractive with single lines of text stranded at the top or bottom. Most 列印ers try to leave at least two or more lines of text at the top or bottom of each page.

orphans屬性指定必須留在頁面底部的段落的最小行數。

widows屬性指定必須留在頁面頂部的段落的最小行數。

下面是在每頁底部創建4行，在頂部創建3行的示例−

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

CSS - Aural Media

Medical documentation

When using 聽覺的 properties, the canvas consists of a three-dimensional physical space (sound surrounds) and a temporal space (one may specify sounds before, during, and after other sounds).

The CSS properties also 全部的ow you to vary the quality of synthesized speech (voice type, frequency, inflection, etc.).

下面是一個例子;

<html> <head> <style type = "text/css"> h1, h2, h3, h4, h5, h6 { voice-family: paul; stress: 20; richness: 90; cue-before: url("../audio/pop.au"); } p { azimuth:center-right; } </style> </head> <body> <h1>Tutorialspoint.com</h1> <h2>Tutorialspoint.com</h2> <h3>Tutorialspoint.com</h3> <h4>Tutorialspoint.com</h4> <h5>Tutorialspoint.com</h5> <h6>Tutorialspoint.com</h6> <p>Tutorialspoint.com</p> </body> </html>

它將產生以下結果&負;

It will direct the speech synthesizer to speak headers in a voice (a kind of audio font) c全部的ed "paul", on a flat tone, but in a very rich voice. Before speaking the headers, a sound sample will be played from the given URL.

「heidi」類的段落看起來來自左前方（如果音響系統能夠提供空間音頻），而「peter」類的段落則來自右前方。

Now we will see the various properties related to 聽覺的 media.

The azimuth property sets, where the sound should come from horizont全部的y.

The elevation property sets, where the sound should come from vertic全部的y.

後面的提示指定在說出某個元素的內容以將其與其他元素分隔開後播放的聲音。

之前的提示指定在說出某個元素的內容以將其與其他元素分隔開之前要播放的聲音。

提示是設置提示前和提示後的簡寫。

pause after指定在說出元素內容後要觀察的暫停。

pause before指定在說出元素內容之前要觀察的暫停。

pause是設置pause before和pause after的簡寫。

音調指定說話聲音的平均音調（頻率）。

節距範圍指定平均節距的變化。

播放過程中的指定在說出元素內容時作爲背景播放的聲音。

豐富度指定說話聲音的豐富度或亮度。

The speak specifies whether text will be rendered 聽覺的ly and if so, in what manner.

說出數字控制如何說出數字。

說標點符號指定標點符號是如何說的。

語音速率指定語音速率。

重音指定語音語調輪廓中「局部峯」的高度。

語音系列指定語音系列名稱的優先級列表。

音量是指聲音的中位數音量。

The azimuth Property

The azimuth property sets where the sound should come from horizont全部的y. The possible values are listed below −

角度−位置以-360deg到360deg範圍內的角度來描述。值0deg表示直接位於聲級中心。 90度在右邊，180度在後面，270度在左邊（或者更方便地說，是-90度）。

左側−與「270度」相同。後面有「270度」。

最左邊−與「300度」相同。後面有240度。

左−與「320度」相同。後面有220度。

左中−與「340deg」相同。後面有200度。

居中−與「0度」相同。後面有180度。

右中−與「20度」相同。後面有160度。

右−與「40度」相同。後面有140度。

最右邊−與「60度」相同。後面有120度。

右側−與「90度」相同。後面有90度。

向左−將聲音向左移動並相對於當前角度。更準確地說，減去20度。

向右−將聲音相對於當前角度向右移動。更準確地說，加上20度。

下面是一個例子;

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

The elevation Property

The elevation property sets where the sound should come from vertic全部的y. The possible values are as follows −

角度−將高程指定爲介於-90度和90度之間的角度。 0deg表示在前地平線上，這大致意味著與偵聽器水平。 90度表示直接開銷，-90度表示正下方。

低於−等於「-90度」。

級別−與「0度」相同。

高於−與「90度」相同。

較高的−將向當前高程添加10度。

lower−從當前高程減去10度。

下面是一個例子;

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

The cue-after Property

cue after屬性指定在說出元素內容以將其與其他元素分隔開後播放的聲音。可能的值包括&減;

url−要播放的聲音文件的url。

無 − Nothing has to be played.

下面是一個例子;

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

The cue-before Property

此屬性指定在說出元素內容以將其與其他元素分隔開之前要播放的聲音。可能的值是&負;

url−要播放的聲音文件的url。

無 − Nothing has to be played.

下面是一個例子;

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

The cue Property

cue屬性是設置cue before和cue after的簡寫。如果給定了兩個值，則第一個值是cue before，第二個值是cue after。如果只給定一個值，則它將應用於這兩個屬性。

例如，以下兩個規則是等價的−

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

The pause-after Property

此屬性指定在說出元素內容後要觀察的暫停。可能的值是&負;

time−以絕對時間單位（秒和毫秒）表示暫停。

percentage−是指語音速率屬性值的倒數。例如，如果語音速率爲每分鐘120字（即一個字需要半秒或500毫秒），則100%的後停頓表示500毫秒，20%的後停頓表示100毫秒。

The pause-before Property

此屬性指定在說出元素內容之前要觀察的暫停。可能的值是&負;

time−以絕對時間單位（秒和毫秒）表示暫停。

percentage−是指語音速率屬性值的倒數。例如，如果語音速率爲每分鐘120字（即一個字需要半秒或500毫秒），則100%的在之前暫停表示500毫秒，20%的在之前暫停表示100毫秒。

The pause Property

此屬性是設置在之前暫停和在之後暫停的簡寫。如果給定兩個值，第一個值是在之前暫停，第二個值是在之後暫停。

下面是一個例子;

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

The pitch Property

此屬性指定說話聲音的平均音調（頻率）。聲音的平均音調取決於聲音家族。例如，標準男聲的平均音調約爲120赫茲，而女聲的平均音調約爲210赫茲。可能的值是&負;

frequency−指定說話聲音的平均音調（赫茲）。

x-low、low、medium、high、x-high−這些值不會映射到絕對頻率，因爲這些值取決於語音系列。

The pitch-range Property

此屬性指定平均間距的變化。可能的值是&負;

數字−介於「0」和「100」之間的值。音高範圍爲「0」會產生單調的聲音。音高範圍爲50會產生正常的屈折。音高範圍大於50會產生動畫聲音。

The play-during Property

此屬性指定在說出元素內容時作爲背景播放的聲音。可能的值可以是以下任何一個值&負;

URI減去此<URI>指定的聲音在說出元素內容時作爲背景播放。

mix−如果存在，則此關鍵字表示繼承自父元素的play during屬性的聲音將繼續播放，並且uri指定的聲音將與之混合。如果未指定mix，則元素的背景聲音將替換父元素的背景聲音。

repeat−出現時，此關鍵字表示如果聲音太短而無法填滿元素的整個持續時間，則聲音將重複出現。否則，聲音會播放一次然後停止。

自動 − The sound of the parent element continues to play.

無 − This keyword means that there is silence.

下面是一個例子;

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

The richness Property

此屬性指定說話聲音的豐富性或亮度。可能的值是&負;

數字−介於「0」和「100」之間的值。值越高，聲音就越大。較低的值將產生柔和、悅耳的聲音。

The speak Property

This property specifies whether text will be rendered 聽覺的ly and if so, in what manner. The possible values are −

無 − Suppresses 聽覺的 rendering so that the element requires no time to render.

normal−使用依賴於語言的發音規則來呈現元素及其子元素。

拼出−一次拼出一個字母。

請注意「volume」屬性值爲「silent」的元素與「speak」屬性值爲「none」的元素之間的區別。前者所占用的時間與所說的時間相同，包括元素前後的任何停頓，但不會產生聲音。後者不需要時間也不需要渲染。

The speak-numeral Property

此屬性控制數字的發音方式。可能的值是&負;

數字−將數字表示爲單個數字。因此，「237」被稱爲「二三七」。

連續−將數字表示爲完整數字。因此，「237」被稱爲「二百三十七」。單詞表示依賴於語言。

The speak-punctuation Property

此屬性指定如何使用標點符號。可能的值是&負;

code − Punctuation such as semicolons, braces, and so on are to be spoken liter全部的y.

無 − Punctuation is not to be spoken, but instead rendered natur全部的y as various pauses.

The speech-rate property

This property specifies the speaking rate. Note that both absolute and relative keyword values are 全部的owed. The possible values are −

number−指定每分鐘以單詞爲單位的講話速率。

x-slow−等於每分鐘80個字。

慢的−與每分鐘120個單詞相同。

中−與每分鐘180-200個單詞相同。

快速與每分鐘300字相同。

x-fast−等於每分鐘500字。

快一點−將每分鐘40個單詞添加到當前語音速率。

慢速−從當前語音速率中每分鐘減去40個單詞。

The stress Property

此屬性指定語音語調輪廓中「局部峯」的高度。英語是一種有重音的語言，句子的不同部分都有一級重音、二級重音或三級重音。可能的值是&負;

數字−介於「0」和「100」之間的值。價值觀的意義取決於所說的語言。例如，一個標準的、講英語的男聲（平均音高=122Hz）的「50」級，用正常的語調和重音說話，其含義與義大利語的「50」不同。

The voice-family Property

該值是一個逗號分隔、按優先級排列的語音家族名稱列表。它可以有以下值&負;

一般語音值是語音系列。可能的值是「男性」、「女性」和「兒童」。

特定的聲音值是特定的實例（例如，喜劇演員、Trinoid、carlos、lani）。

下面是一個例子;

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

The volume Property

音量是指聲音的中位數音量。它可以有以下值&負;

數字−介於「0」和「100」之間的任何數字0'表示最低音量，100表示最高舒適度。

百分比−這些值是相對於繼承的值計算的，然後剪裁到範圍「0」到「100」。

silent − No sound at 全部的. The value '0' does not mean the same as 'silent'.

x-soft−與「0」相同。

軟−與「25」相同。

中−與「50」相同。

大聲−與「75」相同。

x-loud−與「100」相同。

下面是一個例子;

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

類爲「山羊」的段落將非常柔和。

CSS Printing - @media Rule
} @media 列印 { p.bodyText {font-family:georgia, times, serif;} } @media 螢幕, 列印 { p.bodyText {font-size:10pt} } --> </style>
如果要在單獨的文件中定義樣式表，則在連結到外部樣式表時也可以使用「媒體」屬性;

<link rel = "stylesheet" type = "text/css" media = "列印" href = "mystyle.css">

CSS - Layouts

CSS對於Web文檔的未來至關重要，並且將被大多數瀏覽器所支持。

CSS is more exact than tables, 全部的owing your document to be viewed as you intended, regardless of the browser window.

跟蹤嵌套表可能真的很麻煩。CSS規則往往組織良好，易於閱讀，易於更改。

Fin全部的y, we would suggest you to use whichever technology makes sense to you and use what you know or what presents your documents in the best way.

CSS also provides table-layout property to make your tables load much faster. 下面是一個例子−

<table style = "table-layout:fixed;width:600px;"> <tr height = "30"> <td width = "150">CSS table layout cell 1</td> <td width = "200">CSS table layout cell 2</td> <td width = "250">CSS table layout cell 3</td> </tr> </table>

You will notice the benefits more on large tables. With traditional HTML, the browser had to calculate every cell before fin全部的y rendering the table. When you set the table-layout algorithm to fixed, however, it only needs to look at the first row before rendering the whole table. It means your table will need to have fixed column widths and row heights.

Sample Column Layout

下面是使用CSS−創建簡單列布局的步驟;

設置完整文檔的邊距和填充，如下所示−

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

現在，我們將用黃色定義列，稍後，我們將把此規則附加到<div>&減號;

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

到目前爲止，我們將有一個黃色正文的文檔，所以現在讓我們在level0−中定義另一個除法;

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

現在，我們將在level1中再嵌套一個division，並且只更改背景顏色&負;

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

Fin全部的y, we will use the same technique, nest a level3 division inside level2 to get the visual layout for the right column −

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

按如下所示完成原始碼;

Live Demo

<style style = "text/css"> body { margin:9px 9px 0 9px; padding:0; background:#FFF; } #level0 {background:#FC0;} #level1 { margin-left:143px; padding-left:9px; background:#FFF; } #level2 {background:#FFF3AC;} #level3 { margin-right:143px; padding-right:9px; background:#FFF; } #main {background:#CCC;} </style> <body> <div id = "level0"> <div id = "level1"> <div id = "level2"> <div id = "level3"> <div id = "main"> Final Content goes here... </div> </div> </div> </div> </div> </body>

類似地，您可以在頁面頂部添加頂部導航欄或廣告欄。

它將產生以下結果&負;

CSS - Validations
W3C CSS Validator (World Wide Web Consortium), This validator checks your css by either file upload, direct input, or using URI - one page at a time. This validator helps you to locate 全部的 the errors in your CSS. The WDG CSS check validator, lets you validate your css by direct input, file upload, and using URI. Errors will be listed by line and column numbers if you have any. Errors usu全部的y come with links to explain the reason of error.
A CSS validator checks your Cascading Style Sheets to make sure that they comply with the CSS standards set by the W3 Consortium. There are a few validators which will also tell you which CSS features are supported by which browsers (since not 全部的 browsers are equal in their CSS implementation).

Why Validate Your HTML Code?

您應該驗證代碼的原因有很多。但主要的是-;

它有助於跨瀏覽器、跨平台和未來的兼容性。

一個高質量的網站可以提高搜尋引擎的可見性。

專業性：作爲一個web開發人員，您的代碼在被訪問者看到時不應該引發錯誤。

CSS3 - Tutorial

CSS3 is collaboration of CSS2 specifications and new specifications, we can c全部的ed this collaboration is module. Some of the modules are shown below −

Selectors

Box Model

Backgrounds

Image Values and Replaced Content

Text Effects

2D Transformations

3D Transformations

Animations

Multiple Column Layout

User Interface

CSS3 - Rounded Corners
}
下表顯示了圓角的可能值，如下所示;

Sr.No. Value & Description

1
邊界半徑

使用此元素設置四個邊界半徑屬性

2
邊框左上半徑

使用此元素設置左上角的邊框

3
邊框右上半徑

使用此元素設置右上角的邊框

4
邊框右下半徑

使用此元素設置右下角的邊框

5
邊框左下半徑

使用此元素設置左下角的邊框

Example

此屬性可以有三個值。下面的示例同時使用值−

Live Demo

<html> <head> <style> #rcorners1 { border-radius: 25px; background: #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners2 { border-radius: 25px; border: 2px solid #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners3 { border-radius: 25px; background: url(/css/images/logo.png); background-position: left top; background-repeat: repeat; padding: 20px; width: 200px; height: 150px; } </style> </head> <body> <p id = "rcorners1">Rounded corners!</p> <p id = "rcorners2">Rounded corners!</p> <p id = "rcorners3">Rounded corners!</p> </body> </html>

它將產生以下結果&負;

Each Corner property

我們可以指定每個角屬性，如下例所示−

Live Demo

<html> <head> <style> #rcorners1 { border-radius: 15px 50px 30px 5px; background: #a44170; padding: 20px; width: 100px; height: 100px; } #rcorners2 { border-radius: 15px 50px 30px; background: #a44170; padding: 20px; width: 100px; height: 100px; } #rcorners3 { border-radius: 15px 50px; background: #a44170; padding: 20px; width: 100px; height: 100px; } </style> </head> <body> <p id = "rcorners1"></p> <p id = "rcorners2"></p> <p id = "rcorners3"></p> </body> <body>

它將產生以下結果&負;

CSS3 - Border Image

Sr.No. Value & Description

1
邊界圖像源

用於設置圖像路徑

2
邊界圖像切片

用於分割邊界圖像

3
邊框圖像寬度

用於設置邊框圖像寬度

4
邊框圖像重複

用於將邊框圖像設置爲圓形、重複和拉伸

Example

下面的示例演示如何將圖像設置爲元素的邊框。

Live Demo

<html> <head> <style> #borderimg1 { border: 10px solid transparent; padding: 15px; border-image-source: url(/css/images/border.png); border-image-repeat: round; border-image-slice: 30; border-image-width: 10px; } #borderimg2 { border: 10px solid transparent; padding: 15px; border-image-source: url(/css/images/border.png); border-image-repeat: round; border-image-slice: 30; border-image-width: 20px; } #borderimg3 { border: 10px solid transparent; padding: 15px; border-image-source: url(/css/images/border.png); border-image-repeat: round; border-image-slice: 30; border-image-width: 30px; } </style> </head> <body> <p id = "borderimg1">This is image boarder example.</p> <p id = "borderimg2">This is image boarder example.</p> <p id = "borderimg3">This is image boarder example.</p> </body> </html>

它將產生以下結果&負;

CSS3 - Multi Background
}
最常用的值如下所示;

Sr.No. Value & Description

1
背景

Used to setting 全部的 the background image properties in one section

2
背景剪輯

用於聲明背景的繪畫區域

3
背景圖像

用於指定背景圖像

4
背景原點

用於指定背景圖像的位置

5
背景大小

用於指定背景圖像的大小

Example

下面是演示多背景圖像的示例。

Live Demo

<html> <head> <style> #multibackground { background-image: url(/css/images/logo.png), url(/css/images/border.png); background-position: left top, left top; background-repeat: no-repeat, repeat; padding: 75px; } </style> </head> <body> <div id = "multibackground"> <h1>www.tutorialspoint.com</h1> <p> Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms. The journey commenced with a single tutorial on HTML in 2006 and elated by the response it generated, we worked our way to adding fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and 全部的ied articles on topics ranging from programming languages to web designing to academics and much more.. </p> </div> </body> </html>

它將產生以下結果&負;

Size of Multi background

多背景屬性可以爲不同的圖像添加不同的大小;

#multibackground { background: url(/css/imalges/logo.png) left top no-repeat, url(/css/images/boarder.png) right bottom no-repeat, url(/css/images/css.gif) left top repeat; background-size: 50px, 130px, auto; }

如上所示，每個圖像具有特定的大小，如50px、130px和自動大小。

CSS3 - Colors

#d1 {background-color: rgba(255, 0, 0, 0.5);} #d2 {background-color: rgba(0, 255, 0, 0.5);} #d3 {background-color: rgba(0, 0, 255, 0.5);}

HSL表示色調、飽和度、亮度。這裡色輪上有一個很大的度，飽和度和亮度是介於0到100%之間的百分比值。HSL的示例語法如下所示−

#g1 {background-color: hsl(120, 100%, 50%);} #g2 {background-color: hsl(120, 100%, 75%);} #g3 {background-color: hsl(120, 100%, 25%);}

HSLA表示色調、飽和度、明度和α。Alpha值指定不透明度，如RGBA所示。HSLA的示例語法如下所示−

#g1 {background-color: hsla(120, 100%, 50%, 0.3);} #g2 {background-color: hsla(120, 100%, 75%, 0.3);} #g3 {background-color: hsla(120, 100%, 25%, 0.3);}

不透明度 is a thinner paints need black added to increase opacity. A sample syntax of opacity is as shown below −

#g1 {background-color:rgb(255,0,0);opacity:0.6;} #g2 {background-color:rgb(0,255,0);opacity:0.6;} #g3 {background-color:rgb(0,0,255);opacity:0.6;}

下面的示例顯示rgba color屬性。

Live Demo

<html> <head> <style> #p1 {background-color:rgba(255,0,0,0.3);} #p2 {background-color:rgba(0,255,0,0.3);} #p3 {background-color:rgba(0,0,255,0.3);} </style> </head> <body> <p>RGBA colors:</p> <p id = "p1">Red</p> <p id = "p2">Green</p> <p id = "p3">Blue</p> </body> </html>

它將產生以下結果&負;

下面的示例顯示HSL color屬性。

Live Demo

<html> <head> <style> #g1 {background-color:hsl(120, 100%, 50%);} #g2 {background-color:hsl(120,100%,75%);} #g3 {background-color:hsl(120,100%,25%);} </style> </head> <body> <p>HSL colors:</p> <p id = "g1">Green</p> <p id = "g2">Normal Green</p> <p id = "g3">Dark Green</p> </body> </html>

它將產生以下結果&負;

下面的示例顯示HSLA color屬性。

Live Demo

<html> <head> <style> #d1 {background-color:hsla(120,100%,50%,0.3);} #d2 {background-color:hsla(120,100%,75%,0.3);} #d3 {background-color:hsla(120,100%,25%,0.3);} </style> </head> <body> <p>HSLA colors:</p> <p id = "d1">Less opacity green</p> <p id = "d2">Green</p> <p id = "d3">Green</p> </body> </html>

它將產生以下結果&負;

下面的示例顯示不透明度屬性。

Live Demo

<html> <head> <style> #m1 {background-color:rgb(255,0,0);opacity:0.6;} #m2 {background-color:rgb(0,255,0);opacity:0.6;} #m3 {background-color:rgb(0,0,255);opacity:0.6;} </style> </head> <body> <p>HSLA colors:</p> <p id = "m1">Red</p> <p id = "m2">Green</p> <p id = "m3">Blue</p> </body> </html>

它將產生以下結果&負;

CSS3 - Gradients

Linear gradients

線性漸變用於以線性格式（如從上到下）排列兩種或更多顏色。

Top to bottom

Live Demo

<html> <head> <style> #grad1 { height: 100px; background: -webkit-linear-gradient(pink,green); background: -o-linear-gradient(pink,green); background: -moz-linear-gradient(pink,green); background: linear-gradient(pink,green); } </style> </head> <body> <div id = "grad1"></div> </body> </html>

它將產生以下結果&負;

Left to right

Live Demo

<html> <head> <style> #grad1 { height: 100px; background: -webkit-linear-gradient(left, red , blue); background: -o-linear-gradient(right, red, blue); background: -moz-linear-gradient(right, red, blue); background: linear-gradient(to right, red , blue); } </style> </head> <body> <div id = "grad1"></div> </body> </html>

它將產生以下結果&負;

Diagonal

對角線從左上角和右上角開始。

Live Demo

<html> <head> <style> #grad1 { height: 100px; background: -webkit-linear-gradient(left top, red , blue); background: -o-linear-gradient(bottom right, red, blue); background: -moz-linear-gradient(bottom right, red, blue); background: linear-gradient(to bottom right, red , blue); } </style> </head> <body> <div id = "grad1"></div> </body> </html>

它將產生以下結果&負;

Multi color

Live Demo

<html> <head> <style> #grad2 { height: 100px; background: -webkit-linear-gradient(red, orange, yellow, red, blue, green,pink); background: -o-linear-gradient(red, orange, yellow, red, blue, green,pink); background: -moz-linear-gradient(red, orange, yellow, red, blue, green,pink); background: linear-gradient(red, orange, yellow, red, blue, green,pink); } </style> </head> <body> <div id = "grad2"></div> </body> </html>

它將產生以下結果&負;

CSS3 Radial Gradients

徑向梯度出現在中心。

Live Demo

<html> <head> <style> #grad1 { height: 100px; width: 550px; background: -webkit-radial-gradient(red 5%, green 15%, pink 60%); background: -o-radial-gradient(red 5%, green 15%, pink 60%); background: -moz-radial-gradient(red 5%, green 15%, pink 60%); background: radial-gradient(red 5%, green 15%, pink 60%); } </style> </head> <body> <div id = "grad1"></div> </body> </html>

它將產生以下結果&負;

CSS3 Repeat Radial Gradients

Live Demo

<html> <head> <style> #grad1 { height: 100px; width: 550px; background: -webkit-repeating-radial-gradient(blue, yellow 10%, green 15%); background: -o-repeating-radial-gradient(blue, yellow 10%, green 15%); background: -moz-repeating-radial-gradient(blue, yellow 10%, green 15%); background: repeating-radial-gradient(blue, yellow 10%, green 15%); } </style> </head> <body> <div id = "grad1"></div> </body> </html>

它將產生以下結果&負;

CSS3 - Shadow

<html> <head> <style> h1 { text-shadow: 2px 2px; } h2 { text-shadow: 2px 2px red; } h3 { text-shadow: 2px 2px 5px red; } h4 { color: white; text-shadow: 2px 2px 4px #000000; } h5 { text-shadow: 0 0 3px #FF0000; } h6 { text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF; } p { color: white; text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue; } </style> </head> <body> <h1>Tutorialspoint.com</h1> <h2>Tutorialspoint.com</h2> <h3>Tutorialspoint.com</h3> <h4>Tutorialspoint.com</h4> <h5>Tutorialspoint.com</h5> <h6>Tutorialspoint.com</h6> <p>Tutorialspoint.com</p> </body> </html>

它將產生以下結果&負;

box shadow

用於向元素添加陰影效果，下面是向元素添加陰影效果的示例。

Live Demo

<html> <head> <style> div { width: 300px; height: 100px; padding: 15px; background-color: red; box-shadow: 10px 10px; } </style> </head> <body> <div>This is a div element with a box-shadow</div> </body> </html>

它將產生以下結果&負;

CSS3 - Text
Sr.No. Value & Description 1
[B]Text-align-lastText-align-last

用於對齊文本的最後一行
2
文本強調

用於強調文本和顏色
3
文本溢出

用於確定如何向用戶發送未顯示的溢出內容的信號
4
斷字

用來斷線
5
自動換行

用來斷線和換行

Text-overflow

文本溢出屬性確定如何向用戶發送未顯示的溢出內容的信號。文本溢出的示例如下所示−

Live Demo

<html> <head> <style> p.text1 { white-space: nowrap; width: 500px; border: 1px solid #000000; overflow: hidden; text-overflow: clip; } p.text2 { white-space: nowrap; width: 500px; border: 1px solid #000000; overflow: hidden; text-overflow: ellipsis; } </style> </head> <body> <b>Original Text:</b> <p> Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms. </p> <b>Text overflow:clip:</b> <p class = "text1"> Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms. </p> <b>Text overflow:ellipsis</b> <p class = "text2"> Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms. </p> </body> </html>

它將產生以下結果&負;

CSS3 Word Breaking

用於斷行，下面的代碼顯示了斷字的示例代碼。

Live Demo

<html> <head> <style> p.text1 { width: 140px; border: 1px solid #000000; word-break: keep-全部的; } p.text2 { width: 140px; border: 1px solid #000000; word-break: break-全部的; } </style> </head> <body> <b>line break at hyphens:</b> <p class = "text1"> Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms. </p> <b>line break at any character</b> <p class = "text2"> Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms. </p> </body> </html>

它將產生以下結果&負;

CSS word wrapping

換行用於換行並換行到下一行;

p { word-wrap: break-word; }

CSS3 - Web Fonts
1
TrueType字體（TTF）

TrueType是蘋果和微軟在20世紀80年代後期開發的一種大綱字體標準，它成爲windows和MAC作業系統中最常用的字體。
2
OpenType字體（OTF）

OpenType是一種可伸縮的計算機字體格式，由微軟開發
3
Web打開字體格式（WOFF）

WOFF用於網頁開發，開發於2009年。現在W3C推薦使用它。
4
SVG字體/形狀

SVG 全部的ow SVG fonts within SVG documentation. We can also apply CSS to SVG with font face property.
5
嵌入式OpenType字體（EOT）

EOT is used to develop the web pages and it has embedded in webpages so no need to 全部的ow 3rd party fonts

下面的代碼顯示了字體face&minus的示例代碼;

Live Demo

<html> <head> <style> @font-face { font-family: myFirstFont; src: url(/css/font/SansationLight.woff); } div { font-family: myFirstFont; } </Style> </head> <body> <div>This is the example of font face with CSS3.</div> <p><b>Original Text :</b>This is the example of font face with CSS3.</p> </body> </html>

它將產生以下結果&負;

Fonts description

The following list contained 全部的 the fonts description which are placed in the @font-face rule −

Sr.No. Value & Description

1
字體系列

用於定義字體名稱

2
src公司

用於定義URL

3
字體拉伸

用於查找字體應如何拉伸

4
form-style
用於定義字體樣式

5
字體粗細

用於定義字體粗細（粗體）

CSS3 - 2d Transforms
1
矩陣（n，n，n，n，n，n，n）

用於定義具有六個值的矩陣變換
2
平移（x，y）

用於沿x軸和y軸變換元素
3
translateX（n）

用於沿x軸變換元素
4
翻譯（n）

用於沿y軸變換元素
5
scale（x，y
用於更改元素的寬度和高度
6
斯卡萊克斯（n）

用於更改元素的寬度
7
斯卡利（n）

用於更改元素的高度
8
旋轉（角度）

用於根據角度旋轉元素
9
斜交（角度）

用於定義沿x軸的傾斜變換
10
傾斜（角度）

用於定義沿y軸的傾斜變換

The following examples are shown the sample of 全部的 above properties.

Rotate 20 degrees

框旋轉20度角，如下圖所示;

Live Demo

<html> <head> <style> div { width: 300px; height: 100px; background-color: pink; border: 1px solid black; } div#myDiv { /* IE 9 */ -ms-transform: rotate(20deg); /* Safari */ -webkit-transform: rotate(20deg); /* Standard syntax */ transform: rotate(20deg); } </style> </head> <body> <div> Tutorials point.com. </div> <div id = "myDiv"> Tutorials point.com </div> </body> </html>

它將產生以下結果&負;

Rotate -20 degrees

以-20度角旋轉盒子，如下所示;

Live Demo

<html> <head> <style> div { width: 300px; height: 100px; background-color: pink; border: 1px solid black; } div#myDiv { /* IE 9 */ -ms-transform: rotate(-20deg); /* Safari */ -webkit-transform: rotate(-20deg); /* Standard syntax */ transform: rotate(-20deg); } </style> </head> <body> <div> Tutorials point.com. </div> <div id = "myDiv"> Tutorials point.com </div> </body> </html>

它將產生以下結果&負;

Skew X axis

框旋轉，x軸傾斜，如下所示;

Live Demo

<html> <head> <style> div { width: 300px; height: 100px; background-color: pink; border: 1px solid black; } div#skewDiv { /* IE 9 */ -ms-transform: skewX(20deg); /* Safari */ -webkit-transform: skewX(20deg); /* Standard syntax */ transform: skewX(20deg); } </style> </head> <body> <div> Tutorials point.com. </div> <div id = "skewDiv"> Tutorials point.com </div> </body> </html>

它將產生以下結果&負;

Skew Y axis

框旋轉，y軸傾斜，如下所示;

Live Demo

<html> <head> <style> div { width: 300px; height: 100px; background-color: pink; border: 1px solid black; } div#skewDiv { /* IE 9 */ -ms-transform: skewY(20deg); /* Safari */ -webkit-transform: skewY(20deg); /* Standard syntax */ transform: skewY(20deg); } </style> </head> <body> <div> Tutorials point.com. </div> <div id = "skewDiv"> Tutorials point.com </div> </body> </html>

它將產生以下結果&負;

Matrix transform

帶矩陣變換的長方體旋轉，如下所示;

Live Demo

<html> <head> <style> div { width: 300px; height: 100px; background-color: pink; border: 1px solid black; } div#myDiv1 { /* IE 9 */ -ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */ -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Standard syntax */ transform: matrix(1, -0.3, 0, 1, 0, 0); } </style> </head> <body> <div> Tutorials point.com. </div> <div id = "myDiv1"> Tutorials point.com </div> </body> </html>

它將產生以下結果&負;

矩陣變換爲另一個方向。

Live Demo

<html> <head> <style> div { width: 300px; height: 100px; background-color: pink; border: 1px solid black; } div#myDiv2 { /* IE 9 */ -ms-transform: matrix(1, 0, 0.5, 1, 150, 0); /* Safari */ -webkit-transform: matrix(1, 0, 0.5, 1, 150, 0); /* Standard syntax */ transform: matrix(1, 0, 0.5, 1, 150, 0); } </style> </head> <body> <div> Tutorials point.com. </div> <div id = "myDiv2"> Tutorials point.com </div> </body> </html>

它將產生以下結果&負;

CSS3 - 3D Transforms
1
階段矩陣3d，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n

用於使用16個矩陣值轉換元素
2
translate3d（
用於使用x軸、y軸和z軸變換元素
3
translateX（x）

用於使用x軸變換元素
4
Translatey（Y）

用於使用y軸變換元素
5
translatez（
用於使用y軸變換元素
6
斯卡萊克斯（x）

用於使用x軸縮放變換元素
7
斯卡利（y）

用於使用y軸縮放變換元素
8
斯卡利（y）

用於使用z軸變換元素
9
旋轉（角度）

用於使用x軸旋轉變換元素
10
旋轉角度

用於使用y軸旋轉變換元素
11
旋轉（角度）

用於使用z軸旋轉變換元素

X-axis 3D transforms

下面的示例顯示x軸三維變換。

Live Demo

<html> <head> <style> div { width: 200px; height: 100px; background-color: pink; border: 1px solid black; } div#myDiv { -webkit-transform: rotateX(150deg); /* Safari */ transform: rotateX(150deg); /* Standard syntax */ } </style> </head> <body> <div> tutorials point.com </div> <p>Rotate X-axis</p> <div id = "myDiv"> tutorials point.com. </div> </body> </html>

它將產生以下結果&負;

Y-axis 3D transforms

下面的示例顯示了y軸三維變換−

Live Demo

<html> <head> <style> div { width: 200px; height: 100px; background-color: pink; border: 1px solid black; } div#yDiv { -webkit-transform: rotateY(150deg); /* Safari */ transform: rotateY(150deg); /* Standard syntax */ } </style> </head> <body> <div> tutorials point.com </div> <p>Rotate Y axis</p> <div id = "yDiv"> tutorials point.com. </div> </body> </html>

它將產生以下結果&負;

Z-axis 3D transforms

下面的示例顯示Z軸三維變換−

Live Demo

<html> <head> <style> div { width: 200px; height: 100px; background-color: pink; border: 1px solid black; } div#zDiv { -webkit-transform: rotateZ(90deg); /* Safari */ transform: rotateZ(90deg); /* Standard syntax */ } </style> </head> <body> <div> tutorials point.com </div> <p>rotate Z axis</p> <div id = "zDiv"> tutorials point.com. </div> </body> </html>

它將產生以下結果&負;

CSS3 - Animation
} div { width: 100px; height: 100px; background-color: red; animation-name: animation; animation-duration: 5s; }
上面的示例使用關鍵幀語法顯示動畫的高度、寬度、顏色、名稱和持續時間。

Moving left animation

Live Demo

<html> <head> <style type = "text/css"> h1 { -moz-animation-duration: 3s; -webkit-animation-duration: 3s; -moz-animation-name: slidein; -webkit-animation-name: slidein; } @-moz-keyframes slidein { from { margin-left:100%; width:300% } to { margin-left:0%; width:100%; } } @-webkit-keyframes slidein { from { margin-left:100%; width:300% } to { margin-left:0%; width:100%; } } </style> </head> <body> <h1>Tutorials Point</h1> <p>this is an example of moving left animation .</p> <button onclick = "myFunction()">Reload page</button> <script> function myFunction() { location.reload(); } </script> </body> </html>

它將產生以下結果&負;

Moving left animation with keyframes

Live Demo

<html> <head> <style type = "text/css"> h1 { -moz-animation-duration: 3s; -webkit-animation-duration: 3s; -moz-animation-name: slidein; -webkit-animation-name: slidein; } @-moz-keyframes slidein { from { margin-left:100%; width:300% } 75% { font-size:300%; margin-left:25%; width:150%; } to { margin-left:0%; width:100%; } } @-webkit-keyframes slidein { from { margin-left:100%; width:300% } 75% { font-size:300%; margin-left:25%; width:150%; } to { margin-left:0%; width:100%; } } </style> </head> <body> <h1>Tutorials Point</h1> <p>This is an example of animation left with an extra keyframe to make text changes.</p> <button onclick = "myFunction()">Reload page</button> <script> function myFunction() { location.reload(); } </script> </body> </html>

它將產生以下結果&負;

CSS3 - Multi Columns
1
列計數

用於計算該元素應劃分的列數。
2
列填充

用於決定如何填充列。
3
柱間隙

用於確定列之間的間距。
4
Column-Rule

用於指定規則數。
5
規則顏色

用於指定列規則顏色。
6
規則樣式

用於指定列的樣式規則。
7
rule-width

用於指定寬度。
8
Column-Span

用於指定列之間的跨距。

Example

下面的例子顯示了文本作爲新的紙張結構的排列。

Live Demo

<html> <head> <style> .multi { /* Column count property */ -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; /* Column gap property */ -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; /* Column style property */ -webkit-column-rule-style: solid; -moz-column-rule-style: solid; column-rule-style: solid; } </style> </head> <body> <div class = "multi"> Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms. The journey commenced with a single tutorial on HTML in 2006 and elated by the response it generated, we worked our way to adding fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and 全部的ied articles on topics ranging from programming languages to web designing to academics and much more. </div> </body> </html>

它將產生以下結果&負;

假設，如果用戶希望將文本製作爲不帶行的新紙張，我們可以通過刪除如下所示的樣式語法來完成此操作;

.multi { /* Column count property */ -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; /* Column gap property */ -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; }

它將產生以下結果&負;

CSS3 - User Interface
1
外觀

Used to 全部的ow the user to make elements as user interface elements.
2
盒子大小

允許用戶以清晰的方式修復區域上的元素。
3
圖標

用於提供區域上的圖標。
4
調整大小

用於調整區域上的元素的大小。
5
輪廓偏移

用來畫輪廓的後面。
6
導航下降

用於在按下鍵盤上的向下箭頭按鈕後向下移動。
7
左導航

用於在按下鍵盤上的左箭頭按鈕後向左移動。
8
導航右

當您按下鍵盤上的右箭頭按鈕時，用於向右移動。
9
導航向上

用於在按下鍵盤上的向上箭頭按鈕後向上移動。

Example of resize property

Resize屬性有三個常用值，如下所示−

horizontal

vertical

both

在css3用戶界面的resize屬性中使用both值−

Live Demo

<html> <head> <style> div { border: 2px solid; padding: 20px; width: 300px; resize: both; overflow: auto; } </style> </head> <body> <div>TutorialsPoint.com</div> </body> </html>

它將產生以下結果&負;

CSS3 Outline offset

外線是指在邊界外的元素周圍畫一條線。

Live Demo

<html> <head> <style> div { margin: 20px; padding: 10px; width: 300px; height: 100px; border: 5px solid pink; outline: 5px solid green; outline-offset: 15px; } </style> </head> <body> <div>TutorialsPoint</div> </body> </html>

它將產生以下結果&負;

CSS3 - Box Sizing

<html> <head> <style> .div1 { width: 200px; height: 100px; border: 1px solid green; } .div2 { width: 200px; height: 100px; padding: 50px; border: 1px solid pink; } </style> </head> <body> <div class = "div1">TutorialsPoint.com</div><br /> <div class = "div2">TutorialsPoint.com</div> </body> </html>

它將產生以下結果&負;

上面的圖像具有兩個元素相同的寬度和高度但給出的結果不同，因爲第二個元素包含填充屬性。

CSS3 box sizing property

Live Demo

<html> <head> <style> .div1 { width: 300px; height: 100px; border: 1px solid blue; box-sizing: border-box; } .div2 { width: 300px; height: 100px; padding: 50px; border: 1px solid red; box-sizing: border-box; } </style> </head> <body> <div class = "div1">TutorialsPoint.com</div><br /> <div class = "div2">TutorialsPoint.com</div> </body> </html>

上面的示例具有與框大小相同的高度和寬度：border box。結果如下所示。

它將產生以下結果&負;

上面的元素具有與框大小相同的高度和寬度：邊框框，因此兩個元素的結果始終相同，如上圖所示。

CSS - Responsive
<html> <head> <style> body { font: 600 14px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif; } h1 { color: #9799a7; font-size: 14px; font-weight: bold; margin-bottom: 6px; } .container:before, .container:after { content: ""; display: table; } .container:after { clear: both; } .container { background: #eaeaed; margin-bottom: 24px; *zoom: 1; } .container-75 { width: 75%; } .container-50 { margin-bottom: 0; width: 50%; } .container, section, aside { border-radius: 6px; } section, aside { background: #2db34a; color: #fff; margin: 1.858736059%; padding: 20px 0; text-align: center; } section { float: left; width: 63.197026%; } aside { float: right; width: 29.3680297%; } </style> </head> <body> <h1>100% Wide Container</h1> <div class = "container"> <section>Section</section> <aside>Aside</aside> </div> <h1>75% Wide Container</h1> <div class = "container container-75"> <section>Section</section> <aside>Aside</aside> </div> <h1>50% Wide Container</h1> <div class = "container container-50"> <section>Section</section> <aside>Aside</aside> </div> </body> </html>
它將產生以下結果&負;

Media queries

媒體查詢針對不同大小的設備（如手機、台式機等）的不同樣式規則。，

Live Demo

<html> <head> <style> body { background-color: lightpink; } @media 螢幕 and (max-width: 420px) { body { background-color: lightblue; } } </style> </head> <body> <p> If 螢幕 size is less than 420px, then it will show lightblue color, or else it will show light pink color </p> </body> </html>

它將產生以下結果&負;

Bootstrap responsive web design

Bootstrap is most popular web design framework based on HTML,CSS and Java script and it helps you to design web pages in responsive way for 全部的 devices.

Live Demo

<html> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "width=device-width, initial-scale = 1"> <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <style> body { color:green; } </style> </head> <body> <div class = "container"> <div class = "jumbotron"> <h1>Tutorials point</h1> <p> Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms. </p> </div> <div class = "row"> <div class = "col-md-4"> <h2>Android</h2> <p> Android is an open source and Linux-based operating system for mobile devices such as smartphones and tablet computers. Android was developed by the Open Handset Alliance, led by Google, and other companies. </p> </div> <div class = "col-md-4"> <h2>CSS</h2> <p> Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable. </p> </div> <div class = "col-md-4"> <h2>Java</h2> <p> Java is a high-level programming language origin全部的y developed by Sun Microsystems and released in 1995. Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. This tutorial gives a complete understanding of Java. </p> </div> </div> </body> </html>

它將產生以下結果&負;

Color	Color HEX
	#000000
	#FF0000
	#00FF00
	#0000FF
	#FFFF00
	#00FFFF
	#FF00FF
	#C0C0C0
	#FFFFFF

Color	Color RGB
	rgb(0,0,0)
	rgb(255,0,0)
	rgb(0,255,0)
	rgb(0,0,255)
	rgb(255,255,0)
	rgb(0,255,255)
	rgb(255,0,255)
	rgb(192,192,192)
	rgb(255,255,255)

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

Sr.No.	Value & Description
1	無不適用
2	光碟（默認）填充圓
3	圓圈空圓圈
4	正方形填充正方形

Value	Description	Example
decimal	Number	1,2,3,4,5
decimal-leading-zero	0 before the number	01, 02, 03, 04, 05
lower-alpha	Lowercase alphanumeric characters	a, b, c, d, e
upper-alpha	Uppercase alphanumeric characters	A, B, C, D, E
lower-roman	Lowercase Roman numerals	i, ii, iii, iv, v
upper-roman	Uppercase Roman numerals	I, II, III, IV, V
lower-greek	The marker is lower-greek	alpha, beta, gamma
lower-latin	The marker is lower-latin	a, b, c, d, e
upper-latin	The marker is upper-latin	A, B, C, D, E
hebrew	The marker is traditional Hebrew numbering
armenian	The marker is traditional Armenian numbering
georgian	The marker is traditional Georgian numbering
cjk-ideographic	The marker is plain ideographic numbers
hiragana	The marker is hiragana	a, i, u, e, o, ka, ki
katakana	The marker is katakana	A, I, U, E, O, KA, KI
hiragana-iroha	The marker is hiragana-iroha	i, ro, ha, ni, ho, he, to
katakana-iroha	The marker is katakana-iroha	I, RO, HA, NI, HO, HE, TO

Sr.No.	Value & Description
1	：連結使用此類可向未訪問的連結添加特殊樣式。
2	：已訪問使用此類可向訪問的連結添加特殊樣式。
3	：懸停當您將滑鼠懸停在某個元素上時，使用此類可將特殊樣式添加到該元素。
4	：活動使用此類可向活動元素添加特殊樣式。
5	：聚焦使用此類可在元素具有焦點時向元素添加特殊樣式。
6	：第一個孩子使用此類可將特殊樣式添加到某個元素的第一個子元素中。
7	：lang 使用此類指定要在指定元素中使用的語言。

Sr.No.	Value & Description
1	：第一行使用此元素可將特殊樣式添加到選擇器中文本的第一行。
2	：第一個字母使用此元素可向選擇器中文本的第一個字母添加特殊樣式。
3	：之前使用此元素在元素之前插入一些內容。
4	：之後使用此元素在元素後插入一些內容。

Sr.No.	Parameter & Description
1	顏色 dropshadow的顏色，採用RRGGBB格式。
2	離合放置陰影沿x軸從視覺對象偏移的像素數。正整數向右移動陰影，負整數向左移動陰影。
3	奧菲放置陰影沿y軸從視覺對象偏移的像素數。正整數向下移動下拉陰影，負整數向上移動下拉陰影。
4	積極的 If true, 全部的 opaque pixels of the object have a dropshadow. If false, 全部的 transparent pixels have a dropshadow. The default is true.

Sr.No.	Parameter & Description
1	添加值爲1會將原始圖像添加到波形圖像，0不會。
2	freq 波數。
3	輕光在波上的強度（從0到100）。
4	相位正弦波應該在什麼程度開始（從0到100）。
5	力量波浪效應的強度。

Sr.No.	Value & Description
1	全部的 Suitable for 全部的 devices.
2	聽覺的用於語音合成器。
3	盲文 Intended for 盲文 tactile feedback devices.
4	浮雕 Intended for paged 盲文列印ers.
5	手持式 Intended for 手持式 devices (typic全部的y sm全部的螢幕, monochrome, limited bandwidth).
6	列印 Intended for paged, opaque material and for documents viewed on 螢幕 in 列印 preview mode. Please consult the section on paged media.
7	投影 Intended for projected presentations, for example projectors or 列印 to transparencies. Please consult the section on paged media.
8	螢幕 Intended primarily for color computer 螢幕s.
9	tty公司公司用於使用固定間距字符網格的媒體，如電傳打字機、終端或顯示能力有限的可攜式設備。
10	電視用於電視類設備。

Sr.No.	Value & Description
1	邊界半徑使用此元素設置四個邊界半徑屬性
2	邊框左上半徑使用此元素設置左上角的邊框
3	邊框右上半徑使用此元素設置右上角的邊框
4	邊框右下半徑使用此元素設置右下角的邊框
5	邊框左下半徑使用此元素設置左下角的邊框

Sr.No.	Value & Description
1	邊界圖像源用於設置圖像路徑
2	邊界圖像切片用於分割邊界圖像
3	邊框圖像寬度用於設置邊框圖像寬度
4	邊框圖像重複用於將邊框圖像設置爲圓形、重複和拉伸

Sr.No.	Value & Description
1	背景 Used to setting 全部的 the background image properties in one section
2	背景剪輯用於聲明背景的繪畫區域
3	背景圖像用於指定背景圖像
4	背景原點用於指定背景圖像的位置
5	背景大小用於指定背景圖像的大小

Sr.No.	Value & Description
1	字體系列用於定義字體名稱
2	src公司用於定義URL
3	字體拉伸用於查找字體應如何拉伸
4	form-style 用於定義字體樣式
5	字體粗細用於定義字體粗細（粗體）

Who Creates and Maintains CSS?

CSS Versions

CSS - Syntax

The Type Selectors

The Universal Selectors

The Descendant Selectors

The Class Selectors

The ID Selectors

The Child Selectors

The Attribute Selectors

Multiple Style Rules

Grouping Selectors

CSS - Inclusion

Attributes

Inline CSS - The style Attribute

Attributes

Example

External CSS - The <link> Element

Attributes

Example

Imported CSS - @import Rule

Example

CSS Rules Overriding

Handling old Browsers

CSS Comments

Example

CSS - Measurement Units

CSS - Colors

CSS Colors - Hex Codes

CSS Colors - Short Hex Codes

CSS Colors - RGB Values

Building Color Codes

Browser Safe Colors

CSS - Backgrounds

Set the Background Color

Set the Background Image

Repeat the Background Image

Set the Background Image Position

Set the Background Attachment

Shorthand Property

CSS - Fonts

Set the Font Family

Set the Font Style

Set the Font Variant

Set the Font Weight

Set the Font Size

Set the Font Size Adjust

Set the Font Stretch

Shorthand Property

CSS - Text

Set the Text Color

Set the Text Direction

Set the Space between Characters

Set the Space between Words

Set the Text Indent

Set the Text Alignment

Decorating the Text

Set the Text Cases

Set the White Space between Text

Set the Text Shadow

CSS - Using Images

The Image Border Property

The Image Height Property

The Image Width Property

The -moz-opacity Property

CSS - Links

Set the Color of Links

Set the Color of Visited Links

Change the Color of Links when Mouse is Over

Change the Color of Active Links

CSS - Tables

The border-collapse Property

The border-spacing Property

The caption-side Property

The empty-cells Property

The table-layout Property

CSS - Borders

The border-style Property

The border-width Property

Border Properties Using Shorthand