web前端开发学习笔记-05-css添加方法

最新推荐文章于 2023-11-26 10:46:45 发布

原创最新推荐文章于 2023-11-26 10:46:45 发布 · 268 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web前端开发

web前端开发专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了三种CSS样式应用方法：行内样式、内嵌样式和链接样式，通过实例展示了如何为HTML元素设置颜色和字体大小，并解释了样式的优先级规则。

原课程在这里：https://www.icourse163.org/learn/BJFU-1003382003?tid=1003609002#/learn/announce

方法一：行内

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<p style="color:red;font-size:20px"  >
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
		eiusmod tempor incididunt ut labore et dolore magna aliqua. 
	</p>
</body>
</html>

方法二：内嵌式

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Lorem</title>
	<style>
	p{
		color:red;
		font-size:20px;
	}
	</style>
</head>
<body>
	<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
		eiusmod tempor incididunt ut labore et dolore magna aliqua. 
	</p>
</body>
</html>

方法三：单独文件（.css）

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Lorem</title>
	<link rel="stylesheet" href="css/style.css">	
</head>
<body>
	<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
	</p>
</body>
</html>

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

扩展：

设置两个段落，然后分别取名p1，p2，然后配置不同的属性，会怎么样？

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Lorem</title>
	<style>
	p1{
		color:red;
		font-size:20px;
	}
	p2{
		color:blue;
		font-size:10px;
	}

	</style>
</head>
<body>
	<p1>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
	</p1><br><hr>
	<p2>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
	</p2>

</body>
</html>