網站首頁 健康小知識 母嬰教育 起名 運動知識 職場理財 情感生活 綠色生活 遊戲數碼 美容 特色美食 愛好
當前位置:酷知知識幫 > 遊戲數碼 > 電腦

如何創建css:設置樣式表

欄目: 電腦 / 發佈於: / 人氣:1.15W

如何使用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編輯靜態網站保持良好的習慣

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