css是什么文件格式,css是什么格式的文件

CSS文件 CSS文件是什么CSS文件怎么用怎么创建CSS文件怎么使用CSS文件

CSS文件是什么

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

上张图:

这就是CSS文件↓

接下来说说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” rel=”external nofollow” rel=”external nofollow” rel=”external nofollow” rel=”external nofollow” href=”../css/style.css” type=”text/css”>

href=“css文件位置”

html代码:

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

效果截图:

创作不易,看完如果对你有帮助,感谢点赞支持!
如果你是电脑端,看见右下角的“一键三连”了吗,没错点它[哈哈]

加油!

共同努力!

Keafmd

快三最准高手教学ont-size: 50px;}

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

<link rel=”stylesheet” rel=”external nofollow” rel=”external nofollow” rel=”external nofollow” rel=”external nofollow” href=”../css/style.css” type=”text/css”>

href=“css文件位置”

html代码:

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

效果截图:

创作不易,看完如果对你有帮助,感谢点赞支持!
如果你是电脑端,看见右下角的“一键三连”了吗,没错点它[哈哈]

加油!

共同努力!

Keafmd

Published by

风君子

独自遨游何稽首 揭天掀地慰生平

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注