【JavaWeb】CSS简介

2022/7/11 1:20:05

编程Tag： 标签 css Font size 简介 javaweb 样式表段落

本文主要是介绍【JavaWeb】CSS简介，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1.CSS简介

1.1 CSS介绍

CSS用来修饰页面内容的

1.2 CSS按修饰分类

（1）标签样式表

p{
	color:red;
}

（2）类样式表

.f20{
	font-size:20px;
}

（3）ID样式表

#p4{
	font-size:20px;
}

1.3 CSS按位置分类

（1）嵌入式样式表

直接在标签里添加style属性

<p><span style="font-size:60px;font-weight:bolder;color:yellow;">HELLO</span></p>

（2）内部样式表

在<head>标签里用<style>标签表示

<head>
	<meta charset="utf-8">
	<style type="text/css">
		p{
			color:red;
		}

		.f20{
			font-size:20px;
		}
	</style>
</head>

（3）外部样式表

在<head>标签里使用<link>标签引入外部文件

<head>
	<link rel="stylesheet" href="css/demo01.css">
</head>

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

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

			/* 类样式 */
			.f20{
				font-size:20px;
			}
		</style>
		<!-- 引用外部的CSS样式表文件 -->
		<link rel="stylesheet" href="css/demo01.css">
	</head>
	<body>
		<!--
		<p><font color="red">这里是段落一</font></p>
		<p><font color="red">这里是段落二</font></p>
		-->
		<p>这里是段落一</p>
		<p>这里是段落二</p>
		<p class="f20">这里是段落三</p>
		<p id="p4">这里是段落四</p>	<!-- id属性在整个HTML文档中，尽量保持唯一（虽然重复也不会报错） -->

		<div>
			<p><span style="font-size:60px;font-weight:bolder;color:yellow;">HELLO</span></p>
			<span class="f32">World</span>
			<p class="f32">!!!</p>
		</div>

	</body>
</html>

这篇关于【JavaWeb】CSS简介的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！