CSS 学习4.2

CSS

–

1.Emmet

1.2快速生成HTML

1.div*n   生成n个标签
2.ul>li  生成父子级标签
3.div+p  生成兄弟级标签
4.类名用.
ID名用#
5.自增符号$   例如：.demo$*5
6.div{}  标签里面生成文字

1.3快速生成CSS

1.w100  weight :100px;
首字母缩写

2.复合选择器

2.1后代选择器

选择父元素中的子元素
父元素  子元素{样式声明}
.nav li a{}

2.2子选择器

某元素的最近一级子元素
父元素>子元素{样式声明}

2.3并集选择器

元素1，元素2，元素3{样式声明 }

2.4伪类选择器

2.4.1链接伪类选择器

a:link   选择所有未访问过的链接
a:visited 选择所有已访问过的链接
a:hover 选择鼠标指针经过的链接
a:active 选择鼠标正在按下还未弹起的链接

• 按照LVHA的顺序来书写

2.4.2:focus伪类选择器

把获得光标的input表单元素选取出来
input:focus{
 backgroud-color : red;
}

3.元素显示模式

3.1块元素

div,p,ul,ol,li,h1-h6
1.独占一行
2.高度、宽度、内外边距都可控制
3.宽度默认和父级宽度一样
4.容器/盒子
5.文字类的元素内不能放块元素

3.2行内元素

span,a,strong,b,em等
1.一行可显示多个
2.高度、宽度设置无效
3.默认宽度为本身内容宽度
4.行内元素只能容纳文本或其他行内元素
5.a里面可以放块级元素

3.3行内块元素

img,input,td
1.一行可显示多个行内块元素，之间有空白空隙
2.默认宽度为内容宽度
3.可设置高度，宽度，内外边距

3.4元素显示模式转换

一个模式的元素需要另一种模式的特性
1.转换为块元素 display:block;
a {display:block;}
2.转换为行内元素 display:inline;
div{display:inline;}
3.转换为行内块元素display:inline-block;

3.5单行文字垂直居中

line-height文字行高=盒子高度

4.背景

4.1背景颜色

background-color: transparent / color

4.2背景图片

装饰性小图片或超大图片
background-image :none | url;

4.3背景平铺

background-repeat :repeat(默认） |no-repeat | repeat-x | repeat-y

4.4背景图片位置

• background-position : x y;
  1.top left;相当于left top；和顺序无关
  2.只写一个方位名词，另一个默认居中对齐
• background-position : 20px(x) 20px(y); 精确单位
• background-position : 20px center;混合单位

4.5背景图像固定（附着）

background-attachment : scroll（滚动）默认 | fixed

4.6背景复合写法

background：颜色 图片地址 平铺 图像滚动 位置

4.7背景颜色半透明

background : rgba(0,0,0,0.3)
最后的参数是透明度alpha，0~1
习惯性将最后的参数省略0，写为.3
CSS3新增属性

5.CSS三大特性

---

5.1层叠性

样式冲突：就近原则，哪个样式离结构近，使用哪个样式

5.2继承性

子标签继承父标签的某些样式
一般继承text-，font-，line-以及color

• 行高的继承
  行高可以跟单位也可不跟 1.5为1.5倍
  font : 10px/1.5 microsoft yahei;
  子元素没有设置行高，继承父元素的行高为1.5，此时子元素行高为当前子元素文字大小*1.5

5.3优先级

• 选择器相同执行层叠性
• 选择器不同，按选择器权重
  继承的权重是0
  链接的样式不会随父标签修改是因为浏览器默认设置了链接的样式，属于权重为1，而继承的权重为0，不会被修改
• 权重计算
  复合选择器需要计算权重