一、CSS简介
1.为什么学习CSS
问题：
A、如果单纯的使用HTML进行网页的布局，格式比较的单一不够美观
B、利用html属性进行布局网页的后期维护比较的繁琐
2.什么是CSS
CSS是Cascading Style Sheets(层叠样式表 、级联样式单)的简称
3、CSS的知识：
CSS的引入方式
CSS中的选择器
CSS中的盒模型
CSS中的定位
CSS中的浮动
CSS3中的动画效果
二、CSS的引入方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--[3]外联样式 rel：引入的文件和当前文件的关系 type：引入文件的类型 -->
<link rel="stylesheet" type="text/css" href="css/test.css"/>
<!--[2]内嵌样式-->
<style>
p{
/*字体的颜色*/
color: green;
/*字体的大小*/
font-size: 30px;
/*字体的风格*/
font-family: 宋体;
/*字体的样式 （斜体）*/
font-style: italic;
/*字体的加粗*/
font-weight: bold;
}
</style>
<!--[4]导入样式(了解)-->
<!--<style>
@import url("css/test.css");
</style>-->
</head>
<body>
<!--【1】行内式style="属性：值;属性2：值2"（不推荐使用） -->
<!--<p style="font-size: 30px;color: red;">人到中年不由己，保温杯里泡枸杞</p>-->
<p>人到中年不由己，保温杯里泡枸杞</p>
<!--<p>人到中年不由己，保温杯里泡枸杞</p>
<p>人到中年不由己，保温杯里泡枸杞</p>
<p>人到中年不由己，保温杯里泡枸杞</p>-->
</body>
</html>
<!--
CSS引入的方式
[1]行内式style="属性：值;属性2：值2"（不推荐使用）
[2]内嵌样式
[3]外联样式 rel：引入的文件和当前文件的关系 type：引入文件的类型
[4]导入样式(了解)
CSS：就近原则
引入方式的优先级相同，如果样式冲突那么最后的样式跟随离自己进的样式
-->
三、CSS中常用的三种选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*标签选择器/标记选择器*/
/*p{
font-size: 20px;
color: greenyellow;
}*/
/*id选择器 唯一 数字、字母、下划线、中划线（-）组成 但是不能用数字开始*/
#p_2{
font-family: "宋体";
font-style: italic;
color: red;
}
/*类选择器*/
.p_1{
font-weight: bold;
color: green;
}
/******CSS中的权重 *******************/
/*权重是10 */
.span_1{
color: gold;
}
/*权重是1+10=11 权重更高*/
p .span_1{
color: red;
}
</style>
</head>
<body>
<p class="p_1">李时珍的皮</p>
<!--<p class="p_1">李时珍的皮</p>
<p class="p_1">李时珍的皮</p>
<p>李时珍的皮</p>-->
<p>
<span class="span_1">baidu</span>
</p>
</body>
</html>
<!--
选择器的优先级：
id选择器>class选择器>标签选择器
权重:100 10 1
-->
四、CSS中的其他选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*包含选择器 只要包含该元素即可*/
p span{
color: red;
}
/*子选择器 直系子元素*/
p>span{
color: green;
}
/*属性选择器*/
input[type=text]{
width: 300px;
height: 80px;
font-size: 25px;
}
/***伪类选择器*******/
a:hover{
color: red;
/*展示下划线*/
text-decoration: underline;
}
a{
/*去除下划线*/
text-decoration: none;
/*首行缩进 2文字*/
text-indent: 2em;
}
/***分组选择器**********/
h1,h2,h3,h4{
color: red;
}
</style>
</head>
<body>
<p>
<span class="span1">北京百度</span>
<i>
<span>北京百度2</span>
</i>
</p>
<span>北京百度</span>
<hr />
账号：<input type="text" name="" id="" class="" value=""/><br />
密码：<input type="password" />
<hr />
<a href="">立即注册</a>
<hr />
<h1>北京百度</h1>
<h2>北京百度</h2>
<h3>北京百度</h3>
<h4>北京百度</h4>
</body>
</html>
五、CSS中盒子模型
盒子模型的属性：
margin（外边距/边界）
border（边框）
padding（内边距/填充 ）
1) 3个属性都可以分别设置各个方向属性值：
margin-top， margin-right， margin-bottom ， margin-left，
border-top， border-right， border-bottom， border-left，
padding-top， padding-right， padding-bottom， padding–left
2) 3个属性都可以同时或者分别设置4个方向属性值
margin：1px，2px，3px，4px;(顺时针放向：上右下左4个方向)
margin：1px，2px;
margin：1px;
margin：0px auto ;//块元素会自动居中
margin-left:1px;
3) border属性有三个修饰属性
border-color ：
border-color:red;
border-top-color:blue;
border-width :
border-width: 1px;
border-left-width: 3px;
border-style ：
border-style: solid
border-bottom-style: solid；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.top{
width: 100px;
height: 200px;
/*边框的粗细 边框的风格 边框的颜色*/
border: 3px dashed red;
/*外边距 boder到虚拟外边框的距离*/
/*margin: 100px;*/
/*可以调整元素的位置*/
/*margin-top:100px ;
margin-left:50px ;
margin-bottom: ;
margin-right: ;
/*上下 左右*/
/*margin: 100px 200px;*/
/*上 右 下 左 顺时针方向*/
margin: 10px 20px 30px 40px;
/*内边距 border和真实div的距离*/
padding: 50px;
}
.cen{
height: 480px;
border: 1px solid red;
/*指定背景图片*/
background-image: url(img/5b3b570dNd5ac6d3b.jpg);
/*设置背景图片重复*/
background-repeat: no-repeat;
/*设置背景图片的位置*/
background-position: center;
/*背景图片的大小 宽 高*/
/*background-size: 1300px 480px;*/
/*设置背景的颜色*/
background-color: #02e2fc;
}
</style>
</head>
<body>
<!--头部部分-->
<!--<div class="top"></div>-->
<!--提示导航-->
<div></div>
<!--中间的内容-->
<div class="cen"></div>
<!--底部的信息-->
<div></div>
</body>
</html>
<!--
div本身没有含义的
主要的作用是实现网页的模块化
-->
可以使用border统一设置
border: 1px solid red;
border-right: 5px dotted blue;
六、CSS中的定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.div1{
width: 200px;
height: 200px;
background-color: red;
/*绝对定位*/
/*position: absolute;*/
position: absolute;
top: 100px;
left: 100px;
/*css层 层数越大越往上*/
z-index: 2;
}
.div2{
width: 200px;
height: 200px;
background-color: green;
/*相对定位*/
/*position: relative;*/
/*相对浏览器定位*/
/*position: fixed;*/
position: absolute;
top: 150px;
left: 150px;
z-index: 1;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
<!--
1.绝对定位：
基于页面左上角定位（基于父级元素的定位），定位离开之后，之前的位置会释放
*2.相对定位：
基于原来的位置，定位离开之后，之前的位置不会释放
3.相对浏览器定位：
用于广告的实现
-->
七、CSS中的浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
float: right;
/*行内块元素*/
/*display: inline-block;*/
/*行---块*/
/*display: block;*/
/*块---行*/
/*display: inline;*/
/*整个元素隐藏*/
/*display: none;*/
}
</style>
</head>
<body>
<!--<span>1</span>
<span>123</span>-->
<div>1</div>
<div>2</div>
</body>
</html>
<!--
行内元素：（书写元素不会自动换行的元素称为行内元素），行内元素是无法指定宽和高
Input--span--小标签--图片img（行内块元素）--超链接
块元素：（书写元素会自动换行的元素称为块元素）
h1-h6--p--div--ul--ol 等
-->
八、案例1：小米导航实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*清除所有元素的内外边距*/
*{margin: 0px;padding: 0px;}
.top{
height: 40px;
background-color: #333333;}
.warp{
width: 1230px;
height: 40px;
/*设置div居中*/
margin: 0px auto;}
/*设置li的风格不显示*/
.top li{list-style: none;
float: left;
/*设置字体的行高*/
line-height:40px ;
}
.top a{
color: #b0b0b0;
font-size: 13px;
text-decoration: none;
margin-right: 15px;
}
.top a:hover{color: #ffffff;}
.shop{
height: 700px;
background-color: #f5f5f5;
}
.warp div{
width: 235px;
height: 300px;
background-color: #FFFFFF;
float:right;
margin-right: 30px;
margin-top: 25px;
/*调用动画的过程*/
transition: all .5s;
}
.warp div:hover{
/*水平 垂直 css3中的偏移*/
transform: translate(0px,-5px);
/*水平（右侧） 垂直 （下） 模糊度 模糊颜色 */
box-shadow: 0px 15px 10px rgba(0,0,0,.3);
}
</style>
</head>
<body>
<div class="top">
<!--控制内容居中-->
<div class="warp">
<ul>
<li><a href="">小米商城</a></li>
<li><a href="">MIUI</a></li>
<li><a href="">IOT</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="">Select Region</a></li>
</ul>
</div>
</div>
<div class="shop">
<div class="warp">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>
效果展示：
九、案例2：心动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
background-color: #ffa5a5;
}
.hea{
width: 200px;
height: 200px;
background-color: #d5093c;
box-shadow: 0px 0px 70px #D5093C;
动画调用
animation: aj 1s infinite;
}
.rig{
/*倒圆角*/
border-radius:100px ;
position: absolute;
left: 200px;
top: 200px;
}
.lef{
/*倒圆角*/
border-radius:100px ;
position: absolute;
left: 361px;
top: 200px;
}
.cen{
position: absolute;
left: 281px;
top: 280px;
/*旋转角度*/
transform: rotate(45deg);
}
/*css3:中的动画*/
@keyframes aj{
/*放大操作*/
0%{transform: scale(1)rotate(45deg);}
50%{transform: scale(1.1)rotate(45deg);}
100%{transform: scale(1)rotate(45deg);}
}
</style>
</head>
<body>
<div class="hea rig"></div>
<div class="hea cen"></div>
<div class="hea lef"></div>
</body>
</html>
实现效果：
