前端学习笔记_007_CSS：行高-背景-三大特性

CSS：行高-背景-三大特性

• 目录
  1、line-height：行高
  2、background：CSS背景
  3、CSS三大特性
  4、CSS注释

1、line-height：行高

• 目标
  1、理解行高和高度的三种关系。
  2、理解为什么 行高=高度 则单行文字会垂直居中
  3、学会测量行高。

1.1、行高测量

• 行高的测量：
  

注：基线与基线的距离为行高。

1.2、单行文本垂直居中

• 行高我们利用最多的一个地方是：单行文本垂直居中。
• 行高=上距离+内容高度+下距离
• 默认行高=内容高度

注：由于上距离和下距离总是相等的，因此文字看上去垂直居中的。

• 行高与高度的三种关系
  1、如果 行高<高度 ，则文字会 偏上；
  2、如果 行高=高度 ，则文字会 垂直居中；
  3、如果 行高>高度 ，则文字会 偏下。

2、background：CSS背景

• 目录：
  1、background-color：背景颜色
  2、background-image：背景图片
  3、background-repeat：背景平铺
  4、background-position：背景位置（重点）
  5、background-attachment：背景附着
  6、背景简写
  7、背景透明（CSS3）
  8、背景总结

• 目标：
  1、理解CSS背景的作用。
  2、了解CSS背景的属性。
  3、理解CSS背景图片与插入图片的区别。

2.1、background-color：背景颜色

• 语法

/* 背景颜色background-color */
.demo8 {
	background-color: 颜色值;
}

注：默认颜色是 transparent （透明色）。

2.2、background-image：背景图片

• 背景图片在盒子底层，插入图片在盒子上层。

• 语法

/* 背景图片background-image */
.demo9 {
	background-image: none | url(url);
}

• 案例

/* 背景图片background-image */
.demo9 {
	background-image: url(./image/img.jpg);
}

注：背景图片的 url 地址不加引号。

2.3、background-repeat：背景平铺

• 语法

.demo9 {
	background-repeat: repeat | repeat-x |repeat-y no-repeat;
}

• 属性值
  

2.4、background-position：背景位置（重点）

• 实际工作中使用最多的是背景图片居中对齐。

• 语法

/* 背景位置 */
.demo9 {
	background-position: length || length;
	background-position: position || position;
}

• 属性值
  
• 案例

.demo9 {
	background-position: center bottom;
	background-position: 50% 50%; 
	background-position: 30px 50px; 
	background-position: 30% top;  
	background-position: left 60px;
}

• 注意
  1、前提是先指定 background-image 属性
  2、position 后面第一个是 x坐标 ，第二个是 y坐标 可以使用方位名词、百分数或者精确单位。
  3、如果只指定一个方位名词，则另一个默认居中，为50%。
  4、如果只指定一个数值，那该数值用于x坐标，另一个默认是y坐标且默认居中。
  5、如果指定的两个值都是方位名词，则无需在意前后顺序，实现效果一致。
  6、如果指定两个值是混合使用或数值，则第一个是x坐标，第二个是y坐标。

2.5、background-attachment：背景附着

• 概念：背景附着就是解析背景是滚动的还是固定的。

• 语法

/* 背景附着 */
.demo9 {
	background-attachment: scroll | fixed;
}

注：默认值是 scroll 。

2.6、背景简写

• background：属性的书写顺序官方并没有制定强制的标准。但建议按照一下顺序：
• background：背景颜色 背景图片地址 背景平铺 背景滚动 背景位置；
• 语法

/* 背景简写 */
.demo9 {
	background: #A52A2A url(image/btn.png) no-repeat fixed center top;
}

2.7、背景透明（CSS3）

• 语法

.nav {
	background: rgba(0,0,0,.3);
}

• 注意
  1、最后一个参数是 alpha（透明度），取值范围是 0~1 之间。
  2、我们习惯把 0.3 的 0 省略掉。
  3、背景透明指的是盒子背景透明，盒子里的内容并不受影响。
  4、CSS3的效果，IE9以下不支持。

2.8、背景总结

3、CSS三大特性

• 目录：
  1、CSS层叠性
  2、CSS继承性
  3、CSS优先级（重点）

• 目标：
  1、学会计算常见选择器的叠加值。
  2、能说出那些常见的样式会有继承。
  3、理解CSS样式冲突采取的原则。
  4、学会CSS优先级的算法。

3.1、CSS层叠性

• 概念
  所谓的层叠性是指对同一元素，多种CSS样式的叠加。
  是浏览器处理冲突的一个能力，如果一个属性通过两个相同的选择器设置在同一个元素上，那么属性就会产生覆盖。

• 原则
  1、样式冲突遵循 就近原则 ，那个样式离结构近，就执行那个样式。
  2、样式（属性）不冲突就不会产生重叠。

• 简述：长江后浪推前浪，前浪死在沙滩上。

• 案例
  

/* 层叠性 */
 p {
 	font-style: italic;
	color: orange;
 } 
 p {
	color: purple;
 }

注：后面的样式覆盖掉了前面的样式。

3.2、CSS继承性

• 概念
  子标签会继承父标签的某些样式，如文本颜色和字号。

• 原则
  1、子元素可以继承父元素的样式（以text- ，font ， line ， 这些元素开头的以及 color 属性可以被继承 ）
  2、当多数子元素都需要某个样式时可以给父元素指定一个，简化代码。

• 简述：子承父业。

• 案例

<div class="demo">
			<span>子承父业</span>
		</div>

.demo {
	 color: orange;
	 font-weight: 700;
 }

span标签 继承了 div标签 的属性。

3.3、CSS优先级（重点）

• 概念
  定义CSS样式时，经常会出现两个或者更多属性应用到同一元素上，此时：
  1、如果选择器相同，则执行层叠性（就近原则）。
  2、如果选择器不同，则看优先级大小。
• 案例
  

<p class="demo1">优先级测试</p>

/* 优先级 */
.demo1 {
	color: orange;
}
 p {
	 color: purple;
	 font-style: italic;
 }

• 计算权重公式
  

• color: orange!important;

• 注意
  1、 specificity 用一个四位的数，更像四个级别。
  2、值从左到右，左边最大，一级大过一级，数位之间没有进制，级别之间不可超越。
  3、关于CSS权重，我们需要一套计算公式来计算，这就是 CSS Specificity（特殊性）。

• 权重叠加
  复合选择器由多个基础选择器构成，这就产生了权重叠加。

  div span p -----------> 0,0,0,3

  p.demo ---------------> 0,0,1,1

  .demo,span,p -------> 0,0,1,2

  a:hover ---------------> 0,0,1,1

• 注意
  1、数位之间没有进制，比如说 0,0,0,5 + 0,0,0,6 = 0,0,0,11 ，而不是 0,0,1,1；
  级别不可超越。
  2、继承的权重是 0
  3、如果权重相同，则会根据 层叠性 ，就近原则 。

• 判断优先级的方法（重点）
  1、先看目标标签， 有没有被选中， 选中了，就计算权重 ， 谁大就听谁的。
  2、如果没有选中 ，那么权重为 0 ，继承的权重为 0

• 案例
  

<div id="demo3">
			<span>继承权重为 0</span>
		</div>

/* 继承的权重为 0 */
 #demo3 {
	 color: orange!important;
 }
 span {
 	 color: coral;
 }