1.0 导航栏动态
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.nav {
/*让里面的6个链接 居中对齐水平 这句话对 行内元素 行内块元素都有效果的*/
text-align: center;
}
.nav a {
/*有大小的 因为a 是行内元素 不能直接设置宽度和高 必须要转换 行内块元素*/
display: inline-block;
width: 120px;
height: 50px;
/*行高等于盒子的高度 就可以让单行文本垂直居中*/
line-height: 50px;
color: #fff;
/*background-color: pink;*/
text-decoration: none;
/*背景简写*/
background: url(images/bg.png) no-repeat;
}
/*鼠标经过nav里面的链接， 背景图片更换一下就好了*/
.nav a:hover {
background-image: url(images/bgc.png);
}
</style>
</head>
<body>
<div class="nav">
<a href="#">网站首页</a>
<a href="#">网站首页</a>
<a href="#">网站首页</a>
<a href="#">网站首页</a>
<a href="#">网站首页</a>
<a href="#">网站首页</a>
</div>
</body>
</html>
执行：
图片.png
2.0 后代选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style>
/*常山 赵子龙*/
/*山东 济南*/
.nav a {
color: pink;
}
.wangkeke ul li {
color: red;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">内部链接</a>
<a href="#">内部链接</a>
<a href="#">内部链接</a>
</div>
<a href="#">外部链接</a>
<a href="#">外部链接</a>
<a href="#">外部链接</a>
<ul>
<li>一条狗</li>
<li>一条狗</li>
<li>一条狗</li>
</ul>
<div class="wangkeke">
<ul>
<li>王可可是一条狗</li>
<li>王可可是一条狗</li>
<li>王可可是一条狗</li>
</ul>
</div>
</body>
</html>
image.png
3.0 子元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*后代选择器 选择 子孙后代*/
/*div strong {
color: red;
}*/
/*子元素选择器 符号 > 只选亲儿子 这些元素 */
div>strong {
color: pink;
}
</style>
</head>
<body>
<div>
<strong>儿子</strong>
<strong>儿子</strong>
<strong>儿子</strong>
</div>
<div>
<p>
<strong>孙子</strong>
<strong>孙子</strong>
<strong>孙子</strong>
</p>
</div>
</body>
</html>
image.png
4.0 交集选择器（不建议使用）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>交集选择器</title>
<style>
/*需求，就是让 p 这个 变成红色*/
/*交集选择器 既是p标签 又是 .red 类选择器的关系*/
p.red {
color: red;
}
</style>
</head>
<body>
<p class="red">红色</p>
<p class="red">红色</p>
<p class="red">红色</p>
<div class="red">红色</div>
<div class="red">红色</div>
<div class="red">红色</div>
<p>蓝色</p>
<p>蓝色</p>
<p>蓝色</p>
</body>
</html>
image.png
5.0 并集选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*客户需求： p 和 span 和 第一个div 里面的颜色都是红色*/
/*分开写的*/
/*p {
color: red;
}
span {
color: red;
}*/
/*.red {
color: red;
}*/
/*并集选择器 用逗号隔开， 逗号理解为 和的意思 通常用于集体声明 就是因为这些选择器 里面的样式 相同*/
p,
span,
.red {
color: red;
}
</style>
</head>
<body>
<p>我和你</p>
<p>我和你</p>
<p>我和你</p>
<span>我和你</span>
<span>我和你</span>
<span>我和你</span>
<div class="red">我和你</div>
<div>我和你</div>
<h1>你和我</h1>
<h1>你和我</h1>
</body>
</html>
6.0 链接伪类选择器
- a:link /* 未访问的链接 */
- a:visited /* 已访问的链接 */
- a:hover /* 鼠标移动到链接上 */
- a:active /* 选定的链接 */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接伪类选择器</title>
<style>
/*未访问过链接的状态 正常状态*/
/*p.one 交集选择器*/
a:link {
color: #333;
/*取消下划线*/
text-decoration: none;
}
/*已经访问的链接 我们点击过*/
a:visited {
color: orange;
}
/*鼠标经过链接时候的状态*/
a:hover {
color: red;
}
/*当我们点击的时候（按下鼠标，别松开的时候）*/
a:active {
color: green;
}
</style>
</head>
<body>
<a href="http://www.xiaomi.com">小米手机</a>
<a href="http://www.dami.com">大米手机</a>
<!-- p.one -->
</body>
</html>
注意：代码顺序必须是lvha（love hate 爱上讨厌）
实际开发中的写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*所以我们实际工作中都需要给链接单独指定样式*/
.nav a {
color: #333;
text-decoration: none;
}
/*鼠标放到 nav 里面的链接 才会变色*/
.nav a:hover {
color: orange;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">手机</a>
<a href="#">手机</a>
<a href="#">手机</a>
<a href="#">手机</a>
</div>
<a href="#">没有妈妈的孩子像棵草</a>
</body>
</html>
5.0 标签的3种显示模式
块级元素(block-level)、 行内元素(inline-level)、行内块元素（inline-block）
5.1 块级元素(block-level)
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。
- 块级元素的特点
（1）比较霸道，自己独占一行
（2）高度，宽度、外边距以及内边距都可以控制。
（3）宽度默认是容器（父级宽度）的100%
（4）是一个容器及盒子，里面可以放行内或者块级元素。
- 注意：
- 只有 文字才 能组成段落 因此 p 里面不能放块级元素，特别是 p 不能放div
- 同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。
5.2 行内元素(inline-level)
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。有的地方也成内联元素
- 行内元素的特点：
（1）相邻行内元素在一行上，一行可以显示多个。
（2）高、宽直接设置是无效的。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。
- 链接里面不能再放链接。
- 特殊情况a里面可以放块级元素，但是给a转换一下块级模式最安全。
5.3 行内块元素（inline-block）
在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。
-
行内块元素的特点：
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。一行可以显示多个
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。
6.0 显示模式的转换
- 块转行内：display:inline;
- 行内转块：display:block;
- 块、行内元素转换为行内块： display: inline-block;
无论是块级还是行级，都可以转换为行内块显示。
案例：简单导航栏的实现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*1. 变化样式 有大小 一行显示 我们想到了 行内块元素*/
a {
/*一定要进行模式转换 行内块*/
display: inline-block;
width: 100px;
height: 30px;
/*行高等于高度 可以让单行文本呢垂直居中*/
line-height: 30px;
background-color: pink;
/*可以让文字水平居中*/
text-align: center;
color: #fff;
text-decoration: none;
}
/*2. 鼠标经过 变化底色 和 文字的颜色*/
a:hover {
background-color: orange;
color: yellow;
}
</style>
</head>
<body>
<a href="#">新闻</a>
<a href="#">体育</a>
<a href="#">汽车</a>
<a href="#">好用</a>
</body>
</html>
执行：
image.png
行高原理：
image.png
行高等于盒子的高度，能实现单行文本垂直居中。
7.0 CSS 背景(background)
7.1 背景颜色(color)
background-color:颜色值; 默认的值是 transparent 透明的
7.2 背景图片(image)
- 语法：
background-image : none | url (url)
| 参数 | 作用 |
|---|---|
| none | 无背景图（默认的） |
| url | 使用绝对或相对地址指定背景图像 |
background-image : url(images/demo.png);
- 小技巧： 提倡 背景图片后面的地址，url不要加引号。
7.3 背景平铺（repeat）
- 语法：
background-repeat : repeat | no-repeat | repeat-x | repeat-y
| 参数 | 作用 |
|---|---|
| repeat | 背景图像在纵向和横向上平铺（默认的） |
| no-repeat | 背景图像不平铺 |
| repeat-x | 背景图像在横向上平铺 |
| repeat-y | 背景图像在纵向平铺 |
7.4 背景位置(position) 重点
- 语法：
background-position : length || length
background-position : position || position
| 参数 | 值 |
|---|---|
| length | 百分数 | 由浮点数字和单位标识符组成的长度值 |
| position | top | center | bottom | left | center | right 方位名词 |
- 注意：
- 必须先指定background-image属性
- position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。
- 如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left top和top left效果一致
- 如果只指定了一个方位名词，另一个值默认居中对齐。
- 如果position 后面是精确坐标， 那么第一个，肯定是 x 第二的一定是y
- 如果只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中
- 如果指定的两个值是 精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标
实际工作用的最多的，是背景图片居中对齐。
7.5 背景附着
背景附着就是解释背景是滚动的还是固定的
-
语法：
background-attachment : scroll | fixed
| 参数 | 作用 |
|---|---|
| scroll | 背景图像是随对象内容滚动 |
| fixed | 背景图像固定 |
7.6 背景简写
- background：属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写：
- background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
- 语法：
background: transparent url(image.jpg) repeat-y scroll center top ;
7.7 背景透明(CSS3)
- 语法：
background: rgba(0, 0, 0, 0.3);
- 最后一个参数是alpha 透明度 取值范围 0~1之间
- 我们习惯把0.3 的 0 省略掉 这样写 background: rgba(0, 0, 0, .3);
- 注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不受影响
- 因为是CSS3 ，所以 低于 ie9 的版本是不支持的。
7.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个值 |
8.0 CSS三大特性
层叠性、继承性、优先级。
8.1 CSS层叠性
-
概念：
所谓层叠性是指多种CSS样式的叠加。
是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉
-
原则：
- 样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。
- 样式不冲突，不会层叠
CSS层叠性最后的执行口诀： 长江后浪推前浪，前浪死在沙滩上。
8.2 CSS继承性
-
概念：
子标签会继承父标签的某些样式，如文本颜色和字号。
想要设置一个可继承的属性，只需将它应用于父元素即可。
简单的理解就是： 子承父业。
-
注意：
- 恰当地使用继承可以简化代码，降低CSS样式的复杂性。比如有很多子级孩子都需要某个样式，可以给父级指定一个，这些孩子继承过来就好了。
- 子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）
CSS继承性口诀： 龙生龙，凤生凤，老鼠生的孩子会打洞。
8.3 CSS优先级（重点）
-
概念：
定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时，
- 选择器相同，则执行层叠性
- 选择器不同，就会出现优先级的问题。
1. 权重计算公式
关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity（特殊性）
| 标签选择器 | 计算权重公式 |
|---|---|
| 继承或者 * | 0,0,0,0 |
每个元素（标签选择器，比如div{ }） |
0,0,0,1 |
每个类，伪类（比如.one{ }） |
0,0,1,0 |
每个ID（比如 #two{ }） |
0,1,0,0 |
| 每个行内样式 style="" | 1,0,0,0 |
| 每个!important 重要的 | ∞ 无穷大 |
- 值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。
- 关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity（特殊性）
- div {
color: pink!important;
}
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
3. 继承的权重是0
这个不难，但是忽略很容易绕晕。其实，我们修改样式，一定要看该标签有没有被选中。
1） 如果选中了，那么以上面的公式来计权重。谁大听谁的。
2） 如果没有选中，那么权重是0，因为继承的权重为0.
END
