当前位置：首页 > news >正文

B01-快速入门CSS

news 来源：原创 2024/5/19 0:14:17

1.CSS的介绍

1.1 为什么需要CSS

1.2 CSS概念

1.3 CSS发展史

1.4 CSS和HTML之间的关系

2.CSS的引入方式

2.1 三种引入方式

2.2 就近原则

2.3 CSS的注释区别HTML的注释

3.选择器

3.1 基本选择器

3.2 关系选择器

3.3 伪类选择器

3.4 行内元素和块内元素

4.浮动

4.0 span和div

4.1 浮动初衷：文字环绕图片

4.2 浮动详讲

4.3 小米导航栏的实现

5.定位

5.1 定义

5.2 取值

6.盒子模型

6.1 盒子模型讲解

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>