html-css语法规则

最新推荐文章于 2022-09-23 08:13:24 发布

¡Venceremo

最新推荐文章于 2022-09-23 08:13:24 发布

阅读量234

点赞数

分类专栏：笔记文章标签：前端

本文链接：https://blog.csdn.net/weixin_47295886/article/details/125744441

版权

笔记专栏收录该内容

52 篇文章 2 订阅

订阅专栏

本文详细介绍了CSS规则的构造，包括标签选择器、ID选择器和类选择器的使用实例，以及如何为HTML中的div元素添加样式。通过实例演示了如何设置div标签的宽度、高度、边框等样式，并展示了不同选择器在实际开发中的应用。

摘要由CSDN通过智能技术生成

css规则又两个主要部分构成：选择器，及一条或者多条的声明

h1(表示选择器){
       border: 1px solid #ccc; （声明多条css的样式语法每个声明使用分号结束）
       width: 150px;每个声明 👉：属性：属性值组成
       height: 100px;
       color: red;
   }

常见的选择器有：标签选择器（直接使用HTML的标签）、id选择器（在标签中使用id对属性命名，同一个页面的id不可重复）、类选择器（使用class属性命名使用.class的形式作为选择器类样式可以被多个元素复用）

搭建4个div标签：box1234：是标签的内容

使用内部样式--style添加样式属性

里面的div（是标签选择器）{}===选择文档中所有的div标签进行标签的处理

dashed：虚线

标签选择器

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>选择器</title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				border: 1px dashed rgb(45%,24%,78%);
			}
		</style>
	</head>

	<body>
		<div>box1</div>
		<div>box2</div>
		<div>box3</div>
		<div>box4</div>
		


	</body>

</html>

id选择器

id名称需要使用双引号的字符串中然后再标签中使用---唯一不可复用

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>选择器</title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				border: 1px dashed rgb(45%,24%,78%);
			}
			#box1{
				border: 2px double rgb(100%,0%,0%);
			}
		</style>
	</head>

	<body>
		<div id="box1">box1</div>
		<div>box2</div>
		<div>box3</div>
		<div>box4</div>
		


	</body>

</html>

id选择器对行内标签也起了作用

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>选择器</title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				border: 1px dashed rgb(45%,24%,78%);
			}
			#box1{
				border: 2px double rgb(100%,0%,0%);
			}
			#box2{
				border: 2px solid rgb(100%,0%,0%);
			}
		</style>
	</head>

	<body>
		<div id="box1">box1</div>
		<div>box2</div>
		<div>
			<p>
				<a id="box2" href="#">
					box3
				</a>
			</p>
		</div>
		
		<div>box4</div>
		


	</body>

</html>

类样式--可以复用

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>选择器</title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				border: 1px dashed rgb(45%,24%,78%);
			}
			.box{
				border: 8px solid rgb(100%,0%,0%);
			}
			
		</style>
	</head>

	<body>
		<div class="box">box1</div>
		<div class="box">box2</div>
		<div>
			<p>
				<a class="box" href="#">
					box3
				</a>
			</p>
		</div>

		<div>box4</div>
		


	</body>

</html>