CSS入門教程

css是「cascading style sheets」的簡稱，中文翻譯為「串接樣式表」，也有人翻譯為「樣式表」。css用以作為網頁的排版和風格設計，在web標準建站中，對css的熟悉和使用是相當重要的乙個內容。css的作用是彌補html的不足，讓網頁的設計更為靈活。

這個文章只是為您介紹css的基礎應用，指引您的乙個入門的基礎教程，主要目的是為推進web標準貢獻自己的微薄之力。

說點我自己的體會，現在有好多人都在推廣web標準，其實對初學者來說，不需要剛學的時候就學標準，學點簡單的還是容易入門的，因為現在html還在照樣用啊，所以我希望初學者學習時不要非遵循標準，當你入門之後，你做網頁的時候，發現使用**特麻煩的時候你就該去尋求簡單方法了，到時再學也不晚啊，如果你喜歡新技術那麼你初學時就學標準吧，按個人的實際來行動吧。下面開始學習了

一、如何在html中應用css。

您可以利用下列 3 種方式將 css 指定的格式加入到html中：

1. 在 html 檔案裡加乙個超級鏈結，連線到外部的 css 文件。(外部鏈結 css)

這個方法最方便管理整個**的網頁風格，它讓網頁的文字內容與版面設計分開。您只要在乙個 css 文件內（擴充套件名為 .css）定義好網頁的風格，然後在網頁中加乙個超級連線連線到該文件，那麼你的網頁會按在css文件內定義好的風格顯示出來了。

具體的使用防範是：　　

注意：style.css檔案的位置。

2. 在 html 檔案內的標籤之間，加一段 css 的描述內容。(內定義css)

這個方法適用於指定某個網頁，除了表現外部的 css 文件定義好的網頁風格外，同時還要表現本身 html 文件內指定的 css 。

如果內在新增的 css 描述與外部連線的 css 描述相衝突的話，網頁的表現將以內在新增的 css 描述為主，也就是外部的描述就不再起作用了。

具體使用方法是：　　

網頁內容…

值得注意的是，為了防止不支援 css 的瀏覽器誤將標籤間的 css 風格描述當成普通字串，而表現於網頁上，您最好將 css 的敘述文字插入在之間。

3. 在 html 檔案的文字內容中，隨時有需要，隨時加一小段 css 的描述指定風格。( 文字間css)

這個方法適用於指定網頁內的某一小段文字的呈現風格。

外部css與內定義css如果和此定義有相同的項，那麼以此定義的 css 風格表現，外部 css文件與內定義css和此定義的沒相同的項時那麼還會正常顯示，同時還會顯示文字內容間的 css 風格。

具體使用方法是：　　

本頁內容…

上述的 3 種 css，可以同時並用，也可以擇您所好，單一或成雙地使用。如果各 css 間的敘述相衝突，則內在定義的 css 會覆蓋外部鏈結的 css ，文字間的 css 會覆蓋內在定義的 css 。

二、挑選者、屬性和值。

先舉個例子：h3表示在文字中只要使用h3標籤的文字的顏色都是綠色。其中h3為挑選者，color為屬性，blue為color屬性的值。挑選者是套用樣式的元件，通常為外部css或內定義css定義的風格的乙個名字，在這個初級教程裡理解為乙個標籤的名字也可以。屬性是用語描述挑選者的特性，相當於html語法中的標籤的屬性。值就是屬性的具體內容。

在css中當我們使用到屬性值的時候，通常值是有乙個度量依據的，也就是說值是有單位的。比如我們通常說你從家到學校走1，1什麼呢？公尺，公里，還是走1小時。通常在css中的單位有：相對單位與絕對單位兩種單位具體如下：

「em」 (比如 font-size: 2em) ：相對於字母高度的比例因子。

「%」 (比如 font-size: 80%)：相對於長度單位（通常是目前字型的大小）的百分比例。

'px' (比如 font-size: 12px) ：畫素（系統預設單位）。

'pt' (比如 font-size: 12pt)：像點。

此外還有 'pc' (印刷活字單位), 'cm' (公分), 'mm' (公釐) 和 'in' (英吋)等單位。

當值為0時，我們就不需要設定單位了，比如你不想要邊框那麼我們直接設定border=0 。

在這我多說一句，就是強調單位的使用時，當我自己製作的網頁想在解析度改變時，字型大小也隨著改變那麼我們就使用單位%和em，如果你想時你的網頁不管怎麼調解析度都是固定大小的那麼我們使用px、pt等元素了。呵呵！

三、顏色的設定和使用。

css提供了16,777,216種顏色可以供我們來使用，通常表現顏色的方式有三種：顏色名字、rgb(red/green/blue) 數值和十六進製制數形式，具體表現如下：

紅色可以表示為：red、rgb(255,0,0)、rgb(100%,0%,0%)、#ff0000 和 #f00　五種方式。

#rrggbb：以三個00到ff的十六進製值分別表示0到255十進位值的紅、綠、藍三原色數值。

#rgb：簡略表示法，只用三個0到f的十六進製值分別表示紅、綠、藍三原色數值。而事實上，瀏覽器會自動擴充套件為六個十六進製的值，如『#abc』將變為『#aabbcc』。但是，顯見這樣的表示法並不精確。

rgb(r,g,b)：以0到255十進位值的紅、綠、藍三原色數值來表示顏色。

rgb(r%,g%,b%)：以紅、綠、藍彼此相對的數值比例來表示顏色，如rgb (60%,100%,75%)。

color_name：直接以顏色名稱來表示顏色，共有141種標準的顏色名稱。

通常我們在設定顏色的時候通常是設定文字的顏色還有乙個就是背景色。如按下圖進行設定：

我們可以儲存一下文蕩然後瀏覽你就可以看到效果了。

四、關於文字的設定。

我們可以使用多種屬性來改變網頁文字的大小和形狀,以使網頁文字內容看起來更加美觀。

font-family：設定文字字型可以取family-name值，範例：span 或範例：。

font-style：設定字型樣式，可以取的值有normal 普通字、italic 斜體字；範例： span 。

font-weight：設定字型份量；可以取的值有normal 普通字、bold 粗體字、bolder 相對于父元素稍粗、lighter 相對于父元素稍細、100,200,300,400,500,600,700,800,900 數字由小到大代表筆畫由細到粗，例如：normal=400　bold=700 ；範例：span 。

font-size：設定文字大小。

text-decoration：設定文字修飾，可能值有 none 普通字、underline 文字加底線、overline 文字加頂線、line-through 文字加刪除線、blink 設定文字閃爍；範例： span

text-transform：設定文字轉換；可能值有none 普通字、capitalize 將英文單字地乙個字母轉換為大寫、uppercase 將所有文字轉換為大寫、lowercase 將所有文字轉換為小寫；範例：span 。

五、邊緣和區塊的設定。

margin：邊緣，雖然是通透的部份，但是可以藉由邊緣寬度的調整來達到內容元素位置調整的目的。padding：補白，也就是內容元素與框架之間的這段距離與空間，也可以利用 css指令去控制大小。

把**改為如圖：

他們的屬性有：margin-top(上邊緣寬度), margin-right(右邊緣寬度), margin- bottom(下邊緣寬度), margin-left(左邊緣寬度), padding-top(上方補白寬度), padding- right(右方補白寬度), padding-bottom(下方補白寬度) 和 padding-left(左方補白寬度)。

看看上圖理解點了吧！下面我們開始講講邊框。

六、邊框border性質設定。

邊框也能應用到大多數的html標籤中，可以來使網頁更加美觀，邊框的具體屬性有 border-top：綜合設定上邊框性質、border-right：綜合設定右邊框性質、border-bottom ：綜合設定下邊框性質、 border-left：綜合設定左邊框性質。

border-style　綜合設定邊框樣式，可能值：solid(實線), dotted(虛線), dashed( 短直線), double(雙直線), groove (3d凹線), ridge (3d凸線), inset (3d嵌入) 和 outset (3d隆起)。

border-width　綜合設定邊框寬度,可以設定的有 border-top-width(設定上邊框寬度 ), border-right-width(設定右邊框寬度), border-bottom-width(設定下邊框寬度) 和 border-left-width(設定左邊框寬度).

border-color　綜合設定邊框顏色。

把下面**加到你的網頁中可以看到效果了：

CSS入門教程

CSS入門教程

CSS入門教程

CSS入門教程

相關推薦