1 css之選擇器

1.1 基本選擇器

1.2 組合選擇器

E,F 多元素選擇器，同時匹配所有E元素或F元素，E和F之間用逗號分隔:div,p { color:#f00; }

E F 後代元素選擇器，匹配所有屬於E元素後代的F元素，E和F之間用空格分隔 :li a { font-weight:bold;｝

E > F 子元素選擇器，匹配所有E元素的子元素F :div > p { color:#f00; }

E + F 毗鄰元素選擇器，匹配所有緊隨E元素之後的同級元素F :div + p { color:#f00; }

E ~ F 普通兄弟選擇器（以破折號分隔） :.div1 ~ p{font-size: 30px; }

1.3 屬性選擇器

E[att] 匹配所有具有att屬性的E元素，不考慮它的值。（註意：E在此處可以省略。 比如“[cheacked]”。以下同。） p[title] { color:#f00; }

E[att=val] 匹配所有att屬性等於“val”的E元素 div[class=”error”] { color:#f00; }

E[att~=val] 匹配所有att屬性具有多個空格分隔的值、其中一個值等於“val”的E元素 td[class~=”name”] { color:#f00; }

E[attr^=val] 匹配屬性值以指定值開頭的每個元素 div[class^="test"]{background:#ffff00;}

E[attr$=val] 匹配屬性值以指定值結尾的每個元素 div[class$="test"]{background:#ffff00;}

E[attr*=val] 匹配屬性值中包含指定值的每個元素 div[class*="test"]{background:#ffff00;}

示例

<style>
    /* 屬性選擇器 */
    [city="bj"]{
        color:red;
    }
    div[ft="pro"]{
        color: yellow;
        font-size: 20px;
    }
</
 
style>

<p city="bj">歡迎來到北京...</p>
<div ft="pro">前端的屬性選擇器</div>
<div>屬性選擇器</div>

2 偽類

偽類，就是樣式中帶冒號

2.1 anchor偽類

專用於控制鏈接的顯示效果

‘‘‘
        a:link（沒有接觸過的鏈接）,用於定義了鏈接的常規狀態。
        a:hover（鼠標放在鏈接上的狀態）,用於產生視覺效果。
        a:visited（訪問過的鏈接）,用於閱讀文章，能清楚的判斷已經訪問過的鏈接。
        a:active（在鏈接上按下鼠標時的狀態）,用於表現鼠標按下時的鏈接狀態。
        偽類選擇器 : 偽類指的是標簽的不同狀態:
                   a ==> 點過狀態 沒有點過的狀態 鼠標懸浮狀態 激活狀態
        a:link {color: #FF0000} /* 未訪問的鏈接 */
        a:visited {color: #00FF00} /* 已訪問的鏈接 */
        a:hover {color: #FF00FF} /* 鼠標移動到鏈接上 */
        a:active {color: #0000FF} /* 選定的鏈接 */ 格式: 標簽:偽類名稱{ css代碼; }
‘‘‘

2.2 before after偽類

:before p:before 在每個<p>元素之前插入內容

:after p:after 在每個<p>元素之後插入內容

例：

p:before{content:"hello";color:red;display: block;} 

3 選擇器的優先級

3.1 優先級

所謂CSS優先級，即是指CSS樣式在瀏覽器中被解析的先後順序。

樣式表中的特殊性描述了不同規則的相對權重，它的基本規則是：

1 內聯樣式表的權值最高

2 統計選擇符中的id屬性個數

3 統計選擇符中的class屬性個數

4 統計選擇符中的html標簽名個數

註意：

1、文內的樣式優先級為，所以始終高於外部定義。

2、有!important聲明的規則高於一切。

示例：

.content{
    color:blue !important;
}

3.2 繼承

繼承是CSS的一個主要特征，它是依賴於祖先-後代的關系的。繼承是一種機制，它允許樣式不僅可以應用於某個特定的元素，還可以應用於它的後代。例如一個BODY定義了的顏色值也會應用到段落的文本中。

body{color:red;} <p>helloyuan</p>

這段文字都繼承了由body {color:red;}樣式定義的顏色。然而CSS繼承性的權重是非常低的，是比普通元素的權重還要低。

p{color:green}

發現只需要給加個顏色值就能覆蓋掉它繼承的樣式顏色。由此可見：任何顯示申明的規則都可以覆蓋其繼承樣式。　

此外，繼承是CSS重要的一部分，我們甚至不用去考慮它為什麽能夠這樣，但CSS繼承也是有限制的。有一些屬性不能被繼承，如：border, margin, padding, background等。

div{
  border:1px solid #222
}

<div>hello <p>yuan</p> </div>

4 css 文本樣式

4.1 文本顏色

顏色屬性被用來設置文字的顏色。

顏色是通過CSS最經常的指定：

十六進制值 - 如: ＃FF0000

一個RGB值 - 如: RGB(255,0,0)

顏色的名稱 - 如: red

p { color: rebeccapurple;  }

4.2 水平對齊方式

text-align 屬性規定元素中的文本的水平對齊方式。

left 把文本排列到左邊。默認值：由瀏覽器決定。

right 把文本排列到右邊。

center 把文本排列到中間。

justify 實現兩端對齊文本效果。

4.3 文本其他屬性

/*

font-size: 10px;

line-height: 200px;   文本行高 通俗的講，文字高度加上文字上下的空白區域的高度 50%:基於字體大小的百分比

vertical-align:－4px  設置元素內容的垂直對齊方式 ,只對行內元素有效，對塊級元素無效

text-decoration:none       text-decoration 屬性用來設置或刪除文本的裝飾。主要是用來刪除鏈接的下劃線

font-family: ‘Lucida Bright‘

font-weight: lighter/bold/border/

font-style: oblique

text-indent: 150px;      首行縮進150px

letter-spacing: 10px;  字母間距

word-spacing: 20px;  單詞間距

text-transform: capitalize/uppercase/lowercase ; 文本轉換，用於所有字句變成大寫或小寫字母，或每個單詞的首字母大寫

*/

4.4 文本垂直居中

文本垂直居中，是通過文本的line-height來實現的

示例：

.city{
    width:100%;
    height: 200px;
    background-color: #bdbdbd;
    text-align: center;
    line-height: 200px;
}

<div class="city">
    <h1>中國</h1>
</div>

5 背景屬性

5.1 屬性介紹

background-color

background-image

background-repeat

background-position


background-color: cornflowerblue

background-image: url(‘1.jpg‘);

background-repeat: no-repeat;(repeat:平鋪滿)

background-position: right top（20px 20px）;

5.2 簡寫形式

background:#ffffff url(‘1.png‘) no-repeat right top;

6 display屬性

6.1 none隱藏標簽

p{display:none;}

註意與visibility:hidden的區別：

visibility:hidden可以隱藏某個元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響布局。

display:none可以隱藏某個元素，且隱藏的元素不會占用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本占用的空間也會從頁面布局中消失。

6.2 block：內斂標簽設置為塊級標簽

span {display:block;}

註意：一個內聯元素設置為display:block是不允許有它內部的嵌套塊元素。　

6.3 inline：塊級標簽設置為內斂標簽

li {display:inline;}

6.4 inline-block

display:inline-block可做列表布局，其中的類似於圖片間的間隙小bug可以通過如下設置解決：

#outer{
            border: 3px dashed;
            word-spacing: -5px;
        }

7 浮動

7.1 介紹

先來了解一下block元素和inline元素在文檔流中的排列方式。

　　block元素通常被現實為獨立的一塊，獨占一行，多個block元素會各自新起一行，默認block元素寬度自動填滿其父元素寬度。block元素可以設置width、height、margin、padding屬性；

　　inline元素不會獨占一行，多個相鄰的行內元素會排列在同一行裏，直到一行排列不下，才會新換一行，其寬度隨元素的內容而變化。inline元素設置width、height屬性無效

常見的塊級元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。

常見的內聯元素有span、a、strong、em、label、input、select、textarea、img、br等

所謂的文檔流，指的是元素排版布局過程中，元素會自動從左往右，從上往下的流式排列。

脫離文檔流，也就是將元素從普通的布局排版中拿走，其他盒子在定位的時候，會當做脫離文檔流的元素不存在而進行定位。

7.2 解決父級塌陷

推薦方法是：清除浮動

clear語法：

clear : none | left | right | both

取值：

none : 默認值。允許兩邊都可以有浮動對象

left : 不允許左邊有浮動對象

right : 不允許右邊有浮動對象

both : 不允許有浮動對象

但是需要註意的是：clear屬性只會對自身起作用，而不會影響其他元素。

把握住兩點：1、元素是從上到下、從左到右依次加載的。

2、clear: left;對自身起作用，一旦左邊有浮動元素，即切換到下一行來保證左邊元素不是浮動的，依據這一點解決父級塌陷問題。

‘‘‘

.clearfix:after { <----在類名為“clearfix”的元素內最後面加入內容；

content: "."; <----內容為“.”就是一個英文的句號而已。也可以不寫。

display: block; <----加入的這個元素轉換為塊級元素。

clear: both; <----清除左右兩邊浮動。

visibility: hidden; <----可見度設為隱藏。註意它和display:none;是有區別的。

visibility:hidden;仍然占據空間，只是看不到而已；

line-height: 0; <----行高為0；

height: 0; <----高度為0；

font-size:0; <----字體大小為0；

}

.clearfix { *zoom:1;} <----這是針對於IE6的，因為IE6不支持:after偽類，這個神

奇的zoom:1讓IE6的元素可以清除浮動來包裹內部元素。

整段代碼就相當於在浮動元素後面跟了個寬高為0的空div，然後設定它clear:both來達到清除浮動的效果。

之所以用它，是因為，你不必在html文件中寫入大量無意義的空標簽，又能清除浮動。

<div class="head clearfix"></div>

‘‘‘

8 position

8.1 介紹

fixed：完全脫離文檔流；參照物是可視窗口；可以設置top left right bottom

relative：不脫離文檔流；參照物是自己原來的位置；可以設置top left right bottom

absolute：完全脫離文檔流；參照物是已定位的父級標簽；可以設置top left right bottom

一般：

給某些元素進行定位：設置absolute

已定位標簽的父元素設置相對定位。

8.2 遮罩層

設置遮罩層，通過position的fixed設置上下左右全為0，進而占滿整個屏幕。

position：fixed 設置top bottom left right為0，占滿整個屏幕

css樣式介紹