从头学前端-CSS基础02

一个工具：

前端快速开发插件Emmet

Emmet 的前身就是 Zen Coding。 它是一组专门用来提高编写 HTML 和 CSS 代码速度的便利工具。将它整合进文本编辑器，可以提供一些功能和快捷方式，加快开发速度。提供包括 Eclipse、IDEA、UltraEdit、SlickEdit 的插件;

CSS复合选择器

CSS复合选择器是对基础选择器进行组合而成；常用的选择器又：后代选择器、子选择器、并集选择器、伪类选择器；

• 后代选择器： 后代选择器也称为包含选择器，可以选择父元素下的所有后代元素；语法如下： > 元素1 元素2 {样式声明}

元素1和元素2可以是任意的基础选择器，元素2只需是元素1的后代既可，不需要是直接子元素；

• 子选择器： 子选择器也称子元素选择器，可以选择父元素下的直接子元素，语法如下： > 元素1>元素2 {样式声明}
• 并集选择器 并集选择器可以选择多个标签，指定同样的样式；用于集体声明，各个标签以逗号分隔，语法如下： > 元素1,元素2 { 样式声明 }

	一般以逗号分行写（竖着写）

• 伪类选择器： 伪类选择器用于给某些选择器添加特殊效果；主要有链接伪类选择器，结构伪类选择器； - 链接伪类选择器： > a:link {color: #333} 未访问的链接

	> a:visited {color: red } 已经访问过的链接
	> a:hover {} 鼠标经过的链接
	> a:active {} 鼠标正在点击的链接
	

	为保证生效，需要按照以上顺序声明；LVHA;

	需要给链接单点指定样式，原因是a标签在浏览器有默认的样式；最常用的伪类为hover；

-  focus伪类选择器：
	用于选取获取焦点的表单元素；语法如下：
	> input:focus { 样式声明 }

CSS元素显示模式

	元素显示模式就是元素（或标签）以什么方式进行显示；HTML元素一般分为块级元素和行内元素两种显示类型；

• 块级元素： > 主要有h1-h6 div ol ul li等；

> 自己独占一行
> 高度和宽度，内外边距都可以控制
> 宽度默认为父元素的宽度
> 是一个容器盒子，可以放行内或会计元素
> 文字类的元素不能放置块级元素；如p,h1-h6等

• 行内元素： > a strong b em i span等，行内元素也称内联元素

 > 相邻行内元素都显示在一行
 > 无法直接设置宽度和高度，设置无效
 > 默认的宽度是本身内容的宽度
 > 行内元素只能放置文本和其他行内元素
 > a标签可以放置块级元素；不能放置a标签
 

• 行内块元素：

> 在行内元素几个特殊的标签 img input td等，同时具有行内元素和块级元素的特点
> 一行的行内元素之间有空隙； 
> 宽度默认为内容的宽度 （行内元素特点）
> 高度，宽度，边距可以控制 （块级元素特点）
	

• 元素显示模式的转换： > 意思是：一个模式的元素可以转换为另外一种显示模式；

 > 转换为块级元素 display:block
 > 转换为行内元素： display: inline;
 > 转换为行内块元素 display: inline-block;
 > 

CSS背景

背景样式可以设置背景颜色，背景图片，背景平铺，背景图片位置，背景图片固定；

• 背景颜色： backgroud-color 默认是透明色； > 背景颜色半透明效果： background: rgba(0,0,0,0.1)

> 透明属性取值范围：0-1

• 背景图片： background-image: 用于logo或者一些小图片和超大图片，可以方便控制图片位置；语法如下： > backgroud-image: none | url
• 背景平铺： background-repeat, 默认值为repeat,图片平铺语法如下： > background-repeat : repeat | no-repeat | repeat-x | repeat-y
• 背景图片位置：background-position > 参数可以是方位名词：left top center bottom right 一般情况下需要两个参数。 当只有一个参数时，另一个值为center；

> 参数时精确单位：background-position: x y  一般情况下是X轴和Y轴，当只有一个参数时，那就是X轴，另一个值为居中Y轴
> 参数时混合参数，第一个参数为X轴，第二值为Y轴

• 背景图片固定：background-attachment设置背景图片是否随着页面滚动 > background-attachment: fixed | scroll

> 默认值scoll.随着对象内容的滚动而移动

• 背景复合写法：background > 对于顺序没有要求，一般写法为：背景颜色，背景图片 背景平铺，背景图片滚动，背景图片位置

> 各个属性以空格隔开

CSS三大特性

CSS三大特性：层叠性，继承性、优先级

• 1、层叠性 > 相同选择器设置同一个属性(存在样式冲突)，新属性会层叠或覆盖旧属性；

层叠性遵循就近原则，且只会覆盖相同样式

• 2、继承性: > 子标签会继承父标签的某些样式，主要是文字相关的属性样式、text- 、font- 、line-、 color等

>  行高可以写单位，也可以不写，变身字体大小的倍数；

• 3、优先级： > 同一元素指定多个样式，根据优先级确定

> 选择器相同，就近原则
> 不同选择器，优先级为 继承或* 》标签元素选择器》类选择器，伪类选择器 》ID选择器 》行内样式 》 !important
> a链接有默认的样式{color:blue}，不会继承body的样式
> 权重叠加：复合选择器包含多种类型选择器，存在权重计算的问题；
> 权重会叠加，但是不是进位; 及多个元素选择器永远小于一个类选择器
>