css基础教程

于 2021-09-17 11:33:14 发布
阅读量1.2k 收藏 7
点赞数
CC 4.0 BY-SA版权
文章标签： css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/content899/article/details/120344436
这篇教程详细介绍了CSS的基础知识，包括css简介、语法、引入方式、选择器、浮动、定位、元素属性、盒模型、文本声明、溢出处理、列表声明、过渡、动画、背景声明和媒体查询等内容。通过实例展示了各种CSS技术的用法，如内联样式、类选择器、浮动布局、相对定位等，还探讨了响应式设计和过渡动画效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

css基础教程

文章目录

一、css简介

css指层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML的一个应用）文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。简单而言，css是用来控制网页的外观的一种代码语言，定义了如何显示HTML元素

二、css语法

选择器 {属性 ： 属性值 ； 属性 ： 属性值}

在这里插入图片描述

1、语法分为两部分：选择器 和 一条或多条声明

2、声明包含属性和属性值，属性和属性值之间用冒号链接，属性和属性之间用分号隔开

3、当一个属性有多个属性值时，属性值之间部分先后顺序，用空格隔开

三、css的引入方式

1、内部样式表（内联式）

写在标签内部，添加

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>css基础</title>
		<style>
			h3 {
				color: lightgreen ;
			}
		</style>
    </head>
    <body>
    	<h3>花开花落</h3>
    </body>
</html>

效果图：

在这里插入图片描述

2、外部样式表（外联式）

创建一个独立的css文档，利用标签进行链接，书写在标签内部

HTML界面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>css基础</title>
		<link rel = "stylesheet" type = "text/css" href = "css/one.css" />
	</head>
	<body>
		<div>你站在桥上看风景，看风景的人在桥上看你</div>
	</body>
</html>

CSS界面：

div {
	color : yellow;
	height : 30px;
	weight : 50px;
	background-color : #90EE90;
	border : 3px /* 宽度 */  solid  /* 实线 */  #333 /* 颜色 */;
}

效果图：

在这里插入图片描述

3、内联样式表（内嵌式）

直接书写在标签内部，通过标签的style属性来使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>css基础</title>
	</head>
	<body>
		<div style = "color: aqua; background-color: #333333; height : 30px; weight = 50px">我生平看过许多次的云，走过许多的桥</div>
	</body>
</html>

效果图：

在这里插入图片描述

四、css选择器

选择器表示要定义样式的对象，可以是元素本身，也可以是一类元素或者指定名称的元素

1、元素选择器

以标签名作为选择器的一种方式，p/div/ul/li…

元素选择器{ 属性 ：属性值 ； 属性 ： 属性值；}

HTML界面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css选择器</title>
		<link rel = "stylesheet" type = "text/css" href = "css/one.css" />
	</head>
	<body>
		<p>人生若只如初见</p>
	</body>
</html>

CSS界面

p{
	color : #9ACD32;
}

效果图：

在这里插入图片描述

2、类选择器

在HTML中添加一个class属性，在css中利用 . 加class名的方式进行书写

.css{ 属性 ： 属性值 ； 属性 ： 属性值；}

HTML界面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css选择器</title>
		<link rel = "stylesheet" type = "text/css" href = "css/one.css" />
	</head>
	<body>
		<p class = "p1">今天下雪了</p>
	</body>
</html>

CSS界面

.p1{
	color : aqua;
}

效果图：

在这里插入图片描述

【注】：class = " " 引号中是class名，ciass名的命名要是字母开头，可以结合下划线和数字。p1相当于是外号，所以可以有多个外号，如下：

HTML界面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css选择器</title>
		<link rel = "stylesheet" type = "text/css" href = "css/one.css" />
	</head>
	<body>
		<p class = "p1 p2">今天下雪了</p>
	</body>
</html>

CSS界面：

.p1{
	color : aqua;
}

.p2{
	height : 100px ;
	width : 200px ;
	background-color : blue ;
	border : aliceblue solid #00FFFF; 
}

效果图：

在这里插入图片描述

3、id选择器

在标签中为一个元素定义一个id属性，在css中通过#加id名的方式来进行表示

#id名{属性 ： 属性值 ；属性 ： 属性值 ；} id具有唯一性（一个页面中同一个id名不能出现两次）

HTML界面

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>css选择器</title>
		<link rel = "stylesheet" type = "text/css" href = "css/one.css" />
	</head>
	<body>
		<h2 id = "box">我是一个栗子</h2>
	</body>
</html>

CSS界面

#box{
	color : yellow ;
}

效果图如下：

在这里插入图片描述

4、群组选择器

当多个选择器有同样的样式设置时，可以将选择器用逗号分开，合并为一组

选择器1 ， 选择器2 ， 选择器3{属性 ： 属性值 ； 属性 ： 属性值 ；}

HTML界面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css选择器</title>
		<link rel = "stylesheet" type = "text/css" href = "css/one.css" />
	</head>
	<body>
		<p class = "box_1">我是盒子</p>
		<p class = "box_2">我是盒子</p>
		<p id = "box_3">我是盒子</p>
	</body>
</html>

CSS界面：

.box_1 , .box_2 , #box_3{
	height :50px ;
	width : 100px ;
	background-color : yellowgreen;
	border : beige solid #00FFFF; 
	color : red ;
}

效果图：

在这里插入图片描述

5、包含选择器

利用父级元素对子集元素进行设置

选择器爷 选择器父 选择器子{属性 ： 属性值 ； 属性 ： 属性值 ；}

HTML界面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css选择器</title>
		<link rel = "stylesheet" type="text/css" href = "css/one.css" />
	</head>
	<body>
		<div class = "box_a">
			<p>我是小白兔</p>
		</div>
	</body>
</html>

CSS界面：

.box_a p{
	color : #FF0000;
}

效果图：

在这里插入图片描述

6、伪类选择器

:hover{属性 ： 属性值 ； 属性 ： 属性值 ；}

HTML界面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css选择器</title>
		<link rel = "stylesheet" type="text/css" href = "css/one.css" />
	</head>
	<body>
		<a class = "act" href = "https://www.baidu.com">百度</a>
	</body>
</html>

CSS界面：

.act:hover{
	color : #FF0000 ;
}

效果图：

鼠标没划过：

在这里插入图片描述

鼠标划过：

在这里插入图片描述

7、通配符

对页面中所有的元素进行样式设置

*{属性 ： 属性值 ； 属性 ： 属性值 ；}

​ CSS界面：

*{
	margin : 0;       /*外边距*/
	padding : 0;      /*内边距*/
}

五、浮动

设置了浮动的属性的元素会向左或向右移动，设置元素水平方向的排列方式

第一步，让元素竖向排列

HTML界面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>浮动</title>
		<link rel = "stylesheet" type = "text/css" href = "css/one.css" />
	</head>
	<body>
		
		<div class = "box1">1</div>
		<div class = "box2">2</div>
		<div class = "box3">3</div>
		
	</body>
</html>

CSS界面：

*{
	margin : 0 ;
	padding :0 ;
}

.box1{
	width : 200px ;
	height :200px ;
	background-color :greenyellow ;
}
.box2{
	width : 200px ;
	height :200px ;
	background-color : blue;
}

效果图：

在这里插入图片描述

第二部，让元素浮动起来

HTML代码不变

CSS界面：

*{
	margin : 0 ;
	padding :0 ;
}

.box1{
	width : 200px ;
	height :200px ;
	background-color :greenyellow ;
	/*设置元素水平方向的排列方式 */
	float : left ; /*向左浮动：就是从左边开始往右排
					向右浮动：就是从右边开始往左排*/
}
.box2{
	width : 200px ;
	height :200px ;
	background-color : blue;
	float : left ;
}

效果图：

在这里插入图片描述

高度塌陷：

是一种不正常的现象，是由于子元素的浮动导致的。高度塌陷只对其下方的元素产生影响。对其上方的元素不会收到影响。

HTML界面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>浮动</title>
		<link rel="stylesheet" type="text/css" href="css/one.css" />
	</head>
	<body>
		<div class="box">
			<div class = "box1">1</div>
			<div class = "box2">2</div>
			<div class = "box3">3</div>
		</div>
		<div class = "box4">4</div>
	</body>
</html>

CSS界面：

*{
	margin : 0 ;
	padding :0 ;
}

.box1{
	width : 200px ;
	height :200px ;
	background-color :greenyellow ;
	/*设置元素水平方向的排列方式 */
	float : left ;
}
.box2{
	width : 200px ;
	height :200px ;
	background-color : blue;
	float : left ;
}
.box3{
	width : 200px ;
	height :200px ;
	background-color :red ;
	float : left ;
}
.box4{
	width: 100%;
	height :100px ;
	background-color :paleturquoise ;
	
}

效果：

在这里插入图片描述

解决高度塌陷：

CSS界面：

*{
	margin : 0 ;
	padding :0 ;
}

.box1{
	width : 200px ;
	height :200px ;
	background-color :greenyellow ;
	/*设置元素水平方向的排列方式 */
	float : left ;
}
.box2{
	width : 200px ;
	height :200px ;
	background-color : blue;
	float : left ;
}
.box3{
	width : 200px ;
	height :200px ;
	background-color :red ;
	float : left ;
}

/*解决方法高度塌陷:*/
.box{
	overflow : hidden ;
}/*溢出*/

.box4{
	width: 100%;
	height :100px ;
	background-color :paleturquoise ;
	
}

效果图：

在这里插入图片描述

六、定位（position）

1、相对定位（relative）

相对定位是相对于自身原来的位置进行移动（参照物是自己）

HTML界面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>定位</title>
		<link rel = "stylesheet" type = "text/css" href = "css/one.css" />
	</head>
	<body>
		<div class = "demo"></div>
	</body>
</html>

CSS界面：

*{
	margin : 0;
	padding :0 ;
}

.demo{
	width : 200px;
	height : 200px;
	background-color: #ADFF2F;
    
    /* 相对定位 */
	 position : relative ; 
	 left : 10px; /* top 上 right 右 bottom 下 left 左 */ /*本身的位置距离左边10像素*/
		
	}

效果：

移动前：

在这里插入图片描述

移动后：

在这里插入图片描述

2、绝对定位（absolute）

根据有相对（固定，绝对）定位的父元素来进行定位的。即子元素想要绝对定位，父元素也要添加定位（相对定位，绝对定位都可以）

HTML界面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>定位</title>
		<link rel = "stylesheet" type = "text/css" href = "css/one.css" />
	</head>
	<body>
		
		<div class = "demo1">
			<div class = "demo2"></div>
		</div>
		
	</body>
</html>

CSS界面：

*{
	margin : 0;
	padding :0 ;
}

.demo1{
	width : 800px;
	height : 600px;
	border : 5px solid #0000FF;
	margin :0 auto ;/* 模块水平居中 */
	
    position : absolute; /*父级定位*/
}

.demo2{
	width : 100px;
	height : 100px;
	background-color: #AFEEEE;
	
	/* 子级绝对定位 */
	position : absolute;
	top : 100px;
	left : 100px ;
}

效果图：

在这里插入图片描述

3、固定定位（fixed）

参考物是浏览器窗口，让其固定在某个位置，不管怎么滑动，他是不动的。

HTML界面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>定位</title>
		<link rel = "stylesheet" type = "text/css" href = "css/one.css" />
	</head>
	<body>
		<div class = "demo3">
			<h3>联系</h3>
		</div>
	</body>
</html>

CSS界面：

*{
	margin : 0;
	padding :0 ;
}

.demo3 {
	width : 300px ;
	height : 100px ;
	background-color : #FF0000;
	
    /* 固定定位 */
	position : fixed ;
	right : 0px;
	bottom : 100px;
}

效果：

在这里插入图片描述

七、元素属性

元素的属性是根据标签的显示特点来定义的

1、块级元素

特点：

①默认独占一行

②块级元素可以设置宽高

2、行内元素

在行内独占一行显示，不能设置宽高，尺寸由内容来决定的

HTML界面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>元素属性</title>
		<link rel = "stylesheet" type = "text/css" href = "css/one.css" />
	</head>
	<body>
		<div class = "box">你在桥上看风景</div>
		<p class = "demo">看风景的人在桥上看你</p>
		<span class = "demo1">你装饰了别人的梦</span>       <!-- spain是小结标签 -->
	</body>
</html>

CSS界面：

*{
	margin : 0;
	padding : 0;
}
.box{
	width : 200px;
	height : 100px;
	background-color : gold;
}

.demo{
	width : 200px;
	height : 100px;
	background-color : yellowgreen;
}

.demo1{
	width : 200px;
	height : 100px;
	background-color : goldenrod;
}

效果图：

在这里插入图片描述

行内元素转为块级元素-------->display : block;

CSS界面：

*{
	margin : 0;
	padding : 0;
}
.box{
	width : 200px;
	height : 100px;
	background-color : gold;
}
.demo{
	width : 200px;
	height : 100px;
	background-color : yellowgreen;
}
.demo1{
	width : 200px;
	height : 100px;
	background-color : goldenrod;
	
	/* 行内元素转换成块级元素 */
	display : block;
}

效果图：

在这里插入图片描述

块级元素转为行内元素--------->display : inline;


*{
	margin : 0;
	padding : 0;
}
.box{
	width : 200px;
	height : 100px;
	background-color : gold;
}
.demo{
	width : 200px;
	height : 100px;
	background-color : yellowgreen;
	/* 块级元素转换成行内元素 */
	display :  inline;
}
.demo1{
	width : 200px;
	height : 100px;
	background-color : goldenrod;
}

效果图：

在这里插入图片描述

隐藏元素----------->display : none;
*{
	margin : 0;
	padding : 0;
}
.box{
	width : 200px;
	height : 100px;
	background-color : gold;
}
.demo{
	width : 200px;
	height : 100px;
	background-color : yellowgreen;
}
.demo1{
	width : 200px;
	height : 100px;
	background-color : goldenrod;
	/* 元素隐藏 */
	display : none; 
}

效果图：

在这里插入图片描述

八、盒模型

1、padding：内边距。元素内容到元素边距的距离

2、border：边框

3、margin : 外边距：元素与元素之间的距离

在这里插入图片描述

html界面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>盒子模型</title>
		<link rel = "stylesheet"  type = "text/css" href = "css/hezi01.css" />
	</head>
	<body>
		<div class = "box">
			<div class = "box1"></div>
		</div>
		<div class = "box3">
			
		</div>
	</body>
</html>

css界面：

*{
	padding : 0;
	marging : 0;
}

.box{
	width : 300px;
	height : 300px;
	background-color : greenyellow;
	
	/* 内边距 */ 
	padding-top : 20px; 
	padding-left: 20px; 
	padding-bottom : 30px;
	padding-right : 20px;
	border : 5px solid #DAA520; 
    
    /* 外边距 */
	/* 如果上下间距冲突的话,就会显示大值,值相同时显示相同值 */
	 margin-bottom : 30px; 
}
	
.box .box1{
	width : 200px;
	height : 200px;
	background-color : red;
}

.box3{
	width : 200px;
	height : 200px;
	background-color : cyan;
	margin-top : 50px;
}

效果图：

在这里插入图片描述

【注】：边距是直接加到大盒子整体的长宽里的,所以盒子会变大 ，因此要进行计算。

​ 元素实际的宽度 = border-left + padding-left + width + padding-right + border-right

​ =左外边距 + 左内边距 + 元素实际的宽度 + 右内边距 + 右外边距

​ 元素的实际高度 = border-top + padding-top + width + padding-bottom + border-bottom

​ = 上外边距 + 上内边距 + 元素实际的高度 + 下内边距 + 下外边距

/* 总写方式
	
/* 当四个方向参数值不一样时 */
	padding : 上 右  下 左;  
	例如：padding : 10px 20px 30px 40px;
	
/* 当左右方向值一样时 */
	padding : 上 左右 下; 
	例如：padding : 10px 30px 20px;
	
/* 当上下一样,左右一样时 */
	padding: 上下  左右;
	例如：padding : 10px 20px;
	
/* 当四个参数都一样时 */
	padding : 上下左右; 
	例如：padding : 10px; 
	

/* 边框*/
	border : 5px solid #DAA520;  /*边框总称*/ /* solid 实践 */
	border-top : 5px solid #9ACD32;  /*上边框*/
	border-left : #9ACD32; /*左边框*/
	border-bottom : #9ACD32; /*下边框*/
	border-right : #9ACD32;  /*右边框*/
	
	/* 边框各边都可以单独选色*/
	border-top-color : #ADFF2F; 
	
	/* 圆角:radius*/
	border-radius : 30px; 
	/* 正圆 */
	 border-radius : 50%;

九、文本声明

html界面

<!DOTYPLE html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>文本声明</title>
		<link rel = "stylesheet" type = "text/css" href = "css/web07.css" />
	</head>
	<body>
		
		<!-- 文本声明 -->
		<!-- 字号大小、字体、居中、颜色、字间距、字体、粗细。。。。 -->
		
		<div class = "box">
			<h3>一花季</h3>
			<p>青春之花，如睡莲娇羞盛开。那么美，那么纯洁，那么妩媚。</p>
			<p>青春之花，如睡莲娇羞盛开。那么美，那么纯洁，那么妩媚。</p>
			<p>青春之花，如睡莲娇羞盛开。那么美，那么纯洁，那么妩媚。</p>
			<p>青春之花，如睡莲娇羞盛开。那么美，那么纯洁，那么妩媚。</p>
			
		</div>
	</body>
</html>

css界面

*{
	padding : 0;
	margin : 0;
}

.box{
	width : 400px;
	height : 400px;
	border : 5px solid yellow;
	margin : 0 auto;   /* 模块居中*/
}

效果图：

在这里插入图片描述

css续：

.box p{
	
	color : red;       /* 字体颜色 */
    
	font-size : 14px;     /* 字体大小 */ 
	  
	font-family : "宋体";   /* 字体 */
	
	/* 字重(加粗) */
	/* 100-500:常规字体
	600-900:字体加粗
	normal:常规字体
	bold/bolder:比较级强调作用 */
	font-weight : bold;
	
	/* 字体样式
	normal : 常规文字
	oblique:字体倾斜 */
	font-style : oblique; 
	
	/* 行高 */
	/* 第一行文字的顶部到第二行文字的顶部 */
	/* 可以写1.5em（1.5倍行间距）,也可以写21px */
	line-height : 21px;
	
	/* 首行缩进 */
	/* 2字符--28px */
	text-indent : 28px;
	
	/* 文本修饰*/
	/*上划线:overline
	删除线:line-through
	下划线:underline
	没有文本修饰(没有下划线):none */
	text-decoration : underline;
	
	/* 字间距 控制英文字母与英文字母,汉子与汉子之间的间距 */
	letter-spacing : 10px; 
	
	/* 控制英文单词之间的间距 */
	word-spacing : 10px;
	
	/* 控制英文的输出 */
	/* capitalize(首字母大写)
	uppercase(仅有大写)
	lowercase(仅有小写) */
	/* text-transform : capitalize; */
	/* text-transform : uppercase; */
	text-transform : lowercase;
	
	/* 文字居左:left
	文字居中:center
	文字居右:right
	 */
	text-align : center;
	
}

.box h3{
	/* 字体变细 */
	font-weight : normal;
	
}

	/* 文字竖排版
	1.具体的宽高
	2.要浮动 */
.box{
	height : 400px;
	float : left;  /* 左排版 */
	writing-mode : vertical-lr;
	/* lr:从左到右;rl:从右到左 */
}

十、溢出

溢出就是盒子中的内容超出了盒子大小，现象如下：

html界面：

<!DOCTUPE html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>溢出</title>
		<link rel = "stylesheet" type = "text/css" href = "css/one.css"  />
	</head>
	<body>
		<!-- 容器溢出 -->
		<div class = "box">
			<p>浮世万千，吾爱有三，一为日，二为月，三为卿</p>
			<p>我见过春日夏风，秋叶冬雪，也踏遍南水北山</p>
			<p>浮世万千，吾爱有三，一为日，二为月，三为卿</p>
			<p>我见过春日夏风，秋叶冬雪，也踏遍南水北山</p>
			<p>浮世万千，吾爱有三，一为日，二为月，三为卿</p>
			<p>我见过春日夏风，秋叶冬雪，也踏遍南水北山</p>
			
		</div>
		
	</body>
</html>

css界面：

*{
	padding : 0;
	margin : 0;
}

.box{
	width : 200px;
	height : 200px;
	border : 5px solid gray;
	margin : 0 auto;
}

效果图：

在这里插入图片描述

由效果图可以看出，文字溢出了边框

解决方法：

1、

/* 隐藏*/  overflow : hidden;

效果：

在这里插入图片描述

2、

/*滚动条*/  overflow : scroll;

效果：

在这里插入图片描述

3、

/*自动 */ overflow : auto;

效果：

在这里插入图片描述

但是以上方法看上去都不美观，所以可以利用页面跳转显示全部文字，那么主页面就只需显示部分文案。

方法如下：
1、先控制文本不换行
.box p{
	line-height : 1.5em;
	/* 文本控制不换行 */
	white-space : nowrap;
}

效果：

在这里插入图片描述

2、确认宽度
/* 必须要有确切的宽度 */
	width : 200px;
3、溢出处理
/* 溢出处理 */
	overflow : hidden;

效果：

在这里插入图片描述

4、文本溢出
/* 文本溢出 */
	/* clip(剪切，无省略号)
	ellipsis(修剪的文本,用省略号代替) */
	text-overflow : ellipsis;

效果：

在这里插入图片描述

十一、列表声明

列表符号

html界面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>列表</title>
		<link rel = "stylesheet" type = "text/css" href = "css/one.css" />
	</head>
	<body>
		
		<!-- 列表：有序列表，无序列表，自定义列表 -->
		<ul class = "list">
			<li>梅花</li>
			<li>兰花</li>
			<li>竹子</li>
			<li>菊花</li>
			<li>雪莲</li>
			<li>牡丹</li>
		</ul>
		
		
	</body>
</html>

css界面：

.list li{
	/* 列表符号 */
	  list-style-type : circle; /* (空心圆) */ 
 }

效果图：

在这里插入图片描述

也可以将符号换成图片

/* 列表图片 */
	 list-style-image :url(../img/五角星.png)  ;

效果图：

在这里插入图片描述

列表位置
 /* 列表位置 */
	  width : 300px; 
	  background-color : gold;

效果：

在这里插入图片描述

有图可以看出来，列表位置是需要自己调整的。

 list-style-position: outside; /*（外部）*/

效果：

在这里插入图片描述

list-style-position: inside;  /*（内部）*/

效果：

在这里插入图片描述

当我们不想要列表符号时，可以取消列表符号

取消列表符号
/* 取消列表符号 */
	list-style : none;

效果：

在这里插入图片描述

利用浮动，就可以变成导航：

导航
float : left;
margin-left : 30px;

效果：

在这里插入图片描述

十二、过渡

transform：向元素应用2D，3D转换。

通过css3转换，我们就能够将元素进行移动、缩放、转动、拉长和拉伸

转换就是使元素改变形状、尺寸和位置的一种效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>过渡转换</title>
		<link rel = "stylesheet" type = "text/css" href = "css/web9.css"  />
	</head>
	<body>
		<!-- 2D转换：transform
		位移 : translate
		缩放 : scale
		旋转 : rotate
		倾斜转换 : skew   -->
		
		<div class = "box">
			<img src="img/aviva1.jpg" />	
		</div>
	</body>
</html>

css界面：

1、鼠标划过就移动
*{
	padding : 0;
	margin : 0;
}

.box{
	width : 500px;
	height : 401px;	
}

.box:hover{
	/* 位移 */
	/* transform : translate(x,y);
	transform : translateX();
	transform : translateY(); */
	
	 transform : translateX(100px); 
}

但是这样的过渡太过生硬，所以可以在父级添加过渡来使图像过得的自然

*{
	padding : 0;
	margin : 0;
}

.box{
	width : 500px;
	height : 401px;	
	/* 过渡 */
	/* transition:要过渡的属性,过渡的时长,过渡的时间延迟 */
	transition : all 2s;  /*鼠标划移动2s*/
	
}
.box:hover{
	/* 位移 */
	/* transform : translate(x,y);
	transform : translateX();
	transform : translateY(); */
	
	 transform : translateX(100px); 
}
2、鼠标划过缩放
.box:hover{
	/* 缩放 */
	 /* 从元素中心进行缩放 */
	 /* transform : scale(x,y);
	 transform : scaleX();
	 transform : scaleY(); */
	  transform : scale(2,2); 
}

【注】：移动效果和缩放效果不能同时作用于一个元素的，会被覆盖的

3、旋转
.box:hover{
	  /* 旋转 */
	  /* 单位:deg */
	  /* transform : rotate()
	  transform : rotateX()
	  transform : rotate Y() */
	  transform : rotate(60deg); 
}
4、倾斜转换
.box:hover{
	  /* 倾斜转换 */
	  /* transform : skew ()
	  transform : skewX()
	  transform : skewY() */
	  transform : skew(60deg,60deg) ;
}

​ css过渡是元素从一种样式逐渐改变为另一种的效果，这样就可以在不使用flash动画和js的情况下，当元素从一种样式转换为另一种样式时为元素添加效果。要实现这一点，必须规定两项内容：

（1）规定把效果添加到哪个css属性上

（2）规定效果时长

总结： 2D Transform方法
函数描述
translate(x , y)定义2D转换，沿着X和Y轴移动元素
translateX(n)定义2D转换，沿着X轴移动元素
translateY(n)定义2D转换，沿着Y轴移动元素
scale(x , y)定义2D缩放转换，改变元素的宽度和高度
scaleX()定义2D缩放转换，改变元素的宽度
scaleY()定义2D缩放转换，改变元素的高度
rotate(angle)定义2D转换，在参数中规定角度
skew(x-angle , y-angle)定义2D转换，沿着X和Y轴
skewX(angle)定义2D转换，沿着X轴
skewY(angle)定义2D转换，沿着Y轴

十三、动画

html界面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动画</title>
		<link rel = "stylesheet" type = "text/css" href = "css/web9_1.css" />
	</head>
	<div class = "ani"></div>
		
		
	</body>
</html>

css界面：

*{
	padding : 0 ;
	margin : 0;
}

.ani {
	height : 100px;
	background-color: antiquewhite;
	
	/* 动画 */
	/* animation: 执行动画的名称,动画执行一次的时间 动画执行的速度曲线;动画执行的次数 */
	/* infinite:无数次
	ease-in 加速 */
	animation: demo 3s ease-in infinite;
	
}

	/* 动画帧 */
	/*@keyframes name{
    from{}
    to{}
	}*/
@keyframes demo{
	0%{
		width: 0%;
	}
	100%{
		width : 100%;
	}
}

动画帧中可以分多个动画带，并添加不同的属性

@keyframes demo{
	0%{
		width: 0%;
		background-color: red;
	}
	20%{
		width: 20%;
		background-color: coral;
	}
	40%{
		width: 40%;
		background-color: yellow;
	}
	60%{
		width: 60%;
		background-color: greenyellow;
	}
	80%{
		width: 80%;
		background-color: blue;
	}
	100%{
		width : 100%;
		background-color: plum;
	}
}

【注】分隔的越多，运行时就会越卡顿

总结：CSS动画属性
属性描述css
@keyframes规定动画3
animation所有动画属性的简写属性，除了animation-play-state属性3
animstion-name规定@keyframes动画的名称3
animation-duration规定动画完成的一个周期所花费的秒或毫秒，默认是03
animation-timing-function规定动画的速度曲线。默认是“ease”3
animation-delay规定动画何时开始。默认是03
animation-iteration-count规定动画被播放的次数。默认是13
animation-direction规定动画是否在下一周期逆向地播放。默认是“normal”3
animation-play-state规定动画是否正在运行或暂停。默认是“running”3
animation-fill-mode规定对象动画时间之外的状态3

十四、背景声明

html界面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>背景声明</title>
		<link rel = "stylesheet" type = "text/css" href = "css/web10.css" />
	</head>
	<body>
		
		<!-- 背景声明 -->
		<!-- 背景颜色 -->
		<!-- 背景图片
		网页中图片呈现的两种方式：插入图片，背景图片 -->
		<div class = "box"></div>
	</body>
</html>

css界面：

1、先设置背景图片所在的边框大小，再插入背景图片
*{
	padding : 0;
	margin : 0 ;
}

.box{
	/* 设置背景图片的元素必须要有尺寸 */
	width : 900px;
	height : 900px;
	border : 3px solid green;
    
    	/* 背景图片 */
	 background-image:url(../img/aviva1.jpg); 
}
2、设置背景图片的平铺问题
/* 设置背景图片平铺问题 */
	/* background-repeat : repeat(平铺)
	background-repeat : repeat-x(平铺x轴)
	background-repeat : repeat-y(平铺y轴) 
	background-repeat : no-repeat(无平铺)*/
	background-repeat : no-repeat;
3、设置图片的位置
/* 设置图片显示的位置 */
	/* background-position : 水平方向(px/%/left,cent,right) 竖直方向(px/%/top,center,bottom); */
	background-position : center center;
4、图片在边框内显示的尺寸
/* 背景图片显示的尺寸 */
	/* background-size : 水平方向(px/%) 竖直方向(px/%) / cover/contain; */
	 /* cover:等比例放大缩小,元素某些不会会被遮挡
	 contain:等比例缩放,但是只要有一个方向铺满元素,就不再进行缩放了 */
	background-size : contain;
5、总写
/* 总写 */
	/* background : 背景图片的链接地址 平铺设置 背景图片的显示设置 */
	background : url(../img/2.jpg) no-repeat center center;

【注】背景图片显示的尺寸不能放在总写里面

十五、媒体查询

html：

<!DOCTYPLE html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>媒体查询</title>
		<link rel="stylesheet" media = "screen and (min-width:1200px)" type = "text/css" href = "css/web11.css">
		<link rel="stylesheet" media = "screen and (min-width:980px) and (max-width:1200px)"  type = "text/css" href = "css/web_02.css">
		<link rel="stylesheet" media = "screen and (max-width:980px)" type = "text/css" href = "css/web03.css">
	</head>
	<body>
		
		<!-- 媒体查询 -->
		<!-- 响应式：media = “设备名称 and 设备尺寸” -->
		<div class = "box">1031</div>
		
	</body>
</html>

当页面大于在1200px是效果：

*{
	padding : 0;
	margin : 0;
}

.box{
	width : 100%;
	height : 500px;
	background-color : greenyellow;
	font-size : 300px;
	text-align : center;
}

当页面在980px到1200px是效果：

.box{
	width : 100%;
	height : 500px;
	background-color : rosybrown;
	font-size : 200px;
	text-align : center;
}

当页面小于在980px是效果：

.box{
	width : 100%;
	height : 500px;
	background-color : yellow;
	font-size : 100px;
	text-align : center;
}

响应式可以写在html中，也可以写在css中

html：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/web22_01.css">
	</head>
	<body>
		
		<div class = "box01">1301</div>
	</body>
</html>

css：

#{
	padding : 0;
	margin : 0;
}

.box01{
	width : 100%;
	height : 300px;
	line-height : 300px;
	text-align : center;
}

@media  screen and (min-width:1200px) {
	.box01{
		background-color : greenyellow;
		font-size : 150px;
	}
}

@media  screen and (min-width:980px) and (max-width:1200px) {
	.box01{
		background-color : cyan;
		font-size : 200px;
	}
}

@media  screen and (max-width:980px) {
	.box01{
		background-color : rosybrown;
		font-size : 260px;
	}
}

拓展

1、视频链接

<!-- 视频链接  mp4，ogg，webm-->
<video src = "img/video.mp4"  controls = "controls"  width = "300px"  autoplay = "autoplay"  loop = "loop" muted = "muted" poster = "img/02.jpg">
	
    <!-- 
		src = "img/video.mp4" 插入视频链接
		controls = "controls  播放控件
		width = "300px"  宽度（等比缩放）
		autoplay = "autoplay"  自动播放
		loop = "loop"  循环
	 	muted = "muted"   默认静音 
		 poster = "img/02.jpg" 展示预览图
	 -->
	 
</video>

2、鼠标划过成阴影效果

html界面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel = "stylesheet" type = "text/css" href = "css/heikaui.css" />
	</head>
	<body>
		
		<div class = "box">
			 <a href = "##"><img src = "img/1.jpg" /></a>
			
			<div class = "heikuai"></div>
			<div class = "by_box">
				<div class = "by">
					<h1>选择购买</h1>
				</div>
			</div>
		</div>
		
	</body>
</html>

css界面

*{
	padding: 0;
	margin: 0;
}

.box{
	width: 800px;
	height: 800px;
}

.box .img{
	width: 100%;
	height: 100%;
	position: absolute;
}

.heikuai{
	width: 800px;
	height: 800px;
	background-color: #000; 
	position: absolute;
	left: 0;
	top: 0;
	
	/* 透明度 *//* opcity: 0-1(0:完全透明,1:完全不透明) */
	opacity: 0; 
}

.by_box{
	width: 200px;
	height: 50px;
	border: 5px solid black;
	position: absolute;
	left: 300px;
	top: 350px;
	opacity: 0;
}

.by{
	color: #000000;
	position: absolute;
	left: 35px;
}

/* hover 伪类选择器，鼠标划过改变元素状态。 */
.box:hover .heikuai{
	opacity: 0.3;
}

.box:hover .by_box{
	opacity: 0.5;
}

效果图：

鼠标划过前：

在这里插入图片描述

鼠标划过后：

在这里插入图片描述

3、心跳

html：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel = "stylesheet" type = "text/css" href = "css/xintiao.css">
	</head>
	<body>
		<div class = "heart">
				<img class = "two" src = "img/心电图.png">
				<img class = "one" src = "img/心动.png">
				
		</div>
	</body>
</html>

css：

.heart{
	width: 200px;
	height: 200px;
	margin: 200px auto 0;
	position: relative;
}

.heart .one{
	width: 100%;
	animation: one 2s infinite;
	position: absolute;
	
}
@keyframes one{
	0%{
		transform: scale(1 , 1)
	}
	50%{
		transform: scale(1.4 , 1.4)
	}
	100%{
		transform: scale(1 , 1)
	}
}

.heart .two{
	width: 200%;
	animation: two 2s infinite;
	position: absolute;
	top:100px;
	left:-100px;
}
@keyframes two{
	0%{
		transform: translate(0px)
	}
	50%{
		transform: translate(50px)
	}
	100%{
		transform: translate(0px)
	}
}

4、加载

html：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作业</title>
		<link rel="stylesheet" type="text/css" href="css/web9_2.css"/>
	</head>
	<body>
		<!-- 页面加载效果 -->
		<div class = "loading"></div>
	</body>
</html>

css：

*{
	padding : 0;
	margin : 0;
}

/* 页面加载效果 */
.loading{
	width: 50px;
	height: 50px;
	margin: 60 auto;
	border: 5px solid #90EE90;
	border-radius: 50%; /* 圆 */
	 border-top-color: #FAEBD7;
	animation: loading 1s linear infinite; 
	margin: 200px auto 0;
}

/* 动画帧 */
 @keyframes loading{
	0%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(360deg);
	}
	
}

5、火箭旋转

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel = "stylesheet" type = "text/css" href = "css/huojian.css">
	</head>
	<body>
		<div class = "rock">
			<img src = "img/火箭.png">
		</div>
	</body>
</html>


*{
	padding: 0;
	margin: 0;
}

.rock{
	width: 200px;
	height: 200px;
	border: 5px solid #00FFFF;
	border-radius: 50%;
	margin: 20px auto 0;
	
}

.rock img{
	display: block;
	width: 100%;
	height: 100%;
	transition: all 1s ;
}

.rock:hover img{
	transform:  rotate(360deg);
}

6、背景网页

html：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel = "stylesheet" type = "text/css" href = "css/web10-work.css" />
	</head>
	<body>
		<!-- 大盒子 -->
		<div class = "box">
			<!-- 中间内容 -->
			<div class = "box_con" >
				
				<!-- 标题 -->
				<div class="title">
					<h2><img src="img/6.png"></h2>
				</div>
				
				<!-- 段落文案 -->
				<div class="content">
					<p>回家湘餐饮管理创办于1999年，是一家经营特色湘菜为主的餐饮连锁企业，其经营范围包括饮食餐饮管理等。</p>
					<p>为进一步推动湘菜的发展，传播湘菜文化，迎合众多喜爱湘菜的美食家和消费者的需求，回家湘人经过十多年的努力，本着“诚信、务实、创新、服务”的经营理念，以美味的产品、稳定的品质、热情的服务、欢乐的笑容、亲切的招呼，赢得了无数消费者的心，同时也在珠三角赢取了强而稳定的市场，拥有了良好的口碑！
					</p>
					<p>　回家湘餐饮管理作为一家正处于迅速成长中的民营餐饮企业，在企业发展的过程中，不断吸取先进的管理理念，管理模式由粗放、作坊式向规范化、现代化转变。“以人为本、诚信服务”是回家湘人始终不渝的追求，在经营管理过程中，始终秉承“顾客就是上帝”“员工就是家人”的理念，积极营造以人性化管理为核心的企业文化，并贯穿工作始终！
					</p>
					<p>　随着餐饮行业的持续发展，回家湘人开始重视品牌优势的塑造，注重利用连锁经营进行扩张，做好成本控制，建立科学规范的管理体系，搞好企业文化的渗透和，以使回家湘的餐饮特色深入人心，传递　　特色湘菜的品牌魅力，使企业做强、做大！
					</p>
					<p>　家的感觉，妈妈的味道，回家湘为你实现！！</p>
					<p>人心，传递特色湘菜的品牌魅力，使企业做强、做大！</p>
					<p>家的感觉，妈妈的味道，回家湘为你实现！！</p>
				</div>
			</div>
		</div>
	</body>
</html>

css：

*{
	padding : 0;
	margin : 0;
}

/* 我们是全屏效果,这个地方不能直接写高100%,因为我们的body的宽度默认是浏览器的宽度,但是他的高由内容来撑开的,这是我们就需要把它的父元素html和body都拿出来设定高度为100% */
html,body{
	height : 100%;
}

.box{
	 width : 100%;
	 height : 100%;
	 background : url(../img/2.png) no-repeat center center;/* 插入背景图 */
	 background-size : 100% 100%;/* 背景图片大小 */
	 
}

.box_con{
	width : 1000px;
	margin : 0 auto;
}

.box_con .title{
	display : block; /* 转为块元素 */
	margin : 0 auto;
}

.box_con .title img{
	display : block; /* 转为块元素 */
	margin : 0 auto 100px;
	padding-top : 60px;
}

.box_con .content{
	height : 530px;
	padding-right : 30px;
}

.box_con .content p{
	float : right;
	height : 530px;
	/* 文字竖向排版 */
	writing-mode : vertical-rl;
	text-indent : 2em;
	line-height : 3em;
	
}

效果图：

在这里插入图片描述

7、响应式界面

html：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" media = "screen and (min-width : 1200px)" type="text/css" href="css/home.css">
	</head>
	<link rel="stylesheet" media = "screen and (min-width : 980px) and (max-width : 1200px) "type="text/css" href="css/home02.css">
	<link rel="stylesheet" media = "screen and (max-width : 980px) type="text/css" href="css/home03.css">
	</head>
	<body>
		<div class = "por_box">

			<!-- 标题 -->
			<div class="title">
				<h2>适用于工作地点</h2>
			</div>

			<!-- 列表 -->
			<div class="pro_list">
				<ui>
					<li class="item">
						<div class="imgs"><img src="img/2.jpg"></div>
						<div class="content">
							<h4>windows 10 企鹅版</h4>
							<p>下载适用于 IT 专业人士的90天免费评估版</p>
							<a href="##"> 立即购买</a>
						</div>
					</li>
					<li class="item">
						<div class="imgs"><img src="img/2.jpg"></div>
						<div class="content">
							<h4>windows 10 企鹅版</h4>
							<p>下载适用于 IT 专业人士的90天免费评估版</p>
							<a href="##"> 立即购买</a>
						</div>
					</li>
					<li class="item">
						<div class="imgs"><img src="img/2.jpg"></div>
						<div class="content">
							<h4>windows 10 企鹅版</h4>
							<p>下载适用于 IT 专业人士的90天免费评估版</p>
							<a href="##"> 立即购买</a>
						</div>
					</li>
					<li class="item">
						<div class="imgs"><img src="img/2.jpg"></div>
						<div class="content">
							<h4>windows 10 企鹅版</h4>
							<p>下载适用于 IT 专业人士的90天免费评估版</p>
							<a href="##"> 立即购买</a>
						</div>
					</li>
				</ui>

			</div>
		</div>
	</body>
</html>

css：

当界面大于1200px：

*{
	padding : 0;
	margin : 0;
}

a{
	text-decoration : none;
	/* 去除链接中的下划线 */
}

ul,li{
	
	list-style : none;
	
}

.por_box{
	width : 90%;
	margin : 0 auto;
}

.por_box .title h2{
	font-size : 36px;
	line-height : 80px;
	color : yellowgreen;
}

.pro_list .item{
	float : left;
	width : 24%;
	margin-right: 1%;
	/* 24%+1%=25% *4 = 100% */
}

.item .imgs img{
	display : block;/* 转为块元素 */
	width : 100%;
}

.item .content h4{
	font-size :20px;
	margin : 20px 0;
}

.item .content p{
	font-size :18px;
	line-height : 1.5em;
}

.item .content a{
	font-size :16px;
	margin-top : 10px 0;
	color : royalblue;
	
}

当界面大小在980px到1200px：

*{
	padding : 0;
	margin : 0;
}

a{
	text-decoration : none;
	/* 去除链接中的下划线 */
}

ul,li{
	
	list-style : none;
	
}

.por_box{
	width : 90%;
	margin : 0 auto;
}

.por_box .title h2{
	font-size : 36px;
	line-height : 80px;
	color : yellowgreen;
}

.pro_list .item{
	float : left;
	width : 49%;
	margin-right: 1%;
	/* 49%+1%=50% *2 = 100% */
	margin-bottom : 30px;
}

.item .imgs img{
	display : block;/* 转为块元素 */
	width : 100%;
}

.item .content h4{
	font-size :20px;
	margin : 20px 0;
}

.item .content p{
	font-size :18px;
	line-height : 1.5em;
}

.item .content a{
	font-size :16px;
	margin-top : 10px 0;
	color : royalblue;
	
}

当界面小于980px

*{
	padding : 0;
	margin : 0;
}

a{
	text-decoration : none;
	/* 去除链接中的下划线 */
}

ul,li{
	
	list-style : none;
	
}

.por_box{
	width : 90%;
	margin : 0 auto;
}

.por_box .title h2{
	font-size : 36px;
	line-height : 80px;
	color : yellowgreen;
}

.pro_list .item{
	float : left;
	width : 100%;
	/* margin-right: 1%; */
	/* 49%+1%=50% *2 = 100% */
	margin-bottom : 30px;
}

.item .imgs img{
	display : block;/* 转为块元素 */
	width : 100%;
}

.item .content h4{
	font-size :20px;
	margin : 20px 0;
}

.item .content p{
	font-size :18px;
	line-height : 1.5em;
}

.item .content a{
	font-size :16px;
	margin-top : 10px 0;
	color : royalblue;
	
}

通过这一阶段的学习，我们知道了css的基本用法和表现效果，但是表现形式也比较单一，如果我们想让我们的网页动起来，让前台变得有交互，为网页添加各种动态功能，就可以开始JavaScript的学习啦！

评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值