css基本文法（頁面引入方法、文本設定、選擇器）

css基本文法

css 的定義方法是：

選擇器 { 屬性:值; 屬性:值; 屬性:值;}

選擇器是将樣式和頁面元素關聯起來的名稱，屬性是希望設定的樣式屬性每個屬性有一個或多個值。代碼示例：

div{ width:px; height:px; color:red }

css頁面引入方法

1、外聯式

通過link标簽，連結到外部樣式表到頁面中。内容和樣式分離，推薦使用。

<link rel="stylesheet" type="text/css" href="css/main.css">

2、嵌入式

通過 style 标簽，在網頁上建立嵌入的樣式表。

<style type="text/css">
    div{ 
        width:px; 
        height:px; 
        color:red 
    }
    ......
</style>

3、内聯式：

通過标簽的 style 屬性，在标簽上直接寫樣式。

css文本設定

常用的應用文本的css樣式：

1、 color：設定文字的顔色，如：

color:red

css顔色值主要有三種表示方法：

1、顔色名表示，比如：red 紅色，gold 金色

2、rgb 表示，比如：rgb(255,0,0)表示紅色

3、16進制數值表示，比如：#ff0000 表示紅色，這種可以簡寫成 #f00

2、 font-size：設定文字的大小，如：

font-size:12px

3、 font-family：設定文字的字型，如：

font-family:'微軟雅黑'

4、 font-style：設定字型是否傾斜，如：

font-style:'normal';(設定不傾斜) font-style:'italic';(設定文字傾斜)

5、 font-weight：設定文字是否加粗，如：

font-weight:bold;(設定加粗) font-weight:normal;(設定不加粗)

6、 font：同時設定文字的幾個屬性，寫的順序有相容問題，建議按照如下順序寫：font：是否加粗字号/行高字型；如：

font:normal 12px/36px '微軟雅黑';

7、 line-height：設定文字的行高，如：

line-height:24px

8、 text-decoration：設定文字的下劃線，如：

text-decoration:none; (将文字下劃線去掉)

9、 text-indent：設定文字首行縮進，如：

text-indent:24px; (設定文字首行縮進24px)

10、text-align：設定文字水準對齊方式，如：

text-align:center;(設定文字水準居中)

css選擇器

1、标簽選擇器

标簽選擇器，此種選擇器影響範圍大，建議盡量應用在層級選擇器中。

*{margin:0;padding:0}
div{color:red}   

<div>....</div>   <!-- 對應以上兩條樣式 -->
<div class="box">....</div>   <!-- 對應以上兩條樣式 -->

2、id選擇器

通過 id 名來選擇元素，元素的 id 名稱不能重複，是以一個樣式設定項隻能對應于頁面上一個元素，不能複用，id 名一般給程式使用，是以不推薦使用id作為選擇器。

#box{color:red} 

<div id="box">....</div>   <!-- 對應以上一條樣式，其它元素不允許應用此樣式 -->

3、類選擇器

通過類名來選擇元素，一個類可應用于多個元素，一個元素上也可以使用多個類，應用靈活，可複用，是 css 中應用最多的一種選擇器。

.red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px} 

<div class="red">....</div>
<h1 class="red big mt10">....</h1>
<p class="red mt10">....</p>

4、層級選擇器

主要應用在選擇父元素下的子元素，或者子元素下面的子元素，可與标簽元素結合使用，減少命名，同時也可以通過層級，防止命名沖突。

.box span{color:red}
.box .red{color:pink}
.red{color:red}

<div class="box">
    <span>....</span>
    <a href="#" class="red">....</a>
</div>

<h3 class="red">....</h3>

5、組選擇器

多個選擇器，如果有同樣的樣式設定，可以使用組選擇器。

.box1,.box2,.box3{width:px;height:px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}

<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>

6、僞類及僞元素選擇器

常用的僞類選擇器有 hover，表示滑鼠懸浮在元素上時的狀态，僞元素選擇器有 before 和 after ，它們可以通過樣式在元素中插入内容。

.box1:hover{color:red}
.box2:before{content:'行首文字';}
.box3:after{content:'行尾文字';}

<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>

7、CSS3新增選擇器

1、E:nth-child(n)：比對元素類型為 E 且是父元素的第 n 個子元素。

<style type="text/css">            
    .list div:nth-child(2){
        background-color:red;
    }
</style>
......
<div class="list">
    <h2>1</h2>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

<!-- 第2個子元素div比對 -->

2、E:first-child：比對元素類型為E且是父元素的第一個子元素

3、E:last-child：比對元素類型為E且是父元素的最後一個子元素

4、E > F： E 元素下面第一層子集

5、E ~ F： E 元素後面的兄弟元素

6、E + F：緊挨着的後面的兄弟元素

屬性選擇器：

1、E[attr]：含有 attr 屬性的元素

<style type="text/css">
    div[data-attr]{
        color:red;
    }
</style>
......
<div data-attr="ok">這是一個div元素</div>

2、E[attr=’ok’]：含有 attr 屬性的元素且它的值為 “ok”

3、E[attr^=’ok’]：含有 attr 屬性的元素且它的值的開頭含有 “ok”

4、E[attr$=’ok’]：含有 attr 屬性的元素且它的值的結尾含有 “ok”

5、E[attr*=’ok’]：含有 attr 屬性的元素且它的值中含有 “ok”

css基本文法（頁面引入方法、文本設定、選擇器）