css重点学习-优快云博客

本文链接：https://blog.youkuaiyun.com/Eliauk_Doubling/article/details/131535464

文章介绍了CSS中的选择器类型，包括标签名选择器、ID选择器、类选择器和组合选择器，并展示了如何使用它们来定义不同元素的样式。同时，文章还提及了CSS的一些常见样式属性，如颜色、字体大小、边框、背景色、对齐方式以及表格和列表的样式设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、选择器

1.标签名选择器

div{
				border: 5px blue dotted;
				color: aquamarine;
				font-size: 20px;
			}
<body>
	<div id="div001">div标签1</div>
	<div id="002">div标签2</div>
</body>
//只写出了重点部分

2.id选择器

#div001{
				color: aquamarine;
				font-size: 20px;
			}

<body>
	<div id="div001">div标签1</div>
	<div id="002">div标签2</div>
</body>
//只写了重点部分

3.类选择器

.class03{
				color: blanchedalmond;
				font-size: 30px;
				border:1px solid yellow;
			}
	<body>
	<div id="div001">div标签1</div>
	<div id="002">div标签2</div>
	<div class="class03">div标签3</div>
	</body>
//只写了重点部分

4.组合选择器

组合选择器可以让多个选择器共用同一个css样式代码

.class03,#div001{
				color: blanchedalmond;
				font-size: 30px;
				border:1px solid yellow;
			}
	<body>
	<div id="div001">div标签1</div>
	<div id="div002">div标签2</div>
	<div class="class03">div标签3</div>
	</body>
//只写了重点部分

二、css常用样式介绍

<head>
		<meta charset="utf-8">
		<title>css常用样式</title>
		<style type="text/css">
			div{
				color: red;
				border: 1px solid yellow;
				width: 300px;
				height: 300px;
				background-color: antiquewhite;
				font-size: 30px;
				margin-left: auto;			//div居中
				/* margin-right: auto; */	//div居中
				text-align: center;		//div中文字进行居中
				 
				
				
			}
			.a01{
				text-decoration: none;
			}
			table{
				border: 1px solid black;		//设置边框
				/* border-collapse:collapse;		//将边框进行合并 */
				border-collapse:collapse;			//不起效果
			}
			td,th{
				border: 1px solid black ;
			}
			#ul01{
				list-style: none;
			}
		</style>
	</head>
	<body>
		
		<div>我是div标签</div>
		<a href="http://baidu.com">百度</a><br />
		<a href="http://baidu.com" class="a01">百度</a>
		<hr />
		<table>
			<tr>
				<td>1.1</td>
				<td>1.2</td>
			</tr>
		</table>
		<ul>
			<li>你的名字</li>
			<li>我的世界</li>
		</ul>
		<ul id="ul01">
			<li>你的名字</li>
			<li>我的世界</li>
		</ul>
	</body>

运行结果