【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>

原创文章,作者:奋斗,如若转载,请注明出处:https://blog.ytso.com/273453.html

(0)
上一篇 2022年7月10日
下一篇 2022年7月10日

相关推荐

发表回复

登录后才能评论