一、选择器进阶
- 后代选择器：空格（可以选择后很多代，儿子，孙子，重孙子都可）
语法：选择器1 选择器2{css}
<head>
<style>
div p {
color:red;
}
</style>
</head>
<body>
<div>
<p>div的儿子p标签</P>
</div>
</body>
-
子代选择器：>（只能选中儿子，即后一代）
语法：选择器1>选择器2{css} -
并集选择器：,（逗号，选择多组标签）
语法：选择器1,选择器2{css} -
交集选择器：什么都不加，直接连着写
语法：选择器1选择器2{css} -
伪类选择器：hover(鼠标悬停的时候改变的样式)
语法：选择器：hover{css}
其他伪类伪元素 -
Emmet语法：简写语法，快速生成代码
| 输入 | 回车以后 |
|---|---|
| div | 快速生成div双标签 |
| .box | 快速生成类名为box的div双标签 |
| p.box | 快速生成类名为box的p双标签 |
| #box | 快速生成id为box的div双标签 |
| div+p | 快速生成div和p标签，同级关系 |
| ui>li*3 | 快速生成ul和li标签，父子关系，三个li |
| ui>li{111}*3 | 快速生成ul和li标签，父子关系，三个li，li包裹111 |
| ui>li{$}*3 | 快速生成ul和li标签，父子关系，三个li，li包裹1,2,3 |
| 单词首字母 | 快速生成css属性名 |
| w300+h200+bgc | 快速生成css宽度300高200颜色，颜色需快速生成之后自己替换 |
二、背景相关属性
-
背景色：background-color（参考前面的常用颜色取值方法）
-
背景图：background-image:url();（小括号内无引号）
-
背景平铺：background-repeat:repeat（默认）,no-repeat（不平铺）,repeat-x（横铺）,repeat-y（竖铺）
-
背景位置：background-position：水平方向位置 垂直方向位置
- 取值方式：英文
水平方向：left,center,right
垂直方向：top,center,botton - 取值方式：坐标
background-position：50px 100px;(正数向右下移动，负数相反)
-
背景相关属性连写
复写格式：background:color image repeat position（可不按该顺序，position中的取值为英文则也可以颠倒顺序，如果是坐标则不行） -
image和背景的区别：背景需要盒子
三、元素显示模式
- 块级元素（div,p,h系列,ul,li,dl,dt,form,header…）
- 独占一行
- 可以设置宽高并生效（宽度默认和父级一样）
- 行内元素（a,span,b,u,i,s…）
- 不换行
- 不可以设置宽高，不生效
- 行内块元素（input,textarea,button,select…特殊的，img有行内块的元素特点，但在谷歌浏览器中显示结果是inline）
- 一行可以显示多个
- 可以设置宽高
- 元素显示模式转换
- display：block（块级），inline-block（行内块），inline（行内）；
- html嵌套规范注意点：
p标签不要嵌套div,p,h等块级元素
a标签不能嵌套a标签
四、css特性
- 继承性(子级继承父级的样式)
- 文字控制属性都能继承，例如color,font系列，text系列，line-height
- a标签的color会继承失败，因为a标签自己有默认属性，如果需要修改也需要在a中修改，
- h系列的font-size会继承失败，因为h系列有自己的字号属性，修改同上
- 层叠性
- 不同属性作用于一个标签则都生效
- 相同属性作用于一个标签则后面的覆盖前面的
- 样式冲突时，当选择器优先级相同时，才能通过层叠性并判断结果
1251
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
