css重点学习

作者：weixin_40725706 | 2024-02-27 06:48:45

踩

css重点学习

一、选择器

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>

运行结果

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/150833