當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

003_如何创建CSS

發(fā)布時間：2025/4/17 CSS 71 豆豆

生活随笔收集整理的這篇文章主要介紹了 003_如何创建CSS 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

1. 如何插入樣式表

1.1. 插入樣式表的方法有三種:?外部樣式表, 內部樣式表和內聯(lián)樣式。

1.2. 外部樣式表

?1.2.1. 當樣式需要應用于很多頁面時, 外部樣式表將是理想的選擇。在使用外部樣式表的情況下, 你可以通過改變一個文件來改變整個站點的外觀。每個頁面使用標簽鏈接到樣式表。標簽在文檔的頭部:

?1.2.2. 瀏覽器會從文件mystyle.css中讀到樣式聲明, 并根據(jù)它來格式文檔。

?1.2.3. 外部樣式表可以在任何文本編輯器中進行編輯。文件不能包含任何的html標簽。樣式表應該以.css擴展名進行保存。下面是一個樣式表文件的例子:

hr {color: sienna; } p {margin-left: 20px; } body {background-image: url("images/back40.gif"); }

1.3. 內部樣式表

?1.3.1. 當單個文檔需要特殊的樣式時, 就應該使用內部樣式表。你可以使用

<head><style type="text/css">hr {color: sienna;}p {margin-left: 20px;}body {background-image: url("images/back40.gif");}</style> </head>

1.4. 內聯(lián)樣式

?1.4.1. 要使用內聯(lián)樣式, 你需要在相關的標簽內使用樣式(style)屬性。style屬性可以包含任何CSS屬性。本例展示如何改變段落的顏色和左外邊距:

<p style="color: sienna; margin-left: 20px;">This is a paragraph</p>

?1.4.2. 由于要將表現(xiàn)和內容混雜在一起, 內聯(lián)樣式會損失掉樣式表的許多優(yōu)勢。請慎用這種方法, 例如當樣式僅需要在一個元素上應用一次時。

2. 多重樣式將層疊為一個

2.1. 如果某些相同的屬性在不同的樣式表中定義同一個html元素, 那么屬性值將從更具體的樣式表中被繼承過來。

?2.1.1. 內部樣式表, 設置h3元素字體顏色為紅色

h3 {color: red; }

?2.1.2. 內聯(lián)樣式表, 設置h3元素字體顏色為藍色

<h3 style="color: blue">多重樣式表</h3>

?2.1.3. h3元素的字體顏色將從更具體的內聯(lián)樣式表中繼承過來, 也就是藍色。

2.2. 當同一個html元素的多種屬性在不止一個樣式表中定義時, 會使用哪個樣式呢?

?2.2.1. 一般而言, 所有的樣式會根據(jù)下面的規(guī)則層疊于一個新的虛擬樣式表中, 其中內聯(lián)樣式擁有最高的優(yōu)先權。優(yōu)先級有高到低排列如下:

內聯(lián)樣式(在html元素內部)
外部樣式表(位于CSS文件中)和內部樣式表(位于style標簽內部)
瀏覽器缺省設置

?2.2.2. 例如, 外部樣式表mystyle.css擁有針對h3選擇器的兩個屬性:

h3 {color: red;text-align: left; }

? 而內部樣式表擁有針對h3選擇器的兩個屬性:

h3 {text-align: right; background-color: blue; }

?假如擁有內部樣式表的這個頁面同時與外部樣式表鏈接, 并且在

標簽內, 外部樣式表位于內部樣式表之前:

<head><link rel="stylesheet" type="text/css" href="mystyle.css" /><style type="text/css">h3 {text-align: right;background-color: blue;}</style> </head>

? 那么h3得到的樣式如下, 即文本的顏色屬性將繼承于外部樣式表, 而文本水平對齊方式和文本的背景顏色屬性將繼承于內部樣式表:

color: red; text-align: right; background-color: blue;

?假如擁有內部樣式表的這個頁面同時與外部樣式表鏈接, 并且在

標簽內, 外部樣式表位于內部樣式表之后:

<head><style type="text/css">h3 {text-align: right;background-color: blue;}</style><link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>

?那么h3得到的樣式如下, 即文本的顏色和文本水平對齊方式屬性將繼承于外部樣式表, 而文本的背景顏色屬性將繼承于內部樣式表:

color: red; text-align: left; background-color: blue;

3. CSS中的注釋

3.1. 開始一個正斜杠, 需要緊跟一個星號; 結束正斜杠之前需要一個星號。

3.2. Sublime中注釋快捷鍵: Ctrl + /。

3.3. 實例

hr {color: sienna; } p {margin-left: 20px; } /*CSS中的注釋: 開始一個正斜杠, 需要緊跟一個星號; 結束正斜杠之前需要一個星號。 Sublime中注釋快捷鍵: Ctrl + /。*/ body {background-image: url("images/back40.gif"); }

4. 例子

4.1. mystyle.css

h3 {color: red;text-align: left; }

4.2. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>多重樣式表</title><link rel="stylesheet" type="text/css" href="mystyle.css" /><style type="text/css">h3 {text-align: right;background-color: blue;}</style></head><body><h3>多重樣式表</h3></body> </html>

4.3. 效果圖

總結

以上是生活随笔為你收集整理的003_如何创建CSS的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。