zoukankan      html  css  js  c++  java
  • HTML结合CSS、JavaScript看这一篇就懂了

    @

    HTML结合CSS

    引入CSS之内联式

    css代码直接写在要设置样式的HTML开始标签中,如果有多条css样式代码中间用英文分号隔开。如下代码:

    <p style= "color:red; font-size:12px">设置文本颜色和大小</p>
    

    引入CSS之嵌入式

    内联式css代码虽然简单,但是一旦需要设置的样式复杂起来,HTML代码看起来就会显得很混乱。
    使用嵌入式CSS样式就可以解决这个问题。把css代码写在<style></style>标签之间。如下代码:

    <style>
    	span{
    		color:green;
    	}
    </style>
    

    上面代码设置span标签内元素颜色为绿色,嵌入式css样式写在<head></head>标签之间

    引入CSS之外部式

    外部css样式也称为外联式,把css代码写在一个单独的外部文件中,文件以“.css”为扩展名,在<head>内使用<link>标签将css外部文件链接到HTML文件中。如下代码:

    <link href="demo.css" rel="stylesheet" type="text/css" />
    

    1、css样式文件名称以有意义的英文字母命名,如 main.css。
    2、rel="stylesheet" type="text/css" 是固定写法不可修改。
    3、<link>标签位置一般写在<head>标签之内。

    这里就有个问题,为什么要把css代码放在<head></head>之间?

    首先把css样式写在<head></head>之间是规范要求的内容。此外,这种做法可以让页面逐步显示,提高用户的体验。如果将样式代码放在文档底部,会使部分浏览器(包括Internet Explorer)不能逐步呈现页面甚至阻止渲染页面。所以这种做法可以防止用户收到空白页面或没有样式的内容。

    三种方式的比较

    介绍完CSS的三种链接方式,那么问题来了它们谁的优先级最高呢?

    权值相同的情况下,内联式 > 嵌入式 > 外部式。总体来讲,就是最近原则——离被设置样式元素越近优先级越高。所以 嵌入式>外部式 有一个前提:嵌入式css样式的位置一定在外部式的后面。既<link href="style.css" ...>代码在<style type="text/css">...</style>代码的前面(实际开发中也是这么写的)。

    HTML结合JavaScript

    引入JavaScript之嵌入式

    -使用一个标签<script type="text/javascript">js代码</script>。如下代码:

    <!doctype html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
      <title>JSdemo1</title>
     </head>
     <body>
        <script type="text/javascript">
    
            //向页面弹出一个框,显示内容
            alert("aaaa");
        </script>
     </body>
    </html>
    

    引入JavaScript之外部式

      使用script标签,引入一个外部的js文件

       创建一个以".js"为扩展名的文件,然后通过<script type="text/javascript" src="demo.js"></script>引入外部文件。代码如下:
      

    <!doctype html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
      <title>JSdemo2</title>
     </head>
     <body>
        <script type="text/javascript" src="demo.js">
            //这里就不要写js代码了,将下行代码直接写在外部文件 demo.js 中即可
            //alert("aaaa"); 
        </script>
     </body>
    </html>
    

       

    1、使用外部式Javascript时,就不要在script标签里面写js代码了,不会执行。
    2、最好把<script>标签放在</body>之前

    那么问题又来了,为什么<script>标签要放在</body>之前
    原因是脚本在下载和执行期间会阻止HTML解析。这样做能保证HTML首先完成解析,将页面尽早呈现给用户。既浏览器不能开始下载脚本,直到整个文档(document)被解析。

    总结

    本文阐述了HTML结合CSS和Javascript代码的不同方式。
    本文讨论了CSS不同链接方式的优先级。
    本文给出了CSS和JS代码所置位置的解释。
    同时,本文遗留了一个问题:什么是权值? 让我留在下篇文章再讲述吧。

    参考

    我的博客园
    本文首发

    感谢点赞

    欢迎大家来我的 [Gitee仓库](https://gitee.com/jiffyzhang)参观。 同时欢迎关注我的同名公众号:就这样写(keepStarve),未来很大可能会活跃在此地。
  • 相关阅读:
    博科SAN交换机基本配置(华为SNS系列交换机为例OEM博科)
    华为SNS交换机(OEM博科FC交换机)Fabric OS: v 8版本后通过https方式浏览器访问交换机Webtools显示没有匹配的加密算法套件的解决办法
    SNS光纤交换机怎样禁用 Virtual Fabric模式
    光纤网络的相关知识
    元音老人:怎样了生死
    戒淫偈【每天念十遍】。。。
    戒淫偈汇集
    净空老法师:你能这样念上一个星期试试看,肯定比你过去念十年还有效!
    修华严奥旨妄尽还原观 第6集
    贤公和尚,佛门榜样。-海贤老和尚往生纪实
  • 原文地址:https://www.cnblogs.com/zhang-bobo/p/13446900.html
Copyright © 2011-2022 走看看