目录
1.CSS的介绍
1.1 为什么需要CSS
1.2 CSS概念
1.3 CSS发展史
1.4 CSS和HTML之间的关系
2.CSS的引入方式
2.1 三种引入方式
格式有三种：
- 【1】行内式：style="key:value;key2:value;"
- color:red; 字体颜色
- font-size:20px; 字体大小
- 【2】 内嵌式：写在head标签中 <style> span{key1:value1;key2:value2;} </span>
- 【3】外联式===》常用
2.2 就近原则
2.3 CSS的注释区别HTML的注释
CSS：/*。。。。*/
HTML：<!--。。。-->
3.选择器
3.1 基本选择器
CSS最常见的三种选择器：
A、ID选择器(id的命名注意：不要使用数字和中文开头，在页面中不要出现重名的id)
B、class类选择器【最常用】
C、标签选择器
选择器的优先级：
id>class>标签 【只有这三大类才考虑优先级，剩余的不考虑】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS的学习之旅</title>
<style>
/* 【1】标签选择器:直接通过标签名称获得所有元素 */
/* 含义：获得当前页面中所有的span标签 */
span{
color: red;
}
/* 【2】ID选择器：#id值{key1:value1;} */
#sp1{
font-size:40px;
color:blue;
}
/* 【3】class类选择器：.类名{key1:value1;} */
/* 含义：获得class为c1的标签对象 */
.c1{
background-color: yellow;
}
</style>
</head>
<body>
<span id="sp1">CSS好简单</span><br/>
<span class='c1'>CSS好简单</span><br/>
<span class="c1">CSS好简单</span><br/>
</body>
</html>
<!--
CSS最常见的三种选择器：
A、ID选择器(id的命名注意：不要使用数字和中文开头，在页面中不要出现重名的id)
B、class类选择器
C、标签选择器
选择器的优先级：
id>class>标签 【只有这三大类才考虑优先级，剩余的不考虑】
-->3.2 关系选择器
- 后代选择器:
- 子选择器：
- 分组选择器：
- 所有选择器可以混用的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS的学习之旅</title>
<style>
/* 【1】后代选择器：注意后面的空格 常用 */
/* 含义：p标签下的所有span标签 */
p span{
color:red;
}
/* 【2】子选择器：中间使用的是大于符号*/
/* 含义：p标签下的直系子标签span */
p>span{
font-size: 20px;
}
/* 【3】分组选择器：每一个选择器之间使用逗号进行分割 */
/* 含义： 批量操作*/
h1,h2,h3,h4,h5{
color:blue;
}
h1,h2,h3,h4,h5,#yu,.c1{
color:blue;
}
</style>
</head>
<body>
<p>
<span >张梦姣1</span><br />
<span>张梦姣2</span><br />
<i>
<span>张梦姣3</span><br />
</i>
</p>
<span>张梦姣4</span><br />
<hr/>
<h1>zmj1</h1>
<h2>zmj23</h2>
<h3>zmj3</h3>
<h4>zmj4</h4>
<h5>zmj5</h5>
</body>
</html>
3.3 伪类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器</title>
<style>
/* 四种状态组合使用时候顺序是不可以改变的 */
a:link{color: red;} /*未访问的链接*/
a:visited{color: green;} /*已访问的链接*/
a:hover{color:blue;font-size: 20px;text-decoration:underline;} /*鼠标移动到连接上 【常用】*/
a:active{color:lightcyan;}/*选定的链接*/
a{
text-decoration: none;/*清除下划线*/
}
</style>
</head>
<body>
<a href="index.html">伪类选择器</a>
</body>
</html>3.4 行内元素和块内元素
行内元素：不会自动换行的标签，【没有办法指定高度的】
eg:小标签（b i sub sup span font等），img，a，input
块元素：会自动换行的标签
eg：hl，p，table，ul，li，div(单纯对于网页进行模块化实现）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>行内元素和块元素</title>
<style>
span{
height: 100px;
width: 200px;
background-color: red;
}
p{
height: 100px;
width: 200px;
background-color: green;
}
</style>
</head>
<body>
<span>张梦姣1</span><!-- 行元素 -->
<span>张梦姣2</span>
<p>很不错1</p><!-- 块元素 -->
<p>很不错2</p>
</body>
</html>
<!--
行内元素：不会自动换行的标签，【没有办法指定高度的】
块元素：会自动换行的标签
-->效果展示：
4.浮动
4.0 span和div
div如何应用如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div实现京东布局</title>
<style>
/*清除与浏览器之间的留白*/
*{
margin: 0px;padding: 0px;
}
.top{
width: 100%;
height: 85px;
border: 1px solid red;/*边框的粗细 边框的风格 边框的颜色*/
}
.tips{
width: 100%;
height: 40px;
border: 1px solid green;
}
.center{
width: 100%;
height: 475px;
border: 1px solid palegreen;
background-image: url("https://img11.360buyimg.com/da/jfs/t16363/164/2298198848/33213/870500f1/5aa68632Nd7790d0c.png");/*引入背景图片*/
background-repeat: no-repeat;/*设置背景图片不重复：若图片太小，会重复的填满整个区域*/
background-position: center;/*设置背景图片居中*/
/* background-size: 1917px 602px;*//*调整背景图片大小,不建议使用，会失真；解决方法是设置background-color*/
background-color: rgb(233,56,84);
}
.bottom{
width: 100%;
height: 100;
border: 1px solid blue;
background-color: yellow;
}
</style>
</head>
<body>
<!-- 头部位置 -->
<div class="top"></div>
<!-- 中间提示信息 -->
<div class="tips"> </div>
<!-- 中间位置 -->
<div class="center"></div>
<!-- 底部位置 -->
<div class="bottom"></div>
</body>
</html>
效果展示：
4.1 浮动初衷：文字环绕图片
float浮动：left right none
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>浮动</title>
<style>
.im{
/*float浮动：left right none*/
float: left;
}
</style>
</head>
<body>
<img class="im" src="img/微笑.png" alt="请刷新一下">
ahsdjasbjfklneljnjclsabdnsqbnfp2he[ipcb]ahsdjasbjfklneljnjclsabdnsqbnfp2he[ipcb]
ahsdjasbjfklneljnjclsabdnsqbnfp2he[ipcb]ahsdjasbjfklneljnjclsabdnsqbnfp2he[ipcb]
</body>
</html>
效果展示：
4.2 浮动详讲
浮动的特性一：
浮动完成之后会自动释放之前的位置，后面的元素会自动顶上去。
浮动的影响：
由于浮动结束之后会自动释放之前的位置，会导致下面的元素会自动顶上去，导致整个布局的错乱，所以这就是布局的一个问题。
解决方案：
给最外层div设置设置宽高。 浮动一般都是left。
浮动的特性二：行内元素经过浮动后，会变成块元素，所以设置的宽高会生效。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>浮动</title>
<style>
.pdiv{
background-color: red;
height: 900px;/*建议每个div都加一个高度，否则会因为浮动排版错乱*/
}
.div1{
width: 100px;
height: 100px;
background-color: palegoldenrod;
float: left;/*浮动就会不占本网页控件*/
}
.div2{
width: 200px;
height: 200px;
background-color: royalblue;
float: left;/*会和之前浮动的部件并排排版，可以理解成两个窗口：浮动窗口和不浮动窗口之分*/
}
.div3{
width: 300px;
height: 300px;
background-color: peru;
float: left;
}
span{
width: 200px;
height: 200px;
background-color: yellow;
float: left;/*因为span标签是行标签，所以未设置浮动，就不会显示宽高；但若设置了浮动，就可以了*/
}
</style>
</head>
<body>
<div class="pdiv">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>
<div style="height: 80px;background-color: hotpink;"></div>
<span>bjsxt1</span><!-- 行内元素 -->
<span>bjsxt2</span>
<span>bjsxt3</span>
</body>
</html>
<!--
浮动的特性一：
浮动完成之后会自动释放之前的位置，后面的元素会自动顶上去。
浮动的影响：
由于浮动结束之后会自动释放之前的位置，会导致下面的元素会自动顶上去，导致整个布局的错乱，所以这就是布局的一个问题。
解决方案：
给最外层div设置设置宽高。 浮动一般都是left
浮动的特性二：
行内元素经过浮动后，会变成块元素，所以设置的宽高会生效。
-->
效果展示：
4.3 小米导航栏的实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>小米的导航栏实现</title>
<meta name="author" content="张梦姣,zmj,ZMJ">
<style>
*{/*清空与网页之间的间隙*/
margin: 0px; padding: 0px;
}
.mi1{
width: 100%;
height: 140px;
border: 1px solid red;
background-image: url('img/小米top.png');
background-repeat: no-repeat;
background-position: 80%;
background-size: cover;
}
/*导航栏设置开始*/
.mi2{
width: 100%;
height: 40px;
background-color: #333333;
}
.cen{
width: 1226px;
height: 40px;
border: 1px solid red;
margin: 0px auto;/*设置水平自动居中*/
}
li{
/*清除列表前面的符号*/
list-style: none;
}
.mi2 li{
float: left;
line-height: 40px;/*行高==div的高度，里面文字内容会有居中效果*/
}
.mi2 a{
color: #B0B0B0;
text-decoration: none;/*清除下划线*/
font-size: 12px;
}
.mi2 a:hover{
color:#ffffff;
}
.mi2 span{
color: #424242;
font-size: 12px;
margin-left: 7px;
margin-right: 7px;
}
/*导航栏设置结束*/
</style>
</head>
<body>
<div class="mi1"></div>
<div class='mi2'>
<div class="cen">
<ul>
<li><a href="">小米商城</a><span>|</span></li>
<li><a href="">MIUI</a><span>|</span></li>
<li><a href="">lot</a><span>|</span></li>
<li><a href="">云服务</a><span>|</span></li>
<li><a href="">天星数科</a><span>|</span></li>
<li><a href="">有品</a><span>|</span></li>
<li><a href="">小爱开放平台</a><span>|</span></li>
<li><a href="">企业团购</a><span>|</span></li>
<li><a href="">资质证照</a><span>|</span></li>
<li><a href="">协议规则</a><span>|</span></li>
<li><a href="">下载app</a><span>|</span></li>
<li><a href="">智能生活</a><span>|</span></li>
<li><a href="">Select location</a><span>|</span></li>
</ul>
</div>
</div>
</body>
</html>
效果：
5.定位
5.1 定义
5.2 取值
position:定位
- static:没有定位，默认就是static
- absolute:绝对定位，基于外侧父容器，如果外层父容器没有定位，那么对逐渐往上找，直到找到有定位的父容器。最外层是body
- 特点：绝对定位结束后，会自动释放之前的位置。 ==》适于大范围内移动
- relative:相对定位，基于之前的位置定位
- 特点：相对定位结束完成后，不会释放之前的位置。 ==》适于小范围内移动
- fixed:固定定位
- 特点：一直相对于浏览器的左上角，是不会改变的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS定位实现</title>
<meta name="author" content="张梦姣,zmj,ZMJ">
<style>
.div1{
width: 200px;
height: 200px;
background-color: pink;
}
.div2{
width:200px;
height: 200px;
background-color: yellow;
position: fixed;/*定位,默认static*/
top:30px;
left:50px;
/* bottom: ;
right: ; 这两个不常用，用的不习惯
*/
}
</style>
</head>
<body>
<div class='div1'></div>
<br/>*20
<div class='div2'></div>
</body>
</html>
<!--
position:定位
static:没有定位，默认就是static
absolute:绝对定位，基于外侧父容器，如果外层父容器没有定位，那么对逐渐往上找，直到找到有定位的父容器。最外层是body
特点：绝对定位结束后，会自动释放之前的位置。 ==》适于大范围内移动
relative:相对定位，基于之前的位置定位
特点：相对定位结束完成后，不会释放之前的位置。 ==》适于小范围内移动
fixed:固定定位
特点：一直相对于浏览器的左上角，是不会改变的。
-->6.盒子模型
6.1 盒子模型讲解
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>盒子模型</title>
<meta name="author" content="张梦姣,zmj,ZMJ">
<style>
.div1{
width:200px;
height:200px;
background-color: pink;
/*内边距：真实内容与border之间的距离*/
/*内边距带来的效果：当前盒子变大*/
/* padding: 30px; 四个方向*/
/* padding: 10px 20px;两个值：10px上下，20px左右 */
/* padding: 10px 20px 30px 40px;四个值：上右下左 顺时针 */
padding-left: 10px;
padding-left: 20px;
/* 外边距:指代的是每一个元素border到两外一个元素之间的距离；可以做定位使用 */
margin: 30px;
margin-top: 40px;
margin-right: 50px;
}
</style>
</head>
<body>
<div class='div1'></div>
</body>
</html>
本文含有隐藏内容，请 开通VIP 后查看