CSS(表现标准语言):
html（结构） css（表现）js（交互）
什么是css
如何学习
1、是什么
2、怎么用
3、css选择器（重点、难点）
4、美化网页（文字，阴影，超链接，列表，渐变…）
5、盒子模型
6、浮动
7、定位
8、网页动画（特效）菜鸟教程
1.1什么是css
Cascading Style Sheet(层叠样式表)一门标记语言
CSS：表现（美化网页）
字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动
不能嵌套。
1.2、发展史
CSS1.0:
CSS2.0: div（自定义块）+css，html与css分离，网页变得简单，SEO
CSS2.1:浮动和定位
CSS3.0:圆角边框，阴影，动画…浏览器兼容性~
1.3、快速入门
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>首页</title>
<!--规范:可以编写css代码-->
<!--声明以;结尾
语法:
选择器{
声明1：；
声明2：；
}
-->
<style>
h1{
color:red;
}
</style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
建议使用这种规范。
css的优势：
1、内容和表现分离；
2、网页结构表示的单一，可以实现复用
3、样式十分丰富
4、建议使用独立于html的css文件
5、利用SEO，容易被搜索引擎收录！
1.4、CSS三种导入方式
内部样式表：
<!--声明以;结尾
语法:
选择器{
声明1：；
声明2：；
}
-->
外部样式表(链接式)：
<link rel="stylesheet" href="css/style.css"/>
第三种：行内样式表
<!--行内样式，在标签元素中,编写一个style属性，编写样式即可-->
<body>
<h1 style="color:red">我是标题</h1>
</body>
优先级：就近原则。
拓展:CSS2.0
2、选择器：
2.1、三种选择器
作用：选择页面上的某一个或某一类的元素。
1、基本选择器
标签选择器
会选择到页面上所有的这个标签
color:颜色
background：背景颜色
border-radius：24px；圆角框
font-size：字体大小
类选择器（可以选择一个类，可以复用）
<h1 class="xu">
xu
</h1>
<style>
.xu{
属性：值；
}
</style>
id选择器 (不可复用，全局唯一)
<h1 id="xu">
xu
</h1>
<style>
#xu{
属性：值；
}
</style>
优先级：id–>class–>< h1 >
2.2、层次选择器
1、后代选择器
在某个元素的后面：
/*后代选择器*/
body p{
background: blue;
}
2、子选择器:一代
/*子选择器*/
body>p{
background: red;
}
3、相邻弟选择器:同辈 对下不对上
/*同辈选择器*/
.huo + p{
background: green;
}
<body>
<p class="huo">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>
</body>
4、通用选择器
.huo~p{
background: yellow;
}
<body>
<p class="huo">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>
</body>
2.3、结构伪类选择器
<style>
/*ul的第一个子元素*/
ul li:first-child{
background:red;
}
/*ul的最后一个子元素*/
ul li:last-child{
background:blue;
}
/*选中p1 选择当前的第一个元素
选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效 顺序*/
p:nth-child(1){
background: yellow;
}
/*选中父元素下的第一个p标签*/
p:nth-of-type(1){
background: black;
}
a:hover{
background: blue;
}
</style>
<body>
<a href="">313413</a>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>L1</li>
<li>l2</li>
<li>l3</li>
</ul>
</body>
2.4、属性选择器（常用）
/*格式 标签[]:{
}*/
<style>
.demo a{
float :left;
display:block;
height: 20px;
width: 20px;
border-radius:10px ;
background:green;
text-align:center;
color:gainsboro;
}
/*格式 标签[]:{
*
* }*/
a[class="link item first"]{
background:yellow ;
}
a[href^=css]{
background: blue;
}
a[href$=csss]{
background: black;
}
a[href*=csss]{
background: black;
}
</style>
<head/>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="link item first" id="first">1</a>
<a href="css/style.css" class="links item active" target="_blank" title="test">2</a>
<a href="css/style.css" class="links item active">3</a>
<a href="css/style.css" class="links item active">4</a>
<a href="css/style.css" class="links item active">5</a>
</p>
</body>
3、美化网页元素
3.1、为什么要美化网页
1、有效的传递信息
2、美化网页
3、凸显页面的主题
4、提高用户的体验。
< span >标签：重点要突出的字使用标签。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>span</title>
<style>
span[id=title]{
font-family: "";
font-size: small;
text-shadow: inherit;
font-style: italic;
}
</style>
</head>
<body>
<span id="title">火影</span>
</body>
</html>
3.2、字体样式
font-family:字体；可以设置两种字体。用，隔开。
font-size:字体大小；em缩进
font-weight:字体粗细 标签用
color:颜色；
3.3、文本样式
1、颜色
2、对齐的方式
3、首行缩进
4、装饰（下划线）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本样式</title>
<!--
颜色:单词
RGB
RGBA
text-align 排版
text-indent 首行缩进em
line-height 行高
height 块的高度
text-decoration: underline;下划线 overline;上划线line-through;中划线none;去下划线
-->
<style>
body{
color: rgb(0,255,255,0.8);
text-align: center;
text-indent: 2em;
background: black;
line-height: 300;
text-decoration: underline;
}
</style>
</head>
<body>
bbhjgvhchgchgxhcgfx
</body>
</html>
<!--图片和文字-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--水平对齐，需要参照物-->
<style>
img,span{
vertical-align: middle;
}
</style>
</head>
<body>
<p>
<img src="img/background.jpg" alt=""/>
<span>feufgyuewgfuyefguwfg</span>
</p>
</body>
</html>
3.4、超链接伪类和文字阴影
99
3.6、列表样式练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="nav">
<h1>全部商品分类</h1>
<ul>
<li><a href="#"> 图书</a><a href="#"> 数字商品</a></li>
<li><a href="#"> 图书</a><a href="#"> 数字商品</a></li>
<li><a href="#"> 图书</a><a href="#"> 数字商品</a></li>
<li><a href="#"> 图书</a><a href="#"> 数字商品</a></li>
<li><a href="#"> 图书</a><a href="#"> 数字商品</a></li>
<li><a href="#"> 图书</a><a href="#"> 数字商品</a></li>
</ul>
</div>
</body>
</html>
<!--css-->
#nav{
width:300px;
}
h1{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 30px;
background: red;
}
/*ul list-style ： none无序消除前面的小点 circle 空心圆 decimal 数字 square 正方形*/
ul{
background: whitesmoke;
}
ul li{
line-height: 30px;
list-style: circle;/*无序消除前面的小点*/
text-indent: 1em;
}
a{
text-decoration: none;
font-size:15px;
color: black;
}
a:hover{
color: blue;
}
定位：
#nav{
width:300px;
}
h1{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 30px;
background: red url(../img/O.png)200px -80px no-repeat;
}
/*ul list-style ： none无序消除前面的小点 circle 空心圆 decimal 数字 square 正方形*/
ul{
background: whitesmoke;
}
ul li{
line-height: 30px;
list-style: circle;/*无序消除前面的小点*/
text-indent: 1em;
background: url(../img/T.png);
background-position: 143px -20px;
background-repeat:no-repeat ;
}
a{
text-decoration: none;
font-size:15px;
color: black;
}
a:hover{
color: blue;
}
3.7、背景
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景</title>
<style>
div{
width:1000px;
height:700px;
border:1px solid red;/*solid 视线*/
background: url(img/background.jpg);
}
#div1{
background-repeat: repeat-x;/*水平平铺*/
}
#div2{
background-repeat: repeat-y;/*水平平铺*/
}
#div3{
background-repeat: no-repeat;/*水平平铺*/
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
3.8、渐变
4、盒子模型
4.1、什么是盒子？
margin：外边距 -top -right -left -bottom
padding：内边距
border：边框
4.2、边框
1、边框的粗细
2、边框的颜色
3、边框的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Title</title>
<style>
/*总有默认的外边距*/
/*粗细 样式 颜色*/
body{
margin:0;
padding:0;
text-decoration: none;
}
#box{
width: 300px;
border: 1px solid red;
}
h2{
background: blue;
font-size: 16px;
text-align: center;
color: red;
line-height: 30px;
}
form{
background: red;
}
input:nth-of-type(1){
border: 2px solid black;
</style>
</head>
<body>
<div id="box">
<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、内外边距以及div居中
计算方式。
4.4、圆角边框
4个角： border-radius: 320px 320px 320px 320px ;顺时针旋转
4.5、阴影
box-shadow:10px 10px 1px black;
5、浮动
标准文档流
文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。
*分为两种等级：块级元素和行内元素；*
块级元素：
1).霸占一行，不能与其他任何元素并列
2).能接受宽、高
3).如果不设置宽度，那么宽度将默认变为父亲的100%，即和父亲一样宽
行内元素：
1).与其他元素并排
2).不能设置宽、高。默认的宽度就是文字的宽度
在HTML中，标签分为：文本级和容器级；
文本级：p、span、a、b、i、u、em
容器级：div、h系列、li、dt、dd
块级元素可以设置为行内元素；行内元素也可以设置为块级元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="A">
<div class="a1"></div><img src="img/background.jpg" /></div>
<div class="a2"></div><img src="img/item.jpg" /></div>
<div class="a3"></div><img src="img/window.jpg" /></div>
</div>
</body>
</html>
A{
border: 5px solid red;
}
.a1{
border: 5px dashed red;
display: inline-block;
float: left;
}
.a2{
border: 5px dashed red;
display: inline-block;
float: left;
}
.a3{
border: 5px dashed red;
display: inline-block;
float: right;
clear: both;
}
5.1、父级边框塌陷
clear
clear:right;/*右侧不允许由浮动元素*/
clear:left;/*左侧不允许由浮动元素*/
claer：both/*两侧不允许由浮动元素*/
clear：none
解决方案：
1、增加父级元素的高度
2、增加一个空的div
<div class="clear"></div>
.clear{
clear:both;
margin:0;
padding:0;
}
3、overflow
在父级元素中增加overflow：hidden。
4、父类添加一个伪类：after
#father：after{
content:'';
display:block;
}
5、对比
display
方向不可以控制
float
浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题。
6、定位
五种定位：
position：static；静态定位
position：absolute；绝对定位
position：relative；相对定位
position：fixed；固定定位
position：sticky；粘性定位
6.1、相对定位
静态定位：
<head>
<meta charset="utf-8" />
<title>第一个盒子</title>
<style>
div{
margin: 20px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid #666;
}
#first{
border: 1px dashed red;
background:white;
color: #0000FF;
}
#second{
border: 1px dashed blue;
background:lightgreen;
}
#third{
border: 1px dashed green;
background:darkred;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second" >第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
相对定位：
相对于自己原来的位置进行偏移。他仍然在标准文档流中，原来的位置会保留
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>第一个盒子</title>
<style>
div{
margin: 20px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid #666;
}
#first{
border: 1px dashed red;
background:white;
color: #0000FF;
position: relative;/*relative 相对定位*/
top:-20px;
left:-20px;
}
#second{
border: 1px dashed blue;
background:lightgreen;
}
#third{
border: 1px dashed green;
background:darkred;
position: relative;/*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>
方块定位 用类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style >
#father{
width: 300px;
height: 300px;
padding: 10px;
border: 1px solid red;
}
a{
width: 100px;
height: 100px;
text-decoration: none;
background: pink;
text-align: center;
color: white;
line-height: 100px;
display:block;
}
a:hover{
background: blue;
}
.a2,.a4{
position: relative;
left:200px ;
top: -100px;
}
.a5{
position: relative;
left: 100px;
top: -300px;
}
</style>
</head>
<body>
<div id="father" >
<div class="a1"><a href="#">链接1</a></div>
<div class="a2"><a href="#">链接2</a></div>
<div class="a3"><a href="#">链接3</a></div>
<div class="a4"><a href="#">链接4</a></div>
<div class="a5"><a href="#">链接5</a></div>
</div>
</body>
</html>
6.2、绝对定位
定位：基于xxx定位。
1、没有父级元素的相对定位的前提下 ，相当于浏览器定位。
2、假设存在父级元素的**相对定位，**我们通常会相关于父级元素进行偏移。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>第一个盒子</title>
<style>
div{
margin: 20px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid #666;
position: relative;
}
#first{
border: 1px dashed red;
background:white;
color: #0000FF;
}
#second{
border: 1px dashed blue;
background:lightgreen;
position: absolute;
top: 10px;
}
#third{
border: 1px dashed green;
background:darkred;
}
</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>
<head>
<meta charset="UTF-8">
<title>固定定位</title>
<style>
body{
height: 10000px;
}
div:nth-of-type(1){
width: 100px;
height: 100px;
position: absolute;
background: red;
right: 0;
bottom: 0;
}
div:nth-of-type(2){
width: 50px;
height: 50px;
position: fixed;
background: blue;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
6.4、z-index
图层：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#app{
width: 640px;
margin: 0;
padding: 0;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px red solid;
}
ul,li{
margin: 0;
padding: 0;
list-style: none;
}
#app ul{
position: relative
}
.tiptext,.tipBg{
position: absolute;
width: 640px;
height: 25px;
top: 300px;
color: red;
}
.tipBg{
background: white;
}
.tiptext{
z-index: 999;
opacity: 0.5;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li><img src="img/item.jpg" alt=""/></li>
<li class="tiptext">别闹java</li>
<li class="tipBg"></li>
<li>时间:2020年11月17号</li>
<li>扶摇直上九万里</li>
</ul>
</div>
7、动画
网上的菜鸟教程比较推荐，本人比较偏重后端，所以对动画了解比较少
8、总结：
扫一扫
2307
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
