CSS文件是什么-一一网

CSS文件是什么

css 文件简单来说就是一种后缀名为 “.css” 的文本文件
它的作用简单来说就是把 css 代码和 html 代码分离开，同时一个 css 文件可以把很多修饰作用包装在一起，方便很多 html 文件使用，减少代码的重复量

上张图：

这就是 CSS 文件↓

接下来说说 CSS 文件怎么用

怎么创建 CSS 文件

直接创建一个后缀为 “.css” 的文件即可↓

怎么使用 CSS 文件

首先我们先创建一个 html 文件写一些内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		这句不加任何修饰的话是为了对比颜色和大小的
		<h1>修饰一级标题</h1>
		<h2>二级标题不被修饰</h2>
		<p>p标签的内容也会被修饰</p>
	</body>
</html>


复制代码

例如这样的↑，如果我们不用 css 文件修饰 h 标签或 p 标签时，我们是直接在 head 里写个 style 然后加上我们想要的修饰
也就是这样↓：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			h1{
				color: red;
			}
			p{
				color: blue;
				font-size: 50px;
			}
			
		</style>
		<title></title>
	</head>
	<body>
		这句不加任何修饰的话是为了对比颜色和大小的
		<h1>修饰一级标题</h1>
		<h2>二级标题不被修饰</h2>
		<p>p标签的内容也会被修饰</p>
	</body>
</html>
复制代码

接下来我们用 css 文件来修饰

首先我们把 style 里面的内容放到我们刚才创建的 css 文件里
我写的文件名是 “style.css”

css 代码：

h1{
	color: red;
}
p{
	color: blue;
	font-size: 50px;
}


复制代码

然后我们在 html 文件里调用创建的 css 文件
语句这样写↓

		<link rel="stylesheet" href="https://juejin.cn/css/style.css" type="text/css">

复制代码

href=“css 文件位置”

html 代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="https://juejin.cn/css/style.css" type="text/css">
	</head>
	<body>
		这句不加任何修饰的话是为了对比颜色和大小的
		<h1>修饰一级标题</h1>
		<h2>二级标题不被修饰</h2>
		<p>p标签的内容也会被修饰</p>
	</body>
</html>


复制代码

效果截图：
图片[1]-CSS文件是什么-一一网
创作不易，看完如果对你有帮助，感谢点赞支持！
如果你是电脑端，看见右下角的 “一键三连” 了吗，没错点它 [哈哈]