什么是script？
在HTML和CSS中，我们常常会遇到script这个词，它是什么意思呢？
简单来说，script是指脚本，可以用来增强HTML和CSS的功能。
HTML和CSS是前端界面开发中最常用的两种技术，HTML用来搭建网页骨架，CSS用来美化网页样式。但是它们都有它们的局限性，如果想要实现更多复杂的功能，就需要使用script。
script在CSS中的意义
在CSS中，script通常用于实现一些交互效果和动画效果。
通过script，我们可以实现当用户鼠标移入一个元素时，该元素会发生变化；或者实现当用户点击一个按钮时，页面会自动滚动到指定位置等等。
在CSS中，我们可以使用伪元素:after或:before来插入一些内容。但是这些内容都是静态的，不会自动改变。要实现动态改变，就需要使用script了。
使用script实现动态改变CSS样式
CSS样式通常是静态的，如果想要动态改变，就需要使用script。下面是一个简单的例子：
<style>
.box {
width: 100px;
height: 100px;
background-color: #f00;
}
</style>
<div class="box"></div>
<script>
var box = document.querySelector('.box');
box.addEventListener('click', function() {
box.style.backgroundColor = '#00f';
});
</script>
以上代码中，我们定义了一个类名为“box”的div元素，并为它设置了一个红色的背景色。然后使用script监听鼠标点击事件，当用户点击该元素时，会通过JavaScript改变背景色为蓝色。
使用script实现动态插入CSS
虽然CSS中可以使用伪元素来插入一些内容，但是这些内容是静态的，不会自动改变。如果需要动态插入一些内容，就需要使用script了。
下面是一个简单的例子，用于演示如何使用script动态插入CSS：
<style>
.box {
width: 100px;
height: 100px;
}
</style>
<div class="box"></div>
<script>
var style = document.createElement('style');
style.type = 'text/css';
style[xss_clean] = '.box { background-color: #f00; }';
document.head.appendChild(style);
</script>
以上代码中，我们首先定义了一个类名为“box”的div元素，并设置了它的宽高；然后使用script创建了一个<style>标签，并将CSS代码以字符串形式放入其中；最后使用document.head.appendChild()方法将该<style>标签插入到<head>标签中。
通过这种方法，我们可以实现在页面中动态插入CSS。
小结
script是一种用于增强HTML和CSS功能的脚本语言，它可以实现一些复杂的交互和动画效果。在CSS中，我们可以使用script实现动态改变CSS样式，或者动态插入CSS。
但是需要注意的是，过度的使用script可能会对网页性能产生负面影响，因此需要谨慎选择使用时机。