【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>
posted @   植树chen  阅读(88)  评论(0)  编辑  收藏  举报
相关博文：
· 【JavaWeb】JavaScript简介
· 【JavaWeb】HMTL简介
· JavaWeb-CSS
· JavaWeb-CSS初识
· css的分类
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
点击右上角即可分享
微信分享提示