web前端开发学习笔记-06-css选择器

原课程在这里:https://www.icourse163.org/learn/BJFU-1003382003?tid=1003609002#/learn/announce

标签选择器

<style type="text/css">
	body{background-color:#fff;
		text-align:center;
		font-size:12px;}
	h1{font:"黑体";font-size:20px;}
	p{color:red;font-size:16px;}
	hr{width:200px;}
</style>
--------------------------------------
<body>
	<h1>标题</h1>
	<hr>
	<p>正文的段落</p>
	版权所有
</body>

在这里插入图片描述

类别选择器

<style type="text/css">
	p	{font-size:12px;}
	.one{font-size:18px;}
	.two{font-size:24px;}
</style>
----------------------------
<body>
	<p class="one">类别1</p>
	<p class="one">类别1</p>
	<p class="two">类别2</p>
	<p class="two">类别2</p>
	<p>普通段落中的文字</p>
</body>

在这里插入图片描述

ID选择器

<style type="text/css">
	#one{font-size:12px;}
	#two{font-size:24px;}
</style>
---------------------------
<body>
	<p id="one">文字1</p>
	<p id="two">文字2</p>
</body>

在这里插入图片描述

嵌套声明

<style type="text/css">
	p span{
		color:red;
	}
</style>

<body>
	<p><span>固态硬盘</span>具有传统机械硬盘不具备的快速读写、质量轻、能耗低以及体积小等特点,同时其劣势也较为明显。</p>
</body>

在这里插入图片描述

集体声明

<style type="text/css">
	h1,p{text-align:center;}
</style>
------------------------------
<body>
	<h1>web前端开发</h1>
	<p>web前端开发</p>
</body>

在这里插入图片描述

全局声明

<style type="text/css">
	*{text-align:center;}
</style>
---------------------------
<body>
	<h1>web前端开发</h1>
	<p>web前端开发</p>
	<h2>web前端开发</h2>
</body>

在这里插入图片描述

混合

多个class选择器混用,用空格分开

<div class="one yellow left">......</div>

id和class混用

<div id="my" class="one yellow left">...</div>

id选择器不可以多个同时使用

猜你喜欢

转载自blog.csdn.net/qq_39030646/article/details/85036552
今日推荐