css重点学习

Eliauk_Doubling

已于 2023-08-12 09:41:57 修改

阅读量520

点赞数

分类专栏： Web基础文章标签： css 学习前端

于 2023-07-04 19:13:04 首次发布

本文链接：https://blog.csdn.net/Eliauk_Doubling/article/details/131535464

版权

Web基础专栏收录该内容

7 篇文章 1 订阅

订阅专栏

一、选择器

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>

运行结果