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),未来很大可能会活跃在此地。
  • 相关阅读:
    codevs 2632 非常好友
    codevs 1213 解的个数
    codevs 2751 军训分批
    codevs 1519 过路费
    codevs 1503 愚蠢的宠物
    codevs 2639 约会计划
    codevs 3369 膜拜
    codevs 3135 River Hopscotch
    数论模板
    JXOJ 9.7 NOIP 放松模拟赛 总结
  • 原文地址:https://www.cnblogs.com/zhang-bobo/p/13446900.html
Copyright © 2011-2022 走看看