编写css的三种方式及其优缺点

吃一口奶黄包

于 2022-08-25 21:05:40 发布

阅读量1.4k

点赞数 2

文章标签： css 前端 html

本文链接：https://blog.csdn.net/weixin_73261958/article/details/126532659

版权

自学前端系列之HTML与CSS

第十节：编写CSS的三种方式及优缺点比较

方式1：内联样式

在标签内部通过通过style属性来设置元素的样式

优点：优先级高，不易被其他样式覆盖；书写方便；
缺点：一次只能设置一个元素；容易出现重复代码使代码繁琐

方式2：内部样式

在标记内添加CSS样式

优点：结构和样式分离，一次可以设置多个元素，使编写简洁明了
缺点：编写不太方便，需要上下翻找确定样式；优先级相对内联样式低，较容易被覆盖

方式3：外部样式

样式与HTML代码分离，单独存放在.css文件中
HTML 文件引入外部样式表有两种方式，分别是链接式和导入式

链接式
<link/>标签必须放到 HTML 中的标签内
rel="stylesheet" 指在页面中使用这个外部样式表，href 属性是css 文件的路径。

导入式
使用 @import 导入外部样式表，导入样式表的语法需要放置到 <style> 标签中。

<style>
	@import url("css文件路径");
</style>

下面是一个例子

<!DOCTYPE >
<html>
  <head>
    <meta charset="utf-8" />
    <title>document</title>
    <link rel="stylesheet" type="text/css" href="./示例.css" />
  </head>
  <body>
    <h2>标题</h2>
    <p>第一句话</p>
    <p>第二句话</p>
  </body>
</html>

下图是示例.css

h2 {
  color: gold;
  font-size: 30px;
}
p {
  color: pink;
}

在这里插入图片描述

优点：实现结构样式分离，更改一个的同时可以更改多个，大大提升效率；可重复使用
缺点：需要引入，编写和查找不便；需要链接才可使用

吃一口奶黄包

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
编写css的三种方式及其优缺点

编写CSS的三种方式及其优缺点
复制链接

扫一扫

编写css的三种方式及其优缺点

自学前端系列之HTML与CSS

第十节：编写CSS的三种方式及优缺点比较

方式1：内联样式

方式2：内部样式

方式3：外部样式

“相关推荐”对你有帮助么？