Question

我创建了一些CSS类，只是声明将在我的Web应用程序中使用的某些十六进制颜色。在HTML中我试图将这些颜色应用于特定文本。出于某种原因，我无法获得要应用的样式。

CSS

.custom-orange-color {
  color: #F58B30;
}

.custom-pink-color {
  color: #ED178F;
}

HTML

<p>This is the custom <style class="custom-orange-color">orange</style> color and this is the custom <style class="custom-pink-color">pink</style> color.</p>

事实上，当我使用它时，style标签内的文字会一起消失吗？

Answer 1

您正在滥用css类。而不是<style>代码使用<span>。样式标签用于将css放入其中，而不是使用类或任何css规则。

span标记用于对文档中的内联元素进行分组。

span标记本身不提供任何视觉变化。

span标记提供了一种向文本的一部分添加钩子的方法   文件的一部分。

在您的情况下，您可以通过将正确的类分配给相应的span元素来指定所需的颜色。它会是这样的：

.custom-orange-color {
  color: #F58B30;
}

.custom-pink-color {
  color: #ED178F;
}

<p>This is the custom <span class="custom-orange-color">orange</span> color and this is the custom <span class="custom-pink-color">pink</span> color.</p>

Answer 2

<style>元素旨在保存样式表。它并非旨在容纳内容。

文档的<body>应包含最能描述该文本语义的文本和HTML元素。

<style>元素应该出现在<head>中，并且只包含 CSS。

通过将文字设为橙色，将<style class="custom-orange-color">替换为最能说明您想传达的内容的内容。例如：

<em>

然后为它编写CSS。

em {
  color: #F58B30;
  font-style: normal;
}

strong {
  color: #ED178F;
  font-weight: normal;
}

<p>This is the <em>emphasised</em> color and this is the <strong>strongly emphasised</strong> color.</p>

只有在需要时才添加HTML类（CSS具有类选择器，其他类型的选择器，规则，规则集和各种其他功能，但不包括类）。

您的类选择器的语法是正确的（尽管名称选择不当：它们应该描述意义而不是表示），HTML是错误的。如果您使用了a validator，则可以使用此功能。

Answer 3

这是您的工作代码。您需要使用HTML标记，以便为您呈现样式。 tag用于定义HTML的CSS。它基本上包含样式表而不是内容。

＆＃13;

.custom-orange-color {
  color: #F58B30;
}

.custom-pink-color {
  color: #ED178F;
}

＆＃13;

<p>This is the custom <span class="custom-orange-color">orange</span> color and this is the custom <span class="custom-pink-color">pink</span> color.</p>

＆＃13;

如何使用自定义CSS类设置HTML文本样式

3 个答案: