web前端开发第四天课程

1复合选择器

后代选择器

div span {color:red;}

子代选择器

div>span{color:red;}

并集选择器

div,p,span{color:red;}

交集选择器

p.box{color:red;}

伪类选择器

鼠标悬停状态：选择器：hover{css属性}(任何标签都可以)
a:hover{color:red;}

超链接伪类

a:link{} 访问前样式
a:visited{} 访问后样式
a:hover{} 鼠标悬停样式
a:active{} 点击时样式

2CSS特性

继承性：子级继承父级文字控制属性

body{font-size:30px; color:red;}
如果标签有自己的样式则生效自己样式，不继承

层叠性：

1. 相同属性会覆盖
2. 不同属性会叠加

优先级：

选中标签范围越大，优先级越低
公式;通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important(提权功能/优先级最高。慎用)

优先级-叠加计算规则

公式：（行内样式 ，id选择器个数，类类选择器个数，标签选择器个数）
规则：

• 从左向右依次选个数，同一级个数多的优先级高，如果个数相同，则向后比较
• ！important权重最高
• 继承权重最低
  .c1 .c2 div{} (0,0,2,0)
  div #box3{} (0,1,0,1)
  #box1 .c3{} (0,1,1,0)最高生效

3Emmet写法（简写方式）

.HTML

类选择器：标签名.类名 enter div特殊：.类名
id选择器：标签名#id名 enter
同级标签：div+p enter
父子级标签：div>p enter
多个相同标签：span*3 enter
有内容的标签：div{内容}+enter

.CSS

大多数为属性单词首字母 enter
w500 enter=width:500px:
bgc enter=background-color:#fff;
w500+h200+bgc enter

4背景属性-拆分写法

背景色 backgroung-color(bgc):red;

背景图 background-image(bgi):url(图片路径);

背景图平铺方式 background-repeat(bgr):no-repeat;/repeat;/repeat-x;/repeat-y:

背景图位置 background-position(bgp):right bottom;/50px 100px;/50px center;

正数向右/向下 负数向左/向上

• 关键字取值方式写法，可以颠倒顺序
• 可以只写一个关键字，另一个方向默认居中；数字只写一个值表示水平方向，垂直默认居中

背景图缩放 background-size(bgz):cover;/100%;/

• 关键字
  cover：等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见
  contain：等比例缩放背景图片以完全装入背景区，可能背景区部分空白
• 百分比：根据盒子尺寸计算图片大小
• 数字+单位

背景图固定 background-attachment(bga):fixed;

背景图复合属性 background:背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定

5显示模式

块级元素(div)

• 独占一行
• 宽度默认是父级的100%
• 添加宽高属性生效

行内元素（span）

• 一行共存多个
• 尺寸由内容撑开
• 添加宽高属性不生效

行内块级元素(img)

• 一行共存多个
• 默认尺寸由内容撑开
• 添加宽高属性生效

转换显示模式

display:block(块级); /inline-block(行内块); /inline(行内)；