CSS----引入样式

最新推荐文章于 2024-03-21 08:00:00 发布

mqingo

最新推荐文章于 2024-03-21 08:00:00 发布

阅读量218

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.youkuaiyun.com/mqingo/article/details/83688570

CSS 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了三种CSS样式的使用方法：外部样式、内部样式和行内样式。通过具体的HTML示例，展示了如何通过link标签引入外部CSS文件，如何在style标签内编写内部样式，以及如何在标签中直接添加style属性实现行内样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.外部样式

外部样式: 通过link标签引入一个外部的css文件
   <link href="style.css" rel="stylesheet"/>
   link标签的属性:
       href:指定引入的路径
       rel:指定引入的样式stylesheet

外部样式1.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>外部样式</title>
		
		<link href="style.css" rel="stylesheet"/>
	</head>
	<body>
		<div class="fruit">香蕉</div>
		<div class="vegetables">白菜</div>
		<div class="fruit">苹果</div>
		<div class="vegetables">黄瓜</div>
		<div class="fruit">葡萄</div>
	</body>
</html>

外部样式2.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>外部样式</title>
		<link href="style.css" rel="stylesheet"/>
	</head>
	<body>
		<div class="fruit">草莓</div>
		<div class="vegetables">冬瓜</div>
		<div class="fruit">提子</div>
		<div class="vegetables">香菇</div>
		<div class="fruit">蓝莓</div>
	</body>
</html>

style.css

.fruit{
        		color: red;
        		font-size: 40px;
        	}
        	.vegetables{
        		color:blue;
        		font-size: 60px;

2.内部样式

内部样式: 直接在style标签内编写CSS代码

内部样式.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>内部样式</title>
		
        <style>
        	.fruit{
        		color: red;
        		font-size: 40px;
        	}
        	.vegetables{
        		color:blue;
        		font-size: 60px;
        	}
        </style>
	</head>
	<body>
		<div class="fruit">香蕉</div>
		<div class="vegetables">白菜</div>
		<div class="fruit">苹果</div>
		<div class="vegetables">黄瓜</div>
		<div class="fruit">葡萄</div>
	</body>
</html>

3.行内样式

行内样式: 直接在标签中添加一个style属性, 编写CSS样式

行内样式.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>行内样式</title>
	</head>
	
	<body>
		<div class="fruit" style="color: red;">香蕉</div>
		<div class="vegetables">白菜</div>
		<div class="fruit">苹果</div>
		<div class="vegetables">黄瓜</div>
		<div class="fruit">葡萄</div>
	</body>
</html>