要想做出精美的網頁一定要用到css。層疊樣式表 (css) 是一系列格式規則,它們控制網頁內容的外觀。css 樣式使您可以控制許多僅使用 html 無法控制的屬性。css的重要性就不多說了,要說清楚css可以寫成一本大書。本文的目的,是想通過一篇文章,把握css最基本最重要的應用。
第一部分:要實現的目標:把一個網頁的文字變成好看的12象素(px)大小。
實現方法:通過“重定義html”標簽,定義td(td是單元格的標簽)的字體大小為12象素(px)。因為整個網頁內容放在表格中的,也是放在單元格中的,所以,可能通過重定義單元格樣式,改變所有放在單元格里的內容。當然,重定義表格標簽table,也可以實現同樣的效果。
簡明步驟:打開樣式面板→在類型中選擇“重定義html”標簽→選擇要重定義的標簽,例如td→給所選標簽(例如td)定義css→一個定義了標簽的網頁就做好了。
1.打開一個網頁文檔。
2.打開樣式面板。
3.點擊“新建css樣式“按鈕。
4.在“類型”中,選擇“重定義html”標簽。
5.選擇td標簽。td標簽代表單元格。
6.選擇分類中的“類型”。
7.設置字體:選擇字體,假如沒有需要的字體,可以編輯字體列表,見第二部分。
大小:設置字體大小,好看的中文字大小有12象素(px)和9點數(pt)兩種,兩者效果差不多。
行高:行高是一行文字與另一行文字之間的距離,為了方便閱讀,行高設置大點吧??梢栽O置在15像素到25像素之間。實例中使用20像素。
修飾:對于普通文本,選擇無。對于鏈接,可以選擇下劃線,上劃線加下劃線,無等幾種。
顏色:黑色最適合閱讀,其次就是灰色,白色。鏈接默認的藍色,顏色太深,假如整個頁面都是鏈接,使用藍色根本起不到分辨的作用,并且十分難看。建議頁面不要使用默認的藍色!
8.按“確定”按鈕后,一個應用了css的網頁就做好了。
第二部分:編輯字體列表。
1.單擊字體欄的下拉箭頭,打開編輯字體列表。
2.在編輯字體列表窗口中,點擊加號按鈕。
3.選擇一種字體,如宋體,按左箭頭按鈕。
4.繼續添加字體,選擇一種字體,如arial,按箭頭按鈕添加。
說明:一個字體列表中有多種字體,比如“方正,宋體,黑體,華文中宋”,訪問者電腦從最開頭的方正字體開始執行,假如沒有對應的方正字體,就執行宋體,沒有宋體,就執行黑體,假如列表中的字體都沒有,就用系統默認的字體替代。
|||
5.可以重復以上的步驟,添加其它組合的字體。
第三部分:重定義body標簽,使表格之外的內容應用樣式。假如在一個網頁中,在表格之外還有內容,就需要定義body標簽。
1.定義了單元格而沒有定義body的網頁。
2.選擇重定義“body”標簽。按照第一部分的方法,定義“body”標簽。
3.定義了body的網頁。
第四部分:定義表單標簽。假如在一個網頁中使用表單,就需要重定義這些表單標簽。
1.定義input標簽。
2.定義select標簽。
3.定義textarea標簽。
第五部分:定義層對應的標簽。層對應的標簽是div。
第六部分:定義錨標簽。也就是有關鏈接的標簽。錨對應的標簽是a。
1默認錨標簽的網頁,鏈接有下劃線,藍色。這種鏈接很難看!
2.在標簽下拉欄中選擇a。
3.定義a的css樣式。大小選擇12象素;修飾選擇無;顏色選擇一種深灰色,就可以和采用黑色的文本區分開來。
4.重定義了錨標簽的網頁。
第七部分:修改樣式表。
1.在css樣式面板中,單擊“編輯樣式”單選按鈕,再點擊右下角的“編輯樣式表”按鈕。
2.對css樣式做一些修改。實例中是把顏色變得更淡。
3.修改了樣式的網頁。
一個網頁需要定義的基本樣式就定義好了,網頁會直接應用上新定義的樣式。根據需要,還可以定義其它標簽的樣式,例如定義水平條的標簽hr的顏色。
在創建css時,可以根據個人喜好,選擇一種應用css的方式。假如希望用相同的樣式控制多個文檔的格式,使用“外部css樣式表”是最簡單的方法。假如喜歡步驟簡單,或者只有一個頁面需要應用某個css樣式表,那就使用“僅對該文檔的css”。
主要內容:
1.“僅對該文檔的css”的創建和應用;
2.“外部css樣式表”的創建;
3.鏈接“外部css樣式表”文件;
4.“僅對該文檔的css”轉換成“外部css樣式表”;
5.“外部css樣式表”轉換成“僅對該文檔的css”;|||
6.使用“代碼片段”功能重復使用“僅對該文檔的css”。
在dreamweaver中創建css時,可以選擇“定義在該文檔”和“新建樣式表文件”之一創建css樣式表?!岸x在該文檔”只作用在當前文檔;“新建樣式表文件”創建出一個獨立的外部css樣式表文件,多個文檔可以鏈接到外部css樣式表文件。
1. “僅對該文檔的css”的創建和應用。
選擇“僅對該文檔”,定義css后,css就出現在之間。它的優點是創建好了就直接應用到當前文檔了。
2. 創建“外部css樣式表”。
2.1選擇“新建樣式表文件”。
2.2選擇保存在的文件夾→給css文件命名→選擇相對于文檔→保存。
2.3定義css樣式。
2.4一個“外部css樣式表”就做好了。
3. 鏈接“外部css樣式表”文件。
使用外部css的優點是:只要修改外部的css樣式表文件,所有鏈接到該樣式表文件的文檔格式都會自動發生改變。
簡明步驟:打開一個網頁文檔→打開css樣式面板→點擊“附加樣式表”按鈕→點擊“瀏覽”按鈕→選擇需要的外部css樣式表文件→點擊“確定”按鈕。
3.1打開一個要應用css的網頁文檔。
3.2打開css樣式面板。
3.3點擊“附加樣式表”按鈕。
3.4點擊“瀏覽”按鈕。
3.5選擇需要的外部css樣式表文件。
3.6點擊“確定”按鈕。之后文檔就會應用外部樣式。
4. “僅對該文檔的css”轉換成“外部css樣式表”;
把文檔中的css樣式導出成為一個獨立的css樣式表文件。
簡明步驟:文件→導出→css樣式。
5.“外部css樣式表”轉換成“僅對該文檔的css”;
簡明步驟:雙擊打開外部css樣式表文件→在樣式表的開頭添加 →把整個css代碼復制到一個文檔的前面。
6.使用“代碼片段”功能重復使用“僅對該文檔的css”。
假如能夠重復使用“僅對該文檔的css”,就可以快速應用到大量需要使用相同css的文檔中。
簡明步驟:創建css代碼片斷:選擇一個包含css樣式表的文檔→進入代碼視圖→選擇css樣式代碼→點擊右鍵→點擊“創建新代碼片斷” →命名。
應用css代碼片斷:打開一個網頁文檔→進入代碼視圖→把插入點放在前面→打開“代碼片斷”面板→選擇定義好的css樣式→點擊插入按鈕。
6.1選中文檔中的css樣式表代碼,點擊右鍵,點擊“創建新代碼片斷”。
|||
6.2給代碼片斷命名。
6.3打開需要應用樣式表的文檔,進入代碼視圖,把插入點放在前面。選擇css代碼片斷,點擊插入按鈕。
最后,推薦使用“外部css樣式表”。
新聞熱點
疑難解答