CSS學習筆記

2021-09-25 22:09:01 字數 2578 閱讀 8689

css概述

樣式表層疊次序

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

瀏覽器的預設設定

外部樣式表

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

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

css語法

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

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

每條宣告由乙個屬性和乙個值構成。屬性(property)是希望設定的樣式屬性(style attribute),每個屬性有乙個值,屬性和值被冒號分開(如果值為若干單詞,則要給值加引號)。

selector

選擇器的分組

可以對選擇器進行分組,這樣,被分組的選擇器就可以分享相同的宣告。用逗號將需要分組的選擇器分開。例如下面的例子中,對所有的標題元素進行了分組。所有的標題元素都是綠色的。

h1,h2,h3,h4,h5,h6

派生選擇器

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

在 css1 中,通過這種方式來應用規則的選擇器被稱為上下文選擇器 (contextual selectors),這是由於它們依賴於上下文關係來應用或者避免某項規則。在 css2 中,它們稱為派生選擇器。派生選擇器允許根據文件的上下文關係來確定某個標籤的樣式。通過合理地使用派生選擇器,可以使 html **變得更加整潔。

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

li strong

>

>

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

>

p>

>

>

>

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

>

li>

>

我是正常的字型。li

>

ol>

id選擇器

id 選擇器可以為標有特定 id 的 html 元素指定特定的樣式。id 選擇器以 「#」 來定義。

例如:

#red

#green

"red"

>

這個段落是紅色。p

>

"green"

>

這個段落是綠色。p

>

類選擇器

類選擇器與id選擇器很相似,在 css 中,類選擇器以乙個點號顯示:

.center

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

class

="center"

>

this heading will be center-aligned

h1>

class

="center"

>

this paragraph will also be center-aligned.

p>

屬性選擇器

可以為擁有指定屬性的 html 元素設定樣式,而不僅限於 class 和 id 屬性。

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

[title]

屬性和值選擇器

下面的例子為 title=「luoru」 的所有元素設定樣式:

[title=luoru]

屬性和值選擇器 - 多個值

下面的例子為包含指定值的 title 屬性的所有元素設定樣式。適用於由空格分隔的屬性值:

[title~=hello]

下面的例子為帶有包含指定值的 lang 屬性的所有元素設定樣式。適用於由連字元分隔的屬性值:

[lang|=en]

設定表單的樣式

屬性選擇器在為不帶有 class 或 id 的表單設定樣式時特別有用:

input[type="text"]

input[type="button"]

CSS學習 CSS學習筆記

出處 注 本學習筆記只是自己的一些備忘,初學者的東西不具有參考性,請到w3school 進行系統學習。學習css我使用的工具是visual css,可以實現同步預覽,快速學習編輯css。1.css的作用 用來規定網頁中的內容的顯示方式,避免給html增加很多的屬性而將 變得臃腫。2.css的應用方式...

CSS學習 CSS學習筆記

出處 注 本學習筆記只是自己的一些備忘,初學者的東西不具有參考性,請到w3school 進行系統學習。學習css我使用的工具是visual css,可以實現同步預覽,快速學習編輯css。1.css的作用 用來規定網頁中的內容的顯示方式,避免給html增加很多的屬性而將 變得臃腫。2.css的應用方式...

CSS 學習筆記

當同乙個html元素被不止乙個樣式定義時,會使用哪個樣式呢?一般而言,所有的樣式會根據下面的規則層疊於乙個新的虛擬樣式表中,其中數字4 擁有最高的優先權。1.瀏覽器預設設定 2.外部樣式表 3.內部樣式表 位於標籤內部 4.內聯樣式 在html 元素內部 因此,內聯樣式 在html 元素內部 擁有最...