CSS的引入样式

最新推荐文章于 2024-04-06 22:43:58 发布

Endeavor HuA

最新推荐文章于 2024-04-06 22:43:58 发布

阅读量281

点赞数 1

文章标签： css html 前端

本文链接：https://blog.csdn.net/weixin_52723107/article/details/125872795

版权

CSS的引入样式

内联样式（行内样式）

优点：优先级较高
缺点：样式与结构冗余

 内联样式表就是把css代码直接写在现有的HTML标签中，具体的使用方法如下面所示：

<div style="background-color: aqua;">我是一个div</div>

//如果有多条css样式代码设置可以写在一起，中间用分号隔开
  设置字体颜色为红色，并且字体大小为14px
<div style="color:red;font-size:14px"> </div>

 注意：这种样式只会对当前标签起作用，在测试的时候可以使用，不能对样式进行复用，不方便后期维护，不推荐使用

内部样式表

优点：样式与结构分离
缺点：样式的复用率较低

将样式表编写到head中的style标签中

<style>
        div {
            /* 字体大小 */
            font-size: 28px;
        }
</style>

-style标签要写在head标签的开始标签和结束标签之间

外部样式表

优点：样式与结构分离，解耦；样式的复用率高；定义好的css文件可以应用到多个页面中
```
 将样式表编写到外部css文件中，通过link标签将外部文件引入
```
```
<link rel="stylesheet" type="text/css" href="文件的路径"/>
```
将样式编写到外部样式表中，可以在不同的页面中使用同一个样式表，完全将表现和结构分离，方便后期的维护，推荐使用的方式

引入方式的优先级：行内样式 > 内部样式 / 外部样式