CSS笔记

最新推荐文章于 2024-06-13 11:45:00 发布

小黄鸡

最新推荐文章于 2024-06-13 11:45:00 发布

阅读量346

点赞数

分类专栏：零散备忘文章标签： css

本文链接：https://blog.csdn.net/SImple_a/article/details/77017274

版权

零散备忘专栏收录该内容

53 篇文章 0 订阅

订阅专栏

文章目录

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>

这里写图片描述

小黄鸡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS笔记

1 CSS标签<head> <meta charset="UTF-8"> <title>div效果演示</title> <style> div{ border: 1px solid red; } </style> </head> <body>
复制链接

扫一扫