CSS學習筆記

標籤：style   http   color   os   java   使用   io   strong   ar   

1、最近看看一些CSS的東西，發現每次看過就忘記，做起東西來就會非常的慢，所以有時間的話可以抽空多看看別人的網站，然後想想自己能不能做出這種效果。
2、有哪幾種設定樣式的方式：

瀏覽器預設設定

外部樣式表

內部樣式表（位於 標籤內部）

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

This is a paragraph

多重樣式
根據優先順序得到最後的結果

3、不受繼承影響

//元素選取器
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;}
  類別選取器一樣與識別碼選取器中可以忽略通配選取器。

//多類別選取器

.important.urgent {background:silver;}

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

This paragraph is a very important and urgent warning.

4、ID選取器

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

red {color:red;}

5、類別選取器

.center {text-align: center}

6、派生選取器

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;}

7、屬性選取器

[title]
{
color:red;
}

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

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

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

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

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

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

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

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

屬性與屬性值必須完全符合：

This paragraph is a very important warning.

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

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

可以把多個屬性連結在一起選擇文檔：

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

8、需要記住的最常見的使用

margin 屬性值的規律：

margin: top right bottom left

如果缺少左外邊距的值，則使用右外邊距的值。

如果缺少下外邊距的值，則使用上外邊距的值。

如果缺少右外邊距的值，則使用上外邊距的值。

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

9、定位

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

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

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

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

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

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

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

vertical-align 設定元素的垂直對齊。

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

其中position 屬性值的含義：

static

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

relative

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

absolute

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

fixed

元素框的表現類似於將 position 設定為 absolute，不過其包含塊是視窗本身。

CSS學習筆記