CSS3入门
1. 概述
如何学习：
- CSS是什么
- CSS怎么用（快速入门）
- CSS选择器（重点+难点）
- 美化网页（文字，阴影，超链接，列表，渐变…）
- 盒子模型
- 浮动
- 定位
- 网页动画（特效）菜鸟教程
1.1 什么是CSS？
Cascading Style Sheet 层叠级联样式表
CSS：表现（美化网页）
字体、颜色、边距、浮动、背景图片
1.2 快速入门
style
基本入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 规范<style>可以编写css代码，每一个声明最好使用分号结尾
语法：
选择器{
声明1；
声明2；
声明3；
}
-->
<style>
h1{
color:red
}
</style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
建议使用这种格式：
CSS优势：
- 内容和表现分离
- 网页结构表现统一，可以实现复用
- 样式十分丰富
- 建议使用独立于html的css文件
- 利于SEO，容易被搜索引擎收录！
1.3 CSS 的3种导入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 内部样式-->
<style>
h1{
color:green;
}
</style>
<!-- 外部样式-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--优先级:就近原则-->
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 >我是标题</h1>
</body>
</html>
拓展：外部样式的两种写法
- 链接式：
<!-- 外部样式-->
<link rel="stylesheet" href="css/style.css">
- 导入式
<!--导入式-->
<style>
@import url("css/style.css");
</style>
2. 选择器
作用：选择页面上的某一个或者某一类元素
2.1 基本选择器
- 标签选择器：选择一类标签
- 类选择器 class：选择所有class属性一致的标签，跨标签，.类名{}
- ID选择器：全局唯一 #id名{}
优先级：id > class > 标签
2.2 层次选择器
- 后代选择器：在某个元素的后面
/* 后代选择器*/
body p{
background: red;
}
- 子选择器：一代，儿子
/* 子选择器*/
body>p{
background: #3cbda6;
}
- 相邻兄弟选择器
/* 弟弟选择器 只有下级的一个*/
.active + p{
background: aquamarine;
}
- 通用选择器
/* 通用兄弟选择器，当前选中元素的向下所有兄弟元素*/
.active ~ p {
background: aliceblue;
}
2.3 结构伪类选择器
/*ul的第一个子元素*/
ul li:first-child{
background: red;
}
/*ul的最后一个元素*/
ul li:last-child{
background: #3cbda6;
}
/* 选中p1:定位到父元素，选择当前的第一个元素
选择当前p元素的父级元素，选择父级元素的第一个元素，并且是当前元素才生效，顺序
*/
p:nth-child(1){
background: #7faaff;
}
/*选中父元素下的p元素的第二个，类型*/
p:nth-of-type(2){
background: yellow;
}
2.4 属性选择器（常用）
id + class结合
=：绝对等于
*=：包含
^=：以...开头
$=：以...结尾
3. 美化网页元素
3.1 为什么要美化网页
- 有效传递页面信息
- 页面漂亮才能吸引用户
- 凸显页面主题
- 提高用户体验
span标签：重点要突出的字，使用span标签套起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#title1{
font-size: 50px;
}
</style>
</head>
<body>
欢迎学习 <span id="title1">Java</span>
</body>
</html>
3.2 字体样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
font-family:字体
font-size：字体大小
font-weight：字体粗细
color：字体颜色
-->
<style>
body{
font-family: 楷体;
color: #a13d30;
}
h1{
font-size: 50px;
}
.p1{
font-weight: bold;
}
</style>
</head>
<body>
<h1>少年歌行</h1>
<p class="p1">一个喜着红衣的热血少年，一个破败酒家的抠门老板，一个江湖豪门的首席弟子，看似毫不相关的三个人在一个雪夜相遇了。
怀着各自的目的，他们一同护送着一座黄金打造的棺材去往边境之城毕罗，期间遭遇各方势力的追杀：顶级的杀手组合月姬冥侯，神秘教派的护法白发仙、紫衣侯……
令人精悍的杀人术，消失多年的域外魔教，三位少年的前路似......
</p>
<p>一个喜着红衣的热血少年，一个破败酒家的抠门老板，一个江湖豪门的首席弟子，看似毫不相关的三个人在一个雪夜相遇了。
怀着各自的目的，他们一同护送着一座黄金打造的棺材去往边境之城毕罗，期间遭遇各方势力的追杀：顶级的杀手组合月姬冥侯，神秘教派的护法白发仙、紫衣侯……
令人精悍的杀人术，消失多年的域外魔教，三位少年的前路似......
</p>
</body>
</html>
3.3 文本样式（段落样式）
- 颜色 color：rgb、rgba
- 文本对齐方式 text-align=center
- 首行缩进 text-indent：2em
- 行高 line-height： 单行文字上下居中：line-height=height
- 装饰 text-decoration：underline、line-through、overline、none（装饰线）
- 文本图片水平对齐：vertical-align：middle
3.4 阴影
/*text-shadow：水平偏移 垂直偏移 阴影半径 颜色*/
#price{
text-shadow: 5px 5px 1px #05ecec;
}
效果：
3.5 超链接伪类
正常情况下：a a:hover()
/*默认的颜色*/
a{
text-decoration: none;
color: #000000;
}
/*鼠标悬浮的状态*/
a:hover{
color:#FF00FF;
font-size: 20px;
}
3.6 列表
/*ul li*/
/*
list-style:
none 去掉圆点
circle 空心圆
decimal 数字
square 正方形
*/
/*ul{*/
/* background: grey;*/
/*}*/
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
}
3.7 背景
背景颜色
背景图片
<style>
div{
width: 1000px;
height: 700px;
border: 1px solid red;
background-image: url("images/1.jpg");
}
.div1{
background-repeat: repeat-x;
}
.div2{
background-repeat: repeat-y;
}
.div3{
background-repeat: no-repeat;
}
</style>
练习：
#nav{
width: 300px;
background: grey;
}
.title{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 35px;
background: red url("../images/down.jpg") 270px 10px no-repeat;
}
/*ul li*/
/*
list-style:
none 去掉圆点
circle 空心圆
decimal 数字
square 正方形
*/
/*ul{*/
/* background: grey;*/
/*}*/
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
background-image: url("../images/right.png") ;
background-repeat: no-repeat;
background-position: 230px 7px;
}
a{
text-decoration: none;
font-size: 14px;
color: black;
}
a:hover{
color: orange;
text-decoration: underline;
}
3.8 渐变
渐变色网站：https://www.grabient.com/
background-color: #00DBDE;
background-image: linear-gradient(147deg, #00DBDE 0%, #FC00FF 100%);
4. 盒子模型
4.1 什么是盒子模型
margin：外边距
padding：内边距
border：边框
4.2 边框
- 边框的粗细
- 边框的样式
- 边框的颜色
<style>
h1,a,ul,li,body{
/*body总有一个默认外边距*/
margin: 0;
}
#app{
width: 300px;
border: 1px solid red;
}
h2{
font-size: 16px;
background-color: #3cbda6;
line-height: 30px;
color: white;
}
form{
background: #3cbda6;
}
div:nth-of-type(1) input{
border: 3px solid black;
}
div:nth-of-type(2) input{
border: 3px dashed powderblue;
}
</style>
4.3 外边距内边距
margin：
padding：
盒子计算方式：你这个元素到底有多大？
margin+border+padding+内容宽度
4.4 圆角边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 100px;
border: 10px solid red;
border-radius: 30px;;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
4.5 阴影
<style>
div{
width: 100px;
height: 100px;
border: 10px solid red;
box-shadow: 10px 10px 20px #00ffe1;
}
</style>
5. 浮动
5.1 介绍
块级元素
h1~h6 p div 列表
行内元素
span a img strong
行内元素可以被包含在块级元素中，反之不可以
5.2 display
这个也是一种实现行内元素排列的方式，但是我们一般使用浮动方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
display：
inline-block 行内块元素
block 块元素
inline 行内元素
*/
div{
width: 100px;
height: 100px;
border: 1px solid black;
display: inline-block;
}
span{
width: 100px;
height: 100px;
border: 1px solid black;
display: inline-block;
}
</style>
</head>
<body>
<div>div块元素</div>
<span>span行内元素</span>
</body>
</html>
5.3 浮动
左右浮动：float
div{
margin: 10px;
padding: 5px;
}
#father{
border: 1px #000 solid;
}
.layer01{
border: 1px #F00 dashed;
display: inline-block;
float: right;
}
.layer02{
border: 1px #00F dashed;
display: inline-block;
float: right;
}
.layer03{
border: 1px #060 dashed;
display: inline-block;
float: right;
}
.layer03{
border: 1px #666 dashed;
display: inline-block;
float: right;
}
5.4 父级边框塌陷问题
clear
/*
clear: right; 右侧不允许有浮动元素
clear: left; 左侧不允许有浮动元素
clear: both; 两侧不允许有浮动元素
*/
解决方案：
- 增加父级元素高度
- 增加一个空div标签，清楚浮动
<div class="clear"></div>
.clear{
clear: both;
margin:0;
padding:0;
}
- oveerflow
在父级元素中增加一个overflow：hidden
- 父类添加一个伪类：after
#father:after{
content:'';
display:block;
clear:both;
}
小结：
-
浮动元素后面增加空div
简单；但是代码中应该尽量避免空div
-
设置父元素的高度
简单、但是元素假设有了固定的高度，就会被限制
-
overflow
简单、下拉的一些场景避免使用
-
父类添加一个伪类：after（推荐）
写法稍微复杂，但是没有副作用，推荐
5.5 对比
-
display
方向不可控制
-
float
浮动起来会脱离标准文档流，所以要解决父级边框塌陷的问题
6. 定位
6.1 相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*相对定位
相对于自己原来的位置进行偏移
*/
body{
padding: 20px;
}
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid #666;
padding: 0;
}
#first{
background-color: #FF6F99;
border: 1px dashed #FF6F00;
position: relative; /*相对定位 上下左右*/
top:-20px;
left: 20px;
}
#second{
background-color: #1eff99;
border: 1px dashed #1eff0e;
}
#third{
background-color: #ff0099;
border: 1px dashed #ff0000;
position: relative;
bottom: -20px;
right: 20px;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
相对定位：position：relative
相对于原来的位置，进行指定的偏移。相对定义后，仍然在标准文档流，原来的位置会保留
6.2 绝对定位
定位：基于xxx定位，上下左右
-
没有父级元素时，相对于浏览器定位
-
假设父级元素存在定位时，会相对于父级元素进行偏移
-
在父级元素范围内移动
相对于与父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置会被保留
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
padding: 20px;
}
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid #666;
padding: 0;
position: relative;
}
#first{
background-color: #FF6F99;
border: 1px dashed #FF6F00;
}
#second{
background-color: #1eff99;
border: 1px dashed #1eff0e;
}
#third{
background-color: #ff0099;
border: 1px dashed #ff0000;
position: absolute;
right: 20px;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
6.3 固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
height: 1000px;
}
div:nth-of-type(1){
width: 100px;
height: 100px;
background-color: red;
position: absolute;
right: 0;
bottom: 0;
}
div:nth-of-type(2){
width:50px;
height: 50px;
background-color: mistyrose;
position: fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
6.4 z-index
图层的概念：
z-index：默认是0，最高无线(999)
设置透明度：
opacity:0.5
#content{
width: 350px;
padding: 0;
margin: 0;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px #000 solid;
}
ul,li{
padding: 0;
margin: 0;
list-style: none;
}
/*父级元素相对定位*/
#content ul{
position: relative;
}
.tipText,.tipBg{
position: absolute;
width: 350px;
height: 25px;
top: 300px;
}
.tipText{
z-index: 999;
color: white;
}
.tipBg{
background: black;
opacity: 0.5;/*背景透明度*/
/*filter: alpha(opacity=50);*/
}
838
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
