想象一下，您正在设计网页。你想要一个段落拥有大的红色字体，另一个段落有中等白色字体，以及有小蓝色字体的最终段落。

感谢CSS类，您可以完全做到这一点。CSS类使您可以将唯一样式属性应用于HTML元素组，以便实现所需的网页外观。

在此帖子中，我们将介绍您需要知道的一些术语，如CSS类，类选择器和CSS特征。我们还将通过如何在CSS中创建一个类并使用它来样式的网页。

类属性不会影响HTML文档的语义含义。含义，只需将类属性添加到没有任何CS的元素，不会更改前端上元素的外观或格式。

但是，您仍然应该选择一个不是基于元素的外观的名称，以避免添加CSS时的混淆。例如，假设您希望在页面上粗体制作所有标题并将其字体颜色更改为蓝色。要启动，您将创建并将类名添加到标题元素中。而不是使用类名。大胆的，选择一个名字。明亮的．这样，您就不会混淆类名和HTML粗体元素。

类名不必是一个单词。创建CSS类的广泛接受的做法是使用小写并将空格替换为连字符。一些例子包括。亮蓝色和.fancy-text.．

现在我们了解CSS类是什么以及它在HTML文件的身体部分中出现的内容，让我们来看看常见用例。

如何使用CSS类

您可以使用CSS类来组HTML元素，然后向它们应用自定义样式。

例如，在引导CSS， CSS类.btn.可以与元素以及和元素一起使用。因为Bootstrap的默认样式表包含CSS，它会自动格式化任何用.btn类定义的元素，只要把这个class属性添加到HTML元素中，就会改变它的外观和行为。例如，向按钮元素添加.btn类将设置字体和字体大小，如果访问者单击按钮文本，则会出现一个边缘为圆角的按钮轮廓。

现在，我们只看HTML以及它在前端的样子。我们将在下一节讨论CSS。下面是一个类属性在HTML中的显示方式:

点击我


这是结果：

图片来源

如果没有此按钮类，您可以使用类型选择器来定位所有按钮并应用此CSS。但您必须为您想要以相同方式格式化的任何或<输入>元素编写相同的CSS。因此，CSS类使您可以在编写较少的代码时格式化不同类型的元素。

但是，假设您不使用Bootstrap CSS。然后，您需要知道如何创建自己的CSS类。为此，您需要知道类选择器是什么。让我们先看看那个。

不是绿色
绿色
不是绿色
 在本段中出现的链接是绿色的。

然后，您可以为该特定类创建规则集。您只是需要一个类选择器和声明块。声明块由使用值定义的CSS属性组成。例如，在下面的示例中，CSS颜色属性由颜色名称“绿色”定义。

这是CSS：

.pastoral {
颜色：绿色;
｝

结果:

图片来源

您现在已经成功创建了一个CSS类。当应用于元素时，.pastoral类将其字体颜色更改为绿色。现在让我们看一些更复杂的例子。

后代选择器

使用CSS类选择器的目的是对特定的元素应用格式化。为此，后代选择器是您工具箱中的一个很好的补充。

后代选择器允许您定位其他元素内的元素。例如，您可能已经创建了一个类来定义所需的段落文本的一般样式，但需要段落中的某些单词粗体或斜体。

后代选择器允许您将这些特殊样式添加到特定单词，而不会影响段落的其余部分或更改HTML文档。

假设您将.pastoral类应用于标题，但希望在标题中更改单个单词的颜色。然后，您可以将单词包装在跨度元素中并使用后代选择器。您只需使用相同的声明块添加另一个规则集。唯一的区别是CSS类选择器之后.pastoral，添加空格，然后添加类型选择器跨度．

HTML:

.pastoral {
颜色：绿色;
｝
.pastoral跨度{
颜色:红色;
｝

结果:

图片来源

但是，要注意不要做得太过了——过度使用后代选择器可能会导致您设置令人困惑的规则，从而使更改变得困难。

与伪课程的造型链接

在网页上看到的不仅仅是HTML内容。当用户与页面交互时，会传输大量关于用户活动的信息。这其中的一些信息是什么他们在做什么。

考虑内容中的链接。用户可能会或可能不会与之交互。如果他们这样做，您可以使用伪类来捕获临时用户信息，例如悬停，单击，然后按照链接。

伪课程由冒号识别，然后是班级。在CSS选择器之间，它们将出现在没有空间的CSS选择器之后。

用于链接样式的常见伪类

• :链接表示用户未访问的链接。
• ：访问指示用户之前访问过的链接。
• ：徘徊显示与用户光标的链接。
• :主动标记一个被按下的链接。

让我们看一个例子。说你想从某些链接中删除下划线在所有国家。意思是，无论用户是否尚未访问链接或具有，在它上面悬停，或积极按下它，下划线不会出现在这些特定链接下方。

在这种情况下，您只需将类属性添加到要删除下划线的链接。然后使用类选择器和四个相应的伪类添加四个规则集。在每个声明块中，您将将文本装饰属性设置为“无”。

HTML:

 html站点上的链接
默认情况下，下划线将出现在每个状态的链接中：在悬停过来时，单击，访问或不访问。您可以使用CSS将其删除。

  这是一个未格式化的链接 ，它在段落中出现。

这是一个格式化的链接，出现在一个段落

这是CSS：

.no-notline：链接{
文字修饰:没有;
｝

.no-cloudline：访问{
文字修饰:没有;
｝

.no-underline:{徘徊
文字修饰:没有;
｝

.no-notline：活动{
文字修饰:没有;
｝

结果:

图片来源

用伪类样式化按钮

伪课可用于风格各种选择器。除了文本链接，还可以格式化按钮。

与之。按钮CSS类，您可以为不同状态进行样式按钮外观：:链接，：访问，：徘徊， 和:主动．

ID选择器

ID选择器工作非常类似于类选择器，只能更加严格。使用此方法，您的每页有一个唯一的ID，可以重用样式。

使用ID选择器涉及ID属性在您想要选择的HTML元素上。相应的选择器以井号(#)开始，而不是句号(.)。

要选择，元素的ID属性必须与选择器中定义的值匹配。

此外，ID属性为URL片段提供目标（例如页面锚点） - 所以它们应该是唯一的。片段可帮助您将用户推荐给网页的特定部分 - 片段看起来像一个位于URL末尾的ID选择器。

来源

ID选择器很少是开发人员的最爱。将唯一ID分配给页面上的每个元素是耗时的，如果您有多个元素到样式，则CSS最终会出现笨重。

此外，该方法使您的网站的URL依赖于CSS样式。一个小的错误，例如忘记在编辑URL后更新样式表，可能会破坏部分或整个网站。

CSS特异性

在某些情况下，不同的CSS选择器有不同的权重。当两个或多个规则在同一个元素上发生冲突时，应用更具体的规则CSS特异性是关于。某些浏览器规则的样式声明排名确定元素的最终外观。

这就是ID选择器发挥作用的地方。因为它们是如此的具体，几乎任何其他类型的选择器都会对它们不利。另一方面，通用选择器(*)由于特异性较低，每次都会丢失。

以下是不同的选择器在层次结构中的排名:

1. 内联CSS：内联CSS作为样式属性出现在HTML元素的开始标记中。因为这种CSS最接近HTML，所以它具有最高级别的专一性。
2. ID选择器:ID对于页面元素是唯一的，因此非常特定。
3. 类选择器、属性选择器和伪类选择器:这三种选择器类型具有相同的特殊性。如果所有这三种类型都应用于同一个HTML元素，那么样式表中最新出现的那一种将应用并覆盖其余的。
4. 类型选择器：这些选择具有给定节点名称的所有HTML元素并具有语法元素．这些是元素名和伪元素。

开始使用CSS类

CSS类可以帮助你更快更容易地定制网页上的元素。使用CSS类选择器允许您设置规则来格式化HTML元素的整个类、类中的特定元素或跨多个类的单个元素。当你设计你的网站的时候，你可以想多有创意就多有创意，但是记住，你的目标是改进你的网站用户体验（UX）．