复合选择器
1.后代选择器
外层标签写在前面，内层标签写在后面，中间用空格分隔。选择子孙后代
.info ul li{
color:red;
}
2.子元素选择器
子指的是亲儿子，不包含孙子 重孙子
div>strong{
color:pink;
}
3.交集选择器(不太常用)
既是p标签，又是.red类选择器
p.red{
color:red;
}
4.并集选择器
通常集体声明
p 和 span里面的颜色都是红色
p, span, .red{
color:red;
}
5.链接伪类选择器（重点）
用于向某些选择器添加特殊效果。比如给链接添加特殊效果，可以选择第1个或者第N个
/* 正常状态 */
a:link{
color: #333;
text-decoration: none;
}
/* 已经访问过得状态 */
a:visited{
color: red;
}
/* 鼠标经过状态 */
a:hover{
color: blue;
}
- 必须使用上面的顺序，不然会出现bug;
- 实际开发中 一般只是用正常状态和hover状态
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.nav a {
color: #333;
text-decoration: none;
}
.nav a:hover {
color: orange;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">手机</a>
</div>
<a href="#">没有妈妈的孩子像棵草</a>
</body>
标签显示模式
1.块级元素(block)
特点：
- 自己独占一行
- 高度，宽度，外边距以及内边距都可以控制
- 宽度默认是容器的100%（父级）
- 是一个容器以及盒子，里面可以放块级或者行内
常见的有
<div></div>
<ul></ul>
<p></p>
<h1></h1>
<table></table>
<ol></ol>
<li></li>
2.行内元素(inline)
特点：
- 相邻行内元素在一行上，一行可以显示多个
- 高，宽设置无效
- 默认宽度就是其本事内容宽度
- 行内元素只能容纳文本或者其他行内元素
<a href=""></a>
<span></span>
3.行内块级元素(inline-block)
这几个特殊的可以设置宽高和对齐属性
<img src="" alt="">
<input type="text">
<td></td>
3.标签显示模式转换
- 块转行内
display:inline - 行内转为块元
display:block - 块，行内 转行内块
display:inline-block
span {
/*把行内元素转换为块级元素*/
display: block;
width: 100px;
height: 100px;
background-color: pink;
}
div {
/*把块级元素转换为行内元素*/
display: inline;
width: 200px;
height: 200px;
background-color: purple;
}
a {
/*转换为 行内块元素*/
display: inline-block;
width: 80px;
height: 25px;
background-color: orange;
}
简易导航栏应用
image.png
分析:
3个链接有高度，有宽度，并且当鼠标移动到链接块上时候，变色。所以，这里我们需要将
<a>标签行内元素转换为行内块元素
<style>
/*1. 变化样式 有大小 一行显示 我们想到了 行内块元素*/
a {
/*一定要进行模式转换 行内块*/
display: inline-block;
width: 100px;
height: 30px;
background-color: pink;
/*可以让文字水平居中*/
text-align: center;
color: #fff;
text-decoration: none;
}
/*2. 鼠标经过 变化底色 和 文字的颜色*/
a:hover {
background-color: orange;
color: yellow;
}
</style>
行高
行高line-height的测量
image.png
-
如果是中文测量的话，直接上一行的底到下一行的底就是行高
1.单行文本垂直居中
image.png
行高= 上距离+内容高度+下距离
行高等于高度 文字垂直居中
<style>
a {
display: inline-block;
width: 100px;
height: 30px;
background-color: pink;
text-align: center;
color: #fff;
text-decoration: none;
line-height: 30px;
}
</style>
CSS背景
1.背景颜色
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 800px;
height: 800px;
background-color: pink;
}
</style>
</head>
<body>
<div>
1232131
</div>
</body>
2.背景图片
背景图片必须加url且背景图片的url不要加引号，默认背景是平铺
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 800px;
height: 800px;
background-color: pink;
background-image: url(images/3.jpg);
}
</style>
</head>
<body>
<div>
1232131
</div>
</body>
3.背景平铺
- 默认平铺
- 不平铺
background-repeat: no-repeat; - 横向平铺
background-repeat: repeat-x;
<style>
div{
width: 800px;
height: 800px;
background-color: pink;
background-image: url(images/3.jpg);
background-repeat: no-repeat;
}
</style>
4.背景位置重点
- 超大背景图片位置一般为
background-position: center top;
/*背景位置*/
/*background-position: x坐标 y坐标;*/
/*background-position: right top; 右上角*/
/*background-position: left bottom; 左下角*/
/*background-position: center center; 水平居中 垂直居中*/
/*则两个值前后顺序无关 因为是方位名词*/
/*background-position: center left; */
/*如果只指定了一个方位名词，另一个值默认居中对齐*/
/*background-position: left; */
5.背景附着
background-attachment:scroll | fixed背景是滚动的还是固定的
6.背景简写
严格按照以下顺序：背景颜色 背景图片地址 背景平铺 背景滚动 背景位置(平铺可以不写默认平铺)
background: #ccc ulr(images/sms.jpg) no-repeat fixed center top;
应用：
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<title>导航栏</title>
<style>
.nav{
text-align: center;
}
a {
display: inline-block;
text-decoration: none;
width: 120px;
height: 50px;
background-color: pink;
line-height: 50px;
color: white;
background: url(images/bg.png) no-repeat;
}
.nav :hover{
background: 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>
7.背景透明
background-color :rgba(0,0,0,0.3);
注：
最后的参数a是alpha透明度 取值范围0-1之间
我们习惯把0.3的0省略掉 这样写background-color :rgba(0,0,0,.3)
CSS三大特性
1.层叠性
从上至下执行，下面的代码会覆盖上面的代码；
相同会冲突，不同的样式不冲突
2.继承性
3.优先级（权重）
1）权重计算公式
计算公式.png
案例.png
网友评论