CSS与JS的使用方式

最新推荐文章于 2023-11-23 20:49:56 发布

weixin_34067980

最新推荐文章于 2023-11-23 20:49:56 发布

阅读量207

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/u/3861934/blog/3005555

版权

2019独角兽企业重金招聘Python工程师标准>>>

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。