css样式表的三种方式

最新推荐文章于 2022-10-25 16:08:26 发布

无悟饭空

最新推荐文章于 2022-10-25 16:08:26 发布

阅读量3.9k

点赞数

分类专栏： html和css

本文链接：https://blog.csdn.net/weixin_43269800/article/details/103792848

版权

53 篇文章 0 订阅

订阅专栏

一、行内样式

使用style属性引入CSS样式。

示例：

<h1 style="color:red;">style属性的应用</h1>
<p  style="font-size:14px;color:green;">直接在HTML标签中设置的样式</p>

实际在写页面时不提倡使用，在测试的时候可以使用。

二、内部样式表在style标签中书写CSS代码。style标签写在head标签中。示例：

<head>
   <style type="text/css">
      h3{
            color:red;
         }
   </style>
</head>

三、外部样式表
CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表，有两种方式：链接式、导入式。
语法：
1、链接式

<link type="text/css" rel="styleSheet"  href="CSS文件路径" />

2、导入式

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

link标签引入
1、属于XHTML
2、优先加载CSS文件到页面
@import
1、属于CSS2.1
2、先加载HTML结构在加载CSS文件。

行内样式>内部样式>外部样式(后两者是就近原则)

关注