CSS-筆記1-選擇器與文本元素

知識點一：

CSS概念：CSS 指層疊樣式表 (Cascading Style Sheets)(級聯樣式表) 
Css是用來美化html標籤的，至關於頁面化妝。

知識點二：

選擇器格式與部分屬性： 
寫法：

 選擇器{屬性：值；屬性：值}

選擇器是一個選擇（一/多個）標籤的過程。 
對應的屬性與值表： 
Width:20px; 寬 
Height:20px; 高 
背景顏色 
font-size:24px; 文字大小 
text-align:left | center| right 內容的水平對齊方式 
text-indent:2em; 首行縮進 
Color:red; 文字顏色

知識點三：

基礎選擇器： 

一：標籤選擇器：

特色：標籤選擇器定義以後，會將頁面全部的元素都執行這個標籤樣式。

    標籤{屬性：值}

div{ font-size: 50px; color:green; background-color:yellow; width:300px; height:200px;
} p{ color:pink; font-size:60px;
}

顏色的顯示方式：

• 直接寫顏色名稱。
• 十六進制顯示顏色。

#000000;前2位表明紅色，中間表明綠色，後兩位表明藍色。值越接近0顏色越深

• RGB

color：rgb(120,120,120);值在0-255之間。

• RGBA 最後一位值在0-1

color:  rgba(102,217,239,0.5);

二：類選擇器：

特色：誰調用，誰生效。一個標籤能夠調用多個類選擇器，多個標籤能夠調用同一個類選擇器。 
在標籤中使用class屬性調用，不一樣的類之間用空格分開。

.自定義類名{屬性：值；屬性：值；}

.box{ font-size: 50px; color:green; background-color:yellow; width:300px; height:200px;
} .miss{ color:pink; font-size:60px;
}

類選擇器命名規則： 
不能用純數字或數字開頭來定義類名 
不能使用特殊符號或者特殊符號開頭（_）來定義類名。 
不建議使用漢字來定義類名。 
不推薦使用屬性或者屬性的值來定義類名。 
常見的命名模板： 

三：ID選擇器：

特色：一個ID選擇器在一個頁面只能調用一次。若是使用兩次或屢次以上，是不符合w3c規範的，JS調用會出現問題。 
一個標籤只能調用一個ID選擇器。 
一個標籤能夠同時調用類選擇器與ID選擇器。

#自定義名稱{屬性：值；}

四：通配符選擇器：

特色：給全部的標籤都使用相同的樣式。 
不推薦使用。

*{屬性：值；}

知識點四：

複合選擇器： 概念：兩個或兩個以上的基礎選擇器經過不一樣的方式鏈接在一塊兒。 

一：交集選擇器：

特色：既要知足使用的某個標籤選擇器，又要知足使用了類選擇器。

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

div.box{ color：red; } div#miss{ width:400px; height:300px; background-color:yellow;
}

二：後代選擇器：
選擇器特色：後代選擇器首先要知足包含（嵌套關係） 
父集元素在前，子集元素在後。 
特色：無限制隔代。 
只要能表明標籤，標籤、類選擇器、ID選擇器自由組合。

div #miss{ width:400px; height:300px; background-color:yellow;
} <div> <div id="miss"></div> </div>

三：子代選擇器：

選中直接下一代元素

選擇器>選擇器{屬性：值；}

div>span{ width:300px; height:200px;
} p>span{ width:300px; height:200px;   
} <div> <p> <span>趙靈兒</span> </p> <span>林月如</span> </div>

四：並集選擇器： 
選擇器+，+選擇器+，選擇器{屬性：值；} 
特色：某些元素或部分元素的屬性徹底相同，則他們能夠寫在一塊。

.box,#miss,span,h1{ width:300px; color:#000;
}

知識點五:

文本元素： 
一：屬性：

font-size:16px;             文字大小
font-weight：700；        值從100-900，文字粗細，不推薦使用font-weight：bold；
font-family：微軟雅黑；       文字字體
font-style：normal|italic    normal默認值，italic斜體。
line-heitht：10px；               行高。

文本屬性連寫： 
font: font-style font-weight font-size/line-height font-family; 
注意：font:後邊寫屬性的值。必定按照書寫順序。 
文本屬性連寫文字大小和字體爲必寫項。

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

文字的字體表達形式： 
一：直接寫中文名稱：

 div{ font-family：微軟雅黑； font-size：60px; }

二：寫字體的英文名稱：

div{ font-family:microsoft yahei; font-size:15px;
}

Unicode編碼： 

如何快速得到字體的Unicode編碼： 
在頁面的console中 
escape(「字體名」) 
便可獲取。