W3school的CSS筆記 基礎篇)

2021-09-10 17:32:09 字數 1969 閱讀 7718

>

rel=

"stylesheet"

type

="text/css"

href

="mystyle.css"

/>

head

>

>

type

="text/css"

>hrp

body

style

>

head

>

style

="color

: sienna;

margin-left

: 20px

">

this is a paragraph

p>

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

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

瀏覽器預設設定

外部樣式表

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

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

如果值為若干單詞,則要給值加引號

習慣在每條宣告的末尾都加上分號,每個鍵值對一行

用逗號將需要分組的選擇器分開。下面所有的標題元素都是綠色的。

h1,h2,h3,h4,h5,h6
根據 css,子元素從父元素繼承屬性。body下的子元素諸如 p, td, ul, ol, ul, li, dl, dt,和 dd都是藍色。

body
建立乙個針對 p 的特殊規則,這樣它就會擺脫父元素的規則。

body

p

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

li strong
只有符合li後為strong的才為綠色。html為:

123

這裡1為綠色,2為普通文字,3為加粗文字。

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

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

對帶有指定屬性的 html 元素設定樣式。

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

[title]

屬性選擇器彙總:

選擇器描述

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

[attribute=value]用於選取帶有指定屬性和值的元素。

[attribute~=value]用於選取屬性值中包含指定詞彙的元素。

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

[attribute^=value]匹配屬性值以指定值開頭的每個元素。

[attribute$=value]匹配屬性值以指定值結尾的每個元素。

[attribute*=value]匹配屬性值中包含指定值的每個元素。

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

[title=w3school]

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

[title~=hello]

W3school學習筆記之CSS3

border image slice 影象邊界向內偏移 border image width 影象邊界的寬度 border image outset 用於指定在邊框外部繪製border image area 的量 border image repeat 這個例子演示了如何建立乙個border ima...

jQuery 遍歷函式 w3school

jquery 遍歷函式包括了用於篩選 查詢和串聯元素的方法。函式描述 add 將元素新增到匹配元素的集合中。andself 把堆疊中之前的元素集新增到當前集合中。children 獲得匹配元素集合中每個元素的所有子元素。closest 從元素本身開始,逐級向上級元素匹配,並返回最先匹配的祖先元素。c...

w3School首次學習 Day01 CSS

1 給影象或其他元素新增 alt 屬性,來提供一條相對應的文字描述。eg 2 為所在頁面的head元素內新增字符集設定描述 3 id選擇器 idname 類選擇器 classname。派生選擇器 idname h2 4 ie7和ie8中支援屬性選擇器 eg title 5 屬性和值選擇器 title...