CSS-sélecteur, et son rôle dans la mise en forme document html

Création d'un site Web et de le remplir avec certains éléments d'une page Web, tout le monde devra faire face à un terme comme CSS-sélecteur.Elle sert à déterminer le plus précisément tous les éléments du fichier html de leur conception et l'emplacement sur la page.Pour ce faire, créer un CSS-un document qui énonce certains sélecteurs et leurs options de formatage: la couleur, la taille, la position, et d'autres.Chaque concepteur de sites Web devrait savoir et être en mesure d'entrer correctement les dates de sélecteurs.Ils sont divisés par type, la principale dont nous discutons ci-dessous.

Types sélecteurs CSS

Selon ce html-élément applique la mise en forme, CSS sélecteur peuvent se référer à l'un des groupes suivants:

  • balises de sélection;
  • sélecteur de classe;
  • id-sélecteur;
  • sélecteur attributs.

sélecteur de balises

Il est aussi appelé «sélecteur de type" et "sur le point", il est le plus simple et commun.Comme son CSS-document sont les noms des éléments fichier HTML que nous décrivons.Par exemple, si nous avons besoin de définir le style de paragraphe, nous précisons les propriétés et leurs valeurs pour l'élément p {background: x;couleur: y;Taille: Z}.Dans ce cas, toutes les pages web paragraphes aura le même format (couleur de fond, la taille du texte et autres. D.).Sélecteur de classe

Mais que faire si vous avez besoin de demander à chaque votre paragraphe est différent des autres styles?A cet effet, il existe un sélecteur de classe.

CSS-document en ce cas, contiendra une entrée similaire à la suivante: p.first {color: x;font-size: y}.Ainsi, nous définissons les propriétés de «couleur» et «taille» seulement pour un paragraphe de la première classe.

au document html dans ce cas, entrez dans l'attribut de classe au nom du style d'abord.Les classes peuvent être autant que le style que vous souhaitez appliquer pour les éléments de la page web.

sélecteur id

Souvent, il est nécessaire de définir le style plus précisément, par exemple une quelconque élément d'une page ou dans leur échantillon.Dans cette situation, l'aide vient id-sélecteur.Le fichier html attribuez un nom d'élément désiré qui identifie parmi les autres.Par exemple, l'élément que nous voulons définir un style différent des autres, la volonté de l'article titre.

Puis assigner document html identifiant tête H1, tels del'article.Et dans le fichier CSS pour définir le style, en ajoutant à la grille nom de l'identificateur: #articlename {color: blue;text-align: center}.Maintenant, notre titre sera la couleur bleue et centré.

Chacun des types ci-dessus peut être appelé «un CSS-sélecteur simple."Ils définissent la mise en forme d'un paramètre document html notamment: éléments ensemble similaires (par exemple, tous les paragraphes de l'article), une classe (par exemple, seul le premier paragraphe) ou un élément spécifique (par exemple, le titre de l'article).

sélecteur attribue plus

de ce qui précède, il ya CSS dans les sélecteurs d'attributs - une façon plus sophistiquée d'utiliser les styles.Il permet à des éléments de mise en forme HTML d'un attribut ou la valeur sélectionnée.Il existe plusieurs variétés de ce sélecteur:

  • par la présence d'un attribut;
  • sur sa valeur exacte;
  • sur la valeur de l'attribut partielle;
  • de sa valeur particulière.

Examinons chacune de ces variétés:

  1. premier cas.Le formatage est appliqué si il est un attribut spécifique dans le code html (il peut être p, div, en-tête, etc.).Si il est pas, il utilise un générique pour tous les éléments du style.Par exemple, les éléments ayant le titre (info-bulle).
  2. second cas.Le style ne concerne que les éléments HTML qui sont une des valeurs d'attribut de correspondance exacte.Par exemple, pour les éléments de l'entrée, où la valeur de l'attribut type égal à présenter.
  3. troisième cas.Sous le format ne sera inclure des éléments dans la liste des valeurs qui a un certain mot.Par exemple, l'attribut sideBar "de classe" dans les éléments div.
  4. quatrième cas.Style est défini uniquement pour les éléments document HTML dans lequel un attribut particulier a une certaine valeur, et commence avec lui.Par exemple, l'utilisation de la couleur spécifiée à tous les éléments, attributs dont la langue anglaise (il peut être en, en-rus, en-UA et ainsi de suite. D.).

Ainsi, en utilisant un ou l'autre CSS sélecteur peut être mieux placé dans une page Web entière, et de décrire certains de ses éléments.