CSS-核心基础-CSDN博客

本文链接：https://blog.csdn.net/cc098818/article/details/99325940

1、CSS 基本语法
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS基本语法</title>
<style type="text/css">
	p{
		color: red;
		font-size: 20px;	
	}
</style>
</head>
<body>
<p>爱编程！爱Java</p>
</body>
</html>

运行结果：
在这里插入图片描述
2、CSS 基本选择器
（1）标记选择器
上面的实例就是标记选择器
（2）类别选择器


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>类别选择器</title>
<style type="text/css">
	.r{
		color: red;
		font-size: 20px;	
	}
	
	.b{
		color: blue;
		font-size: 20px;	
	}
</style>
</head>
<body>
<p class="r">爱编程！爱Java</p>
<p class="b">爱生活！爱拉芳</p>
<p class="b">爱生活！爱撸码</p>
</body>
</html>

运行结果：
在这里插入图片描述
（3）ID 选择器


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ID选择器</title>
<style type="text/css">
	#p1{
		color: red;
		font-size: 20px;	
	}
	
	#p2{
		color: blue;
		font-size: 20px;	
	}
</style>
</head>
<body>
<p id="p1">爱编程！爱Java</p>
<p id="p2">爱生活！爱拉芳</p>
</body>
</html>

运行结果：
在这里插入图片描述
3、在HTML中引入CSS的方法
（1）行内样式


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>行内样式</title>
</head>
<body>
<p style="color: red;font-size: 20px;">行内样式</p>
</body>
</html>

运行结果：
在这里插入图片描述
（2）内嵌式


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内嵌式</title>
<style type="text/css">
	p{
		color: red;
		font-size: 20px;	
	}
</style>
</head>
<body>
<p>内嵌式</p>
</body>
</html>

运行结果：
在这里插入图片描述
（3）链接式


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>链接式</title>
<link href="red.css" type="text/css" rel="stylesheet">
</head>
<body>
<p>链接式</p>
</body>
</html>

p{
		color: red;
		font-size: 20px;	
}

运行结果：
在这里插入图片描述
（4）导入样式


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导入样式</title>
<style type="text/css">
	@import url(yellow.css)
</style>
</head>
<body>
<p>导入样式</p>
</body>
</html>

p{
		color: yellow;
		font-size: 20px;	
}

在这里插入图片描述