如何建立css:設定樣式表

來源:酷知科普網 1.18W

如何使用css設定樣式?今天給大家分享下學習css初的時候,怎麼用也就是建立。css設定樣式分為三大類:外部樣式表、內部樣式表、內聯樣式。讓我們一起來了解下吧

操作方法

(01)在桌面新建一個“資料夾”,然後在資料夾下建一個“txt檔案”。

如何建立css:設定樣式表
如何建立css:設定樣式表 第2張

(02)在txt檔案下增加標準網頁宣告<!doctype html>,這個習慣是非常有必要的。內部樣式表:增加方式為在head標籤內部增加<style>各種樣式宣告(class對應方式.{}id對應方式#{}元素(如p元素)對應方式p{})</style>.

如何建立css:設定樣式表 第3張

(03)內部樣式表宣告完成後,把txt檔案另存為所有檔案,然後追加字尾,發現出現新html文件,雙擊開啟方式搜狗瀏覽器。可以看到對應樣式設定效果。

如何建立css:設定樣式表 第4張
如何建立css:設定樣式表 第5張
如何建立css:設定樣式表 第6張

(04)除了內部樣式表這種方式在網頁內部增加樣式外,還有內聯樣式這種方式來設定樣式。首選我們把上步註釋掉,然後檢視效果。並設定內聯樣式具體操作方式如下:

如何建立css:設定樣式表 第7張
如何建立css:設定樣式表 第8張
如何建立css:設定樣式表 第9張
如何建立css:設定樣式表 第10張

(05)在網頁內部增加樣式,程式碼容易被別人copy,所以還有一種外部樣式表,讓css存在於另外的檔案下,先建立一個css文件,直接編輯樣式就行啦。最後只需另存為字尾。具體如下:

如何建立css:設定樣式表 第11張
如何建立css:設定樣式表 第12張

(06)完成外部css編輯以後,就是如何在html內引用外部外部樣式表,引用在head內<link rel="stylesheet"  type="text/css" href="url">然後瀏覽。

如何建立css:設定樣式表 第13張
如何建立css:設定樣式表 第14張

特別提示

建議使用txt編輯靜態網站保持良好的習慣

外部樣式表、內部樣式表、內聯樣式三種樣式你都使用。可以看看優先順序。這個你可以自行測試

熱門標籤