CSS實例教程[轉]

顯示全部樓層 · 發表於 2006-8-18 03:24:55

從這一節開始我們將要討論 CSS (Cascading Style Sheet). 中文大概叫樣式表吧. 在我們這個教程中還是把它叫做 CSS 方便點兒.

什麼是 CSS 以及它的功能
雖然 CSS 在網頁裡是和 HTML 在一起的. 但它不算 HTML. 它的使用可以擴展 HTML 的功能. 使得我們可以重新定義 HTML 元素的顯示方式. CSS 所能改變的性質如下

字體
文字間的空間
列表
顏色
背景
Margin
位置
我們將會在後面的七節裡討論上面的每一個性質的改變. 在這一節我們給你提供 CSS 的基礎.

CSS 的定義 (rules)
CSS 的每一條定義都有如下的形式

selector {property:value; property:value; ...}

selector: 第一種是 HTML 的 tag, 比如 P, BODY, A 等等. 第二種叫 class, 第三種叫 ID. 你這裡先知道有這麼三種具體的咱們以後在談.
property: 就是那些將要被修改的性質, 比如 color
value: 給 property 的值, 比如給 color 的可以是 red
請看下面的一個典型定義

A {color: red}

用這條定義所有的聯接都變成紅色的了. 一般來說我們把所有的定義全包括在 STYLE 元素裡面放到 HEAD 裡面. 請試驗下面的網頁

<HTML>
<HEAD>
<STYLE>
A {color: red}
P {background-color:blue; color:white}
</STYLE>
</HEAD>
<BODY>
<A href="http://www.nease.net/~haidian">動態網頁製作</A>
<P>你注意到這一段文字的顏色和背景顏色了嗎?</P> 怎麼樣?
</BODY>
</HTML>

怎麼樣? 很簡單把. 你只要知道所有可以改動的元素和它們的性質靈活的運用 CSS 的定義, 你就可以使得你的網頁製作更上一層樓. 下面一節我們將要告訴你其他兩種 selector 以及其他一些基礎.

顯示全部樓層 · 發表於 2006-8-18 03:25:06

從這一節開始我們將要討論 CSS (Cascading Style Sheet). 中文大概叫樣式表吧. 在我們這個教程中還是把它叫做 CSS 方便點兒.

什麼是 CSS 以及它的功能
雖然 CSS 在網頁裡是和 HTML 在一起的. 但它不算 HTML. 它的使用可以擴展 HTML 的功能. 使得我們可以重新定義 HTML 元素的顯示方式. CSS 所能改變的性質如下

字體
文字間的空間
列表
顏色
背景
Margin
位置
我們將會在後面的七節裡討論上面的每一個性質的改變. 在這一節我們給你提供 CSS 的基礎.

CSS 的定義 (rules)
CSS 的每一條定義都有如下的形式

selector {property:value; property:value; ...}

selector: 第一種是 HTML 的 tag, 比如 P, BODY, A 等等. 第二種叫 class, 第三種叫 ID. 你這裡先知道有這麼三種具體的咱們以後在談.
property: 就是那些將要被修改的性質, 比如 color
value: 給 property 的值, 比如給 color 的可以是 red
請看下面的一個典型定義

A {color: red}

用這條定義所有的聯接都變成紅色的了. 一般來說我們把所有的定義全包括在 STYLE 元素裡面放到 HEAD 裡面. 請試驗下面的網頁

<HTML>
<HEAD>
<STYLE>
A {color: red}
P {background-color:blue; color:white}
</STYLE>
</HEAD>
<BODY>
<A href="http://www.nease.net/~haidian">動態網頁製作</A>
<P>你注意到這一段文字的顏色和背景顏色了嗎?</P> 怎麼樣?
</BODY>
</HTML>

怎麼樣? 很簡單把. 你只要知道所有可以改動的元素和它們的性質靈活的運用 CSS 的定義, 你就可以使得你的網頁製作更上一層樓. 下面一節我們將要告訴你其他兩種 selector 以及其他一些基礎.

顯示全部樓層 · 發表於 2006-8-18 03:25:18

一個樣式表由樣式規則組成, 以告訴瀏覽器怎樣去呈現一個文檔. 有很多將樣式規則加入到你的HTML文檔中的方法, 但最簡單的啟動方法是使用HTML的STYLE組件. 這個元素放置於文檔的HEAD部分, 包含網頁的樣式規則.

要注意到儘管STYLE元素是試驗樣式表的好方法, 它具有某些在用戶使用這種方法之前應該考慮的缺點. 不同方法的優點和缺點在將樣式表加入到HTML中部分中有討論。

每個規則的組成包括一個選擇符--通常是一個HTML的元素, 例如BODY, P, 或EM--和該選擇符所接受的樣式.

有很多的屬性可以用於定義一個元素. 每個屬性帶一個值, 共同地描述選擇符應該如何呈現.

樣式規則組成如下:

選擇符 { 屬性: 值 }
單一選擇符的復合樣式聲明應該用分號隔開:

選擇符 { 屬性1: 值1; 屬性2: 值2 }

以下是一段定義了H1和H2元素的顏色和字體大小屬性:

<HEAD>
<TITLE>CSS例子</TITLE>
<STYLE TYPE="text/css">
H1 { font-size: x-large; color: red }
H2 { font-size: large; color: blue }
</STYLE>
</HEAD>
上述的樣式表告訴瀏覽器用加大、紅色字體去顯示一級標題, 用大、藍色字體去顯示二級標題. CSS1 規格正式地定義了所有的有效屬性和值. 屬性和值在本網站的CSS 屬性部分也給出了.

顯示全部樓層 · 發表於 2006-8-18 03:25:29

上一節開始我們討論 CSS (Cascading Style Sheet) 的基礎. 告訴你有三種 Selector. 但只介紹了其中的 HTML selector. 這一節我們把三種都詳細介紹給你

HTML selector
class selector:
ID selector:
HTML selector

HTML selector 就是 HTML 的 tags, 比如 P, DIV, TD 等. 如你用 CSS 定義了它們, 在整頁中, 這個 Tag 的性質就按照你的定義來顯示了. HTML selector 的語法如下

  tag {property:value}
比如我們想叫 H1 的顏色是紅的

  H1 {color: red}
這裡還要告訴你 CSS 的一個特點, 它可定義好幾個 selector 在一個 rule 裡. 比如

  H1, H2, TD {color: red}
這個定義就能讓所有的 H1, H2, 和 TD 的顏色都為紅色.

Class selector

Class selector 有兩種, 一種叫相關 class selector, 它跟一個 HTML 的 tag 有關係. 它的語法是

  tag.Classname {property:value}
比如我們想叫一些而不是全部 H2 的顏色是紅的

<style>
  H2.redone {color: red}
</style>

<H2>This is H2</H2>
<H2 class=redone>This is red H2</H2>
This is H2
This is red H2

第二種是獨立 class selector . 它可被任何 HTML tag 所應用. 它的語法如下

  .Classname {property:value}
假如我們有下面這個定義

  .blueone {color: blue}
那麼我們可以把他應用到不同的 Tag 當中去. 比如

<style>
  .blueone {color:blue}
</style>
<H2 class="blueone">Blue H2</H2>
<P class="blueone">Blue paragraph</P>
Blue H2
Blue paragraph

顯然 class selector 給了我們更多的自由.

ID selector

ID selector 其實跟獨立 class selector 的功能一樣. 而區別在於它們的語法和用法不同, 以及對於 Javascript 縱 HTML 元素有幫助. 它的語法如下

  #IDname {property:value}
假如我們有下面的定義

  #yelowone {color: yellow}
我們可以運用這個定義到任何的有同樣 ID 名字的 tag, 比如

<style>
  #redone {color: red}
</style>
  <P ID="redone">text here</P>
text here

你可能覺得既然 ID selector 和獨立 class selector 功能一樣, 為什麼兩者都存在呢. 如果你知道用 CSS-P 來定位的話, 你就明白它們的區別了. 有 ID 的 HTML 元素可以被 CSS-P 和 JavaScript 來縱.

到現在為止, 你已經大概知道如何來寫 CSS 的定義了, 下面我們將會告訴你如何用 CSS 來縱或修改

字體
文字間的空間
列表
顏色
背景
Margin
位置

顯示全部樓層 · 發表於 2006-8-18 03:25:44

這一節我們將討論如何用 CSS 來控制元素中字體的形狀, 大小, 風格.

字形

CSS 用來控制字形的性質是 font-family. 你可以用它來決定任何一個元素中文字的字形. 比如

  P.v {font-family: Verdana}
  H2.a {font-family: arial}
This H2's font is "Times New Roman"
This paragraph is using "Verdana" font

有的時候，你所給的字體瀏覽器不見得有，你可以多給幾種比如

  P {font-family: Verdana, Forte, "Times New Roman"}
上面這個定義可以使得瀏覽器先用Verdana, 如果沒有就用Forte... 記住每個字形之間要用逗號隔開.

大小

用來控制字體大小的性質是 font-size 比如

  P.f12 {font-size: 12pt}
  P.f18 {font-size: 18pt}
This paragraph's font is 12pt

This paragraph's font is 18pt

你可以自己慢慢調整字體的大小直到滿意為止. 一般來說, 字體的大小沒什麼限制, 但 500 以下比較安全.

斜體

如果想讓字體成為斜體, 要用 font-style 性質, 比如

  P {font-style: italic}
This paragraph's font is italic

加重

用 font-weight 來調節文字的粗細, 比如

  P.bold {font-weight: bold}
This paragraph's font is normal

This paragraph's font is bold

font-style 的可能的值是 lighter, normal, bold, bolder

我們只介紹在 Netscape 和 IE 上都通用的性質. 下一節我們討論文字的定位.

顯示全部樓層 · 發表於 2006-8-18 03:25:58

這一節我們將討論如何用 CSS 來控制網頁中文字定位, 這些性質是

line-height: 行距
text-align: 向那個方向看齊
vertical-align: 向上還是向下看齊
text-indent: 段落第一行空格
text-transform: 字母的大小寫
text-decoration: 給文字加裝飾, 比如下滑線
行距

我們有時候可能會想把行距加大點使得文字看的清楚一些. CSS 中的 line-height 可以取得這種調節

P.double {line-height: 2}
請看下面的比較. 這一段的行距是正常的. 這一段的行距是正常的. 這一段的行距是正常的. 這一段的行距是正常的.

這一段的行距是雙倍的. 這一段的行距是雙倍的. 這一段的行距是雙倍的. 這一段的行距是雙倍的.

你要讓 line-height 等於 3 的話, 那行距就更大了.

看齊

一般來說我們都是向左邊看齊. 但有的時候也有其他的選擇, 比如說向右邊看齊.

P.right {text-align: right}
P.center {text-align: center}
P.justify {text-align: justify}
請看下面的比較. 這一行左邊看齊

這一行右邊看齊
這一行在中間

text-align 可以有 left, right, center, 和 justify

段落的首行空格

如果我們想讓第一行的開頭空幾格, 可以用 text-indent, 比如

P {text-indent: 1cm}
請看下面的例子. 這一段開頭空了 1 厘米. 這一段開頭空了 1 厘米. 這一段開頭空了 1 厘米. 這一段開頭空了 1 厘米.

字母的大小寫

這個性質顯然跟中文沒關係, 但如果我們要處理英文, 你可以用 text-transform 來改變英文的大小寫. 比如, 讓每個字的第一個字母大寫

P.capitalize {text-transform: capitalize}
P.up {text-transform: uppercase}
P.low {text-transform: lowercase}
請看下面的比較. All the words' first letter have been capitalized in this line

All the letters are uppercase in this line

All the letters are lowercase in this line

文字的裝飾

就是在文字上加下滑線, 或中間加條線的. 比如

P.underline {text-decoration: underline}
P.line-through {text-decoration: line-through}
請看下面的比較. Underline line

line-through line

其實最常用的是我們想去掉聯接下面的下滑線.
A {text-decoration: none}

顯示全部樓層 · 發表於 2006-8-18 03:26:35

這一節唯一我們將要討論的是如何用 CSS 來改變列表前的標識。我們知道有兩種列表：有序和無序。有序列表用阿拉伯數字為標識，無序列表用黑色小圓圈來做標識。用 CSS 的 list-style-type 這兩種列表的標識都可以有四種選擇：

無序： disc, circle, square, decimal
有序： upper-roman, lower-roman, upper-alpha, lower-alpha.
假如你想叫有序列表的標識為大小羅馬字母

LI.upperroman {list-style-type: upper-roman}
請看下面的比較 disc
circle
square
decimal

大寫羅馬
小寫羅馬
大寫字母
小寫字母

顯示全部樓層 · 發表於 2006-8-18 03:26:46

用 CSS 你不但可以改變整個網頁的背景你還可以控制其他元素的的背景，比如 P，DIV 等。這一節我們將要討論的性質有:

color: 文字的顏色
background-color: 背景顏色
background-image: 背景圖像
background-repeat: 重複背景圖像
background-attachment: 是否凍結背景圖像
文字的顏色

我們用 color 可以來決定文字，周邊，以及橫線的顏色

  P.greentext {color: green}
請看下面的例子這一行文字的顏色是綠色的

背景的顏色

背景的顏色可以由 background-color 來控制，比如我們想叫一些文字段落的背景顏色為淺綠色的，

  P.greenbg {background-color: #CCEFCC}
請看下面的例子

這一行的背景顏色是淺綠色的

背景的圖像

我們不但可以給整個網頁加個背景圖像，我們還可以給其中一個元素加個背景圖像，比如說我們給 P 的背景加上天空的背景

  P.sky {background-image: url(../image/sky.jpg)}
請看下面的例子

給元素背景加顏色或加圖像使得我們能自由的強調一些我們想讓大家注意的文字。而沒有 CSS 我們只能改變整個網頁的背景顏色或圖像

我們不但可以決定是否給背景加圖像，還可以確定是否讓這個圖像重複以及在哪個方向重複。比如我們只讓圖像在整個網頁的豎直方向重複我們就可以去掉左邊有個圖像條的效果。

  body {background-image: url(../image/cdbk009a.jpg);
      background-repeat: repeat-y}
background-repeat 可以有這些可能值：no-repeat, repeat-x, repeat-y

我們還可以用 background-attachment 來決定當別人瀏覽你的網頁的是否讓背景圖像隨著內容一起滾動。比如我們如果不讓背景圖像動，

  body {background-image: url(../image/cdbk009a.jpg);
      background-attachment: fixed}
這個性質挺有意思的。如果你的背景圖像是你自己網頁的logo，你想讓它固定在中間不動，用這個性質可以達到這個效果.

顯示全部樓層 · 發表於 2006-8-18 03:26:57

這一節我們討論如何用 CSS 來控制四周的空格以及邊框的設定

元素周邊的空格 margin
性質 margin 可被用來決定周邊的空格，假如我們想讓整個網頁在左邊有 5em 但讓標題沒有任何空格

  BODY {margin: 5em}
  H3 {margin: -5em}
H3 的負值 -5em 抵銷了 BODY 5em 的空格。

另外我們還可以分別用 margin-left, margin-right, margin-top, 和 margin-bottom 來設定左，右，上，下的空格

元素內部周邊的空格 padding
初看起來這個性質跟 margin 好像一樣。其實它們之間有很大的區別。margin 的空格是相對於其他的元素所空的，而 padding 是在元素的周邊和內部的內容所空的空格。在下面的例子，我們用有背景顏色的 TABLE 來讓你注意這個性質

  TABLE.pad {padding: 5mm; background-color: #CCEFCC}
Petersen was arrested in a modest apartment building in Studio City, Calif., which he had been sharing with three other people. The Marshals entered the apartment using a key provided by the building's manager. When they entered, the Marshals said, they found Petersen alone -- sitting on his bed and using his laptop computer.

我們同樣可以用 padding-left, padding-right, padding-top, 和 padding-bottom 來分別控制左，右，上，下的元素內部的周邊空格。

元素邊框的寬度
我們可以用 border-width 性質來調節邊框的寬度。比如

  P.width5 {border-width: 1px}
這個 P 元素的邊框寬度是 1 px

你可以用 border-left-width, border-right-width, border-top-width, 和 border-bottom-width 來分別決定左，右，上，下邊的寬度

元素邊框的顏色
我們可以用 border-color 性質來調節邊框的顏色。比如

  P.colorred {border-color: red}
這個 P 元素的邊框的顏色是紅色的

元素邊框的形態
我們可以用 border-style 性質來調節邊框的形態。比如

  P.inset {border-style: inset, border-width: 5px}
這個 P 元素的邊框的形態是 inset

這個 P 元素的邊框的形態是 outset

這個 P 元素的邊框的形態是 double

這個 P 元素的邊框的形態是 groove

這個 P 元素的邊框的形態是 ridge

		自動登錄	找回密碼
密碼			免费注册

CSS實例教程[轉]

相關帖子