Css 基礎知識（一），css基礎知識

Css 基礎知識（一），css基礎知識
1、Css概念

CSS 指層疊樣式表 (Cascading Style Sheets)(階層式樣式表)，Css是用來美化html標籤的，相當於頁面化妝。

◆樣式表書寫位置

2、 選取器2.1、寫法

選取器是選擇誰（標籤）的過程

　　選取器{屬性:值； 屬性:值;}

 

屬性	解釋
Width:20px;	寬  （px：像素）
Height:20px;	高
Background-color:red;	背景顏色
font-size:24px;	文字大小
text-align:left | center| right	內容的水平對齊
text-indent:2em;	首行縮排（em文字）
Color:red;	文字顏色

2.2、選取器的分類

 基礎選取器：標籤選取器、類別選取器、ID選取器                                                            
 複合選中器：交集選取器、後代選取器、子代選取器、並集選取器

2.2.1 基礎選取器

◆標籤選取器

　　標籤{屬性：值;}

特點：標籤選取器定義之後，會將頁面所有的元素都執行這個標籤樣式。

 

★顏色的顯示方式

  ◎直接寫顏色的名稱

  ◎十六進位顯示顏色 0—9 a—f

#000000; 前2位代表紅色（R），中間2位代表綠色（G），後邊2位代表藍色（B）。PS：值越接近0顏色越深，相同值時寫3個即可 #eeeeee =#eee

  ◎rgb      color: rgb(140,49,50);

  ◎rgba     color: rgb(140,49,238);　　　　

           a代表alpha 不透明度值 0-1       PS：0為不透明  1為100%透明   0.5 半透明

 

◆類別選取器（重點）

　　類別選取器，是對HTML標籤中class屬性進行選擇。CSS類別選取器的選擇符是 “.“ 類別選取器在css樣式編碼中是最常用到的

　　寫法   .自訂類名{屬性:值;  屬性:值；}

 

特點： 誰調用，誰生效。

       一個標籤可以調用多個類別選取器。

 　　 多個標籤可以調用同一個類別選取器。

 

 ★類別選取器命名規則

　　不能用純數字或者數字開頭來定義類名；

　　不能使用特殊符號或者特殊符號開頭（_除外）來定義類名；

　　不建議使用漢字來定義類名；

　　不推薦使用屬性或者屬性的值來定義類名；

 頁面配置常見命名規範

◆ID選取器

　　ID選取器和類別選取器用法一樣，區別是同一個HTML頁面中不能有相同的ID名稱(使用多個相同的ID選取器，瀏覽器不會報錯但是不符合W3C標準了，JS調用會出問題，所以ID選取器命名必須要唯一性)

寫法    #自訂名稱{屬性:值;}

特點：   一個ID選取器在一個頁面只能調用一次。

　　　　一個標籤只能調用一個ID選取器。

　　　　一個標籤可以同時調用類別選取器和ID選取器

 

◆萬用字元選取器

萬用字元選取器用“*”號表示，他是所有選取器中作用範圍最廣的，能匹配頁面中所有的元素。其基本文法格式如下：

　　*{屬性:值;}

特點：給所有的標籤都使用相同的樣式。

★不推薦使用，增加瀏覽器和伺服器負擔。

2.2.2 複合選取器

概念：兩個或者兩個以上的基礎選取器通過不同的方式串連在一起

◆交集選取器（標籤指定式選取器（即....又....））

　　　　標籤+類（ID）選取器{屬性：值；}

特點：即要滿足使用了某個標籤，還要滿足使用了類（id）選取器。

◆後代選取器（重點）

　　後代選取器用來選擇元素或元素組的後代，其寫法就是把外層標記寫在前面，內層標記寫在後面，中間用空格分隔。當標記發生嵌套時，內層標記就成為外層標記的後代。

（後代選取器首選要滿足包含（嵌套）關係。父集元素在前邊，子集元素在後邊。）

 　　　　選取器+空格+選取器{屬性：值;}

特點：無限制隔代。

        只要能代表標籤，標籤、類別選取器、ID選取器自由組合。

◆子代選取器

　　選取器>選取器{屬性:值;}

選中直接下一代元素

 

◆並集選取器

　　並集選取器是各個選取器通過逗號串連而成的，任何形式的選取器（包括標記選取器、class類別選取器id選取器等），都可以作為並集選取器的一部分。

　　如果某些選取器定義的樣式完全相同或部分相同，就可以利用並集選取器為它們定義相同的CSS樣式。

　　選取器+，+選取器+，選取器{屬性:值;}

 

 空格（嵌套關係）

“，” （並列關係）

“.”(同等關係)

 

3、文本元素3.1    屬性

　　font-size:16px;  文字大小

　　Font-weight: 700 ;   值從100-900，文字粗細，不推薦使用font-weight:bold;

　　Font-family:微軟雅黑;  文本的字型

　　Font-style: normal | italic;      normal 預設值  italic  斜體

　　ine-height: 行高

3.2 文字屬性連寫

font: font-style font-weight  font-size/line-height  font-family;

◆：注意：font:後邊寫屬性的值，一定按照書寫順序。 文字屬性連寫文字大小和字型為必寫項。

　　Font:italic 700 16px/40px  微軟雅黑;

3.3 文字的表達方式

◆直接寫中文名稱。

◆寫字型的英文名稱。

◆unicode 編碼