标签的显示模式

最新推荐文章于 2020-09-17 16:22:43 发布

wusiye_123456

最新推荐文章于 2020-09-17 16:22:43 发布

阅读量157

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/wusiye_123456/article/details/78563853

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.行内样式表

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	行内样式表适合于样式比较少的样式 
	<div style="color:pink;">今天很期待学习CSS</div>
	<div>今天不期待学习CSS</div>
	<div>今天不期待学习CSS</div>
	<div>今天不期待学习CSS</div>
</body>
</html>

2.行内元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	span{
		background-color: pink;
		width:100px;
		height:100px;
	}
	</style>
</head>
<body>
	<span>123</span>
	<span>456</span>
	<span>789</span>
</body>
</html>

3.块级元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	div{
		background-color: pink;
		/*width:100px;*/
		height:100px;
	}
	</style>
</head>
<body>
	<div>123</div>
	<p>456</p>
	<div>789</div>
	<div>
		<div>123</div>
		<p>123</p>
	</div>
</body>
</html>