选择器及各样式
语法：
| 选择器 | 说明 | 例子 |
|---|---|---|
| Class 类选择器 | .+Class类的名称；类名是区分大小写。 | .postTitle {background-color: Green;} |
| 元素(标签)名称选择器 | 元素的名称不区分大小写。 | h2 {background-color:Green;} |
| 复合选择器 | 元素名称1,元素名称2,#id,.ClassName ：可以根据元素的名称、id、类名，使符合条件的元素共同拥有样式;各选择器条件要以分号(,)隔开。 | h2 , #subid , .subclass {background-color:Green;} |
| 层次选择器 | 父选择器 子选择器 ：满足父选择器下的子选择器条件；两者中间用空格隔开。 | div input{background-color:Green} /* 表示div下的input子元素*/.showInfo_tabel tr{height:20px;} / * 表示table的class为showInfo_tabel时，下面的tr元素height属性为20px */ |
| 伪类选择器(类似状态) | ①a:link 选择所有未被访问的链接 ②a:visited 选择所有已被访问的链接 ③a:active 选择活动链接 ④input:hover 鼠标悬停上方的元素 ⑤input:focus 获取到焦点的元素 |
a :link,:visited{color:Blue;} .btn_login:hover {background-color: #218fd5;} |
| 属性选择器 | 元素选择器[属性名称="属性值"] 可在其他选择器上，再添加对属性的匹配。 若要元素同时满足多个属性，可在属性选择器后面进行追加：元素选择器[属性名称1="属性值"][属性名称2="属性值"] |
textarea[readonly="readonly"]{ background-color: #EBEBEB;} .readOnlyBg input[type="text"][readonly="readonly"]{ background-color: #EBEBEB;} |
样式调用方式：
- 外部样式表
- 内部样表
- 内联样式
样式的优先级：
当一个元素附加许多级样式时，比如：外联样式包含此元素、内联样式也包含此元素等，样式采用的是并集方式。
若有交集的元素，将按以下的情况决定采用哪个样式属性
- 非同级引用：外部样式表、内部样式表、内联样式都设置了此元素的某个相同样式属性。
- 内联样式 > 内部样式表 > 外部样式表
- 同级引用：在外部样式表 或 内部样式表里 多个样式选择器包含了此元素
- 外部样式表、内部样式表 情况下：Id选择器 > class 类选择器 >元素选择器。
- 内联样式情况下：采用后面同属性样式的值。
CSS HTML元素布局及Display属性
HTML元素大题可分为内联(inline)元素和块(block)元素。
| 元素类型 | 区别 |
|---|---|
| 内联元素(inline) | ①元素显示方式："文本方式"，1个挨着1个，不独自占有1行； ②内嵌的元素也必须是内联元素：如 <a></a>,不能在里面嵌入<div></div>等块级元素；③包含的标签有： <a>、<input>、<label>、<img> 等等； |
| 块元素(block) | ①元素显示方式：每个元素独自占有1行，相当于前后都带有换行符； ②内嵌的元素可以是内联或块级元素； ③包含的元素有： <h1>~<h6>、<div>、<hr>等等； |
HTML 元素布局
原则：
- HTML元素在浏览器展示的方式是：从上到下，从左到右。
- 内联元素，是根据浏览器的宽度及自身的width宽度来填充。若当前行剩余空白区域不够，就会换至下一行。
- 块级元素，根据内联元素的展示方式展示大概区域；当浏览器的宽度减少时，会自动扩充块级元素的height属性的值，以容纳内嵌元素的展示。
默认展示(未添加width和height属性)改变浏览器高度展示页面：
块级元素(div)增加了width属性，改变浏览器宽度展示页面：
①当块级元素没设置width属性时，浏览器宽度的变更，会压缩块元素内嵌元素的排版。
②设置块级元素的width属性时，浏览器的width属性值变更，不会影响到块级元素里的内嵌元素的布局，他们(内嵌元素)受父级块级元素的影响。
适用范围：导航条(导航条里有多个a标签，可放在一个div里，并给div附加width属性；以免浏览器缩小，造成导航排版乱掉)；
CSS display
- none ：此元素不被显示；
- block ：此元素按块级元素显示：前后带换行符，自己占一行。内联元素 → 块元素
- inline ：此元素按内联元素显示：1个挨着1个。块元素 → 内联元素
| 样式 | 例子 | |
|---|---|---|
| display:block |  |
|
| display:inline |  |
CSS Position 定位属性
Position 属性：规定元素的定位类型。即元素脱离文档流的布局，在页面的任意位置显示。
③fixed ：固定定位；类似于absolute，但不随着滚动条的移动而改变位置。
④static ：默认值；默认布局。
| 布局方式 | 解释 | 实例 |
|---|---|---|
| absolute | 绝对定位；脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static)，否则为Body文档本身。 |  |
| relative | 相对定位；不脱离文档流的布局，只改变自身的位置，在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。 |  |
| fixed | 固定定位；类似于absolute，但不随着滚动条的移动而改变位置。 ①登录框覆盖层：如dz论坛的登录。 ②虚假QQ消息广告。 |
 |
| static | 默认值 |
- 滚动条是否出现:当含有position属性的元素为最边缘元素时：
- absolute 和 relative ：含有此2个值的边缘元素，浏览器缩小到此元素不可见时，会出现滚动条。
- fixed ：含有此值的边缘元素，浏览器缩小到此元素不可见时，不会出现滚动条。
