CSS和JS简介-HTML5极速入门

本文最后更新于：2024年6月17日 下午

CSS

CSS，又称层叠样式表，用于渲染 HTML 元素标签的样式。

我们在创建 HTML 文档时，如果不使用样式美化页面，就是这个样子的：

image

使用样式文件排版美化后，就是这样子的：

image

CSS 可以通过以下方式添加到 HTML 中:

  • 内联样式 - 在 HTML 元素中使用 style 属性
  • 内部样式表 - 在 HTML 文档头部 <head> 区域使用 <style> 元素来包含 CSS
  • 外部引用 - 使用外部 CSS 文件

内联样式

在标签中使用样式属性，如下改变段落的字体颜色：

1
<p style="color:blue;">潘高陪你学编程</p>

内部样式表

对单个文件定义样式，就可以使用内部样式表。在<head> 部分通过 <style> 标签定义内部样式表：

1
2
3
4
5
6
7
8
9
10
11
<html>
    <head>
        <style type="text/css">
            body {background-color:yellow;}
            p {color:blue;}
        </style>
    </head>
    <body>
        <p>潘高陪你学编程</p>
    </body>
</html>

外部引用

当同一样式会被多个 HTML 文档引用时，就应该使用外部样式表。这样，修改一个 CSS 文件，就可以改变整个网站的外观。

1
2
3
<head>
    <link rel="stylesheet" type="text/css" href="/css/mystyle.css">
</head>

当同时使用以上三种方式时，内部样式表的样式会覆盖 内联样式，外部引用 的样式会覆盖内部样式表的样式。

很显然在建站时，更推荐使用外部引用。将样式文件独立出来，不仅便于统一修改，还减少了冗余代码量。不过，在极个别情况下，选择使用 内部样式表 修改单个 HTML 文档样式，或使用 内部样式表 修改单个标签的样式，也是很方便的。

JS

JS，即 JavaScript ，可以使 HTML 页面具有更强的动态和交互性。

<script> 标签

<script> 标签既可包含脚本语句，也可通过 src 属性指向外部脚本文件。

1
2
3
<script>
    document.write("潘高陪你学编程");
</script>

或

1
<script src="/js/myjs.js"></script>

<noscript> 标签

只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容。

1
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>

更多编程教学请关注公众号：潘高陪你学编程

image

如果这篇文章对你有帮助，或者想给我微小的工作一点点资瓷，请随意打赏。
潘高 微信支付

微信支付

潘高 支付宝

支付宝

HTML5 > HTML5极速入门
#HTML5极速入门
CSS和JS简介-HTML5极速入门
https://blog.pangao.vip/CSS和JS简介-HTML5极速入门/
作者
潘高
发布于
2020年5月24日 晚上
更新于
2024年6月17日 下午
许可协议