Classe="big_red" > Et ce paragraphe est en plus gros caractères et en rouge

Ce paragraphe est encore une fois normal, par classe de sélecteur d'éléments

p {
famille de polices : arial, verdana, sans-serif ;
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 modifier quelque chose dans un paragraphe, 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 souhaitons 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, aux titres, ou par exemple à une cellule d'un tableau, ou à l'ensemble du tableau ; en bref, elles peuvent être appliquées partout où elles peuvent affecter quelque chose. (dans ce cas, partout où il existe une option de couleur et de texte).

Vous pouvez faire agir la classe uniquement sur un élément spécifique (par exemple, un paragraphe) en spécifiant le nom de l'élément avant le point :

P.vert(la couleur verte;)

Désormais, la classe verte n’agira plus sur autre chose que l’élément P.

Haut

Sélecteur par identifiant

Ce sélecteur est utilisé si vous devez sélectionner un seul élément unique et différent de tous les autres dans le document. Par exemple, mettons en évidence le premier titre de la page d'une certaine manière :

partie html :

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

css - partie :

H1#premieren-tête { La couleur rouge; poids de la police : gras ; alignement du texte : centre }

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

En principe, la même chose peut être faite en utilisant un sélecteur de classe, selon ce que vous aimez :)

Haut

Sélecteur de contexte

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

Un sélecteur fait partie d'une règle CSS qui indique au navigateur quel(s) élément(s) d'une page Web sera stylé.

Le terme sélecteur peut faire référence à un sélecteur simple, un sélecteur composé, un sélecteur complexe ou une liste de sélecteurs.

À sélecteurs simples se rapporter:

• sélecteur de type
• sélecteur universel
• sélecteurs d'attributs
• sélecteur d'identifiant
• sélecteur de classe
• pseudo-cours

Sélecteur composite est une séquence de sélecteurs simples qui ne sont pas séparés par des combinateurs, c'est-à-dire qu'un sélecteur est immédiatement suivi du suivant. Il sélectionne un élément qui correspond à tous les sélecteurs simples qu'il contient. Le sélecteur de type ou le sélecteur universel inclus dans un sélecteur composé doit apparaître en premier dans cette séquence. Dans un sélecteur composé, un seul sélecteur de type ou sélecteur universel est autorisé.

Span.className p.className1.className2#someId:hover

Sélecteur complexe est une séquence de sélecteurs séparés par des combinateurs.

Liste des sélecteurs sont des sélecteurs séparés par des virgules.

Combinateurs

Pour combiner des sélecteurs CSS simples, des combinateurs sont utilisés pour indiquer la relation entre les sélecteurs simples. Il existe plusieurs combinateurs différents en CSS2, et un supplémentaire en CSS3, lorsque vous les utilisez, ils changent la nature du sélecteur lui-même.

Pseudo-classes

Une pseudo-classe est un simple sélecteur utilisé pour sélectionner quelque chose qui ne peut pas être sélectionné à l'aide d'autres sélecteurs ou qui peut être sélectionné de manière assez difficile.

Pseudo-éléments

Un pseudo-élément est un élément virtuel qui n'existe pas explicitement dans l'arborescence des éléments du document. Les pseudo-éléments sont utilisés pour sélectionner des parties d'un élément qui ne peuvent pas être sélectionnées à l'aide d'autres sélecteurs, ainsi que pour styliser des parties d'un élément plutôt que l'élément entier.

Les sélecteurs CSS sont une structure CSS spécifique qui vous permet de sélectionner un élément spécifique dans le code HTML et de le styliser. Chacun d'eux a sa propre spécificité, c'est-à-dire qu'il peut chevaucher les propriétés d'autres, « plus faibles ».

Sélecteur CSS par balise et classe

Les sélecteurs les plus simples sont par balise et par classe. Le sélecteur de balises est le plus général et sélectionne tous les éléments avec une balise spécifique. Par exemple, vous pouvez écrire du code CSS comme celui-ci dans les propriétés : « p (color : blue) », où « p » est la balise de paragraphe et la propriété « color : blue » indique la couleur du texte. En conséquence, le texte de tous les paragraphes deviendra bleu. Les sélecteurs par balise peuvent être répertoriés séparés par des virgules, il ne sera alors pas nécessaire d'écrire la propriété deux fois.

Si certains paragraphes reçoivent une classe, telle que "bleu", le déclenchement du sélecteur CSS peut être encore plus précis. Mais son entrée dans les propriétés sera différente : un point apparaîtra avant le nom de la classe. Autrement dit, pour sélectionner tous les paragraphes auxquels est attribuée la classe « bleu » et les colorer en bleu, vous devez écrire le code suivant dans les propriétés CSS : « .blue : (couleur : bleu) ». Ce sélecteur est plus spécifique et plus puissant que le sélecteur de balises CSS, mais c'est l'un des plus simples. Il existe également des règles plus complexes qui permettent de sélectionner de petits groupes d'éléments.

Caractéristiques des sélecteurs par ID

Les sélecteurs par identifiant ou par identifiant sont plus spécifiques que par classe et attribut. Autrement dit, lorsqu'ils sont utilisés en cascade, ils « l'emporteront » sur d'autres sélecteurs similaires. Les identifiants aident également à sélectionner précisément un élément spécifique dans le code, mais leur utilisation dans la conception de pages est considérée comme une mauvaise pratique parmi les concepteurs de mise en page. Ce n'est que dans de très rares cas, par exemple lors de la création d'un slider à l'aide de CSS, que cette pratique est acceptable. Le fait est que sur une page, il ne peut y avoir qu'un seul élément avec un identifiant spécifique. Par conséquent, en raison du caractère unique du sélecteur d’identifiant CSS, il ne peut être utilisé que sur un seul élément. Dans ce cas, il est beaucoup plus judicieux d’utiliser des classes plutôt que des identifiants.

Différentes opinions sur le sélecteur d'identifiant

Mais il existe également l'opinion opposée selon laquelle l'identifiant aide à déterminer le morceau de code sur la page qui devrait être en un seul exemplaire. Cela dit, même si les sélecteurs de classe peuvent le remplacer, ils doivent être utilisés pour de grands groupes d'éléments, et dans les endroits où la précision est requise, il est préférable d'utiliser id. Chaque maquettiste a le droit de développer sa propre opinion personnelle sur cette question et d'écrire du code dans son propre style. Lors de l'écriture d'un sélecteur par identifiant, le symbole « # » est utilisé devant lui. C'est-à-dire que la ligne de code ressemblera à ceci : « #blue : (couleur : bleu) ». Avec cette entrée, l'élément avec l'identifiant « #blue » sera coloré en bleu.

Utiliser une cascade

Lorsque vous utilisez des sélecteurs d'identifiant CSS en HTML, vous pouvez également utiliser la propriété en cascade. Par exemple, si à l'intérieur d'une balise avec un identifiant, vous devez sélectionner une balise enfant et modifier ses propriétés, vous devez d'abord écrire le nom de l'identifiant avec un dièse, puis la balise enfant et ses propriétés. De tels sélecteurs sont appelés imbriqués. Autrement dit, la ligne de code ressemblera à ceci : « #id p (couleur : bleu). » Ensuite, à l'intérieur de l'élément parent portant cet identifiant, la couleur du texte du paragraphe enfant passera au bleu.

Utilisation des sélecteurs d'éléments enfants

Une autre option pour utiliser une cascade pour modifier les propriétés des éléments enfants consiste à sélectionner uniquement une partie spécifique du code. On l'appelle également sélecteur de descendants. Par exemple, pour sélectionner un paragraphe dans une ligne de tableau, l'entrée de sélecteur CSS suivante est utilisée : « ul li > p : (couleur : bleu) ». Il convient de prêter attention au fait que plus l'enregistrement est long, plus la probabilité qu'il soit possible de modifier une propriété spécifique de l'élément est élevée, car elle devient une priorité plus élevée pour la cascade. Par exemple, les éléments possédant une autre propriété de sélecteur CSS sur une classe qui est le parent ne modifieront pas complètement leurs propriétés. Seule une certaine partie du texte à l'intérieur de la liste sera recolorée.

Sélecteur d'éléments frères et sœurs

Une autre façon intéressante d’utiliser la cascade consiste à utiliser les sélecteurs CSS adjacents. Ils s'écrivent comme la somme des sélecteurs : « span + a (couleur bleu) ». Dans ce cas, un voisin est considéré comme celui sous lequel se trouve un autre qui correspond aux paramètres requis. Ainsi, s'il y a trois éléments dans le code, alors la propriété ne sera pas appliquée au premier d'entre eux, car il n'a pas de voisin, mais à tous les suivants - oui. Cela se produit à cause de l'icône de somme lorsque les sélecteurs suivants sont ajoutés plutôt que les précédents. Cette notation permet de raccourcir le code et d'éviter d'écrire plusieurs sélecteurs CSS pour différentes balises, en leur appliquant les mêmes propriétés. Si le deuxième élément de la liste reçoit en plus une classe et que l'entrée est modifiée en « .class + a(color blue) », alors le compte à rebours commencera à partir de celui-ci et les propriétés changeront pour les éléments suivants qui correspondent à la règle, mais les deux premiers resteront les mêmes.

Supposons maintenant que dans notre code il y ait trois balises identiques avec des classes différentes et que nous devions sélectionner tous les éléments après un élément spécifique. Dans ce cas, l’utilisation seule des sélecteurs de balises CSS n’aidera pas. Pour cela, utilisez le sélecteur suivant : « .class ~ div ». Cela sélectionne les éléments avec la balise div qui viennent après la classe donnée. Si nous voulons sélectionner non seulement les éléments avec la balise div, mais également tous les suivants, au lieu de la balise après le signe tilde, nous devons mettre un astérisque - "*". Une telle entrée signifie que vous devrez sélectionner tout ce qui suit la classe donnée. Vous pouvez sélectionner tous les éléments de la page si vous ne laissez que l'astérisque comme sélecteur.

Sélecteurs par attribut CSS

Disons que dans notre code il y a des éléments avec certains attributs, mais ils sont tous différents les uns des autres et écrits avec un trait d'union, et nous devons sélectionner tous ceux dont le nom de classe commence par un certain mot, par exemple « sélecteur », et les classes sont séparées par le signe "-". Que devez-vous faire dans ce cas ? L'entrée du sélecteur commence par des crochets, où le nom de l'attribut est d'abord écrit, puis une barre oblique verticale, le signe « = » et « sélecteur » : « data- |= selector ». Ensuite, écrivez la propriété souhaitée que vous souhaitez modifier. En conséquence, un élément avec les paramètres spécifiés sera sélectionné. En changeant de classe, vous pouvez modifier les propriétés de certaines parties du code. Si les noms de classe ne sont pas écrits avec un trait d'union, mais sous la forme d'un seul mot, ils peuvent également être sélectionnés, mais en utilisant une notation légèrement différente. Dans ce cas, la barre oblique verticale est remplacée par le symbole « ^ » : « data^ = selector ». Ce sélecteur sélectionne une sous-chaîne avec le début du nom de la classe.

Comment sélectionner un élément avec une terminaison spécifique dans le nom de la classe

Faisons maintenant les choses différemment et sélectionnons des parties du code non pas par le début de la description de la classe, mais par les dernières lettres de son nom. Pour cela, nous avons besoin d'un signe dollar. On le met à la place de la case à cocher, et après le signe égal on écrit la fin du nom de la classe : « data$ = ctor ». Désormais, les éléments avec cette combinaison de lettres seront sélectionnés et certaines propriétés leur seront appliquées. Vous pouvez sélectionner n'importe quel attribut. Voyons quoi faire si nous devons trouver un élément avec une combinaison de lettres au milieu d'un mot. Dans ce cas, on change le signe dollar en astérisque, et après le signe égal on écrit les lettres nécessaires : « data* = ct ».

Pseudo-classes - sélecteurs spéciaux

Pour les liens, on utilise généralement des sélecteurs de style CSS spéciaux qui affichent leurs différents états : silencieux, actif, actif, terminé - ceux-ci sont appelés pseudo-classes. La pseudo-classe d'un lien actif survolé s'écrit ainsi : « a:active ». Viennent ensuite quelques propriétés, le plus souvent le fond est modifié ou une ombre est ajoutée. Si vous ajoutez cette propriété à un lien et cliquez dessus, sa couleur changera pour celle spécifiée. Une autre pseudo-classe - le survol montre que le lien a déjà été visité. Il s'écrit ainsi : « a:hover ».

Caractéristiques des états actif et focus

Actif est souvent confondu avec un autre état : la concentration. Il s'écrit ainsi : « a:focus » et indique l'état actif du bouton lorsque l'on travaille depuis le clavier. Autrement dit, si vous utilisez la touche TAB, le lien actif sera mis en évidence dans une couleur spéciale. Cette propriété doit être utilisée car tous les utilisateurs ne peuvent pas utiliser la souris pour naviguer sur le site. Certains peuvent avoir une mauvaise vue ou d’autres problèmes de santé, ils se déplacent donc sur la page à l’aide de touches ou d’appareils spéciaux. Ignorer l'état d'un bouton au focus est un gros inconvénient pour un paramètre de conception de site tel que l'accessibilité, et a un impact significatif sur son trafic pour une catégorie particulière d'utilisateurs. Lors d'une navigation normale avec la souris, le lien devient à la fois actif et net. Par conséquent, il est important d’y prêter attention lors du style des éléments.

Pseudo-éléments

Les pseudo-éléments vous permettent de spécifier des styles spécifiques sans les définir dans la structure HTML elle-même. Ils s'écrivent ainsi : nom du sélecteur, signe « :: », nom du pseudo-élément. Les éléments les plus courants sont « avant » et « après ». Ils ont une propriété « contenu » et ne peuvent pas être appliqués aux styles internes. « Après » est nécessaire pour ajouter du contenu après le contenu d'un certain élément. Ce qui doit être inséré exactement est enregistré dans la propriété « content ». De même, le pseudo-élément "avant" ajoute du contenu avant le contenu de l'élément. L'utilisation de ces sélecteurs spéciaux vous permet de raccourcir le code et de ne pas écrire une nouvelle structure pour une partie de celui-ci à chaque fois si vous devez ajouter un petit détail à un certain endroit du conteneur. Ils sont très souvent utilisés pour styliser les pages et ajouter des éléments décoratifs. Les combinaisons de toutes ces options contribuent à créer des effets inhabituels sur la page et aident grandement le concepteur de mise en page.

Le sélecteur est utilisé pour identifier de manière unique l'élément du document HTML auquel nous souhaitons appliquer un style CSS particulier.

• Sélecteur par élément ;
• Sélecteur par classe ;
• Sélecteur par identifiant ;
• Sélecteur de contexte ;

Sélecteur d'éléments

Jusqu’à présent, nous avons travaillé avec ce sélecteur. Le nom de l’élément html auquel nous souhaitions appliquer ce style a été utilisé comme sélecteur. Ceux. Après avoir écrit un cours par exemple pour le paragraphe (P), tous les paragraphes de la page ont acquis le style de ce cours.

P(
taille de la police : 12 px
}

Imaginez maintenant une situation dans laquelle vous devez rédiger le premier paragraphe dans un style, le deuxième dans un autre, le troisième dans un troisième, etc. Ici, il viendra à notre aide sélecteur par classe.

Sélecteur par classe

Voyons comment créer une classe générique en CSS. Et c'est très simple à faire : on met d'abord un point, puis immédiatement, sans espace, on écrit le nom de la classe, puis le style entre accolades. 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 souhaitons appliquer ce style à un paragraphe spécifique du document. Voici à quoi cela ressemblera en HTML :

Texte du paragraphe...

Comme vous pouvez le voir, l'attribut est utilisé classe avec la signification du nom du style.

EXEMPLE:

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

p(
famille de polices : arial, verdana, sans-serif ;
taille de police : 18 px ;
}
.green (couleur : vert ;)
.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 modifier quelque chose dans un paragraphe, 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 souhaitons 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 titres, ou, par exemple, à une cellule d'un tableau, ou à l'ensemble du tableau ; en 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 de texte).

Vous pouvez faire agir la classe uniquement sur un élément spécifique (par exemple, un paragraphe) en spécifiant le nom de l'élément avant le point :

P.green (couleur : vert ;)

Désormais, la classe verte n’agira plus sur autre chose que l’élément P.

Sélecteur par identifiant

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

partie html :

<Н1 id="firstheader">Premier titre de la page

css - partie :

H1#firstheader ( couleur : rouge ; poids de la police : gras ; alignement du texte : centre )

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

En principe, on peut faire la même chose en utilisant un sélecteur par classe J

Sélecteur de contexte

C'est une chose très utile. Disons que nous avons une page avec des tableaux et des paragraphes de texte, et que dans le tableau et dans les paragraphes il y a des mots en gras. Il faut s'assurer que les mots du paragraphe surlignés en gras deviennent verts. Voici donc :

p fort (couleur: vert)

Ceux. d'abord P. puis un espace, puis FORT, et alors seulement le style. Cette ligne ressemble à ceci : Si à l'intérieur de l'élément P. il y a un élément FORT puis attribuez un style vert à l'élément fort.

La nidification peut être de n’importe quel niveau. Voici un autre exemple : « Si soudainement à l’intérieur d’une cellule de tableau ( td) , paragraphe ( P) ,à l'intérieur duquel il y aura un mot surligné en gras ( FORT), alors laissez ce mot devenir rouge ! "

td p fort (couleur : rouge ;)