CSS入門教程

2020-03-24 16:33:59

字體：大中小

來源：轉載

供稿：網友

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文檔內定義好的風格顯示出來了。具體的使用防范是： HTML
HEAD
TITLE 網頁文件的標題 /TITLE
LINK REL="stylesheet" HREF="style.css" TYPE="text/css"
/HEAD 注意：style.css文件的位置。 2. 在 HTML 文件內的 HEAD ....... /HEAD 標簽之間，加一段 CSS 的描述內容。(內定義CSS) 這個方法適用于指定某個網頁，除了表現外部的 CSS 文檔定義好的網頁風格外，同時還要表現本身 HTML 文檔內指定的 CSS 。如果內在添加的 CSS 描述與外部連接的 CSS 描述相沖突的話，網頁的表現將以內在添加的 CSS 描述為主，也就是外部的描述就不再起作用了。具體使用方法是： HTML
HEAD
TITLE 網頁標題 /TITLE
STYLE TYPE="text/css"
!--
BODY {font: 12pt}
H1 {font: 16pt}
P {font-weight: bold;
color: green}
--
/STYLE
/HEAD
BODY
網頁內容…
/BODY
/HTML 值得注意的是，為了防止不支持 CSS 的瀏覽器誤將標簽間的 CSS 風格描述當成普通字串，而表現于網頁上，您最好將 CSS 的敘述文字插入在 !--和-- 之間。 3. 在 HTML 文件的文本內容中，隨時有需要，隨時加一小段 CSS 的描述指定風格。( 文本間CSS) 這個方法適用于指定網頁內的某一小段文字的呈現風格。外部CSS與內定義CSS如果和此定義有相同的項，那么以此定義的 CSS 風格表現，外部 CSS文檔與內定義CSS和此定義的沒相同的項時那么還會正常顯示，同時還會顯示文本內容間的 CSS 風格。具體使用方法是： HTML
HEAD
TITLE 網頁標題 /TITLE
/HEAD
BODY
P
本頁內容…
/P
/BODY
/HTML 上述的 3 種 CSS，可以同時并用，也可以擇您所好，單一或成雙地使用。如果各 CSS 間的敘述相沖突，則內在定義的 CSS 會覆蓋外部連結的 CSS ，文本間的 CSS 會覆蓋內在定義的 CSS 。二、挑選者、屬性和值。先舉個例子：H3{ COLOR : BLUE }表示在文本中只要使用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 { family-name : " 楷體" }或范例： SPAN 。 font-style：設定字體樣式，可以取的值有normal 普通字、italic 斜體字；范例： SPAN { font-style : italic }。 font-weight：設定字型份量；可以取的值有normal 普通字、bold 粗體字、bolder 相對于父元素稍粗、lighter 相對于父元素稍細、100,200,300,400,500,600,700,800,900 數字由小到大代表筆畫由細到粗，例如：normal=400 bold=700 ；范例：SPAN { font- weight : bolder }。 font-size：設定文字大小。 text-decoration：設定文字修飾，可能值有 none 普通字、underline 文字加底線、overline 文字加頂線、line-through 文字加刪除線、blink 設定文字閃爍；范例： SPAN { text-decoration : blink } text-transform：設定文字轉換；可能值有none 普通字、capitalize 將英文單字地一個字母轉換為大寫、uppercase 將所有文字轉換為大寫、lowercase 將所有文字轉換為小寫；范例：SPAN { text-transform : uppercase }。五、邊緣和區塊的設置。 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 綜合設定邊框顏色。把下面代碼加到你的網頁中可以看到效果了：這片文章就介紹到這里了，因為是一個初學者的入門教程，所以內容顯得少的可憐。以后會給大家介紹一些比較高級的內容，希望大家支持我??！本文作者:html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：CSS控制input標簽需要注意的問題

下一篇：CSS3特性：CSS3 target偽類