CSS概念及语法

最新推荐文章于 2024-03-14 11:55:56 发布

yayun0516

最新推荐文章于 2024-03-14 11:55:56 发布

阅读量992

点赞数 1

分类专栏： css 文章标签： css html

本文链接：https://blog.csdn.net/yayun0516/article/details/41448027

版权

css 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

实例：

<!DOCTYPE HTML>
<html>
	<head>
		<title>html选择器</title>
		<style type="text/css">
			p{color:red;font-weight:bold}
		</style>
	</head>
	<body>
		<p >这是一个段落.</p>
		
	</body>
</html>

<!DOCTYPE HTML>
<html>
	<head>
		<title>id选择器</title>
		<style type="text/css">
			#test{color:red;font-weight:bold}
		</style>
	</head>
	<body>
		<p id="test">这是一个段落.</p>
		
	</body>
</html>

<!DOCTYPE HTML>
<html>
	<head>
		<title>类选择器</title>
		<style type="text/css">
			.test{color:red;font-weight:bold}
		</style>
	</head>
	<body>
		<p class="test">这是一个段落.</p>
		
	</body>
</html>

<!DOCTYPE HTML>
<html>
	<head>
		<title>属性选择器</title>
		<style type="text/css">
			[align="center"]{color:blue}
			[name~="t1"]{color:red}
			[name|="t"]{color:green}
		</style>
	</head>
	<body>
		<p align="center" >这是一个段落.</p>
		<p align="center" name="t t1">这是一个段落.</p>
		<p align="center" name="t-t1">这是一个段落.</p>
	</body>
</html>

效果可以自行测试获得。