嵌入式樣式表的建立 圖

2022-12-25 20:06:06 字數 4420 閱讀 3313

嵌入式樣式表是內嵌於網頁內的一段html語言**,它統一定義了當前網頁的樣式。可以在網頁中建立乙個嵌入式樣式表使得網頁具有統一的風格。嵌入式樣式表與外接樣式表的不同之處在於,嵌入式樣式表只能作用於當前的網頁,而不能覆蓋鏈結到當前站點的其他網頁中。

其實,所謂的嵌入式樣式表只不過是網頁中各種元素的格式的乙個集合,通過建立乙個嵌入式樣式表可以使網頁具有統一的風格。

在frontpage2000中建立乙個嵌入式樣式表的操作十分簡單,在「格式」選單中選擇「樣式」項,然後在彈出的「樣式」對話方塊中就可以建立嵌入式樣式表。單擊對話方塊中的「新建」按鈕,frontpage2000會彈出乙個嵌入式樣式表的容器。在該對話方塊中首先應該輸入新建的樣式表的名稱,而這個名稱可以任意定義。

接下來單擊「格式」按鈕為新建的樣式表定義樣式,在這裡可定義的樣式包括:字型、段落、邊框、編號方式以及定位。

(1)在「檔案」選單中選擇「新建」項,然後在右面彈出的子選單中選擇「站點」項,在彈出的「新建」對話方塊中把站點名稱改為「樣式表」,單擊「確定」按鈕。

(2)在資料夾列表檢視中雙擊檔案「default.htm」把該檔案開啟,然後把滑鼠放到網頁檢視中,在「格式」某單中選擇「樣式」項,這時候frontpage2000就會彈出標題為「樣式」的對話方塊,如圖1所示。

圖1「樣式」視窗

(3)在彈出的「樣式」對話方塊中單擊其中的「新建」按鈕,從而為當前網頁新建乙個嵌入式樣式表,這時候frontpage20002000就會彈出乙個標題為「新樣式」的對話方塊,如圖2所示。

圖2「新樣式」視窗

(4)在彈出的「新樣式」對話方塊中有一欄為「名稱」,在「名稱」欄下面的文字框中輸入所新建的嵌入式樣式表的名稱,在這裡輸人文字「mystyle」作為新建的樣式表的名稱。如圖3所示。

圖3「新樣式」中名稱的輸入

(5)單擊「新樣式」對話方塊中的「格式」按鈕,在按鈕下面會彈出乙個子選單,如圖4所示。在該子選單中列出了新建的樣式表中可以設定項。選擇要設定的項,然後對其進行修改。

圖4格式字選單

(6)把所有樣式都修改好之後,單擊「新樣式」對話方塊中的「確定」按鈕返回「樣式」對話方塊,這時候在「樣式」對話方塊中左面的列表中列出了剛才新建的樣式表的名稱「mystyle」。如圖5所示。

圖5新樣式的建立

目前,比較流行的網頁製作工具有frontpage 2000和dreamwe**er 4.0,通過這2款所見即所得的網頁編輯器,使用者只要掌握簡單的操作方法,不用編寫html**即可製作出整潔美觀的網頁。要使製作的網頁具有良好的"穩定性",使瀏覽者在採用不同解析度和改變瀏覽器字型大小時都能看到您所設定格式的網頁,從而始終保持網頁版面的整潔美觀,就需要使用樣式表來"鎖定"網頁文字。

frontpage 2000和dreamwe**er 4.0都可以通過建立樣式表在網頁中加入特定的html標記,從而使網頁中文字始終顯示為固定格式。樣式表分為外部樣式表和嵌入式樣式表2種。

外部樣式表是儲存在乙個擴充套件名為".css"的css檔案中,它是對html語言的擴充套件,可應用於所有網頁,但當網頁被另存為html檔案或在指定位置找不到css檔案時,網頁文字就不能被其控制; 內嵌樣式表是嵌入在網頁檔案中的一段html**,它只能用於當前編輯的單個網頁,但因為不需要css檔案的控制,網頁文字始終被嵌入的**所控制。在frontpage 2000中,您既可以使用外部樣式表、也可以使用嵌入式樣式表; 而在dreamwe**er 4.

0中,只能使用外部樣式表。下面就是如何在dreamwe**er 4.0和frontpage 2000中建立、應用樣式表的具體步驟。

在dreamwe**er 4.0中使用樣式表

一、建立樣式表

1.選擇"window"*"css styles",開啟"css styles"視窗(如圖1所示)。

2.單擊"css styles"視窗右下角的新建按鈕,開啟"new style"對話方塊。在"selector"欄輸入樣式選擇器名稱,例如設定9磅字型用".font9"、設定16磅字用".

font16"。同時選中"make custom style (class)"或"use css selector"單選項(如圖2所示)。

3.單擊"ok"按鈕,開啟"s**e style sheet file as"對話方塊,輸入名稱和路徑以儲存該樣式表。注意: 樣式表的儲存位置可以是相對路徑,也可以是絕對路徑,但最好和網頁檔案儲存在同一資料夾內,並和網頁檔案一同上傳。

4.單擊"確定"按鈕,系統彈出"style definition"對話方塊。在"category"欄中選擇"type"選項,在"type"欄中的"size"欄中選擇文字規格,如9或16。然後在其後的單位欄選擇"points"(磅)。

在"line"欄輸入行距規格125~150,單位選擇"%"(如圖3所示)。

5.單擊"ok"按鈕,樣式選擇器名稱就出現在"css styles"視窗中了。同時,樣式選擇器名稱還以操作命令的方式自動出現在"text"*"css styles"子選單中。

您只需重複第2~5步的操作,就可以在乙個樣式表中設定多種文字樣式。

二、鏈結和修改樣式表

如果要使用過去編輯好的樣式表檔案,使用者可以在"css styles"視窗中單擊鏈結按鈕,找到過去儲存的css檔案,即可將它鏈結到當前編輯的網頁檔案中進行應用。

使用者在編輯或鏈結css檔案後,單擊"css styles"視窗的編輯按鈕可以對此檔案或檔案中的某一樣式進行修改。

在"css styles"視窗中,滑鼠右鍵單擊乙個樣式選擇器,選擇其快捷選單中"edit"選項,可以退回到"style definition"對話方塊,對已設定的引數進行修改。

三、應用樣式表

在網頁編輯視窗點出游標,然後單擊"css styles"對話方塊中的乙個樣式選擇器,以後輸入的文字就被設定為該樣式規定的文字規格。在已經輸入文字的網頁中,在任意位置點出游標並應用乙個樣式,該樣式就對全部文字起作用; 如果是在**中使用樣式,該樣式僅對當前單元格中的文字起作用。在乙個或相鄰段落中連續選中一些文字後應用乙個樣式,該樣式只對選中的文字起作用。

另外,應用樣式表也可以在點出游標或選中文字後,執行"text"*"css styles"子選單中相應的樣式選擇器名稱完成。

在frontpage 2000中使用樣式表

一、建立外部樣式表

1.選擇"檔案"*"新建"*"網頁",開啟"新建"對話方塊。

2.單擊"樣式表"選項卡,選中"普通樣式表"模板圖示,然後單擊"確定"按鈕,進入"new_page_"編輯視窗。

3.選擇"格式"*"樣式",開啟"樣式"對話方塊,其中"樣式"欄顯示的是所有預設html標記的名稱。

4.單擊"新建"按鈕,開啟"新樣式"對話方塊。在"名稱(選擇器)"欄中輸入樣式選擇器名稱,如"font9",然後單擊"格式"按鈕,開啟樣式專案選擇選單(如圖4所示)。

5.選擇樣式專案選擇選單的"字型"選項,開啟"字型"對話方塊,在"大小"欄中輸入文字規格,例如9pt(9磅),然後單擊"確定"按鈕返回"新樣式"對話方塊。

6.選擇樣式專案選擇選單的"段落"選項,開啟"段落"對話方塊,在"行距大小"欄輸入行距規格,如"120%",然後單擊"確定"按鈕返回"新樣式"對話方塊。

7.單擊"確定"按鈕返回"樣式"對話方塊,設定的樣式選擇器".font9"就顯示在"樣式"欄中了。單擊"確定"按鈕即返回編輯視窗。

8.重複第4~7步,直至設定好編輯網頁所需的各種不同文字、行距規格。

9.儲存樣式表,將檔案儲存在所編輯網頁的儲存位置即可。

二、建立嵌入式樣式表

執行建立外部樣式表的第3~7步,即可在當前網頁中加入內嵌樣式表。進入編輯視窗的"html"檢視方式,我們就會看到,在網頁的html**的

"< /head>"段前出現了這樣幾段**:

< style>

< !--

.font9

-- >

< /style>

其中的".font9"是樣式選擇器名稱,"font-size:9pt"是文字規格,"line-height:

120%"是行距規格。在此您還可以根據實際需要,修改建立新的樣式選擇器或直接編輯其中的資料。

三、應用樣式表

鏈結樣式表開始編輯網頁時,如果要使用外部樣式表,可以在編輯視窗的"普通"檢視方式下選擇"格式"*"樣式表鏈結",開啟"鏈結樣式表"對話方塊,單擊"新增"按鈕,在"選擇超連結"對話方塊裡選擇要鏈結的樣式表,如果要將該樣式表鏈結到同一站點的全部網頁,還應選中"所有網頁"選項。單擊"確定"按鈕返回編輯視窗,即開始應用樣式表。如果使用嵌入式樣式表,建立樣式表後可直接應用樣式表。

應用樣式表建立並鏈結好樣式表後,frontpage 2000就會把樣式表中自定義的樣式加入格式工具欄左端"樣式"按鈕的下拉列表中。在乙個段落的任意位置點出游標,單擊"樣式"按鈕,從下拉列表中選擇乙個樣式選擇器,即可將該樣式應用於指定段落。需要說明的是:

網頁檔案段落開頭的html**為< p>,段落結尾**為< /p>; 編輯過程中按一次回車鍵"enter"產生乙個< /p>,標誌著上一段的結束和下一段的開始。而按"shift+enter"按鈕產生的html**為< br>,它只是表示在段落中插入了乙個換行符,是同一段落另起一行後的延續。

注意事項

1.在frontpage 2000中,可以使用外部樣式表和嵌入式的樣式表; 而在dreamwe**er 4.0中,則只能使用外部樣式表。

樣式表舉例

1 內部樣式表 下面通過建立css樣式對網頁中的文字進行格式化。1 用dw開啟網頁文件 2 單擊 樣式表 面板中的 新建css規則 按鈕,彈出 新建css規則 對話方塊。3 在 名稱 文字框裡輸入要定義的css樣式的名稱.ziti,在 選擇器型別 項中選中 類 單選按鈕,在 定義在 項中選中 僅對該...

CSS樣式表應用

例1 建立上標 下標樣式表 1 單擊 視窗 css樣式 命令,開啟 css樣式 面板。2 單擊 css樣式 面板右上角的下三角按鈕,從彈出的選單中選擇 新建css樣式 命令,這時會出現 新建css樣式 對話方塊。3 在 新建css樣式 對話方塊中,將 名稱 設定為sbiao,型別 設定為 類 可應用...

圖紙會審證明樣式表

圖紙會審 設計變更證明 福林苑小區a22 樓工程有圖紙會審記錄 張,設計變更單 張。設計單位 經辦人 簽字 單位公章 建設單位 經辦人 簽字 單位公章 施工單位 經辦人 簽字 單位公章 監理單位 經辦人 簽字 單位公章 年月日 說明 每個工程無論會審變更有無,或多少必須開此證明。圖紙會審 設計變更證...