# 1、CSS与JS引入方式

# CSS引入方式

# 1.行内样式（不推荐）

<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
</head>
<body>
	<div style="background:red"></div>
</body>

# 2.内嵌式

略显麻烦，维护成本高，因此仅适用于对特殊的页面设置单独的样式风格。

<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <style type="text/css">
        //css代码
    </style>
</head>

# 3.外链式(使用频率最高，最为实用的方法)

使用外链式时，会在加载HTML结构之前装载css文件，这样显示出来的网页从一开始就是带有样式

优势:CSS代码和HTML代码完全分离，并且同一个CSS文件可以被不同的HTML所链接使用。前期制作和后期维护都方便，网站后台技术人员和美工设计者有很好的分工合作；对于同一个CSS文件可以链接到多个HTML文件中，甚至是所有页面，网站风格统一，协调，后期维护量大大减少。

<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <link rel="stylesheet" type="text/css" href="1.css">
</head>

# 4.导入式（@import：不常用）

导入式，会在HTML结构加载完成后再加载css文件，对于有的浏览器来说，在一些情况下，如果网页文件的体积比较大，则会出现先显示无样式页面，闪一下之后再出现设置样式后的效果。

import "1.css";

# CSS各种方式的权重

CSS权重

!important 可将优先级提升至最高。行内样式权重：1000 id选择器权重：100 class、伪类和属性选择器：权重为10 元素选择器和伪元素选择器权重为1

通用选择器(*)，子选择器(>)和兄弟选择器(+)的权重都为0

# 导入(@import)和外链式(link)的区别：

WARNING

1.link属于HTML标签，而@import是css提供的;
2.加载时间不同，外链式CSS会先于HTML结构加载，而导入式CSS会后于HTML结构加载
3、import只在IE5以上才能被识别，而link是html标签，无兼容问题
4、link方式的样式的权重高于@import的权重
5.对于较大网站，为了便于维护，可能会希望把所有的css样式分类别放到几个css文件中，这样如果使用链接式引入，就需要几个语句分别导入css，如果要调整css的文件分类，就需要同时调整HTML文件。这对于维护工作来说，是一个缺陷。如果使用导入式，则可以只引进一个总的css文件，在这个文件中再导入其他独立css文件;而链接则不具备这个特性

三种方式在实际使用中，代码分离程度上外链>内链>嵌入式。比较通用的样式适合抽离出来用外链比如（清除标签的默认样式），提高复用性，同时降低样式和内容的耦合；元素独立的不太多的样式感觉可以用嵌入式方便些。

# JS引入方式

# 1.行内样式（安全性比较低，不推荐）

<div onclick="alert('我是学生')"></div>

缺点:

1.因为这种方式跟页面结构代码耦合性太强了，后期维护很不方便，

2.而且这种方式在开发过程中会导致产生很多的冗余代码

# 2.内嵌式

优点：

相对于使用行内js，内嵌式js代码较为集中，与页面结构的实现代码耦合度较低，比较便于维护缺点：

js代码仅限于当前页面的使用，代码无法被多个页面重复使用，导致代码冗余度较高

<script type="text/javascript">
	JS代码块
</script>

# 3.外链式(一般放在body的最后面)

<script type="text/javascript" src="index.js">
	在这里写的代码不会执行：在外链式中，script脚本块中不可以写代码，写了也不执行
</script>

优点：

1.页面代码跟js代码实现有效分离，降低耦合度

2.便于代码的维护和扩展

3.有利于代码的复用 我们通常将JS放在Body的最后面，因为html页面是从上到下开始加载的，JS通常是获取html标签给予动态操作效果的，所以需要先加载html标签之后再加载JS，如果想把JS放在HTML标签前面，则需要用window.onload=function(){} 来实现等HTML结构加载完成后再加载JS

# 总结：

真实项目中，我们一般把CSS文件导入放在head标签中，而把JS导入放在Body的最下面，这样做的好处就是：CSS使用外链式时会在加载HTML页面结构之前加载CSS文件，然后再加载HTML结构，这样显示出来的的网页从一开始就是带有样式的；因为JS操作通常是获取HTML标签给予动态操作效果的，所以需要先加载HTML标签之后再加载JS，所以需要最后加载JS

← 常用基础知识总结 2、JavaScript基础知识 →