前端基础总结之css 02
知识导航
- 复合选择器
- 标签的显示模式
- 行高
- css背景
- css三大特性
1. 复合选择器
问：我们有了上篇的基础选择器为什么还要学习复合选择器呢？
答：在实际开发应用中基础选择并不能满足我们的需要，不能快速准确的选择标签。而复合选择器则能更为准确更为精确的选中目标元素
1.1 后代选择器
用来选择元素或元素组的子孙后代
即当标签发生嵌套时，内层标签就成为了外层标签的后代
语法格式：
父级 子级{属性:属性值;属性:属性值;}
如：
.class h3{
color:red;
font-size:16px;
}
1.2 子元素选择器
只能选择某元素的字元素，这里必须是它的亲儿子（即不可以是孙子等其他后代）
语法格式：
.class>h3{
color:red;
font-size:14px;
}
1.3 交集选择器
交集选择器由两个选择器构成，找到的标签必须满足，既有一的特点又有二的特点。
语法格式：
要求选中这个标签<p class="class"></p>
则 p.class{
color: yellow;
}
即选中的是类名叫做class的p标签
1.4 并集选择器
当一些选择器的定义要求是相同的，我们可以把他们组合起来。
比如要求类名为class和页面中span的文本颜色为红色
则语法为：
.class,span{
color: red;
}
1.5 链接的伪类选择器
为什么叫做伪类呢，可以这么理解。类选择是一个点，它有两个点故为伪类。
它的作用可以给链接添加特殊效果。
语法：
a:link:选中还未访问过的a链接
a:visited：访问过了的a链接
a:hover：当鼠标移入此a链接
a:active ：鼠标点击还未撤手，即鼠标左键还未抬起
这里需要注意的是，他们的顺序不可以颠倒（可能会引起错误）
2. 标签的显示模式
问：什么是标签的显示模式呢；
答：我们回想不同标签在网页上的显示格式，比如span。多个span是可以在一行显示的，而div则不同。它自己就独占一行。
根据他们的特性进行分类：
可分为行内元素和块元素
2.1 块级元素
常见的块元素标签有：
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。
它们的特点：
- 自己独占一行
- 高度，宽度、外边距以及内边距都可以控制。
- 宽度默认是容器（父级宽度）的100%
- 是一个容器及盒子，里面可以放行内或者块级元素。
这里需要注意的是：像p，h1~h6这样的标签里面装的都是文本内容。所以它们里面不能放置其他块级元素。
2.2 行内元素
常见的行内元素标签有：
常见的行内元素有<a>、<strong>、<b>、<em>、
<i>、<del>、<s>、<ins>、<u>、<span>等，
其中<span>标签最典型的行内元素。有的地方也成内联元素
它们的特点：
- 相邻的行内元素均会显示在一行
- 宽高直接设置是无效的
- 默认的宽度为它里面内容的宽度
- 行内元素只能存放文本或其他的行内元素
需要注意的是：
a标签里面不能再放a。特殊情况a里面是可以放块级元素的，但是为以防万一我们一般还是把a转为块级模式。
2.3 行内块元素
在行内元素中有几个特殊的标签<img />、<input />、<td>，可以对它们设置宽高和对齐属性**。把他们称为行内块元素。
他们的特点：：
- 和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。一行可以显示多个
- 默认宽度就是它本身内容的宽度。
- 高度，行高、外边距以及内边距都可以控制。(比行内元素多出来的特权)
2.4 标签显示模式的转换——display
- 块转行内：display:inline;
- 行内转块：display:block;
- 块、行内元素转换为行内块： display: inline-block;
3. 行高
如图所见，上基线到下基线的距离即为行高。
将文字的行高等于盒子的高度便可实现单行文本垂直居中。
原理如下：
如图行高=上边距+下边距+内容。
如盒子高度为50px，设置行高为50px。其内容假设为20px。即它会将上边距和下边距均设为（50-20）/2=15px。文本内容正好被卡在正中间。
行高还是盒子的高度呢？
行高<盒子高度时
如果你把行高设为60px，文本内容还是20px，则上边距和下边距=（60-20）/2应为20px。即上边距为20px（空间够）。下边距应该也为20px（空间不够了）。但盒子只有50px。故剩下的50-20-20=10px便为真正的下边距。即显示的效果是文本偏下了。
行高<盒子高度思路也是一样。即下边距过大。显示效果文本偏上。
4. css的背景属性backgroud
值得指出：css中的背景和img标签的图片不同在与：img中的图片是以文本形式放置在盒子内部的，而背景是在盒子的底部不属于内部内容
4.1 背景颜色
语法：
background-color:颜色值; 默认的值是 transparent 透明的
4.2 背景图片
语法：
background-image : none | url (url)
4.3 背景平铺
设置图片是否平铺
语法：
background-repeat : repeat | no-repeat | repeat-x | repeat-y
| 参数 | 作用 |
|---|---|
| repeat | 背景图像在纵向和横向上平铺（默认的） |
| no-repeat | 背景图像不平铺 |
| repeat-x | 背景图像在横向上平铺 |
| repeat-y | 背景图像在纵向平铺 |
4.4 背景位置
设置图片的位置
语法：
这里有两种形式一种属性值为方位名词，一种具体长度值
background-position : length || length
background-position : position || position
| 参数 | 值 |
|---|---|
| length | 百分数 | 由浮点数字和单位标识符组成的长度值 |
| position | top | center | bottom | left | center | right 方位名词 |
值得注意的是：
- 我们必须指定了background-image属性
- 如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left top和top left效果一致
- 如果只指定了一个方位名词，另一个值默认居中对齐。
- 如果position 后面是精确坐标， 那么第一个，肯定是 x 第二的一定是y（这里的坐标轴是以盒子的左上脚为原点，向右为x正方向。向下为y的正方向）
- 如果只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中
- 如果指定的两个值是 精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标
4.5 背景附着
背景附着就是解释：背景随内容滚动的还是固定的
语法：
background-attachment : scroll | fixed
| 参数 | 作用 |
|---|---|
| scroll | 背景图像是随对象内容滚动 |
| fixed | 背景图像固定 |
4.6 综合写法
和font属性的综合写法类似。
但是它的顺序没有官方做强制标准。
建议： background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
即
background: transparent url(image.jpg) repeat-y scroll center top ;
4.7 c3背景透明度
设置背景的透明度
语法：
background: rgba(0, 0, 0, 0.3);
- 最后一个参数是alpha 透明度 取值范围 0~1之间
- 习惯把0.3 的 0 省略掉 这样写 background: rgba(0, 0, 0, .3);
- c3，故低于 ie9 的版本是不支持。
5. css的三大特性
5.1 层叠性
如：
所谓层叠性是指多种CSS样式的叠加，是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉
遵循原则：就近原则，即哪个离结构近哪可生效
5.2 继承性
<style>
div {
color: blue;
}
.class {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div>
<p class="class">这是一个段落</p>
</div>
</body>
如上述代码，给div样式，它里面的p标签同样会继承过来。
可以继承的样式：text-，font-，line-这些元素开头的可以继承，以及color属性
5.3 css优先级
如同样都选中一个类名为box的div，红色却不能生效。这里就需要考虑权重的问题了。
权重计算公式：
| 标签选择器 | 计算权重公式 |
|---|---|
| 继承或者 * | 0,0,0,0 |
| 每个元素（标签选择器） | 0,0,0,1 |
| 每个类，伪类 | 0,0,1,0 |
| 每个ID | 0,1,0,0 |
| 每个行内样式 style="" | 1,0,0,0 |
| 每个!important 重要的 | ∞ 无穷大 |
- 0, 0，0, 0它的值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。
最后一个的用法，给div设置颜色时，颜色后面加上!important 。表示这个颜色的权重无穷大
div {
color: pink!important;
}
权重叠加
因为我们的选择器一般均为复合选择器，所以要考虑他们的叠加
举例：
- div ul li ------> 0,0,0,3
- .nav ul li ------> 0,0,1,2
- a:hover -----—> 0,0,1,1
要注意的是继承的权重为0，这个不难，但是忽略很容易绕晕。
如：
#hezi {
color: blue;
}
p {
color: yellow;
}
<div id="hezi">
<p>这是一个段落</p>
</div>
问p标签内的文本是什么颜色呢，可能我们一看一个id一个标签。当然选择标签了。显示blue。
这就错了，不要忘了继承的权重为0,0，0,0
如果计算完成，权重相同，还是利用第一个特性就近原则。
下一篇： nodelog4js配置解析