在HTML中，标签主要用于嵌入或链接样式表，从而控制网页元素的视觉呈现。你可以直接在HTML文档中编写CSS代码，或者链接外部CSS文件。
解决方案
标签的使用方式主要有两种：
-
嵌入式样式： 直接在HTML文档的
部分使用标签，并在其中编写CSS规则。这种方式适用于样式规则较少，且仅应用于当前页面的情况。立即学习“前端免费学习笔记（深入）”；
嵌入式样式示例 这是一个标题
这是一个段落。
在这个例子中，我们通过
标签定义了body、h1和p元素的样式。
-
链接外部样式表： 使用
标签链接到外部CSS文件。这种方式适用于样式规则较多，且需要在多个页面共享样式的情况。首先，创建一个名为
style.css的CSS文件，并在其中编写CSS规则：/* style.css */ body { background-color: #f0f0f0; font-family: Arial, sans-serif; } h1 { color: blue; text-align: center; } p { color: green; }然后，在HTML文档的
部分使用标签链接到这个CSS文件：链接外部样式表示例 这是一个标题
这是一个段落。
这里，
rel="stylesheet"属性指定链接的资源是样式表，type="text/css"属性指定样式表的MIME类型，href="style.css"属性指定CSS文件的路径。
为什么推荐使用外部样式表而不是嵌入式样式？
从代码组织和维护的角度来看，外部样式表更胜一筹。想象一下，如果你的网站有几十个页面，每个页面都嵌入相同的CSS代码，一旦需要修改某个样式，你就得修改所有页面。这简直是噩梦。而使用外部样式表，你只需要修改一个CSS文件，所有页面都会自动更新。另外，浏览器会对外部样式表进行缓存，这意味着用户访问多个页面时，只需要下载一次CSS文件，可以提高页面加载速度。
如何使用媒体查询在
媒体查询允许你根据设备的特性（如屏幕尺寸、分辨率、方向等）应用不同的样式。你可以在标签中使用@media规则来定义媒体查询。
媒体查询示例 响应式设计示例
这个页面会根据屏幕尺寸调整布局。
在这个例子中，我们定义了三种不同的样式：默认样式、屏幕宽度小于768px时的样式和屏幕宽度大于768px时的样式。@media (max-width: 768px)表示当屏幕宽度小于768像素时，应用其中的样式规则。@media (min-width: 769px)表示当屏幕宽度大于768像素时，应用其中的样式规则。这种方式可以让你轻松地创建响应式网页，适应不同的设备。
scoped属性有什么用？为什么不推荐使用？
标签有一个scoped属性，理论上可以使样式只应用于包含该标签的父元素及其子元素。然而，这个属性在HTML5中已经被废弃。虽然一些浏览器可能仍然支持它，但不建议使用，因为它行为不一致且不可靠。
曾经的想法是，使用scoped可以避免样式冲突，让组件的样式更加独立。但实际上，它并没有解决所有问题，反而引入了新的复杂性。更好的做法是使用CSS Modules、Shadow DOM或者BEM（Block, Element, Modifier）等技术来管理CSS作用域，避免样式冲突。这些技术提供了更强大、更可靠的解决方案。
如何使用CSS预处理器（如Sass或Less）来增强
CSS预处理器如Sass和Less，可以让你使用变量、嵌套规则、混合（Mixins）等高级特性来编写CSS代码，提高代码的可维护性和可重用性。虽然你不能直接在标签中编写Sass或Less代码，但你可以先使用预处理器将Sass或Less代码编译成普通的CSS代码，然后再将编译后的CSS代码嵌入到标签中，或者链接到外部CSS文件。
例如，假设你有一个Sass文件style.scss：
// style.scss
$primary-color: #007bff;
body {
font-family: Arial, sans-serif;
background-color: #f8f9fa;
}
.btn {
background-color: $primary-color;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
&:hover {
background-color: darken($primary-color, 10%);
}
}你可以使用Sass编译器将这个文件编译成CSS文件style.css：
/* style.css */
body {
font-family: Arial, sans-serif;
background-color: #f8f9fa;
}
.btn {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
}
.btn:hover {
background-color: #0056b3;
}然后，你就可以在HTML文档中使用标签链接到这个CSS文件：
使用Sass示例
通过这种方式，你可以充分利用CSS预处理器的强大功能，编写更高效、更易于维护的CSS代码。
