本文主要内容是关于CSS3.0的使用,内容涵盖有选择器，网页美化，盒子模型，以及浮动定位等知识。如果你能坚持看完这篇文章,相信你一定会有所收获。 在看这篇文章之间，需要有HTML的知识基础。在此提供HTML文章，如有需要，可供查阅HTML教程
初级入门
CSS概述
版本:CSS3.0
CSS(Cascading Style Sheet层叠级联样式表)
CSS选择器
美化网页(文字,阴影,超链接,列表,渐变)
盒子模型
浮动
定位
网页动画(特效效果)
CSS的优势:
内容和表现的分离网页结构表现统一,可以实现复用样式丰富使用独立与HTML的CSS文件利用SEO,容易被收索引擎收录
CSS导入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的网页
</title>
</head>
<style>
h1{
color:red;
}
</style>
<link rel="stylesheet" href="css/style.css">
<style>
@import url(css/style.css);
</style>
<body>
<h1>标题1
</h1>
<h2 style="color:black">标题2
</h2>
<h3>标题3
</h3>
</body>
</html>
选择器
基本选择器
作用:选择页面中的某一个或者某一类元素
基本选择器优先级(id选择器>class选择器>标签选择器)
标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签选择器
</title>
<style>
h1{
color: rgba(84, 177, 147, 0.2);
}
</style>
</head>
<body>
<h1>标签1
</h1>
</body>
</html>
类选择器 class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类选择器
</title>
<style>
.key1{
color: rgba(33, 167, 106, 0.13);
}
.key2{
color: #bf2c1b;
}
</style>
</head>
<body>
<h1 class="key1">标题1
</h1>
<h1 class="key2">标题2
</h1>
</body>
</html>
id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ID选择器
</title>
<style>
#key1{
color: #0c804c;
}
</style>
</head>
<body>
<h1 id="key1">标题1
</h1>
</body>
</html>
层次选择器
后代选择器:在某个元素的后面
/*后代选择器*/
body p{
background:red;
}
子选择器:某个元素的后一代
/*子选择器*/
body>p{
background:red;
}
相邻兄弟选择器:同辈,只有一个(相邻向下的那个)
/*相邻兄弟选择器*/
.key +p {
background:red;
}
通用选择器:同辈,当前选中元素向下的所有兄弟元素
/*通用选择器*/
.key~p{
background:red;
}
测试代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层次选择器
</title>
<style>
body p{
background:red;
}
body>p{
background:red;
}
.key +p {
background:red;
}
.key~p{
background:red;
}
</style>
</head>
<body>
<p>p1
</p>
<p class="key">p2
</p>
<p>p3
</p>
<ul>
<li>
<p>p4
</p>
</li>
<li>
<p>p5
</p>
</li>
<li>
<p>p6
</p>
</li>
</ul>
</body>
</html>
结构伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>结构伪类选择器
</title>
<style>
ul li:first-child{
background:red;
}
ul li:last-child{
background:blue;
}
p:nth-child(1){
background:yellow;
}
p:nth-of-type(2){
background:purple;
}
</style>
</head>
<body>
<p>p1
</p>
<p>p2
</p>
<p>p3
</p>
<ul>
<li>l1
</li>
<li>l2
</li>
<li>l3
</li>
</ul>
</body>
</html>
属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器
</title>
<style>
a[id="first"]{
background:red;
}
a[class*="345"]{
background:yellow;
}
a[href*="http"]{
background:purple;
}
a[href$="cn"]{
background:blue;
}
</style>
</head>
<body>
<p class="key">
<a href="../基本选择器/标签选择器.html" class="123" id="first">1
</a>
<a href="../基本选择器/ID选择器.html" class="12345" target="_blank" title="test">2
</a>
<a href="../层次选择器/层次选择器.html" class="2345">3
</a>
<a href="https://www.baidu.com" >4
</a>
<a href="https://www.baidu.cn" >5
</a>
</p>
</body>
</html>
美化网页
字体样式
span标签:重点要突出的字.可以使用span标签套起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>span标签</title>
</head>
<style>
#key{
font-size:30px;
}
</style>
<body>
hello <span id ="key">world!</span>
</body>
</html>
字体,大小,粗细,颜色,样式,行高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体样式
</title>
<style>
p{
color: red;
font-family: Arial, 楷体;
font-size: 20px;
font-weight: lighter;
}
h1{
font: oblique lighter 10px/10px 楷体;
}
</style>
</head>
<body>
<h1>故事简介
</h1>
<p>If you were a teardrop;In my eye,For fear of losing you,I would never cry.And if the golden sun,Should cease to shine its light,Just one smile from you,Would make my whole world bright.
</p>
</body>
</html>
文本样式
颜色,文本对齐方式,首行缩进,行高,装饰,文本图像居中对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本样式
</title>
<style>
h1{
color:rgba(0,255,255,0.8);
text-align: center ;
text-decoration:underline;
}
h2{
text-indent:2em;
background:red;
line-height: 100px;
}
img,span{
vertical-align:middle;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<h1>故事简介
</h1>
<h2>hello world
</h2>
<p>
<img src="..\..\resources\image\1.png" alt="loading..">
<span> If you were a teardrop;In my eye,For fear of losing you,I would never cry.And if the golden sun,Should cease to shine its light,Just one smile from you,Would make my whole world bright.
</span>
</p>
<a href="https://www.baidu.com" target="_blank">百度
</a>
</body>
</html>
超链接伪类和文本阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接伪类
</title>
<style>
a{
text-decoration: none;
}
a:link{
color:yellow;
}
a:hover{
color:red;
}
a:active{
color:blue;
}
a:visited{
color:green;
}
#price{
text-shadow: gray 10px 10px 1px;
}
</style>
</head>
<body>
<a href="#">
<img src="../../resources/image/2.png" alt="loading..">
</a>
<p>
<a href="#">码出高效
</a>
</p>
<p>
<a href="#">杨冠宝
</a>
</p>
<p id="price">
$99
</p>
</body>
</html>
列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表样式
</title>
<style>
ul li{
list-style: none;
}
</style>
</head>
<body>
<p>列表
</p>
<ul>
<li>1.1
</li>
<li>1.2
</li>
<li>1.3
</li>
<li>1.4
</li>
</ul>
</body>
</html>
背景和渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景
</title>
<style>
div{
width:1000px;
height:800px;
border:1px solid red;
}
.div1{
background-image: url(../../resources/image/1.png);
}
.div2{
background-image: url(../../resources/image/1.png);
background-repeat:no-repeat;
background-position: 100px 100px;
}
.div3{
background: red url("../../resources/image/1.png") 200px 100px no-repeat;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
渐变调色的网站:https://www.grabient.com
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>渐变
</title>
<style>
body{
background-color: #FAACA8;
background-image: linear-gradient(19deg, #FAACA8 0%, #DDD6F3 100%);
}
</style>
</head>
<body>
</body>
</html>
盒子模型
组成
margin:外边距border:边距–边框的粗细样式,颜色padding:内边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型
</title>
<style>
#box{
height: 140px;
width:300px;
margin:0px 100px 50px 200px;
padding:1px ;
border: 1px solid black;
}
div:nth-of-type(1) input{
border: 3px solid gray;
}
div:nth-of-type(2) input{
border: 3px dashed burlywood;
}
h2{
text-align: center;
line-height: 30px;
}
</style>
</head>
<body>
<div id="box">
<h2>会员登录
</h2>
<form action="#">
<div>
<span>用户名:
</span>
<input type="text">
</div>
<div>
<span>密码:
</span>
<input type="text">
</div>
</form>
</div>
</body>
</html>
圆角边框和阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆角边框和阴影
</title>
<style>
div{
width:100px;
height:100px;
border:10px solid red;
border-radius:100px 100px ;
box-shadow: gray 10px 10px 2px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
浮动
diplay和float
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动
</title>
<style>
#key{
width:100px;
height:100px;
border:1px solid red;
display: inline-block;
}
span{
width:100px;
height:100px;
border:1px solid red;
display: inline-block;
}
.key{
border:1px solid black;
width:1000px;
height:500px;
}
.key1{
border:1px dashed red;
display:inline-block;
float:right;
}
.key2{
border:1px dashed red;
display:inline-block;
float:right;
}
.key3{
border:1px dashed red;
display:inline-block;
float:right;
}
</style>
</head>
<body>
<div id="test">块元素
</div>
<span>行内元素
</span>
<hr/>
<div class="key">
<div class="key1"><img src="..\..\resources\image\1.png" alt="loading.."></div>
<div class="key2"><img src="..\..\resources\image\2.png" alt="loading.."></div>
<div class="key3">浮动的文本
</div>
</div>
</body>
</html>
父级边框塌陷问题
增加父级元素的高度(元素设置了固定的高度,就会有限制)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动
</title>
<style>
.key{
border:1px solid black;
width:1000px;
height:500px;
}
.key1{
border:1px dashed red;
display:inline-block;
float:right;
}
.key2{
border:1px dashed red;
display:inline-block;
float:right;
}
.key3{
border:1px dashed red;
display:inline-block;
float:right;
}
</style>
</head>
<body>
<div class="key">
<div class="key1"><img src="..\..\resources\image\1.png" alt="loading.."></div>
<div class="key2"><img src="..\..\resources\image\2.png" alt="loading.."></div>
<div class="key3">浮动的文本
</div>
</div>
</body>
</html>
增加一个空的div标签,清除浮动()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动
</title>
<style>
.key{
border:1px solid black;
}
.key1{
border:1px dashed red;
display:inline-block;
float:right;
}
.key2{
border:1px dashed red;
display:inline-block;
float:right;
}
.key3{
border:1px dashed red;
display:inline-block;
float:right;
}
.clear{
clear:both;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div class="key">
<div class="key1"><img src="..\..\resources\image\1.png" alt="loading.."></div>
<div class="key2"><img src="..\..\resources\image\2.png" alt="loading.."></div>
<div class="key3">浮动的文本
</div>
<div class="clear"></div>
</div>
</body>
</html>
overflow(在父级元素中添加一个overfloat:hidden)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>overflow
</title>
<style>
.key{
border:1px solid black;
overflow:hidden
}
.key1{
border:1px dashed red;
display:block;
}
.key2{
border:1px dashed red;
display:block;
}
.key3{
border:1px dashed red;
display:block;
}
</style>
</head>
<body>
<div class="key">
<div class="key1"><img src="..\..\resources\image\1.png" alt="loading.."></div>
<div class="key2"><img src="..\..\resources\image\2.png" alt="loading.."></div>
<div class="key3">浮动的文本
</div>
</div>
</body>
</html>
父类中添加一个伪类:after
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>after
</title>
<style>
.key{
border:1px solid black;
}
.key:after{
content:'';
display:block;
clear:both;
}
.key1{
border:1px dashed red;
display:block;
float:left;
}
.key2{
border:1px dashed red;
display:block;
float:right;
}
.key3{
border:1px dashed red;
display:block;
float:left;
}
</style>
</head>
<body>
<div class="key">
<div class="key1"><img src="..\..\resources\image\1.png" alt="loading.."></div>
<div class="key2"><img src="..\..\resources\image\2.png" alt="loading.."></div>
<div class="key3">浮动的文本
</div>
</div>
</body>
</html>
定位
相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相对定位
</title>
<style>
div{
margin:10px;
padding:5px;
font-size:12px;
line-height:25px;
}
#father{
border: 1px solid #0c804c;
}
#first{
border:1px dashed #bf2c1b;
background-color:red;
position:relative;
top:-20px;
}
#second{
border:1px dashed #DDD6F3;
background-color: #00ff19;
position:relative;
bottom:-20px;
}
#third{
border:1px dashed #FAACA8;
background-color:blue;
position:relative;
right:-20px;
}
</style>
</head>
<body>
<div id = "father">
<div id ="first">第一个盒子
</div>
<div id ="second">第二个盒子
</div>
<div id ="third">第三个盒子
</div>
</div>
</body>
</html>
绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位
</title>
<style>
div{
margin:10px;
padding:5px;
font-size:12px;
line-height:25px;
}
#father{
border: 1px solid #0c804c;
position:relative;
}
#first{
border:1px dashed #bf2c1b;
background-color:red;
position:absolute;
right:-30px;
}
#second{
border:1px dashed #DDD6F3;
background-color: #00ff19;
}
#third{
border:1px dashed #FAACA8;
background-color:blue;
}
</style>
</head>
<body>
<div id = "father">
<div id ="first">第一个盒子
</div>
<div id ="second">第二个盒子
</div>
<div id ="third">第三个盒子
</div>
</div>
</body>
</html>
固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定定位
</title>
<style>
body{
height:1000px;
}
div:nth-of-type(1){
width:100px;
height:100px;
background:#63b497;
position:absolute;
right:0px;
bottom:0px;
}
div:nth-of-type(2){
width:50px;
height:50px;
background:#FAACA8;
position:fixed;
right:0px;
bottom:0px;
}
</style>
</head>
<body>
<div>绝对定位
</div>
<div>固定定位
</div>
</body>
</html>
图层z-index
图层最低为0层次
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>z-index
</title>
<style>
div:nth-child(1){
padding: 0px;
margin:0px;
overflow:hidden;
font-size:12px;
line-height:25px;
width:400px;
height:400px;
border:2px solid #FAACA8;
}
ul,li{
padding:0px;
margin:0px;
list-style: none;
}
ul:nth-of-type(1){
position:relative;
}
li:nth-of-type(3),li:nth-of-type(2){
position:absolute;
width:400px;
height: 25px;
bottom:54px;
}
li:nth-of-type(2){
color:white;
z-index:1;
}
li:nth-of-type(3){
background:#FAACA8;
opacity:0.5;
}
</style>
</head>
<body>
<div>
<ul>
<li><img src="../../resources/image/1.png" alt="loading.."></li>
<li>学习java
</li>
<li></li>
<li>时间:2020-1-1
</li>
<li>地点:江苏南京
</li>
</ul>
</div>
</body>
</html>
说到最后
附上本文章的思维导图CSS思维导图本文章也可以配合下面的视频链接（该视频是B站的UP主 遇见狂神说 录制，有兴趣的可以关注这个博主，强烈推荐）。CSS视频如果这篇文章对你有所帮助，希望你能点赞，留言，加关注哦。
