zoukankan      html  css  js  c++  java
  • 了解内联和外联css,js文件


    内联CSS也可称为行内CSS或者行级CSS,它直接在标签内部引入。

    优点:便捷、高效

    缺点:不能够重用样式

    代码样式:

    <p style="color:red;font-size:18px">这里文字是红色。</p>

    外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在内使用标签将css样式文件链接到HTML文件内。

    代码样式:

    <link href="base.css" rel="stylesheet" type="text/css" />
    1
    内联JS
    代码示例:

    下面的IsEven() 函数是以内联的方式出现在网页中的.

    [html]
    [head]
    [script type="text/javascript"]
    function IsEven()
    {
    var number = document.getElementById("TextBox1").value;
    if (number % 2 == 0)
    {
    alert(number + " is even number");
    }
    else
    {
    alert(number + " is odd number");
    }
    }
    [/script]
    [/head]
    [body]
    [form id="form1" runat="server"]
    Number :
    [asp:TextBox ID="TextBox1" runat="server"][/asp:TextBox]
    [input type="button" value="Check Number" onclick="IsEven()" /]
    [/form]
    [/body]
    [/html]

    外联JS
    外部式JS就是把JS代码写一个单独的外部文件中,这个JS文件以“.js”为扩展名。

    新建JS文件,命名为ExternalJavaScript.js:
    function IsEven()
    {
    var number = document.getElementById("TextBox1").value;
    if (number % 2 == 0)
    {
    alert(number + " is even number");
    }
    else
    {
    alert(number + " is odd number");
    }
    }

    将ExternalJavaScript.js引入到HTML文件中:
    [html]
    [head]
    [script type="text/javascript" src="ExternalJavaScript.js"][/script]
    [/head]
    [body]
    [form id="form1" runat="server"]
    Number :
    [asp:TextBox ID="TextBox1" runat="server"][/asp:TextBox]
    [input type="button" value="Check Number" onclick="IsEven()" /]
    [/form]
    [/body]
    [/html]

    使用外部JS相较于内联JS的优势:

    可维护性:
    外置Javascript文件可以被多个页面调用而不用在每个页面上反复地书写.如果有需要改变的部分,你只需要在一处修改即可.所以外置Javascript导致代码工作量减少,进而使得维护手续也更加方便。

    关注点分离:
    将Javascript封装在外部的.js文件遵循了关注点分离的法则.总体来说,分离HTML,CSS和Javascript从而让我们更容易操纵他们.而且如果是多名开发者同步工作的话,这样也更方便.

    表现性:
    外置Javascript文件可以被浏览器缓存住,但是内联Javascript在每次页面加载的时候都会被重新加载。

  • 相关阅读:
    Codeforces 938G(cdq分治+可撤销并查集+线性基)
    codeforces 938F(dp+高维前缀和)
    寒武纪camp Day6
    寒武纪camp Day5
    寒武纪camp Day4
    bzoj4161 (k^2logn求线性递推式)
    loj10003加工生产调度
    loj10002喷水装置
    loj10001种树
    bzoj1023
  • 原文地址:https://www.cnblogs.com/xiongww/p/11037326.html
Copyright © 2011-2022 走看看