css學習筆記1

2021-07-13 10:40:51 字數 2184 閱讀 2809

本次學習通過

**學習

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

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

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

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

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

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

派生選擇器允許你根據文件的上下文關係來確定某個標籤的樣式。通過合理地使用派生選擇器,我們可以使 html **變得更加整潔。

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

li strong
請注意標記為的藍色**的上下文關係:

我是粗體字,不是斜體字,因為我不在列表當中,所以這個規則對我不起作用

我是斜體字。這是因為 strong 元素位於 li 元素內。我是正常的字型。

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

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

id 選擇器以 "#" 來定義。

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

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

這個段落是紅色。

這個段落是綠色。

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

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

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

this paragraph will also be center-aligned.

下面的例子為帶有 title 屬性的所有元素設定樣式:

[title]

選擇器描述

[attribute]

用於選取帶有指定屬性的元素。

[attribute=value]

用於選取帶有指定屬性和值的元素。

[attribute~=value]

用於選取屬性值中包含指定詞彙的元素。

[attribute|=value]

用於選取帶有以指定值開頭的屬性值的元素,該值必須是整個單詞。

[attribute^=value]

匹配屬性值以指定值開頭的每個元素。

[attribute$=value]

匹配屬性值以指定值結尾的每個元素。

[attribute*=value]

匹配屬性值中包含指定值的每個元素。

當讀到乙個樣式表時,瀏覽器會根據它來格式化 html 文件。插入樣式表的方法有三種:

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

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

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

hr 

p body

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

CSS學習筆記1

css指層疊樣式表 cascading style sheets css定義如何顯示html元素。樣式通常儲存在樣式表中。所有主流瀏覽器均支援層疊樣式表。當有多個樣式的時候,是按照這樣的優先權確定文件的樣式的 內聯樣式 在html元素內部 內部樣式表 位於標籤內部 外部樣式表,瀏覽器預設設定。css...

CSS學習筆記1

css 層疊樣式表 內嵌樣式 在標籤元素中 style 屬性名 屬性值 內含樣式 在head中 type text css 選擇器名 style 外部樣式 rel stylesheet type text css href css中注釋用 選擇器 1.標籤選擇器 標籤名 2.類選擇器 標籤元素中定義...

學習css筆記(1)

用以下三種方式將樣式表加入網頁 最接近目標的樣式定義優先權越高。高優先權樣式將繼承低優先權樣式的未重疊定義但覆蓋重疊的定義。鏈入外部樣式表檔案 linking to a style sheet 先建立外部樣式表檔案 css 然後使用html的link物件。而在xml中應該如下例所示在宣告區中加入 定...