CSS與JS的使用方式

時間 2019-12-04

標籤 css 使用方式欄目 CSS 简体版

原文原文鏈接

一、CSS的使用方式

CSS能夠經過如下三種方式添加到HTML中:javascript

行內樣式：在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文件。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。html

/*03.css*/
p{
    color:red;
    text-align:left;
}

二、JS的使用方式

JS能夠經過如下三種方式添加到HTML中:java

行內方式：在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標籤須要放在其調用到的元素下方。spa

<!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(){}，所須要引入的語句在{}中編輯。code

<!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文件:htm

/*在head標籤中引入的JS文件03.js*/
window.onload = function () {
    var oDiv = document.getElementById('box');
    oDiv.onclick = function(){
        alert('這是JS的使用方式（內部方式），script標籤須要放在body標籤的底部。');
    };
};

三、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。