何时以及为何在 CSS 样式表之外使用样式标签

已发表: 2017-10-29

样式标签是 Web 开发中一个非常有趣的部分。我的意思是，它们是当前 Web 工作方式的基础和基础，但大多数时候，您网站的实际样式来自导入和使用大量 CSS 样式表，用于主题、插件和访问者看到的日常外观。

但是回到网站建设的旧时代，您可以在网站的正文中使用样式标签，这没问题。大多数（如果不是全部）页面的 CSS 都会放在页面本身上，然后……它工作正常。如今，这当然存在一些问题——例如页面加载速度和执行顺序，而且越是成熟的网络技术发展，您就越不想单独使用样式标签。

但是，有时您会想要使用它们。有时，它们会增强您的工作流程，而其他实例确实可以让您的用户生活更美好——例如，移动优化，或者通过出色的样式将他们的注意力吸引到特定元素上。

典型的样式表使用

在当今几乎每个网站中，您都会看到这样实现的样式：

<link rel='stylesheet' id='divi-style-css'  href='/wp-content/themes/Divi-child-theme-01/style.css?ver=3.0.40' type='text/css' media='all' />

如果您是使用 Divi 的 Elegant Themes 成员（您应该是！），就会调用我从以下代码段中获取的完整样式表：

/*
Theme Name: Divi
Theme URI: http://www.elegantthemes.com/gallery/divi/
Version: 3.0.40
Description: Smart. Flexible. Beautiful. Divi is the most powerful theme in our collection.
Author: Elegant Themes
Author URI: http://www.elegantthemes.com
License: GNU General Public License v2
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
/* Browser Reset */

body {
	line-height: 1;
}

ol,
ul {
	list-style: none;
}

blockquote,
q {
	quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: "";
	content: none;
}

现在，理论上，您可以将其放在您编写的任何页面的页眉中的样式标记中。它肯定会奏效，但那是糟糕的编码，根本就不是什么风格标签适合。

样式标签，现代用法

当然，您的网站有这样的 CSS 样式表。你会使用它们。您有custom.css和stylesheet.css并且可能不止这些。您已经确定了您的网站应该是什么样子，并且您对此很满意。

那么为什么需要样式标签呢？

因为样式表是全局解决方案。样式标签是一种小规模的解决方案。

表格处理的是您网站的更大外观，而不是具体的单个元素和特殊亮点。有时，将一段一次性的代码放入样式表中所付出的努力比值得的多。

这就是样式标签真正有用的时候。此外，有时您需要调整单个元素或为某些设备或用例做出特定的样式选择。那是样式标签在现代 Web 开发中真正发挥作用的时候。

元素的单个实例

您在站点中使用样式标记的主要原因可能是您正在处理页面上的单个一次性元素。将样式包含在附加到该元素的 id 的外部 CSS 文件中可能会很麻烦（很少，如果有的话，返回）。但是，您可以做的是在元素上添加样式标签，然后继续您的一天。

例如，如果您有一个需要特殊字体的侧边栏小部件，您可以将它放在一个 div 中，为该 div 提供一个 CSS id，然后前往您的电子表格以包含诸如{font-family: “Exo”之类的简单内容, Arial, sans-serif;} ，但这很麻烦。

更好的选择是简单地这样做？

<div style="font-family: "Exo", Arial, sans-serif;" />

bada-bing，bada-boom，你完成了，这个小部件现在很突出，因为它是唯一一个获得这种特殊样式的小部件。（是的，我意识到使用新的和不同的字体可能会与您设计的其余部分发生冲突。但这是一个例子。）

一个简单的页面

有时，您的网站上有一个非常简单的一次性页面。它可能是启动页面或挤压页面。您可能只需要对此处的样式进行一些调整，但您需要将它们应用于此页面，并且仅适用于此页面。

因此，与创建新样式表并链接它相比，您可以使用经常受到诽谤的!important标签和样式来更快、更轻松地完成工作。如果你没有很多新的 CSS，最好使用这种方法，因为加载大量的 CSS 会减慢页面加载速度。但你已经知道了。

然而，像这样简单的事情不会对您的用户连接造成太大的压力，而且真的不值得添加到样式表中。（公平地说，这个 CSS 很丑陋，不值得添加到任何网站。Tee hee！）

<style>
h2, h3, h4 {
  font-family: "Exo", Arial, sans-serif!important; 
  text-align: right; 
	font-size: 2rem; 
	color: blue;}
body, p {font-family: "Roboto", Arial, sans-serif!important; 
  font-size: 1.2rem; 
	color: red; 
	background: #000;}
	</style>

不过，这里的重点是 HTML 5 很酷，您可以将样式标签添加到网站的头部，以便您调整现有的样式表。虽然在这种情况下绝对不需要!important标签（它们很少需要），但我觉得这也许是使用它们的一次，因为它们不会像您（或其他开发人员）开始在该站点上工作，因为它们仅适用于该单个页面。

多种视口尺寸

媒体查询是您的朋友。如果您不完全熟悉它们，那么我强烈建议您阅读它们。基本上，您可以声明某些 CSS 必须满足哪些参数才能生效。但是，大多数情况下，您将使用它来确保您的网站在不同的设备上运行。当您需要站点范围的响应能力时，这将包含在样式表中。

但同样，如果您有一个页面或元素需要在移动设备上以不同的方式显示或根本不需要显示（甚至更小或更大的桌面分辨率），您可以使用标题中的样式标签来实现。

<style>
@media (max-width: 767px) {

.white_text {
    color: #ffffff;
}

.blue_text {
    color: #cbe1f3;
}

.white_background {
    background-color: #ffffff;
}

.blue_background {
    background-color: #003663;
}

#email_form_a {
  display:none;
}
</style>

造型和轮廓

CSS 现在是 Web 开发的重要组成部分，几乎每个人都必须了解和使用它。甚至比了解CSS 更重要的是知道何时使用您可以访问的细微工具。

所以不要觉得你只限于样式表。当然，它们很棒而且很有用，它们使整个网络成为一个更好的地方，但您仍然可以使用简单的样式标签，也可以让您的网站更受欢迎。

那么如何在 .css 样式表之外使用样式标签呢？ 你能给人们什么见解？

Creative Thoughts/shutterstock.com 的文章缩略图