CSS嵌入方式+变形+过渡（Html基础）11

最新推荐文章于 2024-05-23 16:52:46 发布

limit、T

最新推荐文章于 2024-05-23 16:52:46 发布

阅读量179

点赞数 1

分类专栏： HTML基础文章标签： css html css3

本文链接：https://blog.csdn.net/qq_42825101/article/details/109636986

版权

HTML基础专栏收录该内容

11 篇文章 0 订阅

订阅专栏

CSS引入方式：

行内引入：

<!-- 添加style属性 -->
<div id="father" style="border: 1px black solid;"></div>

头部标签引入：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Html基础</title>
		<style>
            /* 使用选择器选择给样式 */
			*{
				margin: 0;
				padding: 0;
			}
		</style>
	</head>
	<body>
		
	</body>
</html>

头部标签import引入：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Html基础</title>
		<style>
            /* 需要在style标签的第一行 */
			@import url("style.css");
		</style>
	</head>
	<body>
		
	</body>
</html>

外部引入：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Html基础</title>
        <!-- 外部样式引入 -->
		<link charset="UTF-8" type="text/css" href="style.css" rel="stylesheet" />
	</head>
	<body>
	</body>
</html>

变形

/* 移动 */
transform: translate(50px,0px);
/* 缩放 */
transform: scale(0.5,0.5);
/* 旋转 */
transform: rotate(-45deg);
/* 倾斜 */
transform: skew(45deg,30deg);

过渡

transition-property: width;/* 给宽度加过渡效果 */
transition-duration: 2s;/* 过渡持续时间为2秒 */
/*
	过度时间曲线
	linear:匀速
	ease:慢  快 慢
	ease-in：慢  快
	ease-out: 快 慢
*/
transition-timing-function: ease-in;
/* 过渡延时 */
/* transition-delay: 1s; */