CSS基础

aston_c

于 2022-06-24 01:33:46 发布

阅读量116

点赞数

分类专栏：前端文章标签： css 前端 html

本文链接：https://blog.csdn.net/cds7777/article/details/125436553

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

基本用法

CSS的基本分类：标签样式表、类样式表、ID样式表

CSS从位置上的分类：嵌入式样式表、内部样式表、外部样式表

<html>
	
	<head>
		<!-- 内部样式表 -->
		<style type="text/css">
			/* 被style标签包围的范围是CSS环境，可以写CSS代码 */

			/* 标签样式 */
			p{
				color: orange;
			}

			/* 类样式 */
			.f30{
				font-size: 30px;
			}

			/* ID样式 */
			#p4{
				background-color:pink;
				font-size: 24px;
				font-weight: bolder;
				font-style: italic;
				font-family: "华文彩云";
			}

			
		</style>

		<!-- 引入外部的CSS -->
		<link rel="stylesheet" type="text/css" href="css/demo01.css">

	</head>

	<body>
		<p>这是段落一</p>
		<p>这是段落二</p>
		<p class="f30">这是段落三</p>
		<p id="p4">这是段落四</p>
		<!-- id属性在整个HTML文档中，尽量保持唯一（虽然重复也不会报错） -->

		<div>
			<!-- 嵌入式样式表 -->
			<p><span style="font-size: 50px;font-weight: bolder;color: yellow;">HELLO</span></p>
			<span class="f32">Dog</span>
			<p class="f32">Cat</p>
		</div>
	</body>
</html>

demo01.css

/* 组合样式 */
div p{
	color: blue;
}
div .f32{
	font-size: 32px;
	font-family: "黑体";
}

显示效果：
在这里插入图片描述

盒子模型

<html>
	<head>
		<style type="text/css">
			
			#div1{
				width: 400px;
				height: 400px;
				background-color: greenyellow;
				border-width: 4px;
				border-style: solid;
				border-color: blue;
			}

			#div2{
				width: 200px;
				height: 200px;

				background-color: yellow;

				margin-left: 100px;
				margin-top: 100px;

				padding-left: 50px;
				padding-top: 50px;
			}

			#div3{
				width: 100px;
				height: 100px;
				background-color: orange;
			}

		</style>
	</head>

	<body>
		
		<div id="div1">

			<div id="div2">
				<div id="div3">&nbsp;</div>
			</div>

			<!-- 宽度250 高度4 -->
			<div style="width: 250px; height: 4px; background-color: black; margin-left: 100px; margin-top: 10px;"></div>
		</div>

		<!-- 宽度200 高度200 -->
		<div style="width:200px; height:200px; background-color:plum; margin-left:100px;"></div>

	</body>
</html>

border 边框

margin 间距

padding 填充

显示效果：
在这里插入图片描述
黄色方形设置的是width:200 padding:50
紫色方形设置的是width:200

由此可以看出chrome浏览器：实际尺寸 = width + border + padding

布局

<html>
	<head>
		<style type="text/css">
			body{
				margin: 0;
				padding: 0;
			}

			#div1{
				width: 100px;
				height: 50px;
				background-color: red;

				/* 绝对定位 */
				position: absolute;
				left: 50px;
				top: 50px;
			}

			#div2{
				width: 100px;
				height: 50px;
				background-color: blue;

				/* 相对定位 */
				position: relative;
				float: right;
				margin-right: 50px;
				margin-top: 10px;
			}


		</style>
	</head>

	<body>
		
		<div style="width: 400px; height: 400px; background: grey;">

			<div id="div1">&nbsp;</div>

			<div id="div2">&nbsp;</div>

		</div>

	</body>
</html>

position属性

absolute – 绝对定位，需要配合使用 left, top
relative – 相对定位，一般会和 float, margin, padding … 一起使用

在这里插入图片描述
页面的布局

<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			body{
				margin: 0;
				padding: 0;
				background-color: grey;
			}
			div{
				position: relative;
			}
			span{
				font-size: 30px;
			}

			#div_top{
				background-color: orange;
				height: 20%;
			}
			#div_left{
				background-color: plum;
				height: 80%;
				width: 15%;
				float: left;
			}
			#div_main{
				background-color: whitesmoke;
				height: 75%;
				float: left;
				width: 85%;
			}
			#div_bottom{
				background-color: skyblue;
				width: 85%;
				height: 5%;
				float: left;
			}
			#div_container{
				width: 80%;
				height: 100%;
				border: 0px solid blue;
				margin-left: 10%;
				float: left;
			}
		</style>
	</head>

	<body>

		<div id="div_container">
			<div id="div_top"> <span>div_top</span> </div>
			<div id="div_left"> <span>div_left</span> </div>
			<div id="div_main"> <span>div_main</span> </div>
			<div id="div_bottom"> <span>div_bottom</span> </div>
		</div>

	</body>
</html>