CSS 跟著李南江學程式設計

2021-10-06 07:23:31 字數 1705 閱讀 2874

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

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

注釋:只有在規定了 !doctype 時,ie7 和 ie8 才支援屬性選擇器。在 ie6 及更低的版本中,不支援屬性選擇。

屬性選擇器

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

[title]

屬性和值選擇器

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

[title=w3school]

屬性和值選擇器 - 多個值

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

[title~=hello]

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

[lang|=en]

設定表單的樣式

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

input[type=「text」]

input[type=「button」]

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

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

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

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

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

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

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

如何插入樣式表

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

外部樣式表

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

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

hr p

body

不要在屬性值與單位之間留有空格。假如你使用 「margin-left: 20 px」 而不是 「margin-left: 20px」 ,它僅在 ie 6 中有效,但是在 mozilla/firefox 或 netscape 中卻無法正常工作。

內部樣式表

當單個文件需要特殊的樣式時,就應該使用內部樣式表。你可以使用

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

this is a paragraph

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

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

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

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

color: red;

text-align: right;

font-size: 20pt;

我正在跟著江哥學程式設計, 更多前端+區塊鏈課程: www.it666.com

jQuery 跟著李南江學程式設計

document ready function jquery document ready function function jquery function var div div empty 找到div裡面沒有任何元素的div var div div parent 找到div裡面有任何元素的di...

前端基礎2(css基礎) 跟著李南江學程式設計

css格式 font bold italic 10px 楷體 有的屬性值可以省略,style可以省略 weight可以省略 style和weight的位置可以交換 size family不能省略,其位置不能亂放 size一定要寫在family的前面,而且size和family一i的那個要寫在所有屬性...

跟著內心走

乙個人不怕做錯事,就怕做錯選擇,一旦選擇錯誤,方向錯了,即使事情做的再正確,再努力,都是徒勞。當做選擇的時候,更不要有僥倖心理,假設如何如何,也許會如何如何,往往那都是寬慰自己的,那都是掩耳盜鈴,自欺欺人。有的時候跟著真感覺走反而是最準確的。例如 買東西,找工作,談物件,等等很多選擇都有類似的現象,...