CSS基本語法

2021-07-03 12:40:50 字數 2318 閱讀 6550

css 規則由兩個主要的部分構成:選擇器,以及一條或多條宣告:

選擇器通常是您需要改變樣式的 html 元素。

每條宣告由乙個屬性和乙個值組成。

屬性(property)是您希望設定的樣式屬性(style attribute)。每個屬性有乙個值。屬性和值被冒號分開。

如果你要在html元素中設定css樣式,你需要在元素中設定"id" 和 "class"選擇器。

id 選擇器可以為標有特定 id 的 html 元素指定特定的樣式。

html元素以id屬性來設定id選擇器,css 中 id 選擇器以 "#" 來定義。

以下的樣式規則應用於元素屬性 id="para1":

#para1

class 選擇器用於描述一組元素的樣式,class 選擇器有別於id選擇器,class可以在多個元素中使用。

class 選擇器在html中以class屬性表示, 在 css 中,類選擇器以乙個點"."號顯示:

在以下的例子中,所有擁有 center 類的 html 元素均為居中。

.center

你也可以指定特定的html元素使用class。

在以下例項中, 所有的 p 元素使用 class="center" 讓該元素的文字居中:

p.center

插入樣式表的方法有三種:

當樣式需要應用於很多頁面時,外部樣式表將是理想的選擇。在使用外部樣式表的情況下,你可以通過改變乙個檔案來改變整個站點的外觀。每個頁面使用 標籤鏈結到樣式表。 標籤在(文件的)頭部:

瀏覽器會從檔案 mystyle.css 中讀到樣式宣告,並根據它來格式文件。

外部樣式表可以在任何文字編輯器中進行編輯。檔案不能包含任何的 html 標籤。樣式表應該以 .css 副檔名進行儲存。下面是乙個樣式表檔案的例子:

hr

p

body

當單個文件需要特殊的樣式時,就應該使用內部樣式表。你可以使用 標籤在文件頭部定義內部樣式表,就像這樣:

由於要將表現和內容混雜在一起,內聯樣式會損失掉樣式表的許多優勢。請慎用這種方法,例如當樣式僅需要在乙個元素上應用一次時。

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

this is a paragraph.

如果某些屬性在不同的樣式表中被同樣的選擇器定義,那麼屬性值將從更具體的樣式表中被繼承過來。 

例如,外部樣式表擁有針對 h3 選擇器的三個屬性:

h3

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

h3

假如擁有內部樣式表的這個頁面同時與外部樣式表鏈結,那麼 h3 得到的樣式是:

color:red;

text-align:right;

font-size:20pt;

即顏色屬性將被繼承於外部樣式表,而文字排列(text-alignment)和字型尺寸(font-size)會被內部樣式表中的規則取代。

樣式表允許以多種方式規定樣式資訊。樣式可以規定在單個的 html 元素中,在 html 頁的頭元素中,或在乙個外部的 css 檔案中。甚至可以在同乙個 html 文件內部引用多個外部樣式表。

當同乙個 html 元素被不止乙個樣式定義時,會使用哪個樣式呢?

一般而言,所有的樣式會根據下面的規則層疊於乙個新的虛擬樣式表中,其中數字 4 擁有最高的優先權。

瀏覽器預設設定

外部樣式表

內部樣式表(位於 標籤內部)

內聯樣式(在 html 元素內部)

因此,內聯樣式(在 html 元素內部)擁有最高的優先權,這意味著它將優先於以下的樣式宣告: 標籤中的樣式宣告,外部樣式表中的樣式宣告,或者瀏覽器中的樣式宣告(預設值)。

在樣式表中有很多具有相同樣式的元素。

h1

h2p

為了儘量減少**,你可以使用分組選擇器。

每個選擇器用逗號分隔.

在下面的例子中,我們對以上**使用分組選擇器:

h1,h2,p

嘗試一下 »

它可能適用於選擇器內部的選擇器的樣式。

在下面的例子,為所有p元素指定乙個樣式,為所有元素指定乙個class="marked"的樣式,並僅用於class="標記",類內的p元素指定第三個樣式:p

.marked

.marked p

嘗試一下 »

css基本語法

最近 要經常用到css,但是語法 老是忘記,先貼起來!摘自http www.webjx.com 1.css的語法 css的定義是由三個部分構成 選擇符 selector 屬性 properties 和屬性的取值 value 語法 selector 選擇符 說明 選擇符是可以是多種形式,一般是你要定義...

CSS基本語法

1.基本語法 css的定義是由三個部分構成 選擇符 selector 屬性 properties 和屬性的取值 value 基本格式如下 selector 選擇符 選擇符是可以是多種形式,一般是你要定義樣式的html標記,例如body p table 你可以通過此方法定義它的屬性和值,屬性和值要用冒...

CSS基本語法

1.基本語法 css的定義是由三個部分構成 選擇符 selector 屬性 properties 和屬性的取值 value 基本格式如下 selector 選擇符 選擇符是可以是多種形式,一般是你要定義樣式的html標記,例如body p table 你可以通過此方法定義它的屬性和值,屬性和值要用冒...