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

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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值