1、CSS的使用方式

CSS可以通过以下三种方式添加到HTML中:

  • 行内样式：在HTML元素中使用"style"属性；
  • 内部样式：在HTML文档头部<head>区域，使用<style>元素来包含CSS；
  • 外部引用：使用外部CSS文件；


1.1 行内方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS-01</title>
</head>

<body>
    <p style="color:red;text-align:left;">这是CSS的使用方式（行内样式）。</p>
</body>
</html>



1.2 内部方式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS-02</title>
    <style>
        p{
            color:red;
            text-align:left;
        }
    </style>
</head>

<body>
    <p>这是CSS的使用方式（内部样式）。</p>
</body>
</html>



1.3 外部方式

外部方式是通过<link>标签的href属性引用外部css文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS-03</title>
    <link rel="stylesheet" href="./03.css">
</head>
<body>
    <p>这是CSS的使用方式（外部引用）。</p>
</body>
</html>

该示例引用的外部文件为同一目录下的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()，弹出相应提示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS-01</title>
</head>
<body>
    <!--行内方式-->
    <div onclick="alert('JS的使用方式：行内方式')" style="width:200px;height:100px;background:red;">请点击</div>
    <a href="javascript:void(0)" onclick="alert('这是a标签的JS使用方式（行内方式）')">这是一个超链接</a>
</body>
</html>



2.2 内部方式

在HTML文档体部<body>区域，使用<script>元素来包含JS。一般来说，script标签需要放在其调用到的元素下方。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS-02</title>
</head>
<body>
    <!--内部方式-->
    <div style="width:200px;height:100px;background:red;" id="box">请点击</div>
    <script>
        var oDiv = document.getElementById('box');
        oDiv.onclick = function(){
            alert('JS的使用方式：内部方式，script标签需要放在其调用到的元素下方。');
        }
    </script>

    <!--JS行内方式调用内部方式。-->
    <p id="BT">
        请点击下面的按钮！
    </p>
    <button type="button" onclick="myFunction()">Click Me!</button>
    <script>
        function myFunction()
        {
            document.getElementById("BT").innerHTML="JS行内方式调用内部方式。";
        }
    </script>
</body>
</html>



2.3 外部引入

HTML文档既可以在头部<head>也可以在体部<body>其调用到的元素下方引入外部JS文件。为了防止HTML文档在完全加载（就绪）之前运行JS，在头部<head>区域中引入JS文件，文件需要加入window.onload = function(){}，所需要引入的语句在{}中编辑。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS-03</title>
    <!--外部方式-->
    <script src="./03.js"></script>
</head>
<body>
    <div style="width:200px;height:100px;background:red;" id="box">请点击！</div>
</body>
</html>

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。