WEB前端代码：CSS3内联、CSS3外部样式、CSS内部样式、em倍数、ID和class选择器、关联选择器、组合选择器

最新推荐文章于 2024-04-13 12:25:50 发布

hahahafree

最新推荐文章于 2024-04-13 12:25:50 发布

阅读量262

点赞数

分类专栏： Web 文章标签： WEB

本文链接：https://blog.csdn.net/weixin_43731793/article/details/95594773

版权

Web 专栏收录该内容

80 篇文章 0 订阅

订阅专栏

1、CSS3内联

<!--CSS内联-->
	<h1 style="color: #f00;">Hello word!</h1>
	<h1 style="color: #00f;">Hello word!</h1>

2、CSS3外部样式

<!--CSS3外部样式-->
	<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>

	<h1 >Hello word!</h1>
	<h1 >Hello word!</h1>
	<h1>Hello word!</h1>
</body>

h1{
	color: #f00;
}

3、CSS内部样式

	<!--style标签专门用来放置样式-->
	<!--CSS内部样式-->
	<style type="text/css">
		/*标签选择器*/
		*{
			font-family: 微软雅黑;
		}
		
	</style>

4、em倍数

h1{
			font-size: 3em;
		}

5、ID和class选择器

id选择器名称同时只能有一个，不能重复。
class选择器名称可以重复多个。

<style type="text/css">
		
		.h1-class{
			font-size: 3em;
		}
		#h1-id{
			color: red;
		}
	</style>
	
	
</head>
<body>

	<h1 class="h1-class">Hello word!</h1>
	<h1 id="h1-id">Hello word!</h1>
	<h1>Hello word!</h1>
</body>

6、关联选择器

	<style type="text/css">
		
		.div1 p{
			font-size: 3em;
		}
		.div2 p{
			color: red;
		}
	</style>
	
	
</head>
<body>
	<div class="div1">
		<p>PPP1</p>
		<p>PPP1</p>
		
	</div>
	<div class="div2">
		<p>PPP2</p>
		<p>PPP2</p>
		
	</div>
	
</body>

7、组合选择器

	<style type="text/css">
		
		.div1 p,.div2 p,h1{
			font-size: 3em;
		}
		
	</style>
	
	
</head>
<body>
	<div class="div1">
		<p>PPP1</p>
		<p>PPP1</p>
		
	</div>
	<div class="div2">
		<p>PPP2</p>
		<p>PPP2</p>
		
	</div>
	<h1>123</h1>
	
</body>