认识css样式（第二部分-元素分类）

最新推荐文章于 2022-04-18 17:26:19 发布

qq_33151859

最新推荐文章于 2022-04-18 17:26:19 发布

阅读量378

点赞数

分类专栏： HTML基础编程题文章标签：编程 html css

本文链接：https://blog.csdn.net/qq_33151859/article/details/52733644

版权

HTML基础编程题专栏收录该内容

32 篇文章 13 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>块级元素</title>
<style type="text/css">

	div,p{ background-color:#F0F;}/*背景色*/
	div{ display:inline;}/*块级元素设置为内联元素*/
	p{ display:inline;}
</style>
</head>

<body>
	<div>div</div>
    <div>div2</div>
    <p>段落段落段落段落段落段落段落</p>
</body>
</html>

<pre name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>内联元素</title>
<style type="text/css">
a,span,em{font-weight:bold;
			background-color:#F0F;}/*背景色设置为粉色*/
a:hover{ color:#CF3;}/*鼠标移动，颜色改变*/
span:hover{ color:#CF3;}
em:hover{ color:#CF3;}

</style>
</head>

<body>
<a href="http://www.baidu.com">百度一下</a>
<a href="http://www.taobao.com">淘宝</a>
<span>333</span>
<span>4444</span><em>55555</em>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>内联块状元素</title>
<style type="text/css">
img{ width:200px;
	height:200px;
	background-color:#FFF;
	text-align:center;}
</style>
</head>

<body>
<img src="../img/照片2.jpg" />
</body>
</html>