HTML页⾯中引⼊CSS和JS的⽅法总结
HTML⽂件中怎么样引⼊CSS样式和JS，这篇⽂章总结了在HTML中引⼊CSS和JS的⽅法。下⾯我们分两部分分别来介绍，⼤家可以在做⽹页的时候根据情况来使⽤。
1、如何引⼊CSS样式？
1、⾏内样式
通过使⽤html标签的style属性来写。通过这种⽅式写的样式会覆盖掉其他引⼊⽅式的样式，优先选择⾏内样式。缺点是不利于后期维护，如果⼀个页⾯写太多⾏内样式，也会让页⾯看着⽐较乱。
<body>
<p >如何引⼊css样式</p>
</body>
2、写在<style></style>标签内
可以放在页⾯中的任何位置。但通常情况下放在<head></head>标签内。这样⽐较有统⼀性，便于查。
这个⽤在⼀个页⾯中还可以，不利于多个页⾯同⼀样式的使⽤。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>如何引⼊css样式</title>
<style>
p{
color: #2196f3;
font-size:18px;
}
</style>
</head>
<body>
<p>如何引⼊css样式</p>
</body>
3、引⼊外部css⽂件
<link rel="stylesheet" href=".css样式存放路径" type="text/css">这个⽅法需要单独建⽴⼀个css⽂件，所有的样式都放到这⾥⾯。易于维护，并且适合多个页⾯使⽤。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>如何引⼊css样式</title>
<link rel="stylesheet" href=".css样式存放路径" type="text/css">
</head>
<body>
<p>如何引⼊css样式</p>
</body>
这三种⽅法样式的选择优先权为：⾏内样式>页⾯中样式>外部css⽂件。
2、如何引⼊js⽂件
1、引⼊外部js
<script type="text/javascript" src=".js⽂件存放路径"></script>这个⽅法是在外部单独建⽴⼀个js⽂件，页⾯中所有的js都在这⼀个页⾯中。易于维护，⽅便多次使⽤。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>如何引⼊css样式</title>
原生js和js的区别<link rel="stylesheet" href=".css样式存放路径" type="text/css">
<script type="text/javascript" src=".js⽂件存放路径"></script>
</head>
<body>
<p>如何引⼊css样式</p>
</body>
2、当前页⾯中
直接把js效果写在<script></script>标签中即可。这部分内容可以放在页⾯中的任何位置。但是⼀般放在页⾯的底部。这样的话便于页⾯加载完成再执⾏js⽂件。

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