css的四种形式
⼀、⾏内式
⾏内式是最直接的⼀种⽅式，它直接对HTML标记使⽤style属性，然后直接将代码写进去。
<head>
<titel> </titel>
</head>
<body>
<p >正⽂内容1</p>
<p >正⽂内容2</p>
<p >正⽂内容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>css简单网页代码
</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>标记中，则按照嵌⼊式优先

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。