CSS系統學習一（基礎）

2021-10-03 05:25:04 字數 3825 閱讀 9726

學習內容來自w3school

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

selector 


即 selector
記得寫引號p空格和大小寫css 對大小寫不敏感。不過存在乙個例外：如果涉及到與 html 文件一起工作的話，class 和 id 名稱對大小寫是敏感的。

選擇器的分組

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

h1,h2,h3,h4,h5,h6
繼承

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

li strong 


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


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


我是正常的字型。
後代選擇器（descendant selector）

又稱為包含選擇器。可以選擇作為某元素後代的元素。舉例來說，如果希望只對 h1 元素中的 em 元素應用樣式，可以這樣寫：h1 em

子元素選擇器（child selectors）：只能選擇作為某元素子元素的元素

例如，如果您希望選擇只作為 h1 元素子元素的 strong 元素，可以這樣寫：h1 > strong這個規則會把第乙個 h1 下面的兩個 strong 元素變為紅色，但是第二個 h1 中的 strong 不受影響

相鄰兄弟選擇器adjacent sibling selector）：可選擇緊接在另一元素後的元素，且二者有相同父元素。加號（+），即相鄰兄弟結合符

例如，如果要增加緊接在 h1 元素後出現的段落的上邊距，可以這樣寫：

h1 + p
這個選擇器讀作：「選擇緊接在 h1 元素後出現的段落，h1 和 p 元素擁有共同的父元素」。

詳解

類選擇器以乙個點號顯示：.center

例：類名為 fancy 的更大的元素內部的**單元都會以灰色背景顯示橙色文字。（名為 fancy 的更大的元素可能是乙個**或者乙個 div）

.fancy td
詳解css 多類選擇器乙個 class 值中可能包含乙個詞列表，各個詞之間用空格分隔。例如，

"important warning"


>


this paragraph is a very important warning.
我們假設 class 為 important 的所有元素都是粗體，而 class 為 warning 的所有元素為斜體，class 中同時包含 important 和 warning 的所有元素還有乙個銀色的背景 。就可以寫作：

.important 


.warning 


.important.warning
通過把兩個類選擇器鏈結在一起，僅可以選擇同時包含這些類名的元素（類名的順序不限）

可以為擁有指定屬性的 html 元素設定樣式，而不僅限於 class 和 id 屬性。符號為**[ ]**

[title]
屬性和值選擇器

[title=w3school]
屬性和值選擇器 - 多個值[title~=hello]， 在< h2 title=「hello world」>hello world< /h2> 時可以產生效果

[lang|


=en]
設定表單的樣式

input[type=


"text"


]
對以下有用：

外部樣式表

"stylesheet" type=


"text/css" href=


"mystyle.css" />
內部樣式表

內聯樣式

多重樣式

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

背景色

背景影象

body
背景重複

body
縮排文字水平對齊text-align屬性規定元素中的文字的水平對齊方式。

h1 


h2 h3
字間隔word-spacing 屬性可以改變字（單詞）之間的標準間隔。其預設值 normal 與設定值為 0 是一樣的。p字母間隔 letter-spacing 屬性letter-spacing 屬性的可取值包括所有長度。預設關鍵字是 normalh1

字元轉換 text-transform 屬性

處理文字的大小寫。這個屬性有 4 個值：

文字裝飾 text-decoration 屬性

有 5 個值：

處理空白符 white-space 屬性

影響到使用者**對源文件中的空格、換行和 tab 字元的處理。

p顯式地設定這種預設行為，把所有空白符合併為乙個空格。

文字方向 direction 屬性

有兩個值 ltr 和 rtl。大多數情況下，預設值是 ltr，顯示從左到右的文字。

建議在所有 font-family 規則中都提供乙個通用字型系列。這樣就提供了一條後路，在使用者**無法提供與規則匹配的特定字型時，就可以選擇乙個候選字型。

如果您對字型非常熟悉，也可以為給定的元素指定一系列類似的字型。要做到這一點，需要把這些字型按照優先順序排列，然後用逗號進行連線

CSS系統學習二（基礎）

學習內容來自w3school css 列表屬性允許你放置 改變列表項標誌，或者將影象作為列表項標誌。css 屬性可以幫助您極大地改善 的外觀。輪廓 outline 是繪製於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的作用。css outline 屬性規定元素輪廓的樣式 顏色和寬度。可以按順...

系統學習 css

1 css載入過程 瀏覽器對多個樣式 進行疊加，把各個零散的整合成乙個整體，讓後者覆蓋前者 important有最高執行權 瀏覽器載入html dom樹 無樣式變化 瀏覽器載入css 渲染檢視樣式 2 css與html如何結合 選擇器 important id class tag 標籤選擇器 選擇器...

css系統學習

1 css載入過程 瀏覽器對多個樣式 進行疊加，把各個零散的整合成乙個整體，讓後者覆蓋前者 important有最高執行權 瀏覽器載入html dom樹 無樣式變化 瀏覽器載入css 渲染檢視樣式 2 css與html如何結合 選擇器 important id class tag 標籤選擇器 選擇器...