目录
1. CSS复合选择器
1.1 后代选择器(重点)
- 概念:
后代选择器又称为包含选择器
- 作用:
用来选择含素或元素组的子孙后代
- 其写法就是把外层标签写在前面,内层标签写在后面,中间用空格隔开,先写父级再写子级。
.class h3 {
color: red;
font-size: 16px;
}
- 当标签发生嵌套时,内层标签就成为外层标签的后代。
- 子孙后代都可以这么选择。或者说,它能选择任何包含在内的标签。
1.2 子元素选择器
- 作用:
子元素选择器只能选择作为某元素子元素(亲儿子)的元素。
- 其语法就是把父级标签写在前面,子级标签写在后面,中间跟一个 > 进行连接
- 语法:
.class>h3{
color: red;
font-size: 14px;
}
这里的子 指的是 亲儿子,不包含孙子重孙之类。
白话:
比如: .demo > h3 {color: red:} 说明 h3 一定是demo 亲儿子。 demo元素包含着h3。
1.3 交集选择器
- 条件
交集选择器由两个选择器构成,找到的标签必须满足:既有标签一的特点,也有标签二的特点。
- 语法
h3.nav{
color: red;
font-size: 16px;
}
记忆技巧:
交集选择器是 并且 的意思。既...又...的意思
比如: p.one 选择的是:类名为 .one 的段落标签。
用的相对来说比较少,不太建议使用。
1.4 并集选择器(重点)
- 应用:
如果某些选择器定义的样式完全相同,就可以利用并集选择器为它们定义相同的CSS样式。
- 并集选择器(CSS选择器分组)是各个选择器通过 ,连接而成的。
- 语法:
- 任何形式的选择器(包括标签选择器、class选择器和id选择器等),都可以作为并集选择器的一部分。
- 记忆技巧:
并集选择器通常用于集体声明,逗号隔开的,所有的选择器都会执行后面的样式,逗号可以理解为 和 的意思。
比如 .one, p , #test {color: #F00;}
表示 .one、 p 和 #test 这三个选择器都会执行颜色为红色。
通常用于集体声明。
测试题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小测验</title>
<!--任务; 1.链接登录的颜色为红色
2.主导航栏里面所有的链接颜色改为橙色
3.主导航栏和测导航栏里面字体都是14像素并且都是微软雅黑 -->
<style>
/* 1.链接登录的颜色为红色 */
.site-r a {
color: red;
}
/* 2.主导航栏里面所有的链接颜色改为橙色 */
.nav ul li a {
color: orange;
}
/* 3.主导航栏和测导航栏里面字体都是14像素并且都是微软雅黑 */
.nav,
.sitenav{
font: 14px "微软雅黑";
}
</style>
</head>
<body>
<!-- 主导航栏 -->
<div class="nav">
<ul>
<li> <a href="#">公司首页</a></li>
<li> <a href="#">公司简介</a></li>
<li> <a href="#">公司产品</a></li>
<li> <a href="#">联系我们</a></li>
</ul>
</div>
<!-- 测导航栏 -->
<div class="sitenav">
<div class="site-l">左侧导航栏</div>
<div class="site-r"><a href="#">登录</a></div>
</div>
</body>
</html>
1.5 连接伪类选择器(重点)
- 区别
类选择器:.demo{}
伪类选择器::link{}
- 作用:
为了给某些选择器添加特殊的效果。比如给多个链接添加特殊效果,可以选择第1个,第n个元素来给它添加效果。
a:link /*未访问的链接*/
a:visited /*已访问的链接*/
a:hover /*鼠标移动到链接上*/
a:active /*选定的链接*/
注意
1. 写的时候,他们顺序尽量不要颠倒 按照 lvha 的顺序。否则可能引起错误。
2. 记忆法:
○ love hate 爱上了讨厌
○ lv 包包 非常 hao
3. 因为叫链接伪类,所以都是利用交集选择器 a:link a:hover
4. 因为a链接浏览器具有默认样式,所以我们实际工作中需要给链接单独指定样式。
5. 实际开发中,我们很少写全四个状态,一般写法如下:
/* a是标签选择器 指所有链接 */
a {
font-weight: 700px;
font-size: 16px;
color: gray;
}
/* :hover是链接伪类选择器 鼠标经过 */
a:hover {
/*鼠标经过的时候,由原来的灰色变为红色 */
color: red;
}
1.6 复合选择器总结
2. 标签显示模式(display)
2.1 标签显示模式
- 什么是标签显示模式
标签以什么方式进行显示,比如div自己占一行,比如 span一行可以放很多个。
- 作用
网页的标签非常多,在不同的地方会用到不同类型的标签,一遍更好的完成网页。
- 标签的类型
HTML标签一般分为块标签和行内标签两种类型,它们也称为块元素和行内元素。
2.2 块级元素(block-level)
- 例:
常见的块元素有<h1>~<h5>、<p>、<div>、<ul>、<ol>、<li>等,其中<div>是最典型的块元素。
- 块级元素的特点
(1)比较霸道,自己独占一行。
(2)高度、宽度、外边距以及内边距都可以控制。
(3)宽度默认是容器的100%。
(4)是一个容器及盒子,里面可以放行内或者块级元素。
- 注意
○ 只有文字才能组成段落 因此 p 里面不能放块级元素,特别是 p 不能放div。
○ 同理还有这些标签h1~h6、dt,他们都是文字类块级标签,里面不能放其他块级元素。
2.3 行内元素(inline-level)
- 例:
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等,其中
<span>是最典型的行内元素。有的地方也称内联元素。
- 特点:
(1)相邻行内元素在一行上,一行可以显示多个。
(2)高、宽直接设置是无效的。
(3)默认宽高就是它本身内容的宽高。
(4)行内元素只能容纳文本或者其它行内元素。
注意:
(1)链接里面不能再放链接。
(2)特殊情况 a 里面可以放块级元素,但是给 a 转换一下块级模式最安全。
2.4 行内块元素
- 例:
在行内元素中,有几个特殊的标签 <img/>、<input/>、<td>,可以对它们设置宽高和对齐属性,有些资料
可能会称它们为行内块元素。
- 行内块元素的特点:
(1)和相邻行内元素(行内块)在一行上, 但是之间会有空白缝隙,一行可以显示多个。
(2)默认高度就是它本身内容的高度。
(3)高度、行高、外边距以及内边距都可以控制。
2.5 三种模式总结和区别
2.6 标签显示模式转换 display
- 块转行内:display: inline;
- 行内转块:display: block;
- 块、行内元素转换为行内块:display: inline-block;
3. 行高那些事(line-height)
3.1 行高测量
行高的测量方法:
测量工具:
3.2 单行文本垂直居中
文字的行高等于盒子的高度。
行高 = 上距离 + 内容高度 + 下边距
行高和高度的三种关系
- 如果行高 等于 高度,文字会垂直居中
- 如果行高 大于 高度,文字会偏下
- 如果行高 小于 高度,文字会偏上
4. CSS背景(background)
4.1 背景颜色(color)
- 语法
background-color: 颜色值; 默认的值是transparent 透明的
4.2 背景图片(image)
- 语法
background-image:none | url (url)
background-image: url(images/dabai.png);
- 小技巧:我们提倡背景图片后面的地址,url不要加引号。
4.3 背景平铺(repeat)
- 语法
background-repeat: repeat | no-repeat | repeat-x | repeat-y
4.4 背景位置(position)重点
- 语法
background-position: length || length
background-position: position || position
参数 | 值 |
length | 百分数 | 由浮点数字和单位标识符组成的长度值 |
position | top | center | bottom | left | center | right 方位名词 |
- 注意:
○ 必须指定background-image属性。
○ position 后面是x坐标和y坐标。可以使用方位名词或者精准单位。
○ 如果指定了一个方位名词,另一个值默认居中,为50%。
○ 如果只指定一个数值,那该数值用于x坐标,另一个默认是y坐标,默认居中。
○ 如果指定两个值,两个值都是方位名字,则两个值前后顺序无关,比如left,top 和 top,left效果一致。
○ 如果指定两个值,精准单位和方位名字混合使用,则第一个值是x坐标,第二个值是y坐标。
例子:
.bg {
width: 800px;
height: 500px;
background-color:pink;
/* 背景图片 1.必须加url 2.url里面的地址不要加 引号 */
background-image: url(../images/reba.jpg);
color: violet;
/* 默认的是平铺图 repeat */
/* background-repeat: repeat; */
/* 背景图片不平铺 */
background-repeat: no-repeat;
/* 背景图横性平铺 */
/* background-repeat: repeat-x; */
/* 背景图纵性平铺 */
/* background-repeat: repeat-y; */
/* background-position: x坐标 y坐标 */
/* background-position: right top; */
/* 靠左 水平居中 */
/* background-position: left center; */
/* 如果只指定一个值,另一个值默认居中对齐 */
/* background-position: right; */
/* 跟精确坐标 x值 y值 */
background-position: 80px 120px;
}
4.5 背景附着
- 背景附着就是解释背景是滚动的还是固定的
- 语法:
background-attachment : scroll | fixed
参数 | 作用 |
scroll | 背景图像是随对象内容滚动 |
fixed | 背景图像固定 |
4.6 背景简写
- background:属性的值的书写顺序官方并没有强制标准的。为了可读性,建议如下写:
- background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
- 语法:
background: transparent url(image.jpg) repeat-y scroll center top;
4.7 背景透明(CSS3)
- 语法
background: rgba(0,0,0,0.3);
- 最后一个参数是alpha透明度 取值范围 0 ~ 1之间。
- 我们习惯把0.3 的 0 省略,这样写 background: rgba(0,0,0,.3);
- 注意:背景半透明是盒子背景半透明,盒子里面的内容不受影响。
- 因为是CSS3,所以低于ie9 的版本是不支持的。
4.8 背景总结
属性 | 作用 | 值 |
background-color | 背景颜色 | 预定义的颜色值/十六进制/RGB代码 |
background-image | 背景图片 | url(图片路径) |
background-repeat | 是否平铺 | repeat / no-repeat / repeat-x / repeat-y |
background-position | 背景位置 | length/position 分别是x 和y 坐标,切记,如果有精准数值单位,则必须按照先x 后y 的写法 |
background-attachment | 背景固定还是滚动 | scroll / fixed |
背景简写 | 更简单 | 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;它们没有顺序 |
背景透明 | 让盒子半透明 | background: rgba(0,0,0,0.3); 后面必须是4个值 |
5. CSS三大特性
5.1 CSS层叠性
- 概念:
所谓层叠性就是指多种CSS样式的叠加。是浏览器处理冲突的一中能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另外一个属性层叠掉。
- 原则:
○ 样式冲突,遵循的原则是就近原则。哪个样式离着结构近,就执行哪个样式。
○ 样式不冲突,不会层叠。
5.2 CSS继承性
- 概念:
字标签会集成父标签的某些样式,如文本颜色和字号。想要设置一个可继承的属性,只需将它应用于父元素即可。最简单的理解就是:子承父业。
- 注意:
○ 恰当的使用继承可以简化代码,降低CSS样式的复杂性。比如有很多子级孩子都需要某个样式,可以给父级指定一个,这些孩子继承过来就好了。
○ 子元素可以继承父元素的样式(text-, font-, line- 这些元素开头的可以继承,以及color属性)
5.3 CSS优先级(重点)
- 概念:
定义CSS样式时,经常出现两个或者多个规则应用在同一元素上,此时,
○ 选择器相同,则执行层叠性
○ 选择器不同,就会出现优先级的问题。
1).权重计算公式
关于CSS权重,我们需要一套计算公式来计算,这个就是CSS Specificity(特殊性)
- specificity用一个四位的数,更像四个级别。
- 值从左到右,左面的最大,一级大于一级,数位之间没有进制,级别之间不可超越。
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
注意:
1. 数位之间没有进制,比如说:0,0,0,5 + 0,0,0,5 = 0,0,0,10 而不是 0,0,1,0,所以不会存在10个div能赶上一个类选择器的情况。
2. 继承的权重是0。
3. 如果权重是相同,则会根据层叠性,就近原则。
4. 两个特殊标签 链接 和 h 标题,他们浏览器有自己默认的样式,继承的权重为0,所以,我们还是要单独给链接和标题一个样式。