CSS课堂案例

1、基本用法:

代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	/* 1.内部样式(并没有实现样式与内部的分离) */
		p{
			color:red;
		}
	</style>
	<!-- 外部样式   link标签链接样式文件 -->
	<link rel="stylesheet" type="text/css" href="style/hello.css">
	<!-- 外部样式  @import导入样式文件 -->
	<style>
		/* @import "style/hello.css"; */
		/* @import url(style/hello.css); */
	</style>
</head>
<body>
	<p>weilcom to CSS!</p>
	<p>欢迎来到CSS课堂!</p>
<!-- 2.行内样式 -->
	<h2 style="color:blue">WEB前端工程师</h2>
	<h2>JAVA开发工程师</h2>

	<div>嘿嘿</div>
	<div>哈哈</div>
</body>
</html>

在这里插入图片描述

2、基本选择器:

代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/* 1.标签选择器 */
		p{
			color:red;
			font-size:20px;
		}
		h2{
			color:yellow;
		}
		/* 2.类选择器 */
		.hello{
			background:#cccccc;
		}
		.world{
			font-weight:bold;
		}
		#heihei{
			color:blue;
		}
	</style>
	

</head>
<body>
	<!-- 给p标签中的内容设置样式 -->
	<p>welcome to CSS!</p>
	<p>WEB前端开发</p>
	<h3>JAVA开发</h3>
	<hr>
	<!-- 我只想修改第1个p标签 -->
	<p class="hello">welcome to CSS!</p>
	<p>hello world!</p>
	<h2>WEB前端开发</h2>
	<h3>JAVA开发</h3>
	<!-- 只要引用了hello这个类选择器就生效,与标签无关 -->
	<div class="hello">主讲</div>
	<!-- div中既要有背景颜色,也要有加粗文字 -->
	<div class="hello world">主讲</div>
	<span class="world">CSS从入门到精通</span>
	<hr>

	<h1 id="heihei">嘿嘿</h1>
</body>
</html>

案例:

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值