从零开始学HTML&&CSS&&JavaScript（五)——CSS样式单的基本使用

最新推荐文章于 2024-07-16 17:08:50 发布

学号Java

最新推荐文章于 2024-07-16 17:08:50 发布

阅读量319

点赞数

分类专栏：前端基础

本文链接：https://blog.csdn.net/qq_42147171/article/details/104737071

版权

前端基础专栏收录该内容

28 篇文章 0 订阅

订阅专栏

CSS样式单的基本使用

CSS样式单的基本使用

CSS样式单的基本使用

CSS简介

一.般来说，我们不建议使用内部CSS样式，因为这种做法需要在HTML文档内嵌入CSS
样式定义，这种内部CSS样式主要有三大劣势。
➢如果此CSS样式需要被其他HTML文档使用,那么这些CSS样式必须在其他HTML
文档中重复定义。
➢大量CSS嵌套在HTML文档中，必将导致HTML文档过大，大量的重复下载，导
致网络负载加重。
➢如果需要修改整站风格时，必须依次打开每个页面重复修改，不利于软件工程化管
理。
但内部样式定义也并非一无是处，如果想让某些CSS样式仅对某个页面有效，而不会影
响整个站点，则应该选择使用内部CSS样式定义，对于.上面的HTML页面，可以使用内部
CSS样式单。
内部CSS样式需要放在<tlye…>元素中定义，每个CSS样式定义与外部CSS样式文件
的内容完全相同。<tel…>元素应该放在<head…>元素内，作为它的子元素。

1.引入外部样式文件

html部分代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/引入外部样式文件.css"/>
	</head>
	<body>
		<div class="p1">
			<span>css</span>
			<span>js</span>
		</div>
		<div class="p2">
			<span>css</span>
			<span>js</span>
		</div>
		<div class="p3">
			<span>css</span>
			<span>js</span>
		</div>
	</body>
</html>

== < link rel=“stylesheet” type=“text/css” href=“此处插入CSS样式”/> ==

CSS文件代码如下:\

.p1{
	width: 300px;
	height: 200px;
	font-size: 20px;
	background-color: #7FFFD4;
}

.p2{
	width: 400px;
	height: 300px;
	font-size: 25px;
	background-color: #D6DFEA;
}

.p3{
	font-size: 30px;
	color: #808080;
}

在页面上的显示效果如下

2.使用内部CSS

内部错的css样式与引入外部样式文件的写法相同只不过位置不一样
看代码:

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.p1{
				width: 300px;
				height: 200px;
				font-size: 20px;
				background-color: #7FFFD4;
			}
			
			.p2{
				width: 400px;
				height: 300px;
				font-size: 25px;
				background-color: #D6DFEA;
			}
			
			.p3{
				font-size: 30px;
				color: #808080;
			}
		</style>
	</head>

在内部CSS时需要将样式写在style中

3.使用内联样式

代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div style="color: #6F95C8;font-size: 20px;">
			<p>hahahah</p>
		</div>
		<div style="width: 50px;height: 60px;border:1px solid red">
			<p>今天天气不错</p>
		</div>
		<div>
			<p>今天下雨了</p>
		</div>
	</body>
</html>