1、創(chuàng)建使用css樣式表有三種，分別是外部樣式表，內部樣式表和內聯(lián)樣式。下面通過一個小demo演示它們的用法，首先新建一個html文件，放入3個button按鈕，給前兩個按鈕分別設置class屬性為btn1和btn2：
創(chuàng)新互聯(lián)服務項目包括柳林網站建設、柳林網站制作、柳林網頁制作以及柳林網絡營銷策劃等。多年來，我們專注于互聯(lián)網行業(yè)，利用自身積累的技術優(yōu)勢、行業(yè)經驗、深度合作伙伴關系等，向廣大中小型企業(yè)、政府機構等提供互聯(lián)網行業(yè)的解決方案，柳林網站推廣取得了明顯的社會效益與經濟效益。目前，我們服務的客戶以成都為中心已經輻射到柳林省份的部分城市，未來相信會繼續(xù)擴大服務區(qū)域并繼續(xù)獲得客戶的支持與信任！
2、接著準備一個css文件，命名為demo.css，在文件內寫入按鈕A的樣式，保存css文件：
3、回到剛才的html文件，在style標簽中用link標簽引入上一步創(chuàng)建的css文件，這就是外聯(lián)樣式的用法，總結就是創(chuàng)建好的css文件內寫好樣式，然后在html文件中用link標簽引入即可，這也是大部分網站使用的方法，因為其引入方便，管理起來也比較方便：
4、接著是內部樣式表的使用，這里直接在head標簽里創(chuàng)建style標簽，在里面加入btn2的樣式。對于內部樣式表簡單的html文件，內部樣式是很方便的，但是結構復雜的html文件使用它就會讓文件顯得很混亂：
5、最后是內聯(lián)樣式的使用，直接在第三個標簽內使用style屬性加入樣式就可以了：
6、最后保存html文件，打開瀏覽器可以看到三個按鈕的樣式都出現(xiàn)了。以上就是css樣式表的制作方法：
1、
設計由多個網頁組成的小型網站，自選主題，要求積極、健康，不得從網絡上下載；
2、
構建本地站點，創(chuàng)建站點目錄；
3、
站點目錄中各種文件分類存放，文件命名
科學
，網站不少于10個頁面；
4、
整個網站內容大小不超過20M；
5、
網頁版面采用表格布局；
6、
網頁中引入CSS
樣式表
技術。
7、
超級鏈接的都可正確點通；
8、
網頁中需添加如
動畫
、
音頻
、視頻等多媒體元素；
9、
欄目設計合理，頁面
文字
充實，圖文并茂。
10、
使用動態(tài)頁面效果，如
時間軸動畫
、彈出信息、彈出菜單等；
11、
可根據個人能力和興趣使用數據庫，ASP，JSP，PHP等網頁技術。
實驗報告
應包涵以下幾個部分：
1、實驗說明：說明網戰(zhàn)在設計所應用的技術，站點下各目錄、各文件；素材的收集途徑等；
2、實驗步驟：詳細闡述網頁設計整體
流程
和其中各個環(huán)節(jié)的操作步驟；
3、實驗心得。
網頁制作實驗報告
實驗一：站點設置
一、實驗目的及要求
本實例是通過“站點定義為”對話框中的“高級”選項卡創(chuàng)建一個新站點。
二、儀器用具
1、生均一臺多媒體電腦，組建內部局域網，并且接入國際互聯(lián)網。
2、安裝Windows XP操作系統(tǒng)；建立IIS服務器環(huán)境，支持ASP。
3、安裝網頁三劍客（Dreamweaver MX；Flash MX；Fireworks MX）等網頁設計軟件；
三、實驗原理
通過“站點定義為”對話框中的“高級”選項卡創(chuàng)建一個新站點。
四、實驗方法與步驟
1）執(zhí)行“站點＼管理站點”命令，在彈出的“管理站點”對話框中單擊“新建”按鈕，在彈出的快捷菜單中選擇“站點”命令。
2）在彈出的“站點定義為”對話框中單擊“高級”選項卡。
3）在“站點名稱”文本框中輸入站點名稱，在“默認文件夾”文本框中選擇所創(chuàng)建的站點文件夾。在“默認圖象文件夾”文本框中選擇存放圖象的文件夾，完成后單擊“確定”按鈕，返回“管理站點”對話框。
4）在“管理站點”對話框中單擊“完成”按鈕，站點創(chuàng)建完畢。
五、實驗結果
六、討論與結論
實驗開始之前要先建立一個根文件夾，在實驗的過程中把站點存在自己建的文件夾里，這樣才能使實驗條理化，不至于在實驗后找不到自己的站點。在實驗過程中會出現(xiàn)一些選項，計算機一般會有默認的選擇，最后不要去更改，如果要更改要先充分了解清楚該選項的含義，以及它會造成的效果，否則會使實驗的結果失真。實驗前先熟悉好操作軟件是做好該實驗的關鍵。
實驗二：頁面圖像設置
一、實驗目的及要求：
本實例的目的是設置頁面的背景圖像,并創(chuàng)建鼠標經過圖像。
二、儀器用具
1、生均一臺多媒體電腦，組建內部局域網，并且接入國際互聯(lián)網。
2、安裝Windows XP操作系統(tǒng)；建立IIS服務器環(huán)境，支持ASP。
3、安裝網頁三劍客（Dreamweaver MX；Flash MX；Fireworks MX）等網頁設計軟件；
4、安裝Acdsee、Photoshop等圖形處理與制作軟件；
5、其他一些動畫與圖形處理或制作軟件。
三、實驗原理
設置頁面的背景圖像,并創(chuàng)建鼠標經過圖像。
四、實驗方法與步驟
1) 在“頁面屬性”對話框中設置頁面的背景圖像。
2) 在頁面文檔中單擊“”插入鼠標經過圖像。
五、實驗結果
六、討論與結論
實驗結束后我們可以看到頁面的背景變成了我們插入的圖像，并且要鼠標經過的時候會變成另一個圖像，這就是鼠標經過圖像的效果。當然這種實驗效果很難在實驗結果的截圖里表現(xiàn)出來。這個實驗的關鍵在于背景圖像的選擇，如果背景圖像太大不僅會影響網頁的打開速度，甚至圖像在插入會也會有失真的感覺，因此在插入前對圖像進行必要的處理能使實驗的效果更好。
實驗三：表格制作
一、實驗目的及要求：
本實例是要創(chuàng)建邊框為1像素的表格。
二、儀器用具
1、生均一臺多媒體電腦，組建內部局域網，并且接入國際互聯(lián)網。
2、安裝Windows XP操作系統(tǒng)；建立IIS服務器環(huán)境，支持ASP。
3、安裝網頁三劍客（Dreamweaver MX；Flash MX；Fireworks MX）等網頁設計軟件；
4、安裝Acdsee、Photoshop等圖形處理與制作軟件；
5、其他一些動畫與圖形處理或制作軟件。
三、實驗原理
創(chuàng)建邊框為1像素的表格。
四、實驗方法與步驟
1) 在文檔中，單擊表格“”按鈕，在對話框中將“單元格間距”設置為“1”。
2) 選中插入的表格，將“背景顏色”設置為“黑色”（#0000000）。
3) 在表格中選中所有的單元格，在“屬性”面版中將“背景顏色”設置為“白色”（#FFFFFF）。
4) 設置完畢，保存頁面，按下“F12”鍵預覽。
五、實驗結果
六、討論與結論
本實驗主要通過整個表格和單元格顏色的差異來襯托出實驗效果，間距的作用主要在于表現(xiàn)這種顏色差異。表格的背景顏色和單元格的背景顏色容易混淆，在實驗中要認真判斷，一旦操作錯誤則得不到實驗的效果。“表格寬度”文本框右側的表格的寬度單位，包括“像素”和“百分比”兩種，容易混淆，要充分地理解這兩種單位表示的意義才能正確地進行選擇，否則就不能達到自己想要的效果，設置錯誤就會嚴重影響實驗效果。
實驗四：創(chuàng)建錨點鏈接
一、實驗目的及要求：
本實例的目的是創(chuàng)建錨點鏈接。
二、儀器用具
1、生均一臺多媒體電腦，組建內部局域網，并且接入國際互聯(lián)網。
2、安裝Windows XP操作系統(tǒng)；建立IIS服務器環(huán)境，支持ASP。
3、安裝網頁三劍客（Dreamweaver MX；Flash MX；Fireworks MX）等網頁設計軟件；
4、安裝Acdsee、Photoshop等圖形處理與制作軟件；
5、其他一些動畫與圖形處理或制作軟件。
三、實驗原理
創(chuàng)建錨點鏈接。
四、實驗方法與步驟
1) 在頁面中插入1行4列的表格，并在各單元格中輸入導航文字。
2) 分別選中各單元格的文字，單擊“”按鈕，在彈出的“超級鏈接”對話框上的“鏈接”文本框分別輸入“#01”“#02”“#03”“#04”。
3) 在文檔中輸入文字并設置錨記名稱“01”，按下“ Enter”鍵換行，輸入一篇文章。
4) 在文章的結尾處換行，輸入文字并設置錨記名稱“02”，按下“ Enter”鍵換行，輸入一篇文章。
5) 同樣的方法在頁面下文分別輸入文字和命名錨記為“03”和“04”，并輸入文章。
6) 保存頁面，按下“F12”鍵預覽。
五、實驗結果
六、討論與結論
添加瞄記的作用是可以幫讀者快速找到自己想要的文章，同時也可以使頁面更加精簡。本實驗的關鍵難點在于鏈接文本框輸入的名稱和瞄記的名稱要相一致才能達到實驗的效果，同時要記得是在上一篇文章的結尾處輸入文字并設置瞄記名稱，并記得輸入對應的文章，否則瞄記可能不能用。熟練程度低在實驗中不能很好地使用各種工具，無法一次準確地尋找到適當的位置。實驗中忘記選擇“不可見元素”，幾次實驗都失敗，最后才得出正確的結論。因此在實驗前要先做好預習，否則實驗過程會比較吃力。
實驗五：設置CSS樣式
一、實驗目的及要求：
本實例的目的是通過設置CSS樣式創(chuàng)建表格的虛線邊框。
二、儀器用具
1、生均一臺多媒體電腦，組建內部局域網，并且接入國際互聯(lián)網。
2、安裝Windows XP操作系統(tǒng)；建立IIS服務器環(huán)境，支持ASP。
3、安裝網頁三劍客（Dreamweaver MX；Flash MX；Fireworks MX）等網頁設計軟件；
4、安裝Acdsee、Photoshop等圖形處理與制作軟件；
5、其他一些動畫與圖形處理或制作軟件。
三、實驗原理
通過設置CSS樣式創(chuàng)建表格的虛線邊框。
四、實驗方法與步驟
1) 在網頁中創(chuàng)建一個表格。
2) 在“CSS樣式”面板中單擊“”按鈕，在彈出的對話框中進行設置，完成后單擊“確定”按鈕。
3) 在彈出的對話框中進行設置，完成后單擊“確定”
后面的看我發(fā)的那個網站！
CSS可以很方便的用來控制網頁的外觀。主要有以下特點：
1.可以同時更新多個網頁的樣式。
2.使網頁的表示層與結構層徹底分離
3.大大減小了網頁文件的大下
4.加快了網頁的加載速度
現(xiàn)在用CSS來布局網頁已經是一種潮流，如果要向網頁設計方面發(fā)展，必須精通CSS。
重慶分公司
重慶分公司
