CSS笔记

最新推荐文章于 2025-05-10 16:22:55 发布

原创最新推荐文章于 2025-05-10 16:22:55 发布 · 400 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

零散备忘专栏收录该内容

53 篇文章

订阅专栏

本文详细介绍了CSS的基本用法，包括常见的标签如div和span的样式设置，各种选择器的应用，以及CSS的引入方式等核心概念。

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

文章目录

1 CSS标签

<head>
		<meta charset="UTF-8">
		<title>div效果演示</title>
		<style>
			div{
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<div>
			Hello World!
		</div>
</body>

这里写图片描述

2 span标签

<head>
		<meta charset="UTF-8">
		<title>span演示</title>
		<style>
			span{
				font-size: 50px;
			}
		</style>
	</head>
	<body>
		<span>
			吾虽浪迹天涯，却未迷失本心
		</span>
		AAAA
		
</body>

吾虽浪迹天涯，却未迷失本心 AAAA

3 选择器

3.1 元素选择器

	<head>
		<meta charset="UTF-8">
		<title>元素选择器</title>
		<style>
			div{
				font-size: 30px;
				color: pink;
			}
		</style>
	</head>
	<body>
		<div>
			犯我德邦者，虽远必诛！11
		</div>
		<div>
			犯我德邦者，虽远必诛！22
		</div>
		<div>
			犯我德邦者，虽远必诛！33
		</div>
		<div>
			犯我德邦者，虽远必诛！44
		</div>
		<div>
			犯我德邦者，虽远必诛！55
		</div>
	</body>

这里写图片描述

3.2 类选择器

<html>
	<head>
		<meta charset="UTF-8">
		<title>类选择器</title>
		<style>
			.div2{
				font-size: 30px;
				color: gold;
			}
		</style>
	</head>
	<body>
		<div>
			犯我德邦者，虽远必诛！11
		</div>
		<div class="div2">
			犯我德邦者，虽远必诛！22
		</div>
		<div>
			犯我德邦者，虽远必诛！33
		</div>
		<div class="div2">
			犯我德邦者，虽远必诛！44
		</div >
		<div>
			犯我德邦者，虽远必诛！55
		</div>
	</body>
</html>

这里写图片描述

3.3 id选择器

<html>
	<head>
		<meta charset="UTF-8">
		<title>id选择器</title>
		<style>
			#div5{
				font-size: 30px;
				color: yellow;
			}
		</style>
	</head>
	<body>
		<div>
			犯我德邦者，虽远必诛！11
		</div>
		<div class="div2">
			犯我德邦者，虽远必诛！22
		</div>
		<div>
			犯我德邦者，虽远必诛！33
		</div>
		<div class="div2" id="div5">
			犯我德邦者，虽远必诛！44
		</div >
		<div id="div5">
			犯我德邦者，虽远必诛！55
		</div>
	</body>
</html>

这里写图片描述

3.4 层级选择器

	<head>
		<meta charset="UTF-8">
		<title>层级选择器</title>
		<style>
			div p{
				font-size: 20px;
				color: green;
			}
		</style>
	</head>
	<body>
		<div>
			犯我德邦者，虽远必诛！11
		</div>
		<div>
			犯我德邦者，虽远必诛！22
		</div>
		<div>
			犯我德邦者，虽远必诛！33
		</div>
		<div>
			<p>
				犯我德邦者，虽远必诛！44
			</p>
		</div>
		<div>
			<p>
			犯我德邦者，虽远必诛！55
			</p>
		</div>
	</body>

这里写图片描述

3.5 属性选择器

	<head>
		<meta charset="UTF-8">
		<title>属性选择器</title>
		<style>
			input[type='text']{
				background-color: red;
			}
			
			input[type='password']{
				background-color: blue;
			}
		</style>
	</head>
	<body>
		用户名：<input type="text" name="username" /><br />
		密码：<input type="password" name="password" />
	</body>

这里写图片描述

4 CSS引入方式

4.1 内部引入

<meta charset="UTF-8">
		<title>元素选择器</title>
		<style  type="text/css">/*如果我想要个多个相同内容*/
			div{
				font-size: 20px;
				color: pink;
			}
		</style>
	</head>
	<body>
		<div>
			犯我德邦者，虽远必诛！11
		</div>
		<div>
			犯我德邦者，虽远必诛！22
		</div>
	</body>

这里写图片描述

4.2 行内引入

	<head>
		<meta charset="UTF-8">
		<title>元素选择器</title>
		<style  type="text/css">
			div{
				font-size: 30px;
				color: pink;
			}
		</style>
	</head>
	<body>
		<div style="font-size: 20px;color: blue;">
			犯我德邦者，虽远必诛！11
		</div>
		<div>
			犯我德邦者，虽远必诛！22
		</div>
	</body>

这里写图片描述

4.3 外部引入

	<head>
		<meta charset="UTF-8">
		<title>元素选择器</title>
		<link rel="stylesheet" href="style.css" type="text/css" />
	</head>
	<body>
		<div style="font-size: 20px;color: blue;">
			犯我德邦者，虽远必诛！11
		</div>
		<div>
			犯我德邦者，虽远必诛！22
		</div>
	</body>

4.4 浮动

div{
				font-size: 30px;
				color: pink;
			}

	<head>
		<meta charset="UTF-8">
		<title>CSS浮动</title>
		<style>
			#one{
				border:1px solid red;
				width: 30px;
				height:15px;
				float: left;
			}
			#two{
				border:1px solid blue;
				width: 30px;
				height:15px;
				float: left;
			}
			#three{
				border:1px solid green;
				width: 30px;
				height:15px;
				float: left;
			}
		</style>
	</head>
	<body>
		<div id="one"></div>
		<div id="two"></div>
		<div id="three"></div>
	</body>

这里写图片描述