What we learn today:
A, css selector
1, base selector: Wild selector | tag selector | class (class) selector | ID selector
2, the selector complex:
A, css selector
The selector is essentially css html css two syntaxes associated with the specific identifier, in css syntax, by some in the html tag name, associated with a particular tag html, so that the corresponding write selector after css the css style tags or labels are able to control the associated html, css syntax for each name that corresponds in a particular identifier.
1, base selector
1) Wild selector
Specific identifier asterisk (*) - can represent all the tag names of the page
through the page with a selector control all tags (not recommended)
* {
style blocks
}
All labels page can be matched
2) The tag selector
Specific identifier tag name
tag selector control page tag label called all labels name selector
div {
style blocks
}
All div tag page can be matched
3) class (class) selector (advocates the use)
Specific identifier point (.)
Class selector control all labels page tag class attribute value of the global class name selector
.box {
style blocks
}
Page class attribute value box label can be matched
4) id selector
Specific identifier pound sign (#)
id selector control page id attribute value of the global tag id unique tag name selector
#box {
style block * /
}
Page id attribute value unique tag match box, id is unique: a page id attribute values for all labels must be unique
Priority basis selector
Priority: Wild selector between <tag selector <class (class) selector <id selector <line <import
2, the selector complex
1) group selector
Connection identifier comma (,), group selector is a set of pattern blocks simultaneously control several target label, these target tag may be id, class, tag connected with a comma (,)
2) descendant selector (parent, child / Sun)
Connection identifier space (), descendant selector control is the last set of selectors bit match to the target label (s), all pre-position selector are modified
3) progeny selector (parent-child)
Connection identifier greater than (>), the selector control progeny is the last set of bits is selected to match the target tag (s), all the selectors preamble bits are modified
4) brothers selector
Connection identifier tilde (~), the selector control sibling is the last set of bits is selected to match the target tag (s), all the selectors preamble bits are modified
5) adjacent to the selector
Connection identifier plus sign (+), adjacent to the selector control opposite is the last bit of the selector to match the target tag (s), all the selectors preamble bits are modified
6) Cross selector
Next connection identifier (no connector), the name of a target is a plurality of tabs on the nature of the cross also said selector
高级选择器通过权重 同级的个数来区别优先级
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 ——清浮动的关键