css
HTML+CSS+JavaScrip
结构+表现+交互
什么是css
如何学习
- css是什么
- css怎么用(快速入门)
- css选择器(重点+难点)
- 美化网页(文字,阴影.超链接,列表,渐变....)
- 盒子模型
- 浮动
- 定位
- 网页动画(特效效果)
1.1什么是css
Cascading Style Sheet 层叠级联样式表
css：表现（美化网页）
字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动....
1.2发展史
css1.0
css2.0 DIV（块）+CSS、，HTML与css结构分离的思想，网页变得简单SEO
css2.1 浮动，定位
css3.0 圆角，阴影，动画..浏览器兼容性
1.3快速入门
style
基本入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
style可以编写css的代码,每一个声明最好使用分号结尾
语法:选择器{
声明1;
声明2;
}
-->
<style>
h1{
color: red;
}
</style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
建议使用这种规范
css的优势
- 内容和表现分类
- 网页结构表现统一,可以实现复用
- 样式十分的丰富
- 建议使用独立于html的css文件
- 利用SEO,容易被搜索引擎收录
css的三种导入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 内部样式-->
<link rel="stylesheet" href="style.css">
<style>
h1{
color: aliceblue;
}
</style>
</head>
<body>
<!--优先级 就近原则-->
<!--行内样式:在标签元素中编写一个style属性,编写样式即可-->
<h1>我是标题</h1>
</body>
</html>
2.选择器
作用:选择页面上的某一或是某一类元素
2.1基本选择器
- 标签选择器:选择一类标签 标签{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 标签选择器,会选择这个标签的所有元素-->
<style>
h1{
color: #ff0000;
background: #ff4a4d;
border-radius: 24px;
}
p{
font-size:90px;
}
</style>
</head>
<body>
<h1>欢迎你</h1>
<h1>范子义</h1>
<p>狂神说java</p>
</body>
</html>
- 类选择器 class:选中所有class属性一致的标签 .类名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 类选择器的格式 .class的名称
好处,可以多个标签归类,是同一个class,可以复用
-->
<style>
.王刚{
color: #cb3a3a;
}
</style>
</head>
<body>
<h1 class="王刚">标题1</h1>
<h1 class="王振明">标题2</h1>
<h1 class="范子义" >标题3</h1>
<p class="王刚">王铁</p>
</body>
</html>
- id选择器 :全局唯一 #id名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- id选择器必须遵循全局唯一
#id名称{}
优先级:不遵循就近原则
优先级 ID选择器>类选择器>标签选择器
-->
<style>
#王刚{
color: #a80202;
}
#义{
color: #42e028;
}
.accordion{
color: rgba(42, 84, 147, 0.67);
}
</style>
</head>
<body>
<h1 id="王刚">我是王刚1</h1>
<h1 id="义">我是王刚2</h1>
<h1 class="accordion">我是王刚3</h1>
<h1 class="accordion">我是王刚4</h1>
</body>
</html>
优先级:id>class>标签
2.2层次选择器
1.后代选择器:在某个元素的后面
/*后代选择器
body p{*/
/* background: #42e028;*/
/*}*/
2.子选择器,一代,儿子
/*子选择器
body >p{*/
/* background: rgba(11, 243, 15, 0.99);*/
/*}*/
3.相邻兄弟选择器
/*相邻兄弟选择器(只有一个,相邻,向下)
.子义+p{*/
/* background: indianred;*/
/*}*/
4.通用选择器
/*兄弟选择器(选择当前类,和下一个类)
.子义~p{*/
/* background: #105090;*/
/*}*/
结构伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* ul的第一个子元素 */
ul li:first-child{
background: red;
}
/*ul的最后一个子元素*/
ul li:last-child{
background: rgba(168, 2, 2, 0.56);
}
</style>
</head>
<body>
<p>p1</p>
<p class="子义">p2</p>
<p>p3</p>
<ul>
<li><p>p4</p></li>
<li><p>p5</p></li>
<li><p>p5</p></li>
</ul>
</body>
</html>
属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a{
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background: red;
text-align: center;
color: gainsboro;
text-decoration: none;
margin-right: 5px;
font: bold 20px/50px Arial;
}
/*存在id的属性元素
a[id=first]{
background: #42e028;
}*/
/* 存在class的元素
a[class]{
background: #6d1919;
}*/
/* class中存在links的元素
a[class *= links]{
background: gainsboro;
}*/
/* a标签中以http开头的
a[href ^= http]{
background: #1762ad;
}*/
a[class $= e]{
background: aqua;
}
</style>
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="links item first" id="first">1</a>
<a href=""class="links item active" target="_blank">2</a>
<a href="images/123.jpg" class="links item"> 3 </a>
<a class="links item">4</a>
<a href="images/123.png" class="links item">5</a>
<a class="links item>">6</a>
<a href=""class=" item">7</a>
<a href=""class="links item">8</a>
<a href=""class="links item">9</a>
<a href=""class="links item">10</a>
</body>
</html>
决对值 用 =
包含用 *=
开头用 ^=
结尾用 $=
3.美化网页元素
3.1为什么要美化网页
- 有效的传递页面信息
- 美化网页,页面漂亮,才能吸引用户
- 凸显页面的主题
- 提高用户的体验
span标签:重点使用的标签用span标签套起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 字体风格-->
<style>
#title1{
font-size: 90px ;
color: rgba(0, 254, 34, 0.99);
}
p{
font: 100px / 300px "楷体";
}
</style>
</head>
<body>
我是 <span id="title1">范子义</span>
<p>sadfasdl;sdlafL;SKGL;SDFGDSFG</p>
</body>
</html>
font- family:字体
font-size:字体大小
font-weight:字体粗细
color:字体颜色
3.2文本样式
- 颜色 color rgb rgba
- 文本的对齐方式 text-align-center
- 首行缩进 text-indent-2em
- 行高lin-height
- 装饰text-decoration
- 文本图片水平对齐:vertical-align:middle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 文本
颜色 color: rgba(49, 102, 168, 0.3);
文本居中:text-align: center;
首行缩进:text-indent: 2em;
文本高度: line-height: 50px;
文本高度: height: 50px;
背景颜色设置:background: rgba(255, 56, 4, 0.72);
-->
<style>
h1 {
color: rgba(49, 102, 168, 0.3);
text-align: center;
}
.p1 {
text-indent: 2em;
line-height: 50px;
background: rgba(255, 56, 4, 0.72);
}
/* 下划线*/
.l1{
text-decoration: underline;
}
/*上划线*/
.l2{
text-decoration: overline;
}
/*中划线*/
.l3{
text-decoration: line-through;
}
</style>
</head>
<body>
<h1>故事介绍</h1>
<p class="l1">123132</p>
<p class="l2">123132</p>
<p class="l3">123132</p>
<p class="p1">年来，眉州东坡从一家小小的酒楼，发展成为旗下拥有眉州东坡酒楼，眉州小吃，王家渡火锅3个子品牌，全球拥有111家分店的大型餐饮企业，年营业额超过20亿元。其间，眉州东坡经历3次成功转型，从最初传统的酒楼，到酒楼、小吃、火锅多品牌全产业链发展，再到进入Shopping Mall，开设小而美的小店，成为时下商圈、写字楼、社区最火的餐厅。</p>
<p>提到眉州东坡的成功秘诀，眉州东坡集团董事长王刚总结道“就一句话，学出来的!”眉州东坡19年一路走来，就是一个学习的过程：一开始，根据自己的经验，摸索着学;之后王刚夫妇俩“你清华，我北大”，共同走进大学去学;同时还向行</p>
</body>
</html>
3.4阴影
#price{
/*text-shadow 阴影颜色，水平偏移，垂直偏移，阴影大小*/
text-shadow: aqua 10px 10px 1px;
}
3.5超链接伪类
正常情况下 a：hover
/* a标签悬停操作*/
a:hover{
color: #e21010;
font-size: 50px;
}
/*去除下划线*/
a{
text-decoration: none;
}
3.6列表样式练习
<!DOCTYPE html>
<html lang="en">
<head lang="en">
<meta charset="UTF-8">
<title>列表样式</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="子义">
<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> <a href="#"></a></li>
<li><a href="#">家具</a> <a href="#">家装</a> <a href="#">厨具</a></li>
<li><a href="#">服饰鞋帽</a> <a href="#">个人化妆</a> </a></li>
<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> <a href="#">充值</a> <a href="#">票务</a></li>
</ul>
</div>
</body>
</html>
.title{
font-size: 18px;
background: #0044ff;
text-indent: 2em;
background: red url("images/MasterYi.png") 230px 10px no-repeat;/* 添加照片*/
}
#子义{
background: antiquewhite;/* 添加字体样式*/
width: 300px;
}
ul li{
list-style: none;/* 去掉装饰*/
height: 2em;/* 宽度*/
background: rebeccapurple url("images/MasterYi.png") 200px 10px no-repeat;/* 添加照片*/
}
a{
text-decoration: none;
}
a:hover{
color: #e21010;
text-decoration: underline;/*添加下划线*/
}
}
3.7背景
背景图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 800px;
height: 1000px;
border: 1px solid red;/*设置边界参数*/
background-image: url("images/Graves.png");
}
#div1{
background-repeat: repeat-x;/* 重复横轴*/
}
#div2{
background-repeat: repeat-y;/*重复纵轴*/
}
#div3{
background-repeat:repeat;/* 重复*/
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
背景颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background-color: #FBAB7E;
background-image: linear-gradient(299deg, #FBAB7E 0%, #F7CE68 100%);
}
</style>
</head>
<body>
</body>
</html>
4.盒子模型
margin：外边距
padding：内边距
border：边框
4.2边框
1.边框的粗细
2.边框的样式
3.边框的颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0px;
width: 300px;
}
#app{
border: 1px solid black;
}
form{
background: #46627d;
}
input{
border: 3px solid bisque;
}
</style>
</head>
<body>
<div id="app">
<h2>会员登陆</h2>
<form action="#">
<div>
<span>用户名:</span>
<input type="text">
</div>
<div>
<span>密码:</span>
<input type="text">
</div>
<div>
<span>邮箱:</span>
<input type="text">
</div>
</form>
</div>
</body>
</html>
4.3外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#app{
width: 300px;
border: 1px solid red;
margin:0 auto;
/* aotu的意思是自动，也就是默认
外边距的妙用居中元素
*/
}
h2{
font-size: 16px;
background: #3cbda6;
line-height: 30px;
margin: 0;
}
form{
background: #46627d;
}
</style>
</head>
<body>
<div id="app">
<h2>会员登陆</h2>
<form action="#">
<div>
<span>用户名:</span>
<input type="text">
</div>
<div>
<span>密码:</span>
<input type="text">
</div>
<div>
<span>邮箱:</span>
<input type="text">
</div>
</form>
</div>
</body>
</html>
盒子的计算方式：你这个元素到底多大？
margin+border+padding+内容宽度
4.4圆角边框
div{
width: 100px;
height: 100px;
border: 1px solid aqua;
border-radius: 60px;
margin: 50px;
}
img{
border-radius: 60px;
}
</style>
</head>
<body>
<div></div>
<img src="images/Yuumi.png" alt="https://101.qq.com/#/page-index/tab-rank">
</body>
4.5阴影
img{
box-shadow:10px 10px 1px #e21010;
}
</style>
</head>
<body>
<div style="text-align:center;">
<img style="border-radius: 60px" src="images/MasterYi.png" alt="">
</div>
</body>
5浮动
块级元素：独占一行
h1~h6 p div 列表等都是块级元素
行内元素：不独占一行
span a img strong
行内元素可以被包含在块级元素中，反之不可以
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
display
inline是行内元素
block是块元素
float是浮动
left是左边
right是右边
-->
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline;
}
span{
width: 100px;
height: 100px;
border: 1px solid rgba(68, 68, 85, 0.4);
display: block;
float: right;
}
</style>
</head>
<body>
<div>
块内元素
</div>
<span>
行内元素
</span>
</body>
</html>
5.2父级边框塌陷问题
clear
clear:right 左侧不允许有浮动元素
clear:left 右侧不允许有浮动元素
clear:both 两侧侧不允许有浮动元素
解决方法
- overflow：hidden；
在父级元素中增加一个 overflow: hidden;
- 在父类添加一个伪类 after
#father:after{
content: "";
/*增加一个空的div*/
display: block;
/* 开辟一个新的代码块*/
clear: both;
/* 清除两者，解决塌陷问题*/
}
小结：
1.浮动元素后面增加空div
简单，代码中尽量避免空div
2.设置父元素高度
简单，元素假设有了固定的高度，就会被限制
3.overflow
简单，下拉的一些场景避免使用
4.父类添加一个伪类：after（推荐）
写法稍微复杂一点，但是没有副作用，推荐使用！
5.3对比
-
display
方向不可控制
-
float
浮动起来的话会脱离标准文档流，所以要解决父类边框塌陷问题
6，定位
6.1相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
margin: 10px;
padding: 5px;
font-size: 10px;
line-height:25px;
}
#father{
border: 1px solid #e21010;
}
#first{
border: 1px dashed #014adc;
background: #3cbda6;
position:relative;
/* 相对定位上下左右*/
top:10px;
left: 20px;
}
#second{
border: 1px dashed #46627d;
background: #1a3631;
position: relative;
right: 10px;
bottom: 10px;
}
#third{
border: 1px dashed #5f973c;
background: #16177b;
}
</style>
</head>
<body>
<div id="father">
<div id="first">我的第一个盒子</div>
<div id="second">我的第二个盒子</div>
<div id="third">我的第三个盒子</div>
</div>
</body>
</html>
相对定位：position：relative；
相对于原来的位置，进行指定的偏移，相对定位的话，他任然在标准文档中，原来的位置会被保留
top:10px;
left: 20px;
right: 10px;
bottom: 10px;
小练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height: 300px;
width: 300px;
padding: 10px;
border: 2px solid red;
}
a{
width: 100px;
height: 100px;
display: block;
background: pink;
line-height: 100px;
text-decoration: none;
text-align: center;
}
a:hover{
background: #46627d;
}
.a2,.a4{
position: relative;
top: -100px;
left: 200px;
}
.a5{
position: relative;
top: -300px;
left:100px;
}
</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>
</body>
</html>
6.2绝对定位
定位：基于xxx定位，上下左右~
- 没有父级元素的前提下，相对于浏览器定位
- 假设父级元素纯在定位，我们通常相对于父级元素进行偏移
- 在父级元素范围内移动
相对于父级或浏览器位置，进行指定的偏移，决定定位的话，它不在标准文档流中，原来的位置不会被保留
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
margin: 10px;
padding: 5px;
font-size: 10px;
line-height:25px;
}
#father{
border: 1px solid #e21010;
position: relative;
}
#first{
border: 1px dashed #014adc;
background: #3cbda6;
}
#second{
border: 1px dashed #46627d;
background: #1a3631;
position: absolute;
/*决定定位*/
right: 10px;
}
#third{
border: 1px dashed #5f973c;
background: #16177b;
}
</style>
</head>
<body>
<div id="father">
<div id="first">我的第一个盒子</div>
<div id="second">我的第二个盒子</div>
<div id="third">我的第三个盒子</div>
</div>
</body>
</html>
绝对定位 position ：absolute；
固定定位fixed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
height: 1000px;
}
#d1{
width: 100px;
height: 100px;
background: red;
position: absolute;
/*决定定位，相对于浏览器*/
right: 0;
bottom: 0;
}
#d2{
width: 50px;
height: 50px;
background: yellow;
position: fixed;
/*固定定位，直接定死了*/
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div id="d1">div1</div>
<div id="d2">div2</div>
</body>
</html>
6.3z-index
图层 z-index
.content{
width:300px;
padding: 0px;
margin: 0px;
font-size: 12px;
border: 1px solid #151515;
line-height: 25px;
overflow: hidden;
}
ul,li{
list-style: none;
margin: 0px;
padding: 0px;
}
.content{
position: relative;
}
.tipBg,.tipText{
position: absolute;
top: 90px;
width: 380px;
height: 35px;
}
.tipText{
color: #dbdbdb;
}
.tipBg{
background: #151515;
opacity: 0.5;
/* 透明度*/
}
.tipText{
z-index: 99;
/* cs的图层概念*/
}
小结：透明度
opacity：0.5；
opacity: 0.5;
/* 透明度*/
浙公网安备 33010602011771号