2025年css的四种形式

科技前沿 • 2025-03-06 20:09 • 阅读 23

大家好，我是讯享网，很高兴认识大家。

一、行内式

行内式是最直接的一种方式，它直接对HTML标记使用style属性，然后直接将代码写进去。

<head> <titel> </titel> </head> <body> <p style="color=#fff000;font-size=20px;text-decoration:underline;">正文内容1</p> <p style="color=#ff00ff;font-size=30px;text-decoration:underline;">正文内容2</p> <p style="color=#000000;font-size=20px;text-decoration:underline;">正文内容3</p> </body>

讯享网

行内式是最简单的一种方式，它只需要为每一个标记设置style属性。但是后期维护成本高，网页过于肥胖。不建议使用。

二、内嵌式

内嵌式就是将css写在<head></head>之间，并且用<style></style>标记进行声明，

讯享网<html>
<head>
<style  type="text/css">
p{
color:red;
text-decorection:underline;
font-size:20px;

}
</style>
</head>

<boty>
<p>这是正文内容1</p>
<p>这是正文内容2</p>
<p>这是正文内容3</p>

</boty>
</html>

内嵌式将css代码集中在一个区域，比较集中，网页也大大的瘦身了。但对于有很多网页的网站，不同的网页中p标记都要使用相同的样式是略有些麻烦，维护成本高。所以仅在特殊页面中使用。

三、链接式

链接式css样式表是使用频率最高的，也是最实用的，它将HTML页面本身和css样式分离为多个文件，后期维护很方便。

<html>
<head>
<titel>标题</titel>
<link href="01.css" type="text/css" rel="stylesheet">
</head>
<body>
<h3>标题</h3>
<p>这是正文1</p>
<h3>标题2</h3>
<p>这是正文2</p>
</body>
</html>

先建一个HTML文件，在建一个01.css文件，再通过<link href="01.css" type="text/css" rel="stylesheet">将css文件链接到页面中。

四、导入样式

与链接相似，只是语法上有些不同。采用import的方式导入，在HTML文件初始化的时候就被导入到HTML文件内，类似于内嵌式的效果。而链接式，是在HTML需要格式时，才导入。

在HTML导入样式中，有常用的几种@import语句,任意选一种放在<style></style>标记中

讯享网

@import url(" sheet1.css");

@import url( sheet1.css);

@import url('sheet1.css');

@import " sheet1.css" ;

@import ' sheet1.css';

@import sheet1.css;

讯享网<html>
<head>
<titel></titel>
<sytle type="text/css">
<!--
@import url("sheet.css");
-->
</style>
</head>
<body>
<h3>标题1</h3>
<p>这是内容1</p>
1<p>这是内容1</p>
<h3>标题2</h3>
<p>这是内容2</p>
</body>
</html>

五、优先级

1）行内式>内嵌式>外部链式；外部链式中，链接式和导入式，谁在后面以谁为准。

2）如果，<head></head>存在多个<style></style>标记时，那么这些<style>标记与链接式之间按照先后顺序决定优先级，而同在一个<style>标记中，则按照嵌入式优先

2025年css的四种形式

相关推荐