CSS學習筆記——最基礎的定義與使用

時間 2019-11-06

標籤 css 學習筆記基礎定義使用欄目 CSS 简体版

原文原文鏈接

一、最近看看一些CSS的東西，發現每次看過就忘記，作起東西來就會很是的慢，因此有時間的話能夠抽空多看看別人的網站，而後想一想本身能不能作出這種效果。二、有哪幾種設置樣式的方式：css

瀏覽器缺省設置瀏覽器

外部樣式表ide

<head>網站

</head>orm

內部樣式表（位於 <head> 標籤內部）繼承

<head>ip

</head>get

內聯樣式（在 HTML 元素內部）

This is a paragraph

</p>

多重樣式根據優先級獲得最後的結果

三、不受繼承影響

//元素選擇器 body { font-family: Verdana, sans-serif; }

//分組選擇器 td, ul, ol, ul, li, dl, dt, dd { font-family: Verdana, sans-serif; }

p { font-family: Times, "Times New Roman", serif; }

p再設置一次值就不會受到body屬性的影響

//通配符選擇器

{color:red;} 類選擇器同樣與ID 選擇器中能夠忽略通配選擇器。

//多類選擇器

.important.urgent {background:silver;}

這個選擇器將只匹配 class 屬性中包含詞 important 和 urgent 的 p 元素。所以，若是一個 p 元素的 class 屬性中只有詞 important 和 warning，將不能匹配。不過，它能匹配如下元素：

This paragraph is a very important and urgent warning.

</p>

四、ID選擇器

同一個文檔中不能有相同的ID

#red {color:red;}

五、類選擇器

.center {text-align: center}

六、派生選擇器

li strong { font-style: italic; font-weight: normal; } //會選擇後代只有有strong標記的元素

h1 > strong {color:red;} //只會選擇h1的子節點是strong的元素

table.company td > p //這種是結合後代選擇器和子選擇器

h1 + p {margin-top:50px;} //這個選擇器讀做：「選擇緊接在 h1 元素後出現的段落，h1 和 p 元素擁有共同的父元素」。

#sidebar p { font-style: italic; text-align: right; margin-top: 0.5em; }

.fancy td { color: #f60; background: #666; }

td.fancy { color: #f60; background: #666; }

七、屬性選擇器

[title] { color:red; }

[title=W3School] { border:5px solid blue; }

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

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

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

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

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

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

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

屬性與屬性值必須徹底匹配：

<p class="important warning">This paragraph is a very important warning.</p>

若是寫成 p[class="important"]，那麼這個規則不能匹配示例標記。要根據具體屬性值來選擇該元素，必須這樣寫：

p[class="important warning"] {color: red;}

能夠把多個屬性連接在一塊兒選擇文檔：

a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}

八、須要記住的最多見的使用

margin 屬性值的規律：

margin: top right bottom left

若是缺乏左外邊距的值，則使用右外邊距的值。

若是缺乏下外邊距的值，則使用上外邊距的值。

若是缺乏右外邊距的值，則使用上外邊距的值。

只有普通文檔流中塊框的垂直外邊距纔會發生外邊距合併。行內框、浮動框或絕對定位之間的外邊距不會合並。

九、定位

position 把元素放置到一個靜態的、相對的、絕對的、或固定的位置中。

top 定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。

right 定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。

bottom 定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。

left 定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。

overflow 設置當元素的內容溢出其區域時發生的事情。

clip 設置元素的形狀。元素被剪入這個形狀之中，而後顯示出來。

vertical-align 設置元素的垂直對齊方式。

z-index 設置元素的堆疊順序。

其中position 屬性值的含義：

static

元素框正常生成。塊級元素生成一個矩形框，做爲文檔流的一部分，行內元素則會建立一個或多個行框，置於其父元素中。

relative

元素框偏移某個距離。元素仍保持其未定位前的形狀，它本來所佔的空間仍保留。

absolute

元素框從文檔流徹底刪除，並相對於其包含塊定位。包含塊多是文檔中的另外一個元素或者是初始包含塊。元素原先在正常文檔流中所佔的空間會關閉，就好像元素原來不存在同樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框。

fixed

元素框的表現相似於將 position 設置爲 absolute，不過其包含塊是視窗自己。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。