- 精通HTML5+CSS3+JavaScript網頁設計（視頻教學版）（第2版）
- 王英英
- 1378字
- 2019-12-09 14:23:59
6.2 編輯和瀏覽CSS
CSS文件是文本格式文件，因此在編輯CSS時就有了多種選擇，可以使用一些簡單的文本編輯工具（如記事本、Word），也可以選擇專業的CSS編輯工具（如Dreamweaver）。記事本編輯工具適合于初學者，不適合大項目編輯，但專業工具軟件通常占有空間較大，打開不太方便。
6.2.1 CSS基礎語法
在前面介紹過，CSS樣式表由若干條樣式規則組成，這些樣式規則可以應用到不同的元素或文檔中來定義它們的顯示效果。每一條樣式規則由三部分構成：選擇符（selector）、屬性（property）和屬性值（value），基本格式如下：
selector{property: value}
（1）selector可以采用多種形式，可以為文檔中的HTML標記（例如<body>、<table>、<p>等），也可以是XML文檔中的標記。
（2）property是選擇符指定的標記所包含的屬性。
（3）value指定了屬性的值。如果定義選擇符的多個屬性，則屬性和屬性值為一組，組與組之間用“;”隔開，基本格式如下：
selector{property1: value1; property2: value2;…… }
下面就給出一條樣式規則，代碼如下所示。
p{color:red}
其中，p為段落提供樣式，color指定文字顏色屬性，red為屬性值。此樣式規則表示標記<p>指定的段落文字為紅色。
如果要為段落設置多種樣式，則可以使用下列語句。
p{font-family:"隸書"; color:red; font-size:40px; font-weight:bold}
6.2.2 使用記事本手工編寫CSS文件
由于CSS是文本格式，因此使用傳統的文本編輯器就可以編輯CSS。當然這些編輯軟件不支持語法提示，不支持驗證，會嚴重影響開發效率，但使用記事本手工編寫CSS文件可以使初學者更快地掌握CSS3技術。
使用記事本編寫CSS和使用記事本編寫HTML的方法基本一樣。首先需要打開一個記事本，然后在里面輸入相應的CSS代碼即可。
【例6.1】使用記事本手工編寫CSS文件。
01 打開記事本，編寫HTML文檔
打開一個記事本，輸入HTML代碼，如圖6-1所示。
圖6-1 記事本開發HTML
02 添加CSS代碼，修飾HTML元素
在head部分添加CSS樣式代碼，如圖6-2所示。
圖6-2 添加樣式
從窗口中可以看出，在head部分添加了一個<style>標記（CSS樣式標記）。在<style>標記中間對p樣式進行了設定，設置段落居中顯示并且顏色為紅色。
03 運行網頁文件
編輯完成后，使用IE 11.0打開（如圖6-3所示），可以看到段落在頁面中間以紅色字體顯示。
圖6-3 CSS樣式顯示窗口
6.2.3 使用Dreamweaver CC創建CSS文件
隨著Web技術的發展，越來越多的開發人員開始使用功能更多、界面更友好的專業CSS編輯器（如Dreamweaver CC的CSS編輯器和Visual Studio的CSS編輯器），這些編輯器有語法著色，帶輸入提示，甚至有自動創建CSS的功能。
【例6.2】使用Dreamweaver CC創建CSS文件
01 創建HTML文檔
使用Dreamweaver CC創建HTML文檔的方法前面已經介紹過，這里就不再贅述了。此處創建一個名稱為“6.2.html”的文檔，如圖6-4所示。
圖6-4 網頁顯示窗口
02 添加CSS樣式
在設計模式中，選中“使用CSS標記修飾”段落后，右擊并在彈出的快捷菜單中選擇【CSS樣式】?【新建】菜單命令，彈出如圖6-5所示的對話框。
圖6-5 “新建CSS規則”對話框
在【為CSS規則選擇上下文選擇器類型】下拉列表中，選擇【標簽（重新定義HTML元素）】選項（學習后面章節內容后，讀者可以根據需要選擇不同的選擇器類型）。選擇完成后單擊【確定】按鈕，即可顯示如圖6-6所示的對話框。
圖6-6 “p的CSS規則定義”對話框
在對話框中可以設置p的樣式，設置完成后單擊【確定】按鈕，此時HTML文檔內容發生了變化，如圖6-7所示。
圖6-7 設置完成顯示
從代碼模式可以看到，在head部分中增加了一個<style>標記放置CSS樣式，該樣式用來修飾段落p。
03 運行HTML文檔
在IE 11.0中預覽該網頁，其顯示結果如圖6-8所示，可以看到字體顏色設置為淺紅色，大小為18px，字形加粗。
圖6-8 CSS樣式顯示
上述使用Dreamweaver創建CSS的方法只是其中一種，讀者還可以直接在代碼模式中編寫CSS代碼，此時會有很好的語法提示。