解密前端三巨头：HTML、CSS和JavaScript的关系( 二 ) _HTML

可以看到，CSS使用了一对一对的大括号来包裹一组样式声明，每个声明由一个属性和一个属性值组成，中间用冒号（:）分隔，每个声明后面用分号（;）结束。这样就形成了一个规则集，用于描述页面元素的外观和布局。
CSS与HTML紧密关联，通常不能脱离HTML 。为了让CSS生效，我们需要将CSS与HTML关联起来。有三种方法可以实现这一点：

内联样式：在HTML元素中使用style属性，直接写入CSS代码。例如：

<h1 style="color: blue; font-family: Arial; font-size: 36px;">欢迎来到我的网站</h1>

内部样式表：在HTML文档的head部分使用style标签，写入CSS代码。例如：

<head><style>h1 {color: blue;font-family: Arial;font-size: 36px;}/* 其他样式 */</style></head>

外部样式表：在HTML文档中使用link标签，引入外部的CSS文件。例如：

<head><link rel="stylesheet" href=https://www.isolves.com/it/cxkf/qd/2023-10-07/"style.css">其中，外部样式表是最常用和推荐的方法，因为它可以实现样式的复用和分离，提高代码的可读性和可维护性。

CSS是一种层叠的语言，即当一个页面元素有多个来源的样式时，它会按照一定的优先级来决定哪个样式生效。优先级由以下几个因素决定：

来源：浏览器默认样式 < 用户自定义样式 < 开发者定义样式 < 内联样式 < !important
特殊性：ID选择器 > 类选择器 > 元素选择器 > 通配符选择器
顺序：后定义的样式 > 先定义的样式

因此，在编写CSS时，我们需要注意避免样式冲突和覆盖，并尽量使用简洁和高效的选择器。
CSS主要负责定义网页的样式和展示方式，但并不关心内容的交互和动态变化。如果我们只使用CSS来编写网页，那么网页可能会显得静态和无趣。为了让网页更加交互和动态，我们需要使用JavaScript来为HTML和CSS添加行为。
三、JavaScript：网页的高级动作JavaScript是一种用于增强网页的交互性和动态性的语言。它是一种脚本语言，可以运行在客户端和服务器端。通过JavaScript，我们可以实现表单提交、动画效果、弹窗、数据处理等交互行为。例如，以下是一个简单的JavaScript代码：

// 获取页面元素var title = document.getElementById("title");var button = document.getElementById("button");// 定义一个函数，用于改变标题的颜色function changeColor() {// 生成一个随机的颜色值var randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16);// 将标题的颜色设置为随机颜色title.style.color = randomColor;}// 给按钮添加一个点击事件，当点击时调用changeColor函数button.addEventListener("click", changeColor);

这个代码包含了以下几个部分：

//：表示注释，用于解释代码的作用，不会被执行。
var：表示变量，用于存储数据。
document.getElementById：表示一个方法，用于获取页面元素。
function：表示一个函数，用于封装一段可重复执行的代码。
Math.floor、Math.random、toString：表示一些内置的对象和方法，用于进行数学运算和转换。
style：表示一个属性，用于获取或设置元素的样式。
addEventListener：表示一个方法，用于给元素添加事件监听器。

可以看到， JavaScript使用了一些变量、函数、对象、方法、属性等来操作页面元素和数据。每个语句后面用分号（;）结束。这样就形成了一个脚本，用于描述页面元素的行为和逻辑。

JavaScript可以独立存在，但通常用于操作HTML和CSS，以实现交互性和动态效果。为了让JavaScript生效，我们需要将JavaScript与HTML关联起来。有两种方法可以实现这一点：