CSS引入样式的方式

透明的胡萝卜_robots

已于 2022-08-31 08:58:42 修改

阅读量109

点赞数 1

分类专栏：前端 css 文章标签： css 前端 html

于 2022-08-22 09:05:02 首次发布

本文链接：https://blog.csdn.net/gou1791241251/article/details/126458958

版权

前端同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

css

12 篇文章 0 订阅

订阅专栏

CSS引入样式的方式

行内式（内联样式）
内部样式表
外部样式表

行内式（内联样式）

基本语法格式如下：

<标签名 style=“属性1：属性值；属性2：属性值2”>内容</标签名>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>引入css方式1（行内样式）</title>
</head>
<body>
	<h1 style="background: red;">我是胡萝卜</h1>
</body>
</html>

tips：sublime快速生成html骨架快捷键：html+tab

内部样式表

使用style标签

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>内部样式CSS</title>
<style type="text/css">
	h1{
		color: red;
	}
</style>
</head>
<body>
	<h1>我是胡萝卜</h1>
</body>
</html>

外部样式表

标签：

<link rel="stylesheet" type="text/css" href="css文件地址">

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>外部样式表</title>
	<link rel="stylesheet" type="text/css" href="../css/main.css">
</head>
<body>
	<h1>我是胡萝卜</h1>
</body>
</html>