CSS选择器，组合和避免矛盾的样式； （CSS选择器精通和最佳实践）。
#css #网络开发人员 #前端 #开发人员

介绍

级联样式表（CSS）脱颖而出，是造型网页的最终工具。尽管HTML有助于构建和概述我们的网页，但CSS用于为我们的网页着色，设计和设计。假设我们的网页或网站是一栋建筑物，HTML将是块块，以赋予建筑物的形状。 CSS将是我们建筑物的绘画，造型和装饰。说明JavaScript在所有这些方面的位置也很好。最终，JavaScript用于维护或赋予我们网页中元素的功能。通过CSS实施的简单颜色组合可以在网页或网站上产生很大的不同。尽管本文中有很多有关CSS样式的知识，但您将了解CSS选择器以及如何避免在网络项目中进行矛盾的样式。

表中的内容

  1. 什么是CSS选择器
    我。什么是CSS
    ii。什么是选择器

  2. 不同CSS选择器的用途是什么 我。哪些不同的CSS选择器可用
    ii。 CSS选择器的特定用途是什么

  3. 不同CSS选择器及其独特性的示例。
    我。不同CSS选择器的示例
    ii。每个CSS选择器的独特性

    4. 是什么

  4. 不同CSS选择器与示例的组合
    我。选择与混合选择器
    A。多个选择器
    b。分层选择器
    C。组合的选择器
    ii。一个空间和没有空间的空间有什么区别。

  5. 如何避免我们的网页设计中的矛盾样式
    我。了解网页设计中的冲突样式
    ii。造型冲突的主要原因是什么
    iii。方式以及如何避免冲突样式
    iv。良好CSS样式的原理和最佳实践

先决条件

为了充分利用本指南，您应该对HTML，CSS和 /或JavaScript有基本的了解。如果您不熟悉这些技术，我们建议您花几分钟进行检查，以便在进行本指南之前熟悉它们。

1.什么是CSS选择器

在我们查看CSS选择器之前，了解CSS本身很重要。因此，我们将迅速查看以下内容，以正确了解CSS和CSS选择器。

我。什么是CSS：

根据几种来源，包括官方文档，教程和书籍，级联样式表（CSS）可以定义为一种样式语言，用于描述用标记语言编写的文档的演示和格式化，例如超文本标记语言（ html）或XML。它允许开发人员和网络设计人员控制网页的布局，设计和外观，从而更容易将内容与演示文稿分开。例如，如果我们的网页是建筑物，则标记语言HTML将用于建筑物的铺设块或结构，而我们的CSS将用于我们的建筑物的绘画，设计和装饰。

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      <h1>Hello World!</h1>
    </body>
    </html>

注意：您可以通过按Control Button + Code中的control Button Mark生成上述。

如果将上述内容放在filename.html文件中并使用任何浏览器打开，则显示带有黑色Hello World文本的白页。

Code on the editor & or its Output

说我们希望文本的颜色是红色的，这是CSS进来的地方。

我们可以在上面的标记中通过以下标记中包含一些样式

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
      </head>
      <body>
        <h1 style="color: red;">Hello World!</h1>
      </body>
    </html>

Code on the editor & or its Output

请注意差异！

ii。什么是选择器：

选择器可以称为标记或参考名称，我们可以使用这些标记名称来定型HTML元素。在编写良好的CSS时，最好将所有CSS和样式文件保存在单独的文件中。这是一个好习惯。在大多数情况下，软件工程师或开发人员将此文件styles.css命名。因此，而不是将我们的CSS样式包括在我们的HTML中，而是将其保存在单独的文件中。 Atimes，有些人完全将其放在单独的文件夹中。在同一文件夹中创建一个名为style.css的新文件，其中我们拥有HTML文件。我们所有的CSS样式将写在此CSS文件中。

Code on the editor & or its Output

要设置上方的H1，首先我们需要删除上面H1中的内联样式，以便我们的样式可以反映。

现在，在我们的CSS文件中，我们可以使用选择器选择我们的H1然后写下我们的样式。请参阅下面的样本。
在我们的CSS文件中，写或粘贴以下样式； 

h1 {
        color: red;
      }

这会像我们在HTML文件中写入H1标签时一样更改H1的颜色。

Code on the editor & or its Output

这是我们所说的外部CSS，为了使其正常工作，我们必须将其连接到我们的HTML文件中，包括下面的HTML文件的头部。

  `<link rel="stylesheet" href="style.css">`

Code on the editor & or its Output

在上面的示例中，H1是选择器。

2.不同CSS选择器的用途是什么

正如我们在上面看到的，选择器只是我们可以使用的参考，可以在HTML元素上应用样式。它们被用作参考文献，我们可以通过它对任何HTML元素应用独特或独特的样式。

我。哪些不同的CSS选择器可用：

想象一下，如果我们只有一个选择器，并且在HTML文档中有多个H1。在每个样式上应用不同的样式是不可能的，因为如果浏览器看到单个元素的不同样式，则保留了最后一个元素。
看看; 

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
        <title>My page</title>
      </head>
      <body>
        <h1>Welcome to my site</h1>
        <h3>First Selector</h3>
        <p>This is a paragraph tag. We can include many sentences within here.</p>
        <h3>Second Selector</h3>
        <p>HTML is for layout. It is for inputting and arranging our document in our webpage</p>
      </body>
    </html>

以我们的style.css，可以说我们想在H3 

h3 {
        background-color: black;
      }

      h3 {
        background-color: brown;
      }

Image description

我们将看到两个H3的背景色将是棕色的。这是因为H3标签选择了我们的HTML中的所有H3元素。那么出路是什么？

要注意的重要点：
在带有CSS的HTML标记上的样式应用程序中，如果在同一元素或HTML标签上有两种样式，则最后一个样式是应用的。这是我们上面拥有的。我们在H3上有两种不同的样式，但是在代码线上进一步的样式是应用的。这是考虑为什么使用CSS的最重要规则之一。

我们可以使用其他CSS选择器。这包括;
A。 html tagname
b。班级
C。 id

ii。 CSS选择器的特定用途是什么

我们知道所有CSS选择器都可以用于将样式应用于我们的HTML元素。对于上面的不同选择器，我们网页上的每个HTML元素或内容或我们网页上的一组内容都可以单独应用于它们或作为组。

3.不同CSS选择器及其独特性的示例

您可能想知道，所有这些CSS选择器之间有什么区别？这些选择器中的每一个虽然都有很多相似之处，但它们也具有独特性。

我。不同CSS选择器的示例

看看这个。
让我们在上面的HTML中编辑我们的身体：

<body>
        <section id="section1">
          <h1 class="header1 brown">Welcome to my site</h1>
          <h3 class="blue">First Selector</h3>
        <p class="brown">This is a paragraph tag. We can include many sentences within here.</p>
          <h3 class="brown">Second Selector</h3>
          <p class="blue">HTML is for layout. It is for inputting and arranging our document in our webpage</p>
        </section>
      </body>

然后以我们的style.css，让我们包括以下样式

body {
        background-color: #8f8f8f;
      }

      #section {
        font-family: sans-serif;
      }

      .header1 {
        font-size: 3.5rem;
        line-height: 1.5;
        font-weight: 900;
        color: #fff;
      }

      h3 {
        font-size: 2.5rem;
        }

      .blue {
        color: blue;
      }

      .brown {
        color: brown;
      }

您可以尝试预测页面的外观。在下面检查

Image description

有关我们的输出，这里显示的内容很多。身体和H3是HTML标签选择器。 Header1，蓝色，棕色都是类选择器，而第1节是ID。重要的是要注意如何使用它们。通过仔细使用我们的CSS选择器，我们可以将多种样式和独特样式应用于任何HTML元素。

Image description

ii。每个CSS选择器的独特性是什么：

重要的是要了解这些CSS选择器的独特性。建立此问题的第一种方法是通过它们在我们的样式中的使用。我们可以查看它们在我们的HTML和CSS文件中的使用方式。

a。查看它们的使用方式或出现在我们的每个文件中。
对于 html标签名称：如果我们在CSS中有<h2>Heading<h2>，我们可以说h2 {our style}。就像我们上面一样，身体和H3是用于样式的HTML tagname。例如，在我们浏览器中输出的灰分后盖是一种应用于身体的样式。

对于类：我们将class="classname"包括在我们的HTML元素的开头标签中。查看使用情况，我们使用.classname {our style}使用className将特定样式应用于我们的HTML元素。在上面的示例中，您的H1，第一段和第二段H3内容具有颜色棕色，因为类别是Brown类的样式。在我们的html文件和.css中的棕色中查看棕色一词。因此，我们能够使用类对多个元素应用相同的样式。

对于ID：它在我们的HTML文件中具有几乎相同的实现。不同之处在于，对于ID，我们在HTML和CSS中使用ID，我们使用#idname进行样式。

b。考虑它们的独特性的另一种方法是每个人的优先和特殊性。根据优先顺序，ID是最重要的。它是外部样式中最优先的，其次是类，然后是HTML tagName。

id 是最独特的，具有特殊用法，其中包括以下内容：
与一次可以在许多元素上使用的类不同，在HTML文件中不能两次发生特定ID。它是外部CSS样式中最优先的。

4.不同CSS选择器与示例的组合：

我们还可以组合选择器以选择特定的HTML元素以在我们的CSS中样式。

我。选择和混合选择器

A。多个选择器

选择器，另一个选择器{

}

说我们有红色的H1和P。

我们可以在CSS文件中使用以下内容； 

h1, p {
    color: red;
}

b。分层选择器

这是由层次结构选择的。这是基于选择器的层次结构

的选择

例如

#title .container-fluid {
    padding-top: 3%;
    text-align: left;
}

selector1 selector2

第一个选择器是父母，而第二个是孩子。
因此，在使用此事时，我们将从外面去，选择父母直到我们去找特定的孩子。

.container-fluid h1 {
color: red;
}

然后，我们从右到左阅读层次结构。右边的是孩子，左侧是父母。

C。组合选择器

这是组合选择器

selector1.selector2 {
   display: flex;
   padding: 20px;
}

selector1＃selector2

我们将从从左到右阅读。

ii。一个空间和没有空间的空间有什么区别。

没有分离器，我们的目标是一个具有我们陈述的类的元素，但是在空间中，这意味着我们正在遵循从父母转移到子女的层次结构。
很高兴记住有关选择器的这一点，它们具有最具体的层次结构ID，这意味着他们要优先考虑，然后是上课，最后是HTML标签。




还要注意，最后的样式将始终应用。
同样，类选择器优于HTML标签，而ID优于类和HTML标签。这些是CSS规则。

然后，在定位我们的样式的位置时，内联CSS也是最强的。

5.如何避免在我们的网页设计中避免矛盾的样式

重要的是要了解避免在我们的发展中造型冲突的方法和方法。当浏览器实现的样式与设计人员或开发人员指定的样式不同时，我们可能会出现样式冲突。有时可能会非常令人沮丧。

我。了解网页设计中的冲突样式

矛盾的样式是当浏览器输出的页面上的样式与代码中指定的样式不同。如果观察到这一点，则可以通过右键单击浏览器来检查页面，然后选择“检查”。 Chrome是一个很好的工具，可以查看页面上的元素上应用的样式。

ii。造型冲突的主要原因是什么

矛盾的样式可以从以下任何一项中发生；
A。具有多种形式的样式。例如，内联，内部和外部或任何两个在一起。
b。具有多种样式来源。这可能会导致样式冲突无法正确解决或监测。
C。省略分离器和样式的正确格式。
d。 HTML文件中样式文件的链接不正确。

iii。方式以及如何避免冲突样式

避免冲突样式的方法是确保仔细地参与上述所有内容并坚持CSS样式中的最佳实践。

iv。良好CSS样式的原理和最佳实践

a。使用ID很少。不仅您拥有其中之一，而且它是不同的，所以请改用类。仅在需要时使用ID，但始终考虑先使用类。
b。当您想使用类时，请务必使用一个类。尝试尽可能多地申请一个类。
C。尽可能避免使用内联样式。这是一个非常糟糕的练习，所以不要这样做。

保持以上所有内容有助于您将调试最低减少到最低。

结论

既然您已经正确掌握了CSS选择器和最佳实践，以实现出色的造型，请进一步努力重构您以前的样式，练习您所学的知识，并使用HTML，CSS和JavaScript在更多的Web设计项目上工作。

。