Sélecteurs
Sélecteurs en CSS

Pour la première fois, nous nous sommes rencontrés Sélecteurs CSS dans la neuvième leçon du didacticiel CSS. Dans cet article, nous explorerons plus en détail les sélecteurs, ainsi que d'autres types de sélecteurs CSS.

Sélecteur(du sélecteur anglais) - tri, sélection. Les sélecteurs dans le langage CSS sont compris comme un moyen de sélectionner des éléments (tags) d'une page.

Comme nous le savons depuis , la disposition du code CSS ressemble à ceci :

Sélecteur ( propriété CSS : valeur ; propriété CSS : valeur ; ... etc. )

Types de sélecteurs CSS

Il existe trois principaux types de sélecteurs et leurs différentes relations. De plus, il existe un sélecteur universel, des sélecteurs d'attributs, des sélecteurs d'attributs et de valeurs, et leur sélection à l'aide d'expressions régulières.

Habituellement, lors de la création d'un site, seuls les sélecteurs de base sont utilisés.

Types de base des sélecteurs CSS

1. Sélecteur de balises- sélectionnez l'élément de la page par son nom de balise tagname ( )
2. sélecteur de classe— sélectionne un élément de page par son nom de classe.ClassName ( )
3. sélecteurs d'identifiant— sélection d'un élément de page par le nom de son identifiant unique #UniqueIdentifierName ( )

Relations entre les sélecteurs CSS

La relation entre les sélecteurs est lorsqu'un signe est placé entre eux dans le code CSS : un espace, une virgule, un crochet angulaire, etc. Ainsi, vous pouvez sélectionner plus précisément n'importe quel élément de la page.

1. Sélecteurs contextuels- sélection d'éléments de descendants selector selector ( ) (entre les sélecteurs mettre un espace).
2. Sélecteurs enfants- choix éléments enfants sélecteur > sélecteur ( ) (signe supérieur à entre les sélecteurs).
3. Sélecteurs adjacents- sélection des éléments voisins (frères, frères) sélecteur + sélecteur ( ) (entre les sélecteurs mettre un signe plus).

Si quelque chose n'est pas clair, ne vous inquiétez pas, nous considérerons chaque sélecteur et leur relation séparément, dans des articles qui leur sont dédiés uniquement, ajoutez simplement ces articles 🙂

Sélecteurs d'attributs et de valeurs

Sélecteurs d'attributs et de valeurs sélectionner des éléments par leur attribut ou attribut et valeur.

1. Sélecteur d'attribut- sélectionner l'élément par nom d'attribut [attribut] ( )
2. Sélecteur d'attribut et de valeur- sélectionner un élément par son nom d'attribut et sa valeur [attribute = "valeur"] ( )

Sélecteur universel

En code CSS, sélecteur universelécrit sous la forme d'un astérisque * Le sélecteur universel est nécessaire pour
pour définir les propriétés CSS de tous les éléments de la page à la fois. Habituellement, il est utilisé pour réinitialiser les retraits des éléments, par exemple :

* ( marge : 0 ; rembourrage : 0 ; )

Tous les éléments de la page ont des retraits égaux à 0.

CSS (feuilles de style en cascade) est un langage de feuille de style qui permet d'attacher des styles (tels que des polices et des couleurs) à des documents structurés (tels que Documents HTML et applications XML). Généralement, les styles CSS sont utilisés pour créer et modifier le style des éléments de page Web et des interfaces utilisateur écrites en Langages HTML et XHTML, mais peut également être appliqué à tout type de document XML, y compris XML, SVG et XUL. En séparant le style de présentation des documents du contenu des documents, CSS facilite la création de pages Web et la maintenance des sites.

CSS prend en charge les feuilles de style spécifiques aux médias afin que les auteurs puissent adapter la présentation de leurs documents à navigateurs visuels, appareils auditifs, imprimantes, appareils braille, appareils portables, etc.

Les feuilles de style en cascade décrivent les règles de mise en forme des éléments à l'aide des propriétés et valeurs autorisées ces propriétés. Pour chaque élément, vous pouvez utiliser un ensemble limité de propriétés, les autres propriétés n'auront aucun effet sur lui.

La déclaration de style comporte deux parties : sélecteur et les publicités. En HTML, les noms d'éléments sont insensibles à la casse, donc "h1" fonctionne de la même manière que "H1". La déclaration se compose de deux parties : le nom de la propriété (par exemple, couleur) et la valeur de la propriété (gris). Le sélecteur indique au navigateur quel élément formater, et le bloc de déclaration (le code entre accolades) liste les commandes de formatage - les propriétés et leurs valeurs.

Riz. 1. Structure de l'annonce

Bien que l'exemple ci-dessus ne tente d'affecter que quelques propriétés requises pour afficher un document HTML, il est considéré comme une feuille de style à lui seul. Lorsqu'elle est combinée avec d'autres feuilles de style (une caractéristique fondamentale de CSS est que les feuilles de style sont combinées), la règle déterminera la présentation finale du document.

Types de feuilles de style en cascade et leurs spécificités

1. Types de feuilles de style

1.1. Feuille de style externe

Feuille de style externe représente fichier texte avec l'extension .css, qui contient un ensemble de styles CSS pour les éléments. Le fichier est créé sous l'éditeur de code, comme une page HTML. Le fichier ne peut contenir que des styles, pas de balisage HTML. Une feuille de style externe est attachée à une page Web à l'aide d'une balise situé à l'intérieur de la section . Ces styles fonctionnent pour toutes les pages du site.

Vous pouvez joindre plusieurs feuilles de style à chaque page Web en ajoutant plusieurs balises en séquence , en spécifiant l'objectif de cette feuille de style dans l'attribut de balise média. rel="stylesheet" indique le type de lien (lien vers la feuille de style).

L'attribut type="text/css" n'est pas requis par la norme HTML5, il peut donc être omis. Si l'attribut est manquant, sa valeur par défaut est type="text/css" .

1.2. Styles internes

Styles internes intégré dans la section Document HTML et sont définis à l'intérieur de la balise. Les styles internes ont priorité sur les styles externes, mais remplacent les styles en ligne (spécifiés via l'attribut style).

...

1.3. Styles en ligne

Quand nous écrivons styles en ligne, nous écrivons le code CSS dans le fichier HTML, directement à l'intérieur de la balise de l'élément à l'aide de l'attribut style :

Faites attention à ce texte.

De tels styles n'affectent que l'élément pour lequel ils sont définis.

1.4. @règle d'importation

@règle d'importation permet de charger des feuilles de style externes. Pour que la directive @import fonctionne, elle doit être placée dans la feuille de style (externe ou interne) avant toutes les autres règles :

La règle @import est également utilisée pour inclure des polices Web :

@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);

2. Types de sélecteurs

Sélecteurs représentent la structure d'une page Web. Ils sont utilisés pour créer des règles de formatage des éléments de la page Web. Les sélecteurs peuvent être des éléments, leurs classes et identifiants, ainsi que des pseudo-classes et des pseudo-éléments.

2.1. Sélecteur universel

Correspond à n'importe quel élément HTML. Par exemple, * (marge : 0 ;) réinitialisera les marges pour tous les éléments du site. Un sélecteur peut également être utilisé en combinaison avec une pseudo-classe ou un pseudo-élément : *:after (styles CSS) , *:checked (styles CSS) .

2.2. Sélecteur d'élément

Les sélecteurs d'éléments vous permettent de mettre en forme tous les éléments d'un type donné sur toutes les pages de votre site. Par exemple, h1 (font-family : Lobster, cursive ;) définira le style de formatage général pour tous les en-têtes h1.

2.3. sélecteur de classe

Les sélecteurs de classe vous permettent de styliser un ou plusieurs éléments avec le même nom de classe, placés à différents endroits sur la page ou sur différentes pages placer. Par exemple, pour créer un titre avec la classe headline, ajoutez l'attribut class avec la valeur headline à la balise d'ouverture

et définissez le style de la classe spécifiée. Les styles créés avec une classe peuvent être appliqués à d'autres éléments, pas nécessairement de ce type.

.headline ( text-transform : majuscule ; couleur : bleu clair ; )

Si un élément a plusieurs attributs de classe, leurs valeurs sont concaténées avec des espaces.

Instructions pour l'utilisation d'un ordinateur personnel

2.4. Sélecteur d'identifiant

Le sélecteur d'ID permet le formatage uneélément spécifique. La valeur de l'identifiant doit être unique, elle ne peut apparaître qu'une seule fois sur une page et elle doit contenir au moins un caractère. La valeur ne doit pas contenir d'espaces.

Il n'y a pas d'autres restrictions sur la forme que peut prendre un identifiant, en particulier, les identifiants ne peuvent être que des chiffres, commencer par un chiffre, commencer par un trait de soulignement, uniquement la ponctuation, etc.

L'identifiant unique d'un élément peut être utilisé à diverses fins, notamment pour faire référence à des parties spécifiques d'un document à l'aide d'identifiants de fragment, pour cibler un élément dans un script et pour styliser un élément spécifique à partir de CSS. .

#sidebar (largeur : 300 px ; flottant : gauche ; )

2.5. Sélecteur descendant

Les sélecteurs descendants appliquent des styles aux éléments situés à l'intérieur d'un élément conteneur. Par exemple, ul li (text-transform: majuscule;) sélectionnera tous les éléments li qui sont des enfants de tous les éléments ul.

Si vous devez formater des descendants certain élément, cet élément doit recevoir une classe de style :

p.first a (color: green;) - ce style sera appliqué à tous les liens, descendants du paragraphe avec la classe first ;

p .first a (couleur : vert ;) - si vous ajoutez un espace, les liens situés à l'intérieur de toute balise de classe .first qui est un enfant de l'élément seront stylés

First a (color: green;) - ce style sera appliqué à tout lien situé à l'intérieur d'un autre élément, désigné par la classe .first.

2.6. Sélecteur enfant

Un élément enfant est un enfant direct de son élément contenant. Un élément peut avoir plusieurs éléments enfants et chaque élément ne peut avoir qu'un seul élément parent. Le sélecteur d'enfant permet d'appliquer des styles uniquement si l'élément enfant vient immédiatement après l'élément parent et qu'il n'y a pas d'autres éléments entre les deux, c'est-à-dire que l'élément enfant n'est imbriqué dans rien d'autre.
Par exemple, p > strong sélectionnera tous les éléments forts qui sont des enfants de l'élément p.

2.7. Sélecteur sœur

Des relations de fratrie se produisent entre des éléments qui ont un parent commun. Les sélecteurs d'éléments frères vous permettent de sélectionner des éléments dans un groupe d'éléments frères.

h1 + p - sélectionne tous les premiers paragraphes immédiatement après n'importe quelle balise

sans affecter le reste des paragraphes ;

h1 ~ p sélectionnera tous les paragraphes frères de n'importe quel titre h1 et immédiatement après celui-ci.

2.8. Sélecteur d'attribut

Les sélecteurs d'attributs sélectionnent les éléments en fonction du nom ou de la valeur de l'attribut :

[attribut] - tous les éléments contenant l'attribut spécifié, - tous les éléments pour lesquels l'attribut alt est défini ;

selector[attribut] - éléments de ce type qui contiennent l'attribut spécifié, img - uniquement les images pour lesquelles l'attribut alt est défini ;

selector[attribute="value"] — éléments de ce type qui contiennent l'attribut spécifié avec une valeur spécifique, img — toutes les images dont les noms contiennent le mot fleur ;

selector[attribute~="value"] - éléments contenant partiellement valeur donnée, par exemple, si un élément a plusieurs classes séparées par un espace, p sont des paragraphes dont le nom de classe contient feature ;

selector[attribute|="value"] - éléments dont la liste des valeurs d'attribut commence par le mot spécifié, p - paragraphes dont le nom de classe comporte ou commence par trait ;

selector[attribute^="value"] - éléments dont la valeur d'attribut commence par la valeur spécifiée, a - tous les liens commençant par http:// ;

selector[attribute$="value"] - éléments dont la valeur d'attribut se termine par la valeur spécifiée, img - toutes les images au format png ;

selector[attribute*="value"] - éléments dont la valeur d'attribut contient le mot spécifié n'importe où, a - tous les liens dont le nom contient book .

2.9. Sélecteur de pseudo-classe

Les pseudo-classes sont des classes qui ne sont pas réellement attachées aux balises HTML. Ils vous permettent d'appliquer des règles CSS aux éléments lorsqu'un événement se produit ou obéit à une certaine règle. Les pseudo-classes caractérisent les éléments avec les propriétés suivantes :

:hover - tout élément survolé avec le curseur de la souris ;

:focus - un élément interactif auquel on a navigué avec le clavier ou activé avec la souris ;

:active - l'élément qui a été activé par l'utilisateur ;

:valid - champs de formulaire dont le contenu a été validé dans le navigateur pour la conformité avec le type de données spécifié ;

:invalid - champs de formulaire dont le contenu ne correspond pas au type de données spécifié ;

:enabled - tous les champs de formulaire actifs ;

:disabled - champs de formulaire désactivés, c'est-à-dire dans un état inactif ;

:in-range - champs de formulaire dont les valeurs sont dans la plage spécifiée;

:hors plage - champs de formulaire dont les valeurs ne sont pas incluses dans la plage définie ;

:lang() - éléments avec du texte dans la langue spécifiée ;

:not(selector) - éléments qui ne contiennent pas le sélecteur spécifié - classe, identifiant, nom ou type de champ de formulaire - :not() ;

:target est l'élément # référencé dans le document ;

:checked - éléments de formulaire sélectionnés (sélectionnés par l'utilisateur).

2.10. Sélecteur structurel de pseudo-classe

Les pseudo-classes structurelles sélectionnent les éléments enfants en fonction du paramètre spécifié entre parenthèses :

:nth-child(odd) - éléments enfants impairs ;

:nth-child(even) - éléments enfants pairs ;

:nth-child(3n) - chaque troisième élément parmi les enfants ;

:nth-child(3n+2) - sélectionne chaque troisième élément, à partir du deuxième élément enfant (+2) ;

:nth-child(n+2) - sélectionne tous les éléments, en commençant par le second ;

:nth-child(3) - sélectionne le troisième élément enfant ;

:nth-last-child() - dans la liste des éléments enfants, sélectionne l'élément avec l'emplacement spécifié, similaire à :nth-child() , mais en commençant par le dernier, dans la direction opposée ;

:first-child - vous permet de styliser uniquement le tout premier élément enfant de la balise ;

:last-child - vous permet de formater le dernier élément enfant de la balise ;

:only-child - sélectionne un élément qui est le seul enfant ;

:empty - sélectionne les éléments qui n'ont pas d'enfants ;

:root - sélectionne l'élément qui est la racine du document - l'élément html.

2.11. Sélecteur de pseudo-classe de type structurel

Pointez vers un type spécifique de balise enfant :

:nth-of-type() - sélectionne les éléments par analogie avec :nth-child() , en ne prenant en compte que le type de l'élément ;

:first-of-type - sélectionne le premier enfant du type donné ;

:last-of-type - sélectionne le dernier élément du type donné ;

:nth-last-of-type() - sélectionne un élément du type donné dans la liste des éléments en fonction de l'emplacement spécifié, en commençant par la fin ;

:only-of-type - sélectionne le seul élément du type spécifié parmi les enfants de l'élément parent.

2.12. Sélecteur de pseudo éléments

Les pseudo-éléments sont utilisés pour ajouter du contenu généré à l'aide de la propriété content :

:first-letter - sélectionne la première lettre de chaque paragraphe, s'applique uniquement aux éléments de bloc ;

:first-line - sélectionne la première ligne du texte de l'élément, s'applique uniquement aux éléments de bloc ;

:before - insère le contenu généré avant l'élément ;

:after - Ajoute le contenu généré après l'élément.

3. Combinaison de sélecteurs

Pour une sélection plus précise des éléments à mettre en forme, vous pouvez utiliser des combinaisons de sélecteurs :

img:nth-of-type(even) - sélectionnera toutes les images paires dont le texte alternatif contient le mot css .

4. Regrouper les sélecteurs

Le même style peut être appliqué à plusieurs éléments en même temps. Pour ce faire, sur le côté gauche de la déclaration, listez les sélecteurs nécessaires séparés par des virgules :

H1, h2, p, span ( couleur : tomate ; arrière-plan : blanc ; )

5. Héritage et cascade

L'héritage et la cascade sont deux concepts fondamentaux en CSS qui sont étroitement liés. L'héritage signifie que les éléments héritent des propriétés de leur parent (l'élément qui les contient). La cascade se manifeste dans la manière différents types les feuilles de style sont appliquées au document et comment les règles conflictuelles se substituent les unes aux autres.

5.1. Héritage

Héritage est le mécanisme par lequel certaines propriétés sont transmises d'un ancêtre à ses descendants. La spécification CSS prévoit l'héritage des propriétés liées au contenu textuel d'une page, telles que color , font , letter-spacing , line-height , list-style , text-align , text-indent , text-transform , visibilité , white-space et word-spacing. Dans de nombreux cas, cela est pratique car vous n'avez pas à définir la taille de police et la famille de polices pour chaque élément de la page Web.

Les propriétés de formatage des blocs ne sont pas héritées. Ce sont background , border , display , float et clear , height et width , margin , min-max-height and -width , outline , overflow , padding , position , text-decoration , vertical-align et z-index .

Héritage forcé

En utilisant mot-clé inherit peut forcer un élément à hériter de toute valeur de propriété de son élément parent. Cela fonctionne même pour les propriétés qui ne sont pas héritées par défaut.

Comment les styles CSS sont définis et fonctionnent

1) Les styles peuvent être hérités de l'élément parent (propriétés héritées ou utilisation de la valeur héritée) ;

2) Les styles de la feuille de style ci-dessous remplacent les styles de la feuille de style ci-dessus ;

3) Des styles provenant de différentes sources peuvent être appliqués à un élément. Vous pouvez vérifier quels styles sont appliqués dans le mode développeur du navigateur. Pour ce faire, cliquez avec le bouton droit sur l'élément et sélectionnez Afficher le code (ou quelque chose de similaire). La colonne de droite listera toutes les propriétés définies pour cet élément ou héritées de l'élément parent, ainsi que les fichiers de style dans lesquels elles sont spécifiées et le numéro de série de la ligne de code.

Riz. 2. Mode développeur dans Navigateur Google Chrome

4) Lors de la définition d'un style, vous pouvez utiliser n'importe quelle combinaison de sélecteurs - un sélecteur d'élément, une pseudo-classe d'élément, une classe ou un identifiant d'élément.

div (bordure : 1px solide #eee ;) #wrap (largeur : 500px ;) .box (float : gauche ;) .clear (clear : les deux ;)

5.2. Cascade

Cascade est un mécanisme qui contrôle le résultat final dans une situation où différentes règles CSS sont appliquées au même élément. Trois critères déterminent l'ordre dans lequel les propriétés sont appliquées : la règle !important, la spécificité et l'ordre dans lequel les feuilles de style sont incluses.

Règle!important

Le poids d'une règle peut être spécifié à l'aide du mot clé !important, qui est ajouté immédiatement après la valeur de la propriété, par exemple, span (font-weight: bold!important;) . La règle doit être placée à la fin de la déclaration avant la parenthèse fermante, sans espace. Une telle déclaration prévaudra sur toutes autres règles. Cette règle permet d'annuler la valeur de la propriété et d'en définir une nouvelle pour un élément d'un groupe d'éléments dans le cas où il n'y a pas accès direct au fichier de style.

Spécificité

Pour chaque règle, le navigateur calcule spécificité du sélecteur, et si l'élément a des déclarations de propriété en conflit, la règle avec la spécificité la plus élevée est prise en compte. La valeur de spécificité comporte quatre parties : 0, 0, 0, 0 . La spécificité du sélecteur est définie comme suit :

0, 1, 0, 0 est ajouté pour id ;
pour la classe 0, 0, 1, 0 est ajouté ;
0, 0, 0, 1 est ajouté pour chaque élément et pseudo-élément ;
pour un style en ligne ajouté directement à un élément, 1, 0, 0, 0 ;
le sélecteur universel n'a aucune spécificité.

H1 (couleur : bleu clair ;) /*spécificité 0, 0, 0, 1*/ em (couleur : argent ;) /*spécificité 0, 0, 0, 1*/ h1 em (couleur : or ;) /*spécificité : 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about (couleur : bleu ;) /*spécificité : 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .sidebar (couleur : gris ;) /*spécificité 0, 0, 1, 0 */ #sidebar (couleur : orange ;) /*spécificité 0, 1, 0, 0*/ li#sidebar (couleur : aqua ;) /*spécificité : 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/

En conséquence, ces règles, dont la spécificité est plus grande, seront appliquées à l'élément. Par exemple, si un élément a deux spécificités avec les valeurs 0, 0, 0, 2 et 0, 1, 0, 1 , alors la deuxième règle l'emportera.

Ordre des tables connectées

Vous pouvez créer plusieurs feuilles de style externes et les lier à la même page Web. Si différentes tables contiennent différentes valeurs des propriétés d'un élément, la règle sera alors appliquée à l'élément, qui se trouve dans la feuille de style de la liste ci-dessous.

Ce matériel est consacré aux bases du style sur une ressource Internet utilisant des sélecteurs.

Les sélecteurs en CSS sont utilisés pour définir un
élément dans la page html à appliquer
ou changer le style CSS.

Types de sélecteurs en CSS

Sélecteur d'élément

Pour donner le style CSS nécessaire, dans ce cas, le nom est écrit comme un sélecteur élément html. Par exemple, il suffit de prescrire le style souhaité pour la rubrique H1, après quoi ces rubriques prendront la forme dont nous avons besoin. Voici à quoi ressemblera le code :

H1(
taille de police : 11pt
}

Il arrive souvent que vous ayez besoin de créer des titres dans des styles différents. Ici, un sélecteur de classe aidera à résoudre ce problème.

Sélecteur de classe

Le sélecteur de classe est universel en CSS. Vous pouvez l'écrire comme suit : avant le nom de la classe, nous écrivons un point, puis seulement entre accolades nous indiquons le style dont nous avons besoin :

.rouge(
famille de polices : tahoma, sans empattement ;
La couleur rouge;
taille de police : 11pt
}

Un exemple d'utilisation d'un sélecteur de classe. Appliquons ce style au titre H1 dans page html:

Titre de la page

Dans l'exemple ci-dessus, vous pouvez voir que l'attribut "class" est appliqué avec le nom de style CSS donné " rouge".
Un autre exemple. Dans la partie html nous écrivons :

Cette rubrique est bleue car la classe correspondante lui a été appliquée.

identifiant".

Dans un document html, cela ressemblerait à ceci :

Définir le style de ce paragraphe

Dans le document CSS :

p#newstyle (couleur : bleu ; taille de la police : 12 px ;)

Par conséquent, la police de ce paragraphe sera bleue et aura une taille de 12 pixels.

Sélecteur de contexte

Un élément tout aussi important est sélecteur de contexte.
Par exemple, le site avait besoin des titres "H1" délimités par la balise audacieux surlignage en rouge :

H1 gras (couleur : rouge ; )

Comme vous pouvez le voir, le titre H1 est écrit en premier, un espace est placé, la balise audacieux puis entre parenthèses le style que nous avons spécifié. Vous pouvez le mettre dans des mots comme ceci : "S'il y a une balise en gras à l'intérieur du titre H1, le texte doit être rouge."

De cette manière, vous pouvez également définir des styles pour les éléments de liste à puces, les tableaux et même leurs cellules, et avec différents niveaux d'imbrication.

Page suivante -

Aujourd'hui, nous allons examiner le concept des sélecteurs CSS et comment nous pouvons les utiliser pour raccourcir notre balisage HTML et le rendre plus propre.

Le sélecteur CSS est l'élément auquel nous allons appliquer les propriétés CSS. Le mot "sélecteur" parle de lui-même, il signifie choix.

P (couleur : rouge) div span (arrière-plan : vert) ul li (style de liste : aucun)

sélecteurs de classe et d'identifiant

Dans l'exemple ci-dessus, nous avons 3 sélecteurs - ce sont p, div span, ul li. Autrement dit, l'ensemble de notre fichier de style se compose de sélecteurs et de leurs propriétés. Le plus pratique et visuel, surtout pour les débutants, est de prendre le nom de classe de la balise ou l'identifiant unique (id) de la balise comme sélecteur. Pour attribuer une classe ou un ID à une balise, nous devons la spécifier parmi les attributs de la balise. Une balise particulière peut avoir au maximum 1 identifiant et un nombre infini de classes. Exemple:

texte en première div

texte en deuxième div

texte en troisième div

Ce à quoi vous devez faire attention :

• Des classes et des identifiants peuvent être attribués à n'importe quelle balise (toutes).
• Chaque identifiant est unique et ne peut pas être répété au sein d'une même page, contrairement aux classes !
• La même classe peut être attribuée à n'importe quelle balise et peut être répétée autant de fois que nécessaire sur une page.
• Si nous voulons attribuer plusieurs classes à une balise particulière, nous les spécifions simplement séparées par un espace.
• Les noms des classes et des identifiants peuvent être les mêmes, mais à part le nom, il n'y aura rien de commun entre eux.

Comment faire référence à une classe ou un id dans une feuille de style (CSS) ?

Voyons un exemple :

#première (couleur : rouge ;) /* ID d'accès nommé en premier */.seconde (couleur : bleu ;) /* fait référence à la classe nommée seconde */#first .second (couleur : orange ;) /* accéder à la classe nommée en second UNIQUEMENT si elle se trouve à l'INTÉRIEUR de la balise avec l'id en premier */.premier .troisième (couleur : gris ;) /* accède à la classe nommée troisième UNIQUEMENT si elle se trouve À L'INTÉRIEUR de la balise avec la classe en premier */

Dans notre cas, les deux dernières instructions ne fonctionneront pas, car nous n'avons pas de classes imbriquées dans des balises avec les attributs donnés. Comme vous l'avez peut-être remarqué, afin d'indiquer que nous nous référons spécifiquement à id, nous devons mettre un signe dièse (#) avant son nom sans espaces, si nous nous référons à une classe, alors nous devons mettre un point (.) devant le nom de la classe.

L'utilisation de classes et d'identifiants est très pratique, mais cela augmente notre balisage HTML, idéalement (ce qui n'arrive jamais) nous ne devrions pas les utiliser du tout, à la place nous utiliserons des combinaisons et des regroupements de sélecteurs, le reste de l'article sera à leur sujet, mais ! Mais cela ne signifie pas du tout que vous devez complètement abandonner l'utilisation des classes et des identifiants, il vous suffit de garder à l'esprit que très souvent, au lieu de créer une nouvelle classe ou un nouvel identifiant, vous pouvez vous débrouiller avec les astuces décrites ci-dessous et elles peut aussi être très pratique.

Quelle est la différence entre la classe et l'identifiant ?

En plus des différences ci-dessus, il convient également de noter que les propriétés données par id ont une priorité plus élevée que les propriétés données par la classe. C'est-à-dire si nous écrivons :

texte en div

Ensuite, la couleur du texte deviendra rouge, malgré le fait que la classe est inférieure dans le code et si elles avaient la même priorité, le texte deviendrait bleu.

Par syntaxe : dans les cas avec une classe, on peut choisir quelle balise doit avoir cette classe, pour cela, après le nom de la balise SANS espace, il faut faire référence à la classe. Exemple:

maclasse(propriétés) /* s'applique à toutes les balises qui contiennent la classe myclass */ div.myclass (propriétés) /* ne s'appliquera qu'aux balises div contenant la classe myclass */

Cela fonctionnera également pour id, mais une telle entrée n'a pas de sens, puisque id ne peut pas être répété sur la page, ce qui signifie qu'il suffit de déclarer simplement l'id sans la balise à laquelle il se réfère :

texte

Il semble qu'il ne reste qu'une seule différence non spécifiée, et cela concerne un sujet que je n'avais pas prévu d'aborder sur ce blog dans un avenir proche - Javascript. Mais encore faut-il que je vous le signale : si vous souhaitez accéder à un élément à l'aide de Javascript, alors pour cela il sera très pratique d'avoir un id pour cet élément. Pour faire référence à un élément par sa classe en Javascript, il n'y a pas une telle capacité intégrée, vous devez utiliser des fonctions d'assistance + ce n'est pas toujours inter-navigateur.

Conclusion : on utilise id et class, mais avec modération, en se demandant toujours s'il est possible de s'en passer ici et quelle est l'opportunité.

Sélecteur associé

Div p (couleur : vert ;) /* Sélecteur enfant */ p(couleur : rouge ;) /* sélecteur de balises */

Mais comme je l'ai écrit dans l'article précédent, dans le premier cas, les propriétés CSS seront appliquées à toutes les balises p imbriquées à TOUTE profondeur de la balise div. Mais que se passe-t-il si nous voulons appliquer les propriétés uniquement aux descendants directs, c'est-à-dire au premier niveau d'imbrication :

Troisième niveau

Héritier direct (premier niveau)

Deuxième niveau

Héritier direct (premier niveau)

Dans ce cas, il faut utiliser le sélecteur dit lié, une parenthèse sert à le désigner, on peut mettre des espaces, on ne peut pas en mettre, je ne conseillerais pas :

Div>p (couleur : bleu ;) /* uniquement le premier niveau d'imbrication */ div p (couleur : bleu ;) /* absolument tous les paragraphes à l'intérieur de la div */

Sélecteur universel

Nous l'avons compris, nous avons déjà 3 types de sélecteurs en service, maintenant je veux vous parler d'un sélecteur très inhabituel qui se démarque de tous les autres - c'est le soi-disant sélecteur universel, qui est indiqué par un astérisque ( *):

* (marge : 0 ; rembourrage : 0 ;)

C'est ainsi que je démarre chaque nouveau projet, je vous conseille de faire de même. Le sélecteur universel s'étend à tous les éléments de la page (balises), mais a une priorité nulle (ci-dessous, seulement aucune priorité). Il est couramment utilisé pour remplacer les propriétés CSS que les navigateurs définissent par défaut pour certaines balises. Imaginez, et c'est l'endroit où il faut être! Pour un certain nombre de balises, les navigateurs définissent leurs propres propriétés par défaut, par exemple, la balise de lien hypertexte la couleur du texte bleu et le soulignement, ils définissent le rembourrage pour la balise body, et ainsi de suite. Nous n'avons pas du tout besoin de nous en souvenir, de le savoir et de l'utiliser, nous supprimons donc immédiatement les propriétés les plus banales à l'aide d'un sélecteur universel, mais je ne conseillerais pas d'y ajouter autre chose (ou d'ajouter, mais avec précaution), malgré la plus petite (zéro ) la priorité du sélecteur universel, il peut toujours remplacer d'autres propriétés pour vous dans certains cas, alors gardez cela à l'esprit.

Soit dit en passant, lorsque vous travaillez avec des sélecteurs, comme pour tout travail lié à la mise en page, il est très pratique d'utiliser la vue des éléments de page. Si vous n'êtes pas encore au courant de choses comme Opera Dragonfly, Firebug et les inspecteurs Web en général, alors sans exagération, vous devez de toute urgence lire l'article sur le lien ci-dessus ! Et qui a déjà utilisé des choses similaires, veuillez me suivre plus loin.

Pseudo-classes

Contrairement aux classes, les pseudo-classes n'ont pas besoin d'être spécifiées dans le balisage HTML, elles sont calculées par le navigateur lui-même. Nous avons 4 pseudo-classes statiques et 3 pseudo-classes dynamiques, sans tenir compte de CSS 3, plus à ce sujet à la fin. Les statiques incluent (:first-child, :link, :visited, :lang()) :

Héritier direct (premier niveau)

Troisième niveau

Héritier direct (premier niveau)

Deuxième niveau

Héritier direct (premier niveau)

Résultat:

Naturellement, vous pouvez combiner les sélecteurs à votre guise, par exemple :

Div>span p:first-child (couleur : vert ;) /* fonctionnera si p est le premier enfant de son parent et se trouve à l'intérieur d'une balise span qui est un enfant direct d'une balise div */

Le nom de la pseudo-classe ci-dessus parle de lui-même premier-enfant - le premier enfant.

Les deux pseudo-classes statiques suivantes s'appliquent uniquement à la balise de lien hypertexte (:link, :visited), elles appliquent des propriétés CSS selon que le lien a été visité par un utilisateur particulier ou non :

A : lien (couleur : bleu ;) /* les liens non visités sont définis en bleu et sont soulignés par défaut */ a:visité (couleur : vert ; texte-décoration : aucun ;) /* les liens visités auront du texte rouge, supprimer le soulignement */

La pseudo-classe :lang() est utilisée pour définir un style différent selon la langue. Les parenthèses indiquent la langue à laquelle vous souhaitez appliquer le design. Cela peut être utilisé, par exemple, pour définir différents styles de guillemets entre guillemets :

Q:lang(de) (guillemets : "\201E" "\201C" ;) /* guillemets pour l'allemand */ q:lang(fr) (guillemets : "\201C" "\201D" ;) /* Citations en anglais */ q:lang(ru) (guillemets : "\00AB" "\00BB" ;) /* Citations russes */

C'est peut-être le seul de tous les types de sélecteurs possibles que je n'ai jamais utilisé.

Pseudo-classes dynamiques

Les pseudo-classes dynamiques sont :active, :hover, :focus. Les pseudo-classes dynamiques sont déclenchées par une certaine action sur la page, elles fonctionnent pour toutes les balises, pas seulement pour les liens, comme beaucoup le pensent et même le prétendent dans leurs blogs ! Considérez leur application:

P :actif (fond : rouge ;) /* style qui sera appliqué au tag lorsqu'il sera cliqué (clic souris) */ input:focus (largeur : 400px ;) /* style qui sera appliqué à l'élément qui a actuellement le focus (fonctionne, par exemple, pour les champs de saisie de texte : textarea, input). Dans ce cas, lors de la mise au point, la largeur de l'entrée deviendra 400 pixels, ce qui est pratique à utiliser pour un bel effet d'allongement du champ au clic. */ div : survoler (arrière-plan : vert ;) /* se déclenche lorsque le curseur survole un élément, principalement utilisé pour créer un bel effet lors du survol de liens. */

Appliquez ces styles à notre exemple ci-dessus et vous verrez par vous-même.

Sélecteurs adjacents

Les sélecteurs adjacents sont le voisin le plus proche dans le code, pas l'enfant ! Sélecteur très pratique :

texte dans le paragraphe première div

texte dans le paragraphe EXTÉRIEUR div

texte dans le paragraphe deuxième div

texte dans la durée

encore une fois le paragraphe est en dehors de la div

Résultat:

Sélecteurs contigus généralisés

Les sélecteurs adjacents généralisés agissent exactement comme les sélecteurs adjacents normaux, sauf que les propriétés s'appliquent non seulement au premier voisin ci-dessous, mais à tous les voisins donnés ci-dessous :

texte en div

paragraphe

paragraphe

paragraphe

texte dans la durée

paragraphe

paragraphe

paragraphe en div

paragraphe en div

texte dans la durée

paragraphe

Résultat:

Sélecteurs d'attributs

Les sélecteurs d'attributs nous permettent de faire référence aux balises qui ont l'attribut dont nous avons besoin, ou même une valeur spécifique pour celui-ci :

P (propriétés) /* s'applique à toutes les balises p qui ont un attribut align */ p (propriétés) /* où la valeur de l'attribut align est center */ p (propriétés) /* où la valeur de l'attribut align commence au centre */ p (propriétés) /* où la valeur de l'attribut align contient center */ p (propriétés) /* où site peut être entre autre séparé par des espaces () */ p (propriétés) /* où la valeur de l'attribut class consiste en ou commence par le mot site only, suivi d'un trait d'union et du reste de la valeur ( ou ) */ p (propriétés) /* où la valeur de l'attribut align se termine au centre */

Pseudo-classes CSS 3

Vous vous êtes déjà familiarisé avec tous les sélecteurs principaux, et cela devrait vous suffire dans les premiers couples avec une diapositive. Cependant, dans CSS 3, de nombreuses nouvelles pseudo-classes sont apparues, maintenant nous pouvons prendre non seulement le premier enfant, mais aussi n'importe quel autre d'affilée, nous pouvons partir de l'inverse, ne pas prendre le premier, mais le dernier enfant, et ainsi de suite. Tout cela est très pratique et pratique, sauf que vous pouvez rencontrer des problèmes avec les anciennes versions d'IE. Rassemblons toutes nos forces en un poing et passons en revue tous les sélecteurs restants afin que plus tard vous puissiez déjà les avoir à l'esprit lors de la création de votre propre mise en page.

:last-child est analogue à :first-child, mais ne prend pas le premier, mais le dernier enfant.

:only-child - fonctionnera si l'élément (tag) est le seul enfant.

:only-of-type - fonctionnera si l'élément (tag) est le seul enfant de son type.

:nth-child() - fait référence aux enfants par leurs numéros de série, vous pouvez faire référence à tous les nombres pairs ou impairs (pairs ou impairs). Par exemple:

paragraphe

paragraphe

paragraphe

texte dans la durée

paragraphe

paragraphe

paragraphe

paragraphe

paragraphe

paragraphe

Résultat:

:nth-last-child - fonctionne comme le précédent, mais le rapport commence à la fin.

:first-of-type est le premier enfant de son type dans le parent direct.

:last-of-type est le dernier enfant de son type dans le parent direct.

:empty - fonctionnera pour les balises qui n'ont pas un seul caractère à l'intérieur (pas de texte).

:not() - Lève une exception pour les éléments donnés. Exemple:

paragraphe avec rouleau de classe

paragraphe

paragraphe

paragraphe avec rouleau de classe

Résultat:

Gestion des champs, formulaires, boutons radio et cases à cocher en CSS

: activé - s'applique aux éléments d'interface utilisateur accessibles tels que les formulaires, les boutons, les boutons radio, etc. Par défaut, tous les éléments de l'interface sont accessibles.

:disabled - S'applique aux éléments d'interface utilisateur désactivés tels que les boutons, les formulaires, etc. Les éléments de l'interface utilisateur sont désactivés si vous leur ajoutez l'attribut disabled en HTML ou disable="disabled" en XHTML.

:checked - appliqué aux éléments d'interface tels que les cases à cocher (radio) et les boutons radio (case à cocher) lorsqu'ils sont activés.

Pseudo éléments

Les pseudo-éléments, comme les pseudo-classes, sont calculés automatiquement par le navigateur, nous n'avons pas à nous en préoccuper. Afin de ne pas confondre les pseudo-éléments avec les pseudo-classes dans la spécification CSS 3, il a été décidé d'utiliser un double-virgule, au lieu d'un seul, comme c'était le cas dans CSS 2. Ainsi, sur Internet, vous pouvez trouver pseudo-éléments avec à la fois un simple deux-points et un double - cette option est correcte. Cependant, pour une meilleure compatibilité avec IE, il est recommandé d'utiliser un seul deux-points.

:first-line est la première ligne à l'intérieur d'un bloc ou d'un élément de table.

:first-letter est la première lettre à l'intérieur de l'élément block.

Conclusion : vous connaissez maintenant et pouvez utiliser toute la puissance des feuilles de style en cascade, mais cela ne signifie pas que vous devez vous précipiter immédiatement pour composer des mises en page de site en utilisant autant de sélecteurs, de pseudo-classes et de pseudo-éléments étudiés aujourd'hui que possible. . J'ai répertorié tous les outils possibles, et vous ne devez choisir que les plus nécessaires pour vous-même.

Avantages de l'optimisation du HTML avec CSS

Une partie du but de tout ce qui précède est de se débarrasser de l'utilisation omniprésente des attributs class et id en HTML, mettant ainsi tout sur les épaules de puissantes feuilles de style.

Les fichiers de style externes, ainsi que les fichiers Javascript externes, sont parfaitement mis en cache, ce qui signifie que lors de la première visite d'une page de votre site, le navigateur de l'utilisateur se souvient de ces fichiers et ne les télécharge plus, contrairement à la page du site elle-même, qui c'est-à-dire votre balisage HTML, les images et le texte que le navigateur charge encore et encore. Il en va de même pour les moteurs de recherche, ils ne se soucient pas du tout de vos fichiers externes, mais ils se soucient du volume et du contenu de votre balisage HTML. Les moteurs de recherche doivent explorer toute la structure de la page et il est dans votre intérêt de les y aider, de concentrer leurs efforts sur le contenu, et non sur un encombrant mur de balisage composé d'un tas de classes et d'identifiants, voire pire - Gestionnaires d'événements Javascript et styles CSS directement dans les attributs de balise (et cela arrive toujours).

Vous pouvez discuter avec moi, disent-ils, nous pouvons forcer le navigateur client à télécharger tous les fichiers connectés, les images dans son environnement local, mettre en cache la page entière, etc. Dans un tel contexte, une telle bagatelle est complètement perdue, mais d'une manière ou d'une autre, en réduisant au maximum le balisage HTML, vous ne faites que gagner, tout en ne perdant rien, sauf une éventuelle habitude.

Pour résumer : grâce à l'optimisation et à la réduction du HTML, on a un tout petit gain en vitesse de chargement du site et en SEO (optimisation pour les moteurs de recherche), ainsi qu'un code plus propre.

Eh bien, pour commencer, je dirai que le sélecteur sert à identifier de manière unique l'élément du document html auquel nous voulons appliquer l'un ou l'autre style CSS.

Sélecteur d'élément

Jusqu'à présent, nous avons travaillé avec ce sélecteur. en tant que sélecteur, nous avons utilisé directement le nom de l'élément html auquel nous voulions appliquer ce style. Ceux. en écrivant une classe par exemple pour un paragraphe (P), tous les paragraphes de la page ont acquis le style de cette classe.

P{
taille de police : 12px
}

Imaginez maintenant une situation où vous devez créer le premier paragraphe dans un style, le deuxième dans un autre, le troisième dans le troisième, et ainsi de suite. Ici, nous viendrons à la rescousse sélecteur de classe.

Sélecteur par classe

Voyons comment créer une classe générique en CSS. Et pour ce faire, c'est très simple : mettez d'abord un point, puis immédiatement, sans espace, écrivez le nom de la classe, puis stylisez les accolades. Eh bien, par exemple :

.vert {
famille de polices : arial, verdana, sans-serif ;
taille de police : 12 px ; la couleur verte;
}

Comment appliquer ce style ?

Disons que nous voulons appliquer un style donné à un paragraphe spécifique dans un document. Voici à quoi cela ressemblera en html :

classe="vert" > ... texte du paragraphe...

Comme vous pouvez le voir, l'attribut est utilisé classer avec la valeur du nom du style. Dégager? voici un autre exemple pour vous:

Ceci est un paragraphe normal, il utilise le sélecteur d'élément

Class="green"> Ce paragraphe est vert car une classe lui est appliquée

Classe="big_red" > Et ce paragraphe est plus grand et rouge

Ce paragraphe est à nouveau normal, par classe de sélecteur d'élément

p {
famille de polices : arial, verdana, sans empattement ;
taille de police : 18 px ;
}
.vert(la couleur verte;)
.gros rouge{
taille de police : 28 px ;
La couleur rouge;
}

Nous spécifions d'abord le style de base pour tous les paragraphes (sélecteur par élément), puis, si nous voulons changer quelque chose dans un paragraphe, nous créons un style spécial pour celui-ci (sélecteur par classe) et l'attribuons à ce paragraphe. Lorsque nous créons cette classe très spéciale, nous devons y écrire uniquement les propriétés que nous voulons ajouter, ou modifier, par rapport au style de base de cet élément.

Les classes de l'exemple ci-dessus peuvent être appliquées non seulement à un paragraphe, mais aussi, par exemple, à des en-têtes, ou, par exemple, à une cellule de tableau, ou à l'ensemble du tableau, bref, elles peuvent être appliquées partout où elles le peuvent affecter quelque chose (dans ce cas, partout où il y a un paramètre de couleur et du texte).

Vous pouvez faire en sorte que la classe n'agisse que sur un certain élément (par exemple, un paragraphe) en spécifiant le nom de l'élément avant le point :

P.vert(la couleur verte;)

Maintenant, la classe verte n'affectera rien d'autre que l'élément P.

Haut

Sélecteur par identifiant

Ce sélecteur est utilisé lorsqu'il est nécessaire de sélectionner un seul élément, unique, différent de tous les autres dans le document. Par exemple, mettons en surbrillance le premier titre de la page d'une certaine manière :

partie html :

<Н1 id="premier en-tête" > Premier titre de la page

partie css :

H1#firstheader { La couleur rouge; font-weight : gras ; aligner le texte : centré }

Comme vous pouvez le voir, dans la partie html, l'attribut id est utilisé à la place de l'attribut class, et dans le css, le signe # est utilisé à la place du point.

En principe, la même chose peut être faite en utilisant un sélecteur de classe, c'est comme ça que vous l'aimez :)

Haut

Sélecteur de contexte

C'est une chose très utile. Supposons que nous ayons une page avec des tableaux et des paragraphes de texte, et à la fois dans le tableau et dans les paragraphes, il y a des mots mis en évidence en gras (fort). Et donc, nous avons brusquement dû faire en sorte que les mots du paragraphe qui sont surlignés en gras deviennent verts. Alors.