私たちが今日の学び：
、CSSセレクタ
図1に示すように、ベースセレクタ：野生セレクタ|タグセレクタ|クラス（クラス）セレクタ| IDセレクタ
図2に示すように、セレクタ錯体：
、CSSセレクタ
セレクタは、特定のタグをHTMLに関連付けられている、HTMLタグ名にいくつかでは、CSS構文で、本質的に特定の識別子に関連付けられた2つの構文のCSSのHTML、CSSとなるように、CSS後に対応するライトセレクタCSSスタイルタグまたはラベルは、特定の識別子に対応するそれぞれの名前に関連付けられたHTML、CSS構文を制御することができます。
図1に示すように、ベースセレクタ
1）野生セレクタ
特定識別子アスタリスク（*） -ページのすべてのタグ名を表すことができる
セレクタ制御のページを介してすべてのタグ（推奨）
* {
スタイルブロック
}
すべてのラベルのページを一致させることができます
2）タグセレクタ
固有の識別子タグ名の
すべてのラベル名セレクタと呼ばれるタグセレクタ制御ページタグラベル
のdiv {
スタイルブロック
}
すべてのdivタグページを一致させることができます
3）クラス（クラス）セレクタ（使用を提唱）
特定識別子点（。）
クラスセレクタ制御グローバルクラス名セレクタのすべてのラベルページタグclass属性値
■は{
スタイルブロック
}
Pageクラス属性値ボックスのラベルを一致させることができます
4）IDセレクタ
特定識別子ポンド記号（＃）
グローバルタグID一意のタグ名セレクタのIDセレクタ制御ページID属性値
#box {
スタイルブロック* /
}
ページのid属性値一意のタグマッチ箱、IDは一意である：すべてのラベルのページid属性の値は一意である必要があります
優先的セレクタ
優先順位：<タグセレクタ<クラス（クラス）セレクタ<IDセレクタとの間のワイルドセレクタ<行<インポート
図2に示すように、セレクタ錯体
1）グループセレクタ
接続識別子のカンマ（、）、グループセレクタは、パターンブロックのセットは同時に複数のターゲット・ラベルを制御され、これらの目標タグはカンマ（、）に接続されたID、クラス、タグであってもよいです
2）子孫セレクタ（親、子/日）
接続識別子空間（）、子孫セレクタ制御は、セレクタの最後のセットは、全ての事前位置セレクタが変更され、ターゲット・ラベル（S）に一致するビットで
3）子孫セレクタ（親子）
より大きい接続識別子（>）、セレクタ制御子孫は、ビットの最後のセットは、全てのセレクタプリアンブルビットが変更され、目標タグ（複数可）と一致するように選択されます
4）兄弟セレクタ
接続識別子のチルダ（〜）、セレクタ制御兄弟は、ビットの最後のセットは、全てのセレクタプリアンブルビットが変更され、目標タグ（複数可）と一致するように選択されます
5）に隣接セレクタ
セレクタ制御反対側に隣接する接続識別子プラス記号（+）は、目標タグ（複数可）と一致するセレクタの最後のビットであり、全てのセレクタプリアンブルビットが修正されます
6）クロスセレクタ
次の接続識別子（NOコネクタ）は、ターゲットの名前もまた、セレクタ前記クロスの性質上の複数のタブであります
高级选择器通过权重 同级的个数来区别优先级
id > class > 标签
种类相同：比个数 | 个数相同：比顺序
高级选择器种类是同级别不影响优先级
3、伪类选择器
4、标签的四大伪类
1）链接的初始状态
.类名：link{样式块}
2）链接的悬浮状态
.类名：hover{样式块}
3）连接的激活状态
.类名：active{样式块}
4）连接的已访问状态
.类名：visited{样式块}
普通标签都可以去使用 :hover :active
二、css 具体样式
1、文本样式
文字样式是用来控制字体或文本的显示方式的
字族：STSong作为首选字体, 微软雅黑作为备用字体
font-family: "STSong", "微软雅黑";
字体大小 最小为12px，想要再小的字体，更换字库
font-size: 40px;
字重： lighter 100~900，值越大字越粗，只能为整百
font-weight: 600;
行高: 字体文本默认在行高中垂直居中显示
line-height: 200px;
字划线: overline(上划线) | line-through(中划线) | underline(下划线) | none(取消划线)
text-decoration: overline;
字间距
letter-spacing: 2px;
词间距
word-spacing: 5px;
首行缩进：1em相当于一个字的宽度
text-indent: 2em;
字体颜色
color: red;
文本水平排列方式：left(水平居左) | center(水平居中) | right(水平居右)
text-align: center;
2、背景样式
背景颜色
background-color: red;
背景图片：url函数可以链接网络或本地图片
background-image: url('https://www.baidu.com/favicon.ico');
background-image: url("img/001.png")
平铺:repeat-x(x轴平铺) | repeat-y(y轴平铺) | repeat(双轴平铺) | no-repeat*/(不平铺)
background-repeat: no-repeat;
指定位置偏移：正值往右偏移，负值往左偏移 | 正值往下偏移，负值往上偏移
background-position: 10px 30px
背景定位： x轴（left center right） y轴（top center(默认) buttom）
background-position: right top
边界圆角：
broder_radius: 50%; 是以长宽一半为半径的圆弧
左上是第一个角。顺时针编号，不足找对角数值，只有一个值时能同时控制四个角
broder_radius: 10px 20px 30px 40px;
broder_radius: 10px 20px 30px;
broder_radius: 10px 20px;
broder_radius: 10px;
横向 |纵向
broder_radius: 50% / 30px;
最多8个数据
broder_radius: 10px 20px 30px 40px / 10px 20px 30px 40px;
3、显示样式 display:
block div li
1. 任意标签的display样式值均可以设置为block，那么该标签就会以block方式来显示
2. block方式显示的标签，默认会换行
3. block方式显示的标签，支持所有的css样式，可以自定义标签的宽高
4. block方式显示的标签，用来搭构架，可以嵌套所有显示方式的标签,
注：标题标签和段落标签虽然也是block显示类标签，但不建议嵌套block显示类标签
inline span i b em strong
1. 任意标签的display样式值均可以设置为inline，那么该标签就会以inline方式来显示
2. inline方式显示的标签，默认不会换行
3. inline方式显示的标签，不支持所有css样式(如：宽高由文本撑开，不支持手动设置该标签的宽高)
4. inline方式显示的标签，只用来嵌套所有inline显示方式的标签
inline-block img input
1. 任意标签的display样式值均可以设置为inline-block，那么该标签就会以inline-block方式来显示
2. inline-block方式显示的标签，具有inline特性，默认不换行
3. inline-block方式显示的标签，也具备block特征，自定义标签的宽高，支持所有css样式
4. inline-block方式显示的标签，不建议嵌套任意显示方式的标签
vertical-align baseline 基线 | Middle 中线 | top 顶线
vertical-align：top
overflow 父级的宽高限制子级
hidden:隐藏超出内容 scroll:以滚动显示超出内容 auto:有超出内容才滚动
4、盒模型
什么是盒模型：标签其实除了宽(width)和高(height)，还拥有内边距(padding)、边框(border)、外边局(margin)以及内容(content)由内到外组件在一起，就相当于一个盒子，所以我们有把页面中显示的标签称之为盒模型。
1）content区域 效果：在最左上角显示一个100*100区域面积的橘色正方形
.box {
width: 100px;
height: 100px;
background-color: orange;
}
content区域就是width x height的面积区域，是用来显示标签内容的区域
2）padding区域
效果：在content区域设置的基础上，再设置padding的四个方位值，就会在最左上角显示一个200*200区域面积的橘色正方形
.box {
padding-top: 50px;
padding-right: 50px;
padding-bottom: 50px;
padding-left: 50px;
}
padding区域控制着盒模型的内边距，是内容显示区域往外的留白区域，同样可以显示背景颜色的
3）border区域
效果：在padding区域设置的基础上，再设置border的样式、颜色及宽度，最左上角显示一个橘色正方形外会接着多出20px宽度的红色区域
.box { /*solid:实线 | dashed:虚线 | dotted:点状线*/
border-style: solid;
border-color: red;
border-width: 20px;
}
padding区域控制着盒模型的边框
4）margin区域
效果：在所有设置的基础上，再设置margin的四个方位值，橘色正方形就会出现在居屏幕上方150px，屏幕左侧150px地方显示，而且修改margin-top的值，盒模型就会上下改变位置，修改margin-left的值，盒模型就会左右改变位置，当出现负值时，盒子会溢出屏幕边缘
.box {
margin-top: 150px;
margin-right: 150px;
margin-bottom: 150px;
margin-left: 150px;
}
padding区域控制着盒模型的外边距
盒模型布局的地位，盒模型用来完成超简单的布局要求，一般都是用来辅助其他布局，完成布局的微调
5、浮动
浮动布局，不再撑开父级高度，但浮动受父级宽度影响
float: right
1. 浮动样式布局就是设置float属性的值，可以快速让默认上下显示的盒模型左右排列显示
2. float可以设置left与fight两个值，决定了起始排列的位置与方向
3. 父标签的宽度决定了一行可以排列的子标签个数
清浮动
父级刚刚包含所有字标签，清浮动并不是清除字标签的浮动效果，而是让父级获得一个刚好的高度
clear: both ——清浮动的关键