前端基础之CSS

COWARD_LOVE1

已于 2022-07-07 14:40:56 修改

阅读量211

点赞数 1

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

于 2022-06-26 16:23:45 首次发布

本文链接：https://blog.csdn.net/m0_71987537/article/details/125406397

版权

javaweb 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文档介绍了CSS的基础概念，包括内部样式表、外部样式表、嵌入式样式表、标签样式表、类样式表、id样式表和组合样式表。同时深入讲解了盒子模型，以及CSS中的定位技术，如绝对定位和相对定位的应用。适合初学者理解前端布局原理。

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

前言

该专栏主要是为后面学javaweb做一些前端基本知识的科普了解，并不能用来专门学习前端。如果只是图一乐到可看看。

1. CSS简介

在网页中HTML主要提供网页的内容，而CSS用来负责处理网页的外观。CSS又叫层叠样式表，根据使用的位置分为

内部样式表：直接出现在HTML内部的样式表。
外部样式表：通过使用link标签引入的样式表。
嵌入式样式表：通过style属性出现在标签内部的样式表。

根据使用的方式分为

标签样式表：直接修改某种标签的样式表。
类样式表：使用"."+"类名"来表示的样式表。（使用时通过使用class属性来表示使用的是哪个类样式表。）
id样式表：使用"#"+"id名"来表示的样式表。（使用时通过使用id属性来表示使用的是哪个id样式表。）
组合样式表：使用div+上面三种样式表的样式表。（使用时在div内指定使用的是哪个样式表。）

2. 代码示例

接下来的代码将解释什么是内部样式表、外部样式表、嵌入式样式表、标签样式表、类样式表、id样式表和组合样式表。

<html>
	<head>
		<title>样式表测试</title>
		<meta charset="utf_8">
		<!-- 这里面是内部样式表，使用css语句-->
		<style type="text/css">
			p{
				color:red;
			}
			.f12{
				font-size:20px;
			}
		</style>
		<!-- 这里是引入外部样式表-->
		<link rel="stylesheet" href="css/csscode1.css">
	</head>
	<body>
		<p>样式表测试一</p>
		<p class=f12>样式表测试二</p>
		<p id=p10>样式表测试三</p>
		<p style="font-size:60px;font-weight:bolder;color:yellow;">样式表测试四</p>
		<div>
			<p>组合样式表测试一</p>
			<span class="f10">组合样式表测试二</p>
			<p class="f10">组合样式表测试三</P>
		</div>
	</body>
</html>

#p10{
	background-color:pink;
	font-size:24px;
	font-weight:bolder;
	font-style:italic;
	font-family:"华文彩云";
	}
	
div p{
	color:blue;
	}
	
div .f10{
	font-size:32px;
	font-family:"黑体";
	}

这里使用先直接在HTML文件中使用内部样式表来存放标签样式和类样式修改所有的p标签和指定class的标签。之后使用link来引用CSS文件csscode1，这便是外部样式表，通过将样式放在一个独立的css文件中，再通过link将外部样式表引用到HTML文件中。

3. 盒子模型

在网页设计中，经常会将网页设计成多个模块，再对每个模块分别进行设计。在分模块时，我们要使用样式表来将多个模块的位置进行划分。经常使用的三个样式分别为

border：用来设计模块的边框

margin：用来设计模块的外边距

padding：用来设计模块的内填充

代码示例

<html>
	<head>
		<title>CSS盒子模型测试</title>
		<meta charset="utf-8">
		<style type="text/CSS">
			body{
			margin:0px;
			padding:0px;
			}
		</style>
		<link rel="stylesheet" href="css/csscode2.css">
	</head>
	<body>
		<div id="div1">
			<div id="div2">
				<div id="div3">nbsp;</div>
			</div>
		</div>
	</body>
</html>

#div1{
	width:400px;
	height:400px;
	background-color:greenyellow;
	/* 1. border 边框样式 */
	border-width:1px;
	border-style:solid;
	border-color:blue;
}
#div2{
	width:150px;
	height:150px;
	background-color:darkorange;
	
	margin-top:100px;
	margin-left:100px;
	
	padding-top:50px;
	padding-left:50px;
}
#div3{
	width:100px;
	height:100px;
	background-color:aquamarine;
}

运行结果如下