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: 四个值， 上 右 下 左