1、CSS的使用方式
CSS可以通过以下三种方式添加到HTML中:
- 行内样式：在HTML元素中使用"style"属性；
- 内部样式：在HTML文档头部<head>区域，使用<style>元素来包含CSS；
- 外部引用：使用外部CSS文件；
1.1 行内方式
CSS-01 这是CSS的使用方式（行内样式）。
1.2 内部方式
CSS-02 这是CSS的使用方式（内部样式）。
1.3 外部方式
外部方式是通过<link>标签的href属性引用外部css文件。
CSS-03 这是CSS的使用方式（外部引用）。
该示例引用的外部文件为同一目录下的03.css。
/*03.css*/p{ color:red; text-align:left;} 2、JS的使用方式
JS可以通过以下三种方式添加到HTML中:
- 行内方式：在HTML元素中使用事件属性；
- 内部方式：在HTML文档体部<body>区域，使用<script>元素来包含JS；
- 外部引入：在HTML文档头部<head>区域或体部<body>区域，使用<script>元素引入外部JS文件；
2.1 行内方式
在HTML元素中使用事件属性调用JS，如下面案例中的onclick属性，当点击div或a元素，会激发JS函数alert()，弹出相应提示。
JS-01 请点击这是一个超链接
2.2 内部方式
在HTML文档体部<body>区域，使用<script>元素来包含JS。一般来说，script标签需要放在其调用到的元素下方。
JS-02 请点击请点击下面的按钮！
2.3 外部引入
HTML文档既可以在头部<head>也可以在体部<body>其调用到的元素下方引入外部JS文件。为了防止HTML文档在完全加载（就绪）之前运行JS，在头部<head>区域中引入JS文件，文件需要加入window.onload = function(){}，所需要引入的语句在{}中编辑。
JS-03 请点击！
JS文件:
/*在head标签中引入的JS文件03.js*/window.onload = function () { var oDiv = document.getElementById('box'); oDiv.onclick = function(){ alert('这是JS的使用方式（内部方式），script标签需要放在body标签的底部。'); };}; 3、CSS与JS的使用方式的比较
| 行内方式 | 内部方式 | 外部方式 | |
|---|---|---|---|
| CSS | 在HTML元素中，使用style属性设置CSS样式； | 在<head>区域中，使用<style>标签设置CSS样式； | 在<head>区域中，使用<link>标签的href属性设置CSS样式； |
| JS | 在HTML元素中，使用事件属性设置JS； | 在<body>区域中，使用<script>标签设置JS，<script>标签需要放在其调用到的元素下方 | 在<head>区域或<body>区域中，使用<script>标签的src属性设置JS。 |