css學習記錄

2021-10-03 09:57:10 字數 2393 閱讀 3880

css 概述

多重樣式將層疊為乙個

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

層疊次序

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

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

css 語法

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

selector

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

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

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

h1

空格和大小寫

是否包含空格不會影響 css 在瀏覽器的工作效果,同樣,與 xhtml 不同,css 對大小寫不敏感。不過存在乙個例外:如果涉及到與 html 文件一起工作的話,class 和 id 名稱對大小寫是敏感的。

選擇器的分組

可以對選擇器進行分組,這樣,被分組的選擇器就可以分享相同的宣告。用逗號將需要分組的選擇器分開。

h1,h2,h3,h4,h5,h6

派生選擇器

通過依據元素在其位置的上下文關係來定義樣式,你可以使標記更加簡潔。

在 css1 中,通過這種方式來應用規則的選擇器被稱為上下文選擇器 (contextual selectors),這是由於它們依賴於上下文關係來應用或者避免某項規則。在 css2 中,它們稱為派生選擇器,但是無論你如何稱呼它們,它們的作用都是相同的。

派生選擇器允許你根據文件的上下文關係來確定某個標籤的樣式。

希望列表中的 strong 元素變為斜體字,而不是通常的粗體字,可以這樣定義乙個派生選擇器:

li strong

請注意標記為的**的上下文關係:

我是粗體字,不是斜體字,因為我不在列表當中,所以這個規則對我不起作用我是斜體字。這是因為 strong 元素位於 li 元素內。

我是正常的字型。

在上面的例子中,只有 li 元素中的 strong 元素的樣式為斜體字,無需為 strong 元素定義特別的 class 或 id,**更加簡潔。

更深入地學習關於派生選擇器:

id 選擇器

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

id 選擇器以 「#」 來定義。

下面的兩個 id 選擇器,第乙個可以定義元素的顏色為紅色,第二個定義元素的顏色為綠色:

#red

#green

下面的 html **中,id 屬性為 red 的 p 元素顯示為紅色,而 id 屬性為 green 的 p 元素顯示為綠色。

"red">這個段落是紅色。

"green">這個段落是綠色。

id 屬性只能在每個 html 文件**現一次

id 選擇器和派生選擇器

在現代布局中,id 選擇器常常用於建立派生選擇器。

#sidebar p

上面的樣式只會應用於出現在 id 是 sidebar 的元素內的段落。這個元素很可能是 div 或者是**單元,儘管它也可能是乙個**或者其他塊級元素。

css 類選擇器

在 css 中,類選擇器以乙個點號顯示:

.center

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

在下面的 html **中,h1 和 p 元素都有 center 類。這意味著兩者都將遵守 「.center」 選擇器中的規則。

"center">

this paragraph will also be center-aligned.

注意:類名的第乙個字元不能使用數字!它無法在 mozilla 或 firefox 中起作用。

和 id 一樣,class 也可被用作派生選擇器:

.fancy td

在上面這個例子中,類名為 fancy 的更大的元素內部的**單元都會以灰色背景顯示橙色文字。(名為 fancy 的更大的元素可能是乙個**或者乙個 div)

屬性選擇器

css學習記錄

1 瀏覽器字首 ie ms firefox moz opera o chrome和safari webkit webkit是webkit核心 moz 是firefox gecko核心,moz代表的是firefox生產廠商mozilla 瀏覽器核心 二 gecko核心代表作品mozilla firef...

css學習記錄

1 css display block 原來老是單純的認為display block僅用來控制元素的顯示與隱藏 今天發現block其實還是塊級元素 例項 一般導航選單裡會將a轉換成塊級元素,可以更好的控制樣式 2 css focus 偽類 說明 在ie中focus 偽類 僅僅支援ie 8以上的版本 ...

css學習記錄(一)

1.內聯 樣式宣告格式 樣式屬性 值 常用樣式屬性 color font size background 內聯樣式的優先順序最高 內聯用的不多 2.內部樣式 在head標籤中加入style標籤,由選擇器和樣式宣告組成 內部樣式可重用 3.外部樣式 在head中寫入 1.繼承性 大部分css效果,子元...