CSS总结二

一 CSS复合选择器

1.1 后代选择器（重点）

用来选择元素或元素组的子孙后代

<div class="nav">
    <a href="#">内部链接1</a>
</div>

<style>
    .nav a {
        color: aqua;
    }
</style>

• 当标签发生嵌套时，内层标签就成为外层标签的后代。
• 它能选择任何包含在内 的标签。

1.2 子元素选择器

子元素选择器只能选择作为某元素子元素(亲儿子)的元素

<div>
    <strong>儿子</strong>
    <strong>儿子</strong>
    <strong>儿子</strong>
</div>
<div>
    <p>
        <strong>孙子</strong>
        <strong>孙子</strong>
        <strong>孙子</strong>
    </p>
</div>

只能选择儿子，选不到孙子

div>strong {
    color: blueviolet;
}

1.3 交集选择器

交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。

<p class="red">红色</p>

<style>
    p.red {
        color: red;
    }
</style>

用的少，不建议使用

1.4 并集选择器（重点）

并集选择器是各个选择器通过连接而成的，通常用于集体声明。

<div>我和你</div>
<span>在一起</span>
<p class="red">永远不分离</p>

<style>
    div,
    span,
    .red {
        color: red;
    }
</style>

1.5 链接伪类选择器（重点）

• a:link /* 未访问的链接 */
• a:visited /* 已访问的链接 */
• a:hover /* 鼠标移动到链接上 */
• a:active /* 选定的链接 */

注意

• 写的时候，他们的顺序尽量不要颠倒 按照 lvha 的顺序。否则可能引起错误。
• 因为叫链接伪类，所以都是 利用交集选择器 a:link a:hover
• 因为a链接浏览器具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

<a href="http://www.baidu.com" target="_blank">小米手机</a>

a:hover {
    color: red;
}

二 标签显示模式（display）

HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。

2.1 块级元素(block-level)

常见的块元素有h1~h6、p、div、ul、ol、li等，其中div标签是最典型的块元素。

块级元素的特点（熟记）：
（1）比较霸道，自己独占一行
（2）高度，宽度、外边距以及内边距都可以控制。
（3）宽度默认是容器（父级宽度）的100%
（4）是一个容器及盒子，里面可以放行内或者块级元素。

注意：
（1）只有文字才能组成段落 因此 p 里面不能放块级元素，特别是 p 不能放div
（2）同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。

<div>块内元素</div>

2.2 行内元素(inline-level)

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。

• 行内元素的特点：
  （1）相邻行内元素在一行上，一行可以显示多个。
  （2）高、宽直接设置是无效的。
  （3）默认宽度就是它本身内容的宽度。
  （4）行内元素只能容纳文本或则其他行内元素。

2.3 行内块元素（inline-block）

在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

行内块元素的特点：
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。一行可以显示多个
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。

2.4 标签显示模式转换 display

• 块转行内：display:inline;
• 行内转块：display:block;
• 块、行内元素转换为行内块： display: inline-block

span {
    /* 把行内元素转换成块元素 */
    display: block;
    width: 100px;
    height: 100px;
    background-color: red;
}
div {
    /* 把块内元素转换为行内元素 */
    display: inline;
    width: 200px;
    height: 200px;
    background-color: pink;
}
a {
    /* 转换为行内块元素 */
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color:yellow;
}

三 CSS背景(background)

3.1 背景颜色(color)

background-color:颜色值;   默认的值是 transparent  透明的

3.2 背景图片(image)

background-image : none | url (url)

background-image: url(../day01/timg.jpg);

参数	作用
none	无背景图（默认的）
url	使用绝对或相对地址指定背景图像

3.3 背景平铺（repeat）

参数	作用
repeat	背景图像在纵向和横向上平铺（默认的）
no-repeat	背景图像不平铺
repeat-x	背景图像在横向上平铺
repeat-y	背景图像在纵向平铺

/* 背景图片不平铺 */
background-repeat: no-repeat;

3.4 背景位置(position) 重点

参数	值
length	百分数 | 由浮点数字和单位标识符组成的长度值
position	top | center | bottom | left | center | right 方位名词

background-position: left center;
background-position: 10px center;

注意：

• 必须先指定background-image属性
• position 后面是x坐标和y坐标。 可以使用方位名词或精确单位。
• 如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left top和top left效果一致
• 如果只指定了一个方位名词，另一个值默认居中对齐。
• 如果position 后面是精确坐标， 那么第一个，肯定是 x ，第二的一定是y
• 如果只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中
• 如果指定的两个值是精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标

3.5 背景附着

background-attachment : scroll | fixed 

参数	作用
scroll	背景图像是随对象内容滚动
fixed	背景图像固定

3.6 背景透明

background: rgba(0, 0, 0, 0.3);

注意：

• 最后一个参数是alpha 透明度 取值范围 0~1之间
• 我们习惯把0.3 的 0 省略掉 这样写 background: rgba(0, 0, 0, .3);
• 背景半透明是指盒子背景半透明， 盒子里面的内容不受影响

3.6 复合写法

background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;

background: transparent url(image.jpg) no-repeat  scroll center top ;

四 CSS三大特性

4.1 层叠性

所谓层叠性是指多种CSS样式的叠加。如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉

原则：

• 样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。
• 样式不冲突，不会层叠

4.2 继承性

子标签会继承父标签的某些样式，如text-，font-，line-这些元素开头的可以继承，以及color属性

4.3 优先级（重点）

定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时，

• 选择器相同，则执行层叠性
• 选择器不同，就会出现优先级的问题。

4.3.1 权重计算公式

标签选择器	计算权重公式
继承或者 *	0,0,0,0
每个元素（标签选择器）	0,0,0,1
每个类，伪类	0,0,1,0
每个ID	0,1,0,0
每个行内样式 style=""	1,0,0,0
每个!important 重要的	∞ 无穷大

4.3.2 权重叠加

有多个基础选择器组合而成，就会出现权重叠加。

• div ul li ------> 0,0,0,3
• .nav ul li ------> 0,0,1,2
• a:hover -----—> 0,0,1,1
• .nav a ------> 0,0,1,1

数位之间没有进制，所以不会存在10个div能赶上一个类选择器的情况。

4.3.3 继承的权重是0

1） 如果选中了，那么以上面的公式来计权重。谁大听谁的
2） 如果没有选中，那么权重是0，因为继承的权重为0