2020年2月14日
今天收穫還算可以,Android studio終於可以能好可以用了，運行出了HelloWorld，昨天晚上能了三四個小時都沒有能好，今天也能了挺長時間吧，除了上課就在搞這個，從來沒有用那個軟件運行出來HelloWorld這樣開心過，可能這就是傳說中程序員的HelloWorld的情節吧！
一. 本節課學習目標。
- 掌握CSS選擇器的優先級以及選擇器的區別。
- Div和span的用法。 ★重點
- 掌握後代選擇器以及子代選擇器的用法。
- 掌握常用的CSS樣式。
- 掌握盒模型的用法。 ★重點
二. CSS選擇器的優先級以及選擇器的區別
- 選擇器的優先級。
Id選擇器 > class選擇器 > 元素選擇器 - 選擇器的區別。
2.1 作用域範圍的區別：
id選擇器（一對一） < class選擇器（一對多） < 元素選擇器（一對多）
2.2 用法。
元素選擇器： 元素名稱 { css樣式 }
Class選擇器： .class名稱 { css樣式 }
Id選擇器： #id名稱 { css樣式 }
注意： 如果要給一個標籤添加多個class屬性，格式： class = “名稱1 名稱2 名稱 3…”
使用時： .名稱1 { css樣式 } .名稱2 { css樣式 } …
三. Div和span的用法。
-
Div。
Div是一個塊元素（獨佔一行）,用來進行網頁劃分，網頁佈局， 作爲一個網頁佈局的容器，用來管理容器內所有的元素（段落，標題，圖像，超鏈接等）。 -
Span。
Span是一個行元素（不獨佔一行，和a,img,em,strong一樣）。
作用：對單獨的文字做特殊處理。
注意：div與span都是沒有任何默認樣式的，需要配合CSS纔行。
div和span代碼塊：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div和span</title>
<style type="text/css">
#wrap {
background-color: yellow;
/* 寬度 */
width: 500px;
}
.yi {
font-size: 50px;
color: red;
}
</style>
</head>
<body>
<div id="wrap">
<h1>1號標題</h1>
<p>段落內容</p>
<p>特別是共建“<span class="yi">一帶一路</span>”合作。</p>
<!--
需求：
1.將一帶一路四個字，文字大小改爲50px，文字顏色改爲紅色。
-->
</div>
</body>
</html>
四. 掌握後代選擇器以及子代選擇器的用法.
- 後代選擇器。
格式： E F { css樣式 } （E和F都是選擇器）
作用：訪問到E下的所有的F元素（無論嵌套多少層）。
符號： 空格。 - 子代選擇器。
格式： E>F {css樣式 } （E和F都是選擇器）
作用：訪問到E下的所有的F元素（只訪問下一級，只有一層）。
符號： >。
後代選擇器和子代選擇器代碼塊
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>後代選擇器和子代選擇器</title>
<style type="text/css">
span {
background-color: orange;
}
/* 訪問到class的名字爲content的元素下的所有的span標籤 */
/* 後代選擇器 通過空格符 該元素下所有的子元素（無論嵌套多少層） */
.content span {
color: white;
}
/* 子代選擇器 */
/* 訪問到class的名字爲content的元素下的直接下一級的span標籤（只訪問到兒子這一層） */
.content>span {
font-size: 50px;
}
</style>
</head>
<body>
<div class="content">
<span>河南</span>
<span>焦作</span>
<p>
<span>禎禎 <span>好美</span> </span>
</p>
</div>
<span>學習使我快樂！</span>
<!--
需求：
1.將所有的span標籤，背景顏色改爲橘黃色（orange）。
2.將div下的所有的span標籤，文字顏色改爲白色（white）。
3.將div下直接下一級的span標籤，文字大小改爲50px。
-->
</body>
</html>
五. CSS常用的樣式。
- 常用的css屬性。
Background-color: 背景顏色。 快捷方式： bc+tab。
顏色的給值方式：
a. 顏色單詞。 比如：red，yellow，blue等等。
b. 十六進制顏色值。和UI設計師配合的時候。 比如：#00000, #FFFFFF。
c. 三原色RGB。R：red紅，G：green綠，B：blue藍。 取值範圍：0~255。 Rgb(值1，值2，值3)
d. Rgba。R：red，G：green，B：blue，A：alpha透明度。 取值範圍:0~1，可以取中間的小數，0.1,0.2。 取0是全透，取1是不透。
Width：寬度。 單位：px。 快捷方式： w值+tab。
Height：高度。 單位：px。 快捷方式： h值+tab。 - 和文字相關的css屬性。
Color：文字顏色。 取值方式可以有4種。
Font-size: 字體大小。 單位：px。 默認字體大小是16px，字體大小最小可以設置爲12px。
Font-weight:； 給值方式1： 可以給100~900的值 方式2：bold，bolder。
Text-align: 文本水平對齊方式。 Left左對齊，right右對齊，center居中對齊。
Font-family: 設置文字字體。 比如：kait楷體，simhei黑體,simsun宋體。
Font-family: 值1，值2，值3….;
Text-indent: 首行縮進， 單位：px。 Em當前文字大小的倍數，2em，就是當前文字大小的2倍。
Text-decoration: 文本裝飾器。 Underline下劃線，overline上劃線,line-througn中劃線，none去掉裝飾。
Line-height: 設置文本的行高。 如果標籤元素內只有一行文本，可以通過設置line-height：元素高度（height）;來實現一行文字垂直居中的效果。
Letter-spacing: 單位：px。設置每個字或者每個字母之間的間距。
Word-spacing: 單位：px。設置單詞之間的間距，注意：單詞與單詞之間通過空格間隔。
六. 盒模型。
- Chrome瀏覽器的調試工具。
1.1 如何調出。
在瀏覽器網頁中右擊，點擊檢查按鈕即可。
1.2 如何使用。
鼠標點擊檢查器左上角的選擇按鈕，然後移動鼠標到想查看的元素身上，然後點擊一下。 - 盒模型的組成部分。
2.1 內容區域content。
內容區域由width和height屬性決定，一旦指定了大小，則只能在該區域內顯示內容。
注意：雖然指定區域內容放不時，內容會超出可視區域，但是一般情況下超出部分都會隱藏掉。
2.2 內填充padding。
Padding用來調整內容與可視區域邊界的距離（讓內容離邊界遠一點）。
Padding-top: 上填充。
Padding-left: 左填充。
Padding-right: 右填充。
Padding-bottom：下填充。
Padding：複合屬性。
01: 給一個值，四個方向都設置爲這個值。
02: 兩個值， 第一個值上下 第二個值左右
03: 三個值， 第一個值上 第二個值左右 第三個值下
04: 四個值， 上 右 下 左
2.3 邊框 border。
Border-left: 設置左邊框
Border-right:設置右邊框
Border-top: 設置上邊框
Border-bottom: 設置下邊框。
Border: 設置四個方向上的邊框
Border: 邊框寬度 邊框樣式 邊框顏色;
邊框樣式：solid實線 dashed虛線 dotted點狀。
2.4 外間距 margin。
Margin的作用用來設置該可視區域與其他元素的距離（調整當前元素的位置的）。
Margin-left: 左間距
Margin-right: 右間距
Margin-top: 上間距
Margin-bottom: 下間距
margin：複合屬性。
01: 給一個值，四個方向都設置爲這個值。
02: 兩個值， 第一個值上下 第二個值左右
03: 三個值， 第一個值上 第二個值左右 第三個值下
04: 四個值， 上 右 下 左