css基礎教程

css基礎教程

 

--------------------------------------------------------------------------------

 CSS學習

什麼是 CSS 以及它的功能

我們暫且把CSS叫樣式表吧,因爲它能很輕鬆地改變網頁的樣式,即HTML 元素的顯示方式,使其達到統一的顯示效果. CSS 所能改變的性質如下:

字體

文字間距

列表

顏色

背景

Margin

位置

 

css最好保存成文件,用如下語句在head中引用

<!--

    <link rel="stylesheet" type="text/css" href="styles.css">

    -->

CSS 的定義

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

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

selector: 第一種是 HTML 的 tag, 比如 P, BODY, A 等等,第二種叫 class, 第三種叫 ID.

property: 就是那些將要被修改的性質, 比如 color,font-size...

value: 給 property 的值, 比如給 color 的可以是red

請看下面的一個典型定義

  A {color: red}                                         ------------------------>    tag{property:value}    tag{property1:value1;property2:value2}

用這條定義所有的聯接都變成紅色的了. 一般來說我們把所有的定義

全包括在 STYLE 元素裏面放到 HEAD 裏面. 請試驗下面的網頁:

 

          </td>

        </tr>

    </table>

    <a href="http://www.nease.net/~hhuang">

    <p>Jscript之家</a></p>

    <p>看一下這一段文字的顏色和背景顏色效果.

 

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} ---------------------------------->這種selector只能在指定的標籤中使用<tag class=classname>

比如我們想叫一些而不是全部 H1 的顏色是紅的

 

    H1.redone {color: red}

 

    </p>

    <h1 class="redone">紅色</h1>

    <h1>不是紅色

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

 

    <b>.Classname {property:value}</b>

假如我們有下面這個定義

 

    .blueone {color: blue}

那麼我們可以把他應用到不同的 Tag 當中去. 比如

 

    </p>

    <h1 class="blueone">藍色的題目</h1>

    <p class="blueone">藍色的段落

 

ID selector

ID selector 其實跟獨立 class selector 的功能一樣. 而區別在於它們的語法和用法不同, 以及對於 Javascript 操縱 HTML元素有幫助. 如果你用 CSS-P 來定位, 有 ID 的 HTML 元素可以被 CSS-P和JavaScript 來操縱.它的語法如下

 

    #IDname {property:value}

假如我們有下面的定義

 

    #yelowone {color: yellow}

我們可以運用這個定義到任何的有同樣 ID 名字的 tag, 比如

 

    <span ID="yellowone">text here</span>

 

字形與大小

CSS 用來控制字形的性質是 font-family,控制字體大小的性質是 font-size. 比如

 

    H1, H2, P {font-family: 楷體;font-size: 9pt}

CSS 允許你給 font-family 多於一個以上的字形,使得用戶瀏覽器按順序檢測和使用字體,每個字形之間要用逗號隔開. 比如

 

    H1, H2, P {font-family: 楷體, 黑體, 宋體}

斜體

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

 

    P {font-style: italic}

加重

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

 

    P {font-weight: bold}

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

 

如何用 CSS 來控制網頁中文字定位?

line-height: 行距

text-align: 向那個方向看齊

vertical-align: 向上還是向下看齊

text-indent: 段落第一行空格

text-transform: 字母的大小寫

text-decoration: 給文字加裝飾, 比如下滑線

 

行距

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

 

    P.double {line-height: 2}

請看下面的比較.

這 一 段 的 行 距 是 正常 的. 這 一 段 的 行 距 是 正常 的. 這 一 段 的 行 距 是 正常 的. 這 一 段 的 行 距 是 正常 的.

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

 

看齊

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

 

    P.right {text-align: right}

請看下面的比較.

這 一 行 左 邊 看 齊

這 一 行 右 邊 看 齊

這 一 行 在 中 間

 

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

段落的首行空格

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

 

    P {text-indent: 1cm}

 

請看下面的例子.

這 一 段 開 頭 空 了 1 釐 米. 這 一 段 開 頭 空 了 1 釐 米. 這 一 段 開 頭 空 了 1 釐 米. 這 一 段 開 頭 空 了 1 釐 米.

 

字母的大小寫

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

 

    P {text-transform: capitalize}

請看下面的比較.

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 {text-decoration: underline}

 

請看下面的比較.

Underline line

line-through line

 

其實最常用的是我們想去掉聯接下面的下滑線.

 

    A {text-decoration: none}

文字的顏色

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

 

    P.greentext {color: green}

請看下面的例子

這一行文字的顏色是綠色的

 

背景的顏色

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

 

    P.greenbg {background-color: #CCEFCC}

請看下面的例子

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

背景的圖象

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

 

    P.sky {background-image: url(sky.jpg)}

請看下面的例子

這段文字的背景圖案是天空.這段文字的背景圖案是天空.這段文字的背景圖案是天空.這段文字的背景圖案是天空.這段文字的背景圖案是天空.這段文字的背景圖案是天空.

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

 

    body {background-image: url(sky.jpg); background-repeat: repeat-y}

background-repeat可以有這些可能值:no-repeat, repeat-x, repeat-y

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

 

    body {background-image: url(sky.jpg); background-attachment: fixed}

元素周邊的空格 margin

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

 

    BODY {margin: 5em} H3 {margin: -5em}

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

元素內部周邊的空格 padding

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

 

    TABLE.pad {padding: 5mm; background-color: #CCEFCC}

 

padding is five.padding is five.padding is five.padding is five.padding is five.padding is five.padding is five.padding is five.padding is five.padding is five.padding is five.padding is five.

我們同樣可以用 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}

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章