走进CSS3
学习视频来自B站,感谢狂神的分享:B站视频地址
CSS3菜鸟教程地址:CSS3
模板之家:http://www.cssmoban.com/
源码之家:https://www.mycodes.net/
飞冰:https://ice.work/
LayUI官网:layui
X-admin:官网地址
1.css简介
网页三要素:html(结构) + css(表现) + javascript(交互)
CSS:Cascading Style Sheets (层叠样式表)是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
版本 | 区别 |
---|---|
css1.0 | 只能美化基本属性,比如字体 |
css2.0 | DIV(块)+css,提出HTML与CSS代码分离,利于SEO |
css2.1 | 增加新特性:浮动、定位 |
css3.0 | 增加等新特:阴性、圆角、动画 |
Css优势:
- 内容与表现分离;样式丰富
- 网页结构表现统一,可以实现复用
- 利于SEO,容易被搜索引擎收录
2.导入css
如果CSS样式重复,优先级为:就近原则。还可以用@important提升优先级
3.css选择器
3.1基本选择器
选择器分为三大类:
1.标签选择器;2.类选择器;3.id选择器
选择器 | 作用 | 语法 |
---|---|---|
标签选择器 | 选择一类标签 | 标签名{} 如:p{ } |
类选择器 | 选择所有class属性一致的标签 | .类名{} 如.nameClass{} |
id选择器 | 全局唯一 | #id名{} 如:#userId{} |
优先级为:id选择器 > 类选择器 > 标签选择器
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*优先级顺序:
id选择器 > 类选择器 > 标签选择器*/
/*标签选择器:会选择本页面上的所有的这个标签元素*/
h1{ color:red; }
p{ font-size: 66px}
/*类选择器: .class的名称{}
可将多个标签归类,标签中class属性值相同即可。可以复用
*/
.class1{background-color: blue}
/*id选择器:#id名称{} */
#id1{ font-family: Algerian}
</style>
</head>
<body>
<h1 class="class1" id="id1">标签h1 -- 1</h1>
<h1 class="class1">标签h1 -- 2</h1>
<p class="class1">这是p标签</p>
</body>
3.2层次选择器
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*后代选择器:某个元素后面的所有级别该元素*/
body p{
background: red;
}
/*子选择器:某标签元素内的,第一代该元素*/
body > p{
background: #3cbda6;
}
/*相邻兄弟选择器:只有一个,相邻(向下)*/
.active + p{
background: #a13d30;
}
/*通用兄弟选择器:当前选中元素,向下所有兄弟元素*/
.active ~ p{
background: blueviolet;
}
</style>
</head>
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li> <p>p4</p> </li>
<li> <p>p5</p> </li>
<li> <p>p6</p> </li>
</ul>
<p>p7</p>
<p>p8</p>
</body>
3.3结构伪类选择器
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--避免使用,class,id选择器-->
<style>
/* ul 下的第一个子元素,且该元素必须为 li */
ul li:first-child{
background: #a13d30;
}
/*ul的最后一个子元素,且该元素必须为 li */
ul li:last-child{
background: red;
}
/*选中p1:定位到父元素,选择当前的第一个子元素
选择当前p元素的父级元素,选中父级元素的第一个子元素为p的
(同一层级第一个,且标签为 p 的元素)
*/
p:nth-child(1){
background: blue;
}
/* 选中当前元素的同一级别,第二个p元素
(按类型开始计数,第二个p)*/
p:nth-of-type(2){
background: yellow;
}
/* 鼠标悬停效果 */
a:hover{
background: black;
}
</style>
</head>
<body>
<!--<h1>h1</h1>-->
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<p>dddd</p>
<li>li3</li>
</ul>
<a href="">链接标签</a>
</body>
3.4属性选择器
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a{
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background: blue;
text-align: center;
color: gainsboro;
text-decoration: none;
margin-right: 5px;
font: bold 20px/50px Arial;
}
/*属性名,属性名 = 属性值(正则)
= 绝对等于
*= 包含这个元素
^= 以这个开头
$= 以这个结尾
*/
/*存在id属性的元素:a[]{}*/
a[id]{/*所有带id的a标签*/
background: yellow;
}
/*id=first的元素*/
a[id=first]{
background: blue;
}
/*class中有links的元素*/
a[class*=links]{
background: yellow;
}
/*选中href中以http开头的元素*/
a[href^=http]{
background: yellow;
}
/*选中href中以pdf结尾的*/
a[href$=pdf]{
background: yellow;
}
</style>
</head>
<body>
<p class="demo">
<a href="http://baidu.com" class="links item first" id="first">1</a>
<a href="" class="links item active" target="_blank" title="test">2</a>
<a href="images/123.html" class="links item">3</a>
<a href="images/123.png" class="links item">4</a>
<a href="images/123.jpg" class="links item">5</a>
<a href="abc" class="links item">6</a>
<a href="/a.pdf" class="links item">7</a>
<a href="/abc.pdf" class="links item">8</a>
<a href="abc.doc" class="links item">9</a>
<a href="abcd.doc" class="links item last">10</a>
</p>
</body>
4.美化网页
4.1 span标签
<!-- <span> 标签无实际作用,可以用来给特定元素、字体设置样式-->
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#title1{
font-size: 50px;
color:red
}
</style>
</head>
<body>
欢迎学习<span id="title1">Java</span>
</body>
4.2 字体&文本样式
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
font-family:字体
font-size:字体大小
font-weight:字体的粗细
color:字体颜色
text-decoration:underline、line-through、overline、none
水平对齐~ 参照物, a,b
img,span{
vertical-align: middle;
}
*/
/*
颜色:
单词:#FFFFFF
RGB:0~F ,rgb(0,255,255)
RGBA:A(透明度):0~1,rgba(0,255,255,0.9)
text-indent:段落首行缩进
line-height: 300px;
行高 和 块的高度一致,就可以上下居中
*/
body{
font-family:"Arial Black" ,楷体;
color: #a13d30;
}
h1{ font-size: 50px; }
.p1{ font-weight: lighter; }
</style>
</head>
<body>
<h1>故事介绍</h1>
<p class="p1"> 你好,这个世界 </p>
<p> 太阳每天都从东方升起!</p>
<p>
<img src="images/a.png" alt="">
<span>abcdefghijklmnabcdefghijklmn</span>
</p>
</body>
4.3 超链接伪类&阴影
/* 未访问的链接,就是默认颜色,不写也行 */
a:link {color: #FF0000}
/* 已访问的链接,点击之后的状态*/
a:visited {color: #00FF00}
/* 鼠标移动到链接上,鼠标悬浮的状态(经常用)*/
a:hover {color: #FF00FF}
/* 选定的链接,鼠标按住未释放的状态*/
a:active {color: #0000FF}
/* text-shadow: 阴影颜色,水平偏移,垂直偏移,阴影半径*/
#price{ text-shadow: #008800 20px -10px 2px; }
4.4列表
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#nav{
width: 300px;
background: darkgrey;
}
.title{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 35px;
background: red;
}
/*ul li
list-style:
none:去掉圆点
circle:空心圆
decimal:数字
spuare:正方形
*/
ul{
background: darkgrey;
}
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
}
a{
text-decoration: none;
font-size: 14px;
color: black;
}
a:hover{
color: orange;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="nav">
<h2 class="title">全部商品分类</h2>
<ul>
<li><a href="#">图书</a> <a href="#">音响</a> <a href="#">数字商品</a></li>
<li><a href="#">家用电器</a> <a href="#">手机</a> <a href="#">数码</a></li>
<li><a href="#">电脑</a> <a href="#">办公</a></li>
<li><a href="#">家居</a> <a href="#">家装</a> <a href="#">厨具</a></li>
<li><a href="#">服饰鞋帽</a> <a href="#">个护化妆</a></li>
<li><a href="#">礼品箱包</a> <a href="#">中标</a> <a href="#">珠宝</a></li>
<li><a href="#">食品饮料</a> <a href="#">保健食品</a></li>
<li><a href="#">彩票</a> <a href="#">旅行</a> <a href="#">充值</a> <a href="#">票务</a></li>
</ul>
</div>
</body>
4.5背景图片
div{
width: 1000px;
height: 700px;
border: 1px solid red;
background-image: url("images/tx.jpg");
/*默认是全部平铺的 repeat*/
}
.div1{ /* 横向平铺 */
background-repeat: repeat-x;
}
.div2{ /* 纵向平铺 */
background-repeat: repeat-y;
}
.div3{ /* 不平铺 */
background-repeat: no-repeat;
}
4.6渐变
body{
background-color: #D9AFD9;
background-image: linear-gradient(0deg, #D9AFD9 0%, #97D9E1 100%);
}
4.7盒子模型与边距
margin:外边距
padding:内边距
border:边框
盒子的整体大小:margin + border + padding + 内容宽度
<style>
/*body总有一个默认的外边框margin:0,常见的*/
/*body{
margin: 0;
padding: 0;
text-decoration: none;
}*/
/*border:粗细,样式,颜色*/
#box{
width: 300px;
border: 1px solid red;
}
h2{
font-size: 16px;
background-color: cornflowerblue ;
line-height: 30px;
margin: 0px;
}
form{background: #008800;}
div:nth-of-type(1) input{border: 3px solid black;}
div:nth-of-type(2) input{border: 3px dashed yellow;}
div:nth-of-type(3) input{border: 2px dashed green;}
</style>
<div id="box">
<h2>会员登录</h2>
<form action="#">
<div>
<span>用户名:</span>
<input type="text">
</div>
<div>
<span>密码:</span>
<input type="password">
</div>
<div>
<span>邮箱:</span>
<input type="text">
</div>
</form>
</div>
4.8圆角边框
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*圆角边框:border-radius
四个参数:左上 右上 右下 左下(顺时针)
对应圆形边框的 -- 半径
边框阴影:box-shadow
*/
div{
width: 100px;
height: 100px;
border: 10px solid red;
/* 宽度+边框(100+10*2)/2 = 60 */
border-radius: 60px;
box-shadow: 10px 10px 100px yellow;
}
</style>
</head>
<body>
<div></div>
</body>
4.9 居中和阴影
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 居中: margin:0 auto
要求:块元素,块元素有固定宽度*/
img{
border-radius: 50px;
box-shadow: 10px 10px 100px yellow;
}
</style>
</head>
<body>
<div>
<div style="width: 500px;display: block;text-align: center ">
<div>
<img src="img/1.jpg" alt="">
</div>
</div>
</div>
4.10浮动
display属性:
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
display属性值:
block 块元素
inline 行内元素
inline-block 是块元素,但是可以内联,在一行
none 隐藏
float属性值:
right 右浮动
left 左浮动
clear属性值:
right 右侧不允许有浮动元素
left 左侧不允许有浮动元素
both 两侧不允许有浮动元素
*/
div{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
span{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
</style>
</head>
<body>
<div>div块元素</div>
<span>span行内元素</span>
</body>
QQ会员导航栏
<head>
<meta charset="UTF-8">
<title>QQ会员</title>
<style>
*{
padding:0;
margin: 0;
}
a{
text-decoration: none;
}
.nav-header{
height: 90px;
width: 100%;
background: rgba(0,0,0,.6);
}
.head-contain{
width: 1180px;
height: 90px;
margin: 0 auto;
text-align: center;
}
.top-logo,.top-nav,.top-nav li,.top-right{
height: 90px;
display: inline-block;
vertical-align: top;
}
.top-nav{
margin: 0 48px;
}
.top-nav li{
line-height: 90px;
width: 90px;
}
.top-nav li a{
display: block;
text-align: center;
font-size: 16px;
color: #fff;
}
.top-nav li a:hover{
color: blue;
}
.top-right a{
display: inline-block;
font-size: 16px;
text-align: center;
margin-top: 25px;
border-radius: 35px;
}
.top-right a:first-of-type{
width: 93px;
height: 38px;
line-height: 38px;
color: #fad65c;
border: 1px #fad65c solid;
}
.top-right a:first-of-type:hover{
color: #986b0d;
background: #fad65c;
}
.top-right a:last-of-type{
width: 140px;
height: 40px;
font-weight: 700;
line-height: 40px;
background: #fad65c;
color: #986b0d;
}
.top-right a:last-of-type:hover{
background: #fddc6c;
}
</style>
</head>
<body>
<div class="wrap">
<!--头部-->
<header class="nav-header">
<div class="head-contain">
<a href="" class="top-logo"><img src="QQ.png" width="145" height="90" /></a>
<nav class="top-nav">
<ul>
<li><a href="">功能特权</a> </li>
<li><a href="">游戏特权</a> </li>
<li><a href="">生活特权</a> </li>
<li><a href="">会员特权</a> </li>
<li><a href="">成长体系</a> </li>
<li><a href="">年费专区</a> </li>
<li><a href="">超级会员</a> </li>
</ul>
</nav>
<div class="top-right">
<a href="">登录</a>
<a href="">开通超级会员</a>
</div>
</div>
</header>
</div>
</body>
4.11父级边框塌陷问题
父级边框塌陷,是指浮动超出了边框外围
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="father">
<div class="layer01"><img src="images/1.png" alt=""></div>
<div class="layer02"><img src="images/2.png" alt=""></div>
<div class="layer03"><img src="images/3.png" alt=""></div>
<div class="layer04">
浮动的盒子可以向左浮动,也可以向右浮动,知道它的外边缘碰到包含或另一个浮动盒子为止
</div>
<div class="clear"></div>
</div>
</body>
</html>
div{
margin: 10px;
padding: 5px;
}
#father{
border: 1px #000 solid;
height: 800px;
}
.layer01{
border: 1px #F00 dashed;
display: inline-block;
float: left;/*向左浮动*/
}
.layer02{
border: 1px #00F dashed;
display: inline-block;
float: left;
}
.layer03{
border: 1px #060 dashed;
display: inline-block;
float: right;
}
.layer04{
border: 5px #666 dashed;
font-size: 12px;
line-height: 23px;
display: inline-block;
float: right;
clear: left;
}
方法1:增加父级元素高度
#father{
border: 1px #000 solid;
height: 800px;
}
方法2:增加一个空的div(class=“clear”)标签,清除浮动
/*
clear:right;右侧不允许有浮动元素
clear:left; 左侧不允许有浮动元素
clear:both; 两侧不允许有浮动元素
clear:none;
*/
.clear{
clear: both;
margin: 0;
padding: 0;
}
方法3:overflow
/*在父级元素中增加一个属性: overflow: hidden;*/
div{
margin: 10px;
padding: 5px;
overflow: hidden;
}
方法4:父类添加一个伪类:after
#father:after{
content: '';
display: block;
clear: both;
}
小结:
- 浮动元后面增加空div : 简单,代码中尽量避免空div
- 设置父元素的高度 : 简单,元素假设有了固定的高度,就会被限制
- overflow : 简单,下拉的一些场景避免使用
- 父类添加一个伪类:after : 写法复杂,但没有副作用,推荐使用!
display与float对比 :
display:方向不可以控制
float:浮动起来会脱离标准文档流,所以要解决父级边框塌陷的问题
4.12定位 position
分类 | 描述 |
---|---|
相对定位 | position: relative; 相对于自己原来的位置进行偏移~ 相对于原来的位置,进行指定的偏移,相对定位的话,他仍然在标准文档流中,原来的位置会被保留。 |
绝对定位 | position: absolute; 1、没有父级元素定位的前提下,相对于浏览器定位 2、假设父级元素存在定位,我们通常会相对于父级元素进行偏移 3、在父级元素范围内 |
固定定位 | position: fixed; 相对于展示页面定位,页面滚动条无关(“返回顶部”按钮) |
偏移量 | top: -20px; 向上偏移20px left: 20px; 向右偏移20 bottom: -20px; 向下偏移20px right: 20px; 向左偏移20px |
相对定位 |
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 相对定位:
position :relative; 相对于自己原来的位置进行偏移~
-->
<style>
body{
padding: 20px;
}
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid #666;
}
#first{
background-color: #3cbda6;
border: 1px solid #b27530;
position: relative;/*相对定位 上下左右*/
top: -20px;/*向上偏移20px*/
left: 20px;/*向右偏移20*/
}
#second{
background-color: #0000FF;
border: 1px solid #255066;
}
#third{
background-color: #008800;
border: 1px solid #1c6615;
position: relative;/*相对定位 上下左右*/
bottom: -20px;/*向下偏移20px*/
right: 20px;/*向左偏移20px*/
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
绝对定位
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid #666;
padding: 0;
position: relative;/*父级相对定位*/
}
#first{
background-color: #3cbda6;
border: 1px solid #b27530;
}
#second{
background-color: #0000FF;
border: 1px solid #255066;
/*父级有相对定位,则自己元素相对于父级进行绝对定位
如果父级元素无定位属性,则相对浏览器定位*/
position: absolute;
left: 100px;
top: 20px;
}
#third{
background-color: #008800;
border: 1px solid #1c6615;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
固定定位
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
height: 10000px;
}
div:nth-of-type(1){/*绝对定位:相对于浏览器*/
width: 100px;
height: 100px;
background: red;
position: absolute;
right: 0;
bottom: 0;
}
div:nth-of-type(2){/*fixed:固定定位*/
width: 50px;
height: 50px;
background: yellow;
position: fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
练习题:实现如下效果:
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 300px;
height: 300px;
padding: 10px;
border: 2px solid red;
}
a{
width: 100px;
height: 100px;
text-decoration: none;
background-color: #5c8b58;
line-height: 100px;
text-align: center;
color: white;
display: block;
}
a:hover{
background: #8d23a1;
}
.a2,.a4{
position: relative;
left: 200px;
top: -100px;
}
.a5{
position: relative;
left: 100px;
top: -300px;
}
</style>
</head>
<body>
<div id="box">
<a class="a1" href="#">链接1</a>
<a class="a2" href="#">链接2</a>
<a class="a3" href="#">链接3</a>
<a class="a4" href="#">链接4</a>
<a class="a5" href="#">链接5</a>
</div>
4.13 z-index & opacity
z-index属性:默认为0(最小), 最高无限:999
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#content{
width: 600px;
padding: 0px;
margin: 0px;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px #000 solid;
}
/*去除padding、margin、原点*/
ul,li{
padding: 0px;
margin: 0px;
list-style-type: none;
}
/*父级元素相对定位*/
#content ul{
position: relative;
}
.tipText,.tipBg{
position: absolute;
width: 333px;
height: 25px;
top: 320px;
}
.tipText{
color: white;
/*z-index: 0;*/
}
.tipBg{
background: black;
opacity: 0.5; /*背景透明度,浏览器通用*/
}
</style>
</head>
<body>
<div id="content">
<ul>
<li><img src="css.jpg" alt=""></li>
<li class="tipText">css学习:z-index</li>
<li class="tipBg"></li>
<li>时间:2022-04-18</li>
<li></li>
</ul>
</div>
</body>
4.14 动画
css3 动画网址:https://www.runoob.com/css3/css3-animations.html
canvas动画模板:http://www.bootstrapmb.com/chajian/canvas
canvas动画模板:https://www.cnblogs.com/html5tricks/p/9204735.html
卡巴斯基检测网站:https://cybermap.kaspersky.com/