CSS3
1. CSS导入方式
优先级：就近原则
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css导入方式</title>
<!-- 2.内部样式 -->
<style>
h2{
color: aqua;
}
</style>
<!-- 3.外部样式-->
<link rel="stylesheet" href="css/style01.css">
</head>
<body>
<!--1.行内样式：在标签原始中，编写一个style属性-->
<h1 style="color: pink">我是标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
</body>
</html>
2. 选择器
2.1 基本选择器
优先级：id > class > 标签
2.1.1 标签选择器
会选择body下所有h1标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<style>
h1{
color: orange;
}
</style>
</head>
<body>
<h1>标签选择器</h1>
<h1>标签选择器</h1>
<h1>标签选择器</h1>
<h2>标签选择器</h2>
<h2>标签选择器</h2>
<h2>标签选择器</h2>
</body>
</html>
2.1.2 类选择器
会选择所有带有demo01类选择器的标签
可以复用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style>
.demo01{
color: pink;
}
.demo02{
color: blue;
}
</style>
</head>
<body>
<!--类选择器-->
<h1 class="demo01">类选择器</h1>
<h1 class="demo01">类选择器</h1>
<h1 class="demo02">类选择器</h1>
<h1 class="demo02">类选择器</h1>
</body>
</html>
2.2.3 id选择器
不可以复用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<style>
#demo01{
color: aqua;
}
#demo02{
color: orange;
}
.demo02{
color: pink;
}
#demo03{
color: blue;
}
h1{
color: blueviolet;
}
</style>
</head>
<body>
<!--类选择器必须保证全局唯一-->
<h1 id="demo01">id选择器1</h1>
<h1 id="demo02" class="demo02">id选择器2</h1>
<h1 class="demo02" id="demo03">id选择器3</h1>
<h1 class="demo02">id选择器4</h1>
<h1>id选择器5</h1>
</body>
</html>
2.2 层次选择器
2.2.1 后代自选择器：在某个元素后面
body 里面所有的p标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style>
body p{
color: blue;
}
</style>
</head>
<body>
<p>我是后代选择器</p>
<div>
<p>我是后代选择器</p>
</div>
</body>
</html>
2.2.2 子选择器
第一代的p标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子选择器</title>
<style>
body>p{
color: blue;
}
</style>
</head>
<body>
<p>我是子选择器</p>
<div>
<p>我是子选择器</p>
</div>
</body>
</html>
2.2.3 相邻兄弟选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相邻兄弟选择器</title>
<style>
.active + p{
color: blue;
}
</style>
</head>
<body>
<!-- 向下相邻，只有一个-->
<p class="active">相邻兄弟选择器</p>
<p>相邻兄弟选择器</p>
</body>
</html>
2.2.4 通用选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通用选择器</title>
<style>
.active~p{
color: blue;
}
</style>
</head>
<body>
<!-- 向下所有兄弟元素-->
<p class="active">通用选择器</p>
<p>通用选择器</p>
<p>通用选择器</p>
<p>通用选择器</p>
</body>
</html>
2.3结构伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>结构伪类选择器</title>
<style>
/*ul里的第一个选择器*/
ul li:first-child{
background-color: orange;
}
/*ul里的最后一个选择器*/
ul li:last-child{
background-color: pink;
}
/* 选择父元素里第一个元素（是p标签才生效）*/
p:nth-child(2){
background-color: blue;
}
/*选择父元素里第一个p标签*/
p:nth-of-type(1){
background-color: blueviolet;
}
</style>
</head>
<body>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
2.4 属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
.demo01 a{
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background-color: #2700ff;
text-align: center;
color: gainsboro;
line-height: 50px;
text-decoration: none;
margin-right: 5px;
}
/*选中带有id标签的a元素*/
/*a[id]{
}*/
a[id=first]{
background-color: blueviolet;
}
/*
=:绝对对于
*=：包含
^=:以...开头
$=:以...结尾
*/
/*a[class*=links]{
background-color: yellow;
}*/
a[href^="http"]{
background-color: brown;
}
</style>
</head>
<body>
<p class="demo01">
<a href="https://www.baidu.com" class="links item first" id="first">1</a>
<a href="" class="links item active" target="_blank" title="test">2</a>
<a href="../../resources/bd.jpg" class="links item">3</a>
<a href="../../html5/index.html" class="links item">4</a>
</p>
</body>
</html>
3. 字体样式
font-family:字体
font-size:字体大小
font-weight:粗细
color:字体颜色
4. 文本样式
color rgb rgba:颜色
text-align:center:居中对齐
text-indent:2em 缩进
line-height:行高（行高 = 块高：垂直居中）
vertical-align:middle 文本图片水平对齐
5. 文本阴影和超链接伪类
a:hover{}-->鼠标悬停
a:active{}-->鼠标按住未释放
a:link{}-->未访问
a:visited{}-->访问之后颜色
text-shadow{}-->阴影颜色 水平偏移 垂直偏移 阴影半径
6. 列表样式
list-style:none-->去掉圆点 circle-->空心圆 decimal-->数字 square-->正方形
7. 背景
background-color:pink;-->图片未显示时显示颜色
background-image:url("path");默认平铺
no-repeat-->不重复 repeat-x-->水平平铺 repeat-y-->垂直平铺
8. 渐变
background-color: #FFDEE9;
background-image: linear-gradient(0deg, #FFDEE9 0%, #B5FFFC 100%);
9. 盒子模型
margin:外边距
padding:内边距
border:边框
宽度 = 圆角边框半径：圆
9. 浮动
块级元素：h1-h6 div p ul...
行内元素：span a img strong...
10. 父级边框塌陷问题
- 增加父级元素的高度
#father{
height:800px;
}
- 增加一个空的div标签，清楚浮动
<div class="clear"></div>
.clear{
clear:both;
}
- overflow
父级元素加：
overflow:hidden;
- 父元素添加一个伪类(推荐)
#father:after{
cotent:‘’;
display:block;
clear:both;
}
11. 相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相对定位</title>
<style>
div{
width: 200px;
height: 180px;
font-size: 12px;
line-height: 40px;
}
.one{
background-color: #2700ff;
}
.two{
background-color: #2ed422;
}
/*相对于自己原来的位置偏移，原来位置保留*/
.three{
position: relative;
top: 30px;
background-color: #5716c1;
}
</style>
</head>
<body>
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</body>
</html>
12. 绝对定位
- 没有父级元素时，以浏览器为标准
- 原来位置不保留
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style>
div{
width: 200px;
height: 180px;
font-size: 12px;
line-height: 40px;
}
.one{
position: absolute;
top: 100px;
background-color: #2700ff;
}
.two{
position: absolute;
top: 300px;
background-color: #2ed422;
}
.three{
background-color: #5716c1;
}
</style>
</head>
<body>
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</body>
</html>
13. z-index
z-index:决定一个元素在文档中的层叠顺序