天天看點

學習CSS(1)選擇器+定位

學習了HTML之後就是CSS的學習啦!

有做的不好的地方請多指教 ^ ^ !

1.CSS簡述

  • Cascading Style Sheets 層疊樣式表
  • 通常存儲在css檔案中

2.層疊次序(優先級)

  • 内聯樣式(1000)
  • id選擇器(0100)
  • class選擇器(0010)
  • 标記選擇器(0001)
  • 繼承的優先級最低
  • !important 優先級最高

3.文法

  • 構成:選擇器,一條或多條聲明
  • 屬性與值用冒号隔開,用花括号包圍,用分号結束
  • 若屬性為多個單詞,需要用引号隔開

4.選擇器

(1)派生選擇器

通過上下文的關系來确定某個标簽的關系

li a{
	color:red;
}
           

(2)id選擇器

  • 使用前要加“#”
<p id = "a">段落</p>
# a{
	color:red;
}
           
  • id屬性隻能在每個HTML文檔中出現一次
  • id選擇器作為派生選擇器可以多次被使用,id也可以單獨發揮作用

(3)元素選擇器

也成為标記選擇器

p{
	margin-left:10px;
}
           

(4)類選擇器

  1. 普通情況
<p class="one">段落</p>
*.one{
	color:red;
}  
或
.one{
	color:red;
}
           
  • 多類選擇器

    class中可能包含詞清單

html:
<p class ="is me">是我</p>
css:
.is .me{
	color:red
}
           
  • 類選擇器與Id選擇器

    與類不同,id僅會使用一次

    id選擇器不能使用詞清單

    id能包含更多含義

(5)屬性選擇器

  • 根據元素的屬性以及屬性值來選擇元素(在XML文檔中十分有用)
*[title]{
	color:black;
}
*[href][title]{
	color:red;
}
           

(6)後代選擇器

h1 a{
	color:red;
}
           
  • 左邊的選擇器包含兩個或多個,用空格隔開
  • 解釋:“作為h1元素後代的任何a元素”或“包含a的所有h1會把樣式應用到該a标簽”

(7)子代選擇器

選擇作為某個元素子元素的元素

h1 > strong{  //h1和strong之間的空格任意,可以沒有空格
	color:red;
}
           

(8)相鄰兄弟選擇器

選擇器緊接在前h1後的p,而且它們擁有同一個父級

h1 + p{
	margin:10px;
}
           

(9)僞類選擇器

用于添加特殊的效果

比如,連結:

a:link{ color:#cccddff;}     //未通路時連結的樣式
a:visited{ color:#ff00090;}  //已通路時連結的樣式
a:hover{ color:#ff00ff;}     //滑鼠停止在連結上的樣式
a:active{ color:#cc1100;}    //被激活的連結添加樣式
//a:hover 必置于a:link 和 a:visited 之後;a:active必須置于a:hover之後
           

其它:

:focus        擁有鍵盤輸入焦點的元素添加樣式
:first-child  像元素的第一個子元素添加樣式
:lang         像帶有指定lang屬性的元素添加樣式
           

(10)僞元素選擇器

:first-letter  文本的第一個字母
:first-line    文本首行添加樣式
:before        元素之前添加内容
:after         元素之後添加内容
           

(11)選擇器分組

  • 被分組的選擇器可以擁有相同的屬性
  • 既可以對選擇器分組,也可以對聲明進行分組

5.定位

(1)框的重要性

塊級元素顯示的是一塊内容“塊框”

行内元素顯示的是“行内框”

使用display能改變生成框的類型

(2)相對定位

  • 通過設定垂直或水準位置,讓它相對于起點(原始位置)浮動
  • 無論是否移動,元素仍然占據原來的空間,移動元素後會遮擋其它框

(3)絕對定位

元素框在文檔流中完全删除,原來的元素在文檔流中占用的空間被關閉,且定位後會産生塊級框。

(4)它們的差別

  • 絕對定位元素的位置相對于最近的已定位元素,如果沒有就相對于最初的塊級框
  • 絕對定位于文檔流無關,可以覆寫頁面上的其他元素,通過z-index來控制元素上下的次序。而相對定位還處于原文檔流當中。

(5)浮動

  • 浮動框不在文檔的普通流中
  • 浮動框會受包含框的大小影響,浮動元素高度不同會受到影響(卡住)
  • 浮動框可以使文本圍繞圖像,阻止行框圍繞浮動框需要對該框使用clear屬性,clear值可以是left,right,both或none(表示框的哪邊不應該挨着浮動)
  • 為了讓浮動的元素被包圍,需要用clear在包圍元素中,是以添加一個新的空div并清理它
  • 對容器進行浮動,這樣下一個元素就會收到影響,解決對布局中所有進行浮動,最後使用适當有意義元素對浮動清理

文字有些多,還有許多不足的地方,希望後期能做出一個相對應執行個體練習! ^ ^

學習CSS(1)選擇器+定位

繼續閱讀