CSS (Cascading Style Sheets) est le code que vous utilisez pour styliser votre page Web. Bases CSS vous aidera à comprendre ce dont vous avez besoin pour commencer. Nous répondrons à des questions telles que : Comment rendre mon texte noir ou rouge ? Comment puis-je faire apparaître du contenu à un endroit spécifique de l'écran ? Comment puis-je décorer ma page Web avec des images et des couleurs d’arrière-plan ?

Alors, qu’est-ce que CSS ?

Comme HTML, CSS n’est pas réellement un langage de programmation. Ce n'est pas un langage de balisage - c'est langage de feuille de style. Cela signifie qu'il vous permet d'appliquer de manière sélective des styles aux éléments des documents HTML. Par exemple, pour sélectionner Touséléments de paragraphe sur une page HTML et changez le texte à l'intérieur du noir au rouge, vous écririez ce CSS :

P ( couleur : rouge ; )

Essayons : collez ces trois lignes de CSS dans un nouveau fichier dans votre éditeur de texte, puis enregistrez le fichier sous style.css dans votre dossier styles.

Mais nous devons toujours appliquer CSS à notre document HTML. Sinon, le style CSS n'affectera pas la façon dont votre navigateur restitue le document HTML. (Si vous n'avez pas suivi notre projet, lisez Travailler avec des fichiers et les bases de HTML pour découvrir ce que vous devez faire en premier.)

1. Ouvrez votre fichier index.html et collez la ligne suivante quelque part dans l'en-tête, entre Et balises :
2. Enregistrez index.html et chargez-le dans votre navigateur. Vous devriez voir quelque chose comme ceci :

Si le texte de votre paragraphe est désormais rouge, félicitations ! Vous avez écrit votre premier CSS réussi !

Anatomie d'un ensemble de règles CSS

Jetons un coup d'œil au CSS ci-dessus plus en détail :

L'ensemble de la structure s'appelle ensemble de règles(mais souvent « règle » pour faire court). Notons également les noms des différentes pièces :

Sélecteur Le nom de l'élément HTML au début de l'ensemble de règles. Il sélectionne le ou les éléments auxquels appliquer le style (dans ce cas, les p éléments). Pour styliser un élément différent, changez simplement le sélecteur. Déclaration Une seule règle, par exemple couleur : rouge ; indique lequel deélément que vous souhaitez styliser.

Propriétés Les façons dont vous pouvez styliser un élément HTML spécifique (dans ce cas, la couleur est une propriété sur les éléments qui définissent un paragraphe de texte."> ). En CSS, vous choisissez les propriétés que vous souhaitez affecter dans votre règle. Valeur de la propriété A droite de la propriété, après les deux points, on a

valeur de la propriété

• , qui sélectionne l'une des nombreuses valeurs possibles pour une propriété donnée (il existe de nombreuses valeurs de couleur en plus du rouge).
• Veuillez noter les parties importantes de la syntaxe :
• Chaque ensemble de règles (à l'exception du sélecteur) doit être entouré d'accolades (()).

Chaque déclaration doit utiliser deux points (:) pour séparer la propriété de ses valeurs.

Dans chaque ensemble de règles, vous devez utiliser un point-virgule (;) pour séparer chaque déclaration de la suivante.

Ainsi, pour modifier plusieurs valeurs de propriété à la fois, il vous suffit de les écrire séparées par des points-virgules, comme ceci :

P ( couleur : rouge ; largeur : 500 px ; bordure : 1 px noir uni ; )

Sélection de plusieurs éléments

Vous pouvez également sélectionner plusieurs éléments de types différents et leur appliquer un seul ensemble de règles. Ajoutez plusieurs sélecteurs séparés par des virgules. Par exemple:

P,li,h1 ( couleur : rouge ; ) Différents types de sélecteurs Il existe de nombreux types de sélecteurs. Ci-dessus, nous avons seulement considéré

sélecteur d'élément	, qui sélectionne tous les éléments d'un certain type dans un document HTML. Mais on peut rendre le choix plus précis. Voici quelques-uns des types de sélecteurs les plus courants :	Nom du sélecteur
Que choisit-il ?	Exemple	Sélecteur d'élément (parfois appelé sélecteur de balise ou de type) Tous les éléments HTML du type spécifié.
p	Sélectionne	Sélecteur d'identifiant Tous les éléments HTML du type spécifié. Un élément sur une page avec un ID spécifié (sur une page HTML, il ne peut y avoir qu'un seul élément avec n'importe quel ID).
#mon-identifiant	Ou	Sélecteur de classe Tous les éléments HTML du type spécifié. Élément(s) sur une page avec une classe spécifiée (plusieurs instances d'une classe peuvent être déclarées sur une page).
.ma-classe	ET	Sélecteur d'attribut Tous les éléments HTML du type spécifié. Le(s) élément(s) de la page avec l'attribut spécifié.
img	mais pas	Sélecteur de pseudo-classe Tous les éléments HTML du type spécifié. Élément(s) spécifié(s), mais uniquement dans le cas d'un certain état, comme en survol.

a: survol

, mais uniquement lorsque le pointeur de la souris se trouve sur le lien.

1. Tout d’abord, revenez en arrière et recherchez ce que vous avez déjà enregistré quelque part. Ajouter un élément quelque part dans l'en-tête de votre index.html (encore une fois, n'importe où entre les balises Et). Cela ressemblera à ceci :
2. Ensuite, supprimez la règle existante dans votre fichier style.css. C'était un bon test, mais le texte rouge n'a pas l'air très beau.
3. Ajoutez les lignes suivantes si nécessaire, en remplaçant la ligne d'espace réservé par la ligne de famille de polices réelle que vous avez obtenue de Google Fonts. (font-family signifie simplement la ou les polices que vous souhaitez utiliser pour votre texte). Cette règle définit la police de base globale et la taille de police pour la page entière (puisque est l'élément parent de la page entière, et tous les éléments qu'elle contient héritent de la même taille de police et de la même famille de polices) : html ( font-size: 10px; /* px signifie "pixels": la police de base aura une hauteur de 10 pixels */ font -family : espace réservé : cela devrait être le nom de la police des polices Google)

   Note: Tout dans le document CSS entre /* et */ est Commentaire CSS, que le navigateur ignore lors de l'exécution du code. C'est un endroit où vous pouvez rédiger des notes utiles sur ce que vous faites.

4. Nous allons maintenant définir la taille de la police pour les éléments contenant du texte à l'intérieur du corps HTML (

   , et définit un paragraphe de texte.">

   ). Nous allons également centrer notre texte d'en-tête et définir une hauteur de ligne et un espacement des lettres dans le corps du document pour le rendre un peu plus facile à lire : h1 ( font-size : 60px; text-align: center; ) p, li ( taille de police : 16 px ; hauteur de ligne : 2 ; espacement des lettres : 1px )

Vous pouvez ajuster les valeurs px comme vous le souhaitez pour que votre conception ressemble à ce que vous souhaitez, mais en général, votre conception devrait ressembler à ceci :

Des blocs, des blocs et encore des blocs

Une chose que vous remarquerez lors de l'écriture de CSS est qu'elle concerne en grande partie les blocs - la personnalisation de leur taille, de leur couleur, de leur position, etc. La plupart des éléments HTML d’une page peuvent être considérés comme des blocs empilés les uns sur les autres.

Sans surprise, la mise en page CSS est basée principalement sur modèle de boîte. Chacun des blocs qui occupent de l'espace sur votre page possède des propriétés telles que :

• remplissage, espace uniquement autour du contenu (par exemple, autour d'un paragraphe de texte)
• border , une ligne continue située à côté du remplissage
• margin , l'espace autour de l'extérieur de l'élément

Dans cette section, nous utilisons également :

• largeur (largeur de l'élément)
• background-color , la couleur derrière le contenu et le remplissage des éléments
• color , la couleur du contenu de l'élément (généralement du texte)
• text-shadow : définit une ombre sur le texte à l'intérieur d'un élément
• display : définit le mode d'affichage de l'élément (ne vous inquiétez pas pour l'instant)

Alors commençons et ajoutons plus de CSS à notre page ! Continuez à ajouter ces nouvelles règles situées en bas de la page et n'ayez pas peur d'expérimenter en modifiant les valeurs pour voir comment cela fonctionne.

Changer la couleur de la page

html ( couleur d'arrière-plan : #00539F; )

Cette règle définit la couleur d'arrière-plan de la page entière. Remplacez le code couleur en haut par la couleur qui .

Faire face au corps

corps (largeur : 600 px ; marge : 0 auto ; couleur d'arrière-plan : #FF9500 ; remplissage : 0 20px 20px 20px ; bordure : 5px noir uni ; )

Maintenant pour élément. Il y a pas mal de déclarations ici, alors passons-les toutes en revue une par une :

• largeur : 600 px ; - fait que le corps a toujours une largeur de 600 pixels.
• marge : 0 automatique ; - lorsque vous définissez deux valeurs pour des propriétés telles que margin ou padding , la première valeur de l'élément affecte celle du haut Et le côté inférieur (ce qui les rend 0 dans ce cas), et la deuxième valeur à gauche Et le côté droit (ici, auto est une valeur spéciale qui divise l'espace disponible horizontalement de manière égale à gauche et à droite). Vous pouvez également utiliser une, trois ou quatre valeurs comme décrit.
• couleur d'arrière-plan : #FF9500 ; - comme précédemment, définit la couleur de fond de l'élément. J'ai utilisé un orange rougeâtre pour le corps plutôt qu'un bleu foncé pour ). Tous les autres éléments doivent être des descendants de cet élément."> élément, mais ne soyez pas timide et expérimentez.
• remplissage : 0 20px 20px 20px ; - nous avons quatre valeurs définies pour le remplissage afin de donner un peu d'espace autour de notre contenu. Cette fois, nous ne définissons pas de remplissage en haut du corps, mais ajoutons 20 pixels à gauche, en bas et à droite. Les valeurs sont définies en haut, à droite, en bas, à gauche, dans cet ordre.
• bordure : 5px noir uni ; - définit simplement une bordure noire unie de 5 pixels de large sur tous les côtés du corps.

Positionnement et style de l'en-tête de notre page d'accueil

h1 ( marge : 0 ; remplissage : 20px 0 ; couleur : #00539F ; ombre du texte : 3px 3px 1px noir ; )

Vous avez peut-être remarqué qu’il y a un vilain espace dans le haut de votre corps. Cela se produit parce que les navigateurs appliquent certains style par défaut pour élément

(par rapport aux autres) même si vous n'avez appliqué aucun CSS du tout ! Cela peut sembler une mauvaise idée, mais nous voulons qu’une page Web sans styles ait une lisibilité de base. Pour supprimer l'écart, nous avons remplacé le style par défaut en définissant margin: 0; .

Ensuite, nous avons défini le remplissage supérieur et inférieur de l'en-tête sur 20 px et avons donné au texte de l'en-tête la même couleur que la couleur d'arrière-plan HTML.

Ici, nous avons utilisé une propriété plutôt intéressante - text-shadow, qui applique une ombre au contenu textuel de l'élément. Il a les quatre significations suivantes :

• La première valeur de pixel spécifie décalage horizontal ombres du texte - jusqu'où il se déplace : une valeur négative devrait le déplacer vers la gauche.
• La deuxième valeur de pixel spécifie décalage vertical ombre du texte - jusqu'où elle descend, dans cet exemple : une valeur négative devrait la faire monter.
• La troisième valeur de pixel spécifie rayon de flou ombres - une valeur plus élevée signifie une ombre plus floue.
• La quatrième valeur définit la couleur de base de l'ombre.

Encore une fois, essayez d'expérimenter différentes valeurs pour voir ce que vous pouvez trouver.

Si le sujet de la création de sites Web vous intéresse, vous avez probablement entendu parler plus d'une fois de CSS (Cascading Style Sheets). Vous avez peut-être même essayé d’apprendre cette technologie, car les compétences CSS constituent une base essentielle dans l’art de la création de sites Web. Les feuilles de style en cascade font partie de la triade de technologies que tout développeur Web devrait maîtriser (avec HTML et JavaScript).

À cet égard, avec cet article, je lance une série de publications sur CSS. J'ai essayé de composer les leçons de telle manière que même une personne complètement nulle en développement Web puisse apprendre cette merveilleuse technologie.

Néanmoins, je pense que les maquettistes plus expérimentés trouveront beaucoup de choses nouvelles et utiles dans ces leçons. Je vous conseille également de vous abonner aux mises à jour pour ne pas rater la sortie des nouveaux cours.

Apprenez-en davantage sur ce qu'est la feuille de style en cascade (CSS) et à quoi elle sert ci-dessous.

Version vidéo :

Qu’est-ce que CSS ?

Comme vous le savez, lors de la création d'un site Web, nous formons son contenu à l'aide d'un langage de balisage hypertexte - HTML (Hypretext Markup Language). En l'utilisant, nous créons des blocs de navigation et remplissons la page Web avec du texte et du contenu audio/vidéo. De manière générale, nous créons la structure du site.

Après avoir formé le contenu du site, à l'étape suivante, nous passons à l'étape de conception de son apparence pour qu'il soit beau et agréable. Et aussi pour qu'il s'affiche bien sur différentes résolutions d'affichage. C'est exactement pourquoi nous utilisons des feuilles de style en cascade CSS.

Cela signifie que pour apprendre et utiliser efficacement CSS, vous devez connaître les bases du HTML. Sans cela, comprendre les feuilles de style en cascade n’a aucun sens pratique. Si vous n’êtes toujours pas familier avec les bases du langage hypertexte, parcourez le mien.

Un bon exemple

Au sens figuré, la création de sites Web peut être comparée au dessin. Avant de commencer à manipuler habilement le pinceau et la toile, nous devons décider de ce qui sera exactement représenté dans notre peinture. Imaginons que nous décidions de dessiner un paysage dans lequel un oiseau sera représenté sur un fond d'arbres et de montagnes. On peut dire qu'à ce stade nous avons déterminé le contenu même de l'image.

Une situation similaire se produit avec HTML, avec lequel nous formons le contenu d'une page Web.

Site Web en HTML pur, pas de CSS
Le même site avec des feuilles de style connectées

Pour plus de clarté, allons sur un site Web, par exemple, facebook.com. L'étape suivante consiste à installer une extension de navigateur appelée WEbDeveloper. Je l'ai déjà installé, mais il suffit de saisir la phrase WEbDeveloper dans un moteur de recherche, de suivre le lien et de cliquer sur le bouton « Installer » dans la fenêtre qui s'ouvre.

J'ai cette extension installée et contrôlée à l'aide de l'icône d'engrenage dans la partie supérieure droite de l'écran. Je vous suggère sur faceboook.com de désactiver les feuilles de style et de regarder uniquement le contenu. Pour ce faire, nous allons dans la section CSS et cliquons sur Désactiver tous les styles. Les styles sont désactivés et nous voyons à quel point le contenu de cette page Web est peu attrayant sans design.

Apparition d'un réseau social sans fichiers CSS connectés

Autrement dit, nous voyons maintenant un site en HTML pur. Pour activer les fichiers CSS de cette page, nous retournons à WEbDeveloper et décochons Désactiver tous les styles.

La feuille de style est à nouveau connectée et nous pouvons voir le contenu de la page Web avec le design.

Sociale réseau avec fichiers CSS connectés

Comment fonctionne le CSS ?

Toutes les règles de conception du site Web sont stockées dans un fichier avec l'extension CSS, qui à son tour est chargé sur la page Web via la balise .

Lors du chargement de la page html, via la balise Le fichier CSS est également chargé, après quoi le navigateur commence à le traiter et le site s'affiche selon les règles spécifiées dans ce fichier. Il décrit les propriétés d'affichage des éléments de la page Web.

Par exemple, grâce au sélecteur "p", nous spécifions le type, la taille et les couleurs des polices dans les paragraphes. Pour configurer les polices de titres de premier niveau, nous utilisons le sélecteur "h1".

Je pense que le principe général de fonctionnement est assez simple et compréhensible, nous n'entrerons donc pas dans les détails. Si certains moments vous posent des difficultés, ce n'est pas grave ; dans les cours suivants, en pratique, tout sera très simple et compréhensible.

Pourquoi apprendre le CSS ?

Je ne pense pas qu’aujourd’hui on puisse trouver au moins un site web plus ou moins « décent » sans utiliser CSS. Cette technologie a très bien fait ses preuves et il est aujourd’hui très difficile d’imaginer la mise en page d’un site internet sans l’utilisation de feuilles de style en cascade.

Avec sa mise à jour, de nombreuses balises HTML 4 ne sont plus utilisées. Fondamentalement, ce sont des balises responsables de la conception des pages Web. Et il n’y a rien d’étonnant ici, car les propriétés CSS en sont désormais responsables. Si vous connaissez déjà les bases du HTML, la prochaine étape logique consiste à apprendre le CSS. C’est l’étape que vous ne pouvez pas sauter si vous souhaitez apprendre la mise en page d’un site Web. De plus, cela ne prendra pas beaucoup de temps.

Avantages du CSS

• Grâce à l'utilisation de styles CSS, le code HTML est considérablement réduit. Parfois plusieurs fois. Cela a un effet positif sur la vitesse de chargement du site, ce qui facilite sa promotion dans les moteurs de recherche ;
• Lors de la mise à jour de la conception de votre site Web, il n'est plus nécessaire de modifier chaque balise séparément sur toutes les pages Web. Il suffit de modifier quelques lignes dans la feuille de style ;
• CSS vous ouvre de larges possibilités dans la conception et la mise en page de vos sites ;
• Il n'est pas nécessaire d'utiliser des balises héritées. De nombreux moteurs de recherche ne les aiment pas, et utiliser des balises obsolètes est considéré comme de mauvaises manières ;
• En utilisant CSS, vous restez dans l’air du temps.

Comment apprendre rapidement les bases du CSS

Dans l’apprentissage du CSS, comme dans la programmation en général, la pratique joue un rôle essentiel. Plus vous pratiquez souvent, mieux vous y parviendrez.

Leçon n°3
Propriétés CSS de base

Le schéma du code CSS ressemble à ceci :

TagName ( propriété CSS : valeur ; )

Dans ce tutoriel, nous examinerons propriétés CSS de base. Pour votre commodité, je les ai divisés en catégories :

Propriétés CSS affectant la couleur et l'arrière-plan

color : - Propriété CSS qui affecte la couleur du texte : titre, paragraphe, lien, etc. Sa valeur est le nom de la couleur ou le code hexadécimal au format RVB.
Exemples de code utilisant la propriété CSS color :
couleur : vert ; — le texte doit être vert, le nom de la couleur est spécifié comme valeur,
couleur : #008800 ; — le texte doit être vert, la valeur doit être un code hexadécimal au format RVB.

background-color : — Propriété CSS qui affecte la couleur d'arrière-plan d'un en-tête, d'un paragraphe, d'un lien, etc.
Sa valeur est le nom de la couleur ou le code hexadécimal au format RVB.
Exemples de code utilisant la propriété CSS background-color :
couleur de fond : bleu ; - le fond doit être bleu,
couleur d'arrière-plan : #0000ff ; - le fond doit être bleu.

background-image : — Propriété CSS qui définit une image comme arrière-plan d'un en-tête, d'un paragraphe, d'un lien, etc. Sa valeur est l'URL (adresse) de l'image.
Exemples de code utilisant la propriété CSS background-image :
image d'arrière-plan : url(http://nom de domaine.ru/kartinka.jpg) ; — l'arrière-plan doit être l'image située à l'adresse http://domainname.ru/kartinka.jpg

Propriétés CSS affectant la police

font-size : - Propriété CSS qui affecte la taille de la police des titres, paragraphes, liens, etc. Sa valeur est l'unité de mesure : pixel (px), pourcentage (%), point (pt), etc.
Exemples de code utilisant la propriété CSS font-size :
taille de police : 17 px ; - la taille de la police doit être de 17 pixels,
taille de police : 20 pts ; — la taille de la police doit être de 20 points.

font-family : - propriété CSS qui définit le nom de la police pour un titre, un paragraphe, un lien, etc. Sa valeur est le nom de la police : Arial, Courier, Impact, Garamond, Georgia, Helvetica, Tahoma, Times (défini par défaut), Verdana, etc.
Exemples de code utilisant la propriété CSS font-family :
famille de polices : Arial ; - le nom de la police doit être Arial,
famille de polices : Impact ; — le nom de la police doit être Impact.

font-style : — Propriété CSS qui affecte le style de police (style) d'un titre, d'un paragraphe, d'un lien, etc. Sa signification est : normale, oblique.
Exemples de code utilisant la propriété CSS font-style :
style de police : normal ; - style de script normal,
style de police : oblique ; — style de décalage italique.

font-weight : - Propriété CSS qui affecte l'épaisseur de la police d'un titre, d'un paragraphe, d'un lien, etc. Sa valeur sera : normale, grasse.
Exemples de code utilisant la propriété CSS font-weight :
poids de la police : normal ; - style de script normal,
poids de la police : gras ; - style de police gras.

Propriétés CSS affectant le texte

text-align : - Propriété CSS qui affecte l'alignement du texte dans les titres, paragraphes et autres éléments de bloc. Sa valeur est : gauche , centre , droite , justifier .
Exemples de code utilisant la propriété CSS text-align :
aligner le texte : gauche ; — alignement du texte à gauche (défini par défaut),
alignement du texte : centre ; — alignement du texte au centre,
aligner le texte : à droite ; — alignement du texte à droite,
text-align : justifier ; — alignement uniforme du texte sur les bords gauche et droit.

text-indent : - Propriété CSS qui affecte l'indentation de la première ligne (ligne rouge) du texte dans un titre, un paragraphe et d'autres éléments de bloc. Sa valeur est l'unité de mesure : pixel (px), pourcentage (%), point (pt), etc.

retrait du texte : 20 px ; — le retrait de la première ligne est de 20 pixels,
retrait du texte : 15 pt ; — l'indentation de la première ligne est de 15 points.

line-height : — Propriété CSS qui affecte la distance entre les lignes de texte (interligne) d'un titre, d'un paragraphe, d'un lien, etc. Sa valeur est l'unité de mesure : multiplicateur, pixel (px), pourcentage (%), point (pt), etc.
Exemples de code utilisant la propriété CSS text-indent :
hauteur de ligne : 35 px ; — la distance entre les lignes est de 35 pixels,
hauteur de ligne : 1,5 ; — la distance entre les lignes est de 1,5 par un facteur (semblable à 150 %).

letter-spacing : - Propriété CSS qui affecte la distance entre les caractères dans les mots du titre, du paragraphe de lien, etc. Sa valeur est l'unité de mesure : pixel (px), pourcentage (%), point (pt), etc.
Exemples de code utilisant la propriété CSS letter-spacing :
espacement des lettres : 3 px ; — la distance entre les caractères des mots est de 3 pixels,
espacement des lettres : 5 pt ; — la distance entre les caractères des mots est de 5 points.

word-spacing : - Propriété CSS qui affecte la distance entre les mots dans le texte d'un titre, d'un paragraphe, d'un lien, etc. Sa valeur est l'unité de mesure : pixel (px), pourcentage (%), point (pt), etc.
Exemples de code utilisant la propriété CSS word-spacing :
espacement des mots : 10 px ; — la distance entre les mots est de 10 pixels,
espacement des mots : 7 pt ; — la distance entre les mots est de 7 points.

text-transform : - Propriété CSS qui affecte l'apparence des lettres dans le texte, en les rendant majuscules ou minuscules. Sa signification est : majuscule, minuscule, majuscule.
Exemples de code utilisant la propriété CSS text-transform :
transformation de texte : capitaliser ; - la première lettre de chaque mot commence par une majuscule,
transformation de texte : majuscule ; - toutes les lettres du texte sont écrites en majuscules,
transformation de texte : minuscule ; — toutes les lettres du texte sont écrites en minuscules.

text-shadow : - Propriété CSS qui crée une ombre de texte.
Sa valeur est : axe couleur-axe x-rayon y.
Exemple de code utilisant la propriété CSS text-shadow :
texte-ombre : vert 3px 2px 2px ; — l'ombre sera verte, décalée vers la gauche de 3 pixels, décalée vers le bas de 2 pixels, le rayon (étendue de l'ombre) sera de 5 pixels.

Propriétés CSS affectant la bordure (trait)

border-color : — Propriété CSS qui affecte la couleur des bordures d'un titre, d'un paragraphe, d'un lien, etc. Sa valeur est le nom de la couleur ou son code hexadécimal au format RVB.
Exemples de code utilisant la propriété CSS border-color :
couleur de la bordure : vert ; - couleur du contour vert,
couleur de la bordure : #008800 ; — couleur de trait vert, spécifiée en code RVB hexadécimal.

border-width : - Propriété CSS qui affecte l'épaisseur des bordures d'un titre, d'un paragraphe, d'un lien, etc. Sa valeur est l'unité de mesure : pixel (px).
Exemples de code utilisant la propriété CSS border-width :
largeur de bordure : 1 px ; — l'épaisseur du trait est de 1 pixel,
largeur de la bordure : 3 px ; — l'épaisseur du trait est de 3 pixels.

border-style : - Propriété CSS qui affecte le style des bordures d'un titre, d'un paragraphe, d'un lien, etc. Sa valeur est : pleine, pointillée, pointillée, double.
Exemples de code utilisant la propriété CSS border-style :
style de bordure : solide ; - trait en trait plein,
style de bordure : pointillé ; - trait sous forme de segments,
style de bordure : pointillé ; - un contour en forme de points,
style de bordure : double ; - trait en forme de double trait plein.

Propriétés CSS affectant le remplissage et le remplissage

margin : - propriété CSS qui affecte la marge entre le bord d'arrière-plan d'un élément de bloc (titres, paragraphes, etc.) et le bord d'arrière-plan d'un autre élément de bloc. Sa valeur est l'unité de mesure : pixel (px), pourcentage (%), point (pt), etc.
Exemples de code utilisant la propriété CSS margin :
marge : 15px ; — l'indentation est de 15 pixels,
marge : 12pt ; — l'indentation est de 12 points.

padding : - Propriété CSS qui affecte le remplissage entre le bord de l'arrière-plan de l'élément et son contenu (texte, image). Sa valeur est l'unité de mesure : pixel (px), pourcentage (%), point (pt), etc.
Exemples de code utilisant la propriété CSS padding :
remplissage : 5 px ; — le retrait est de 5 pixels,
remplissage : 3 pts ; — l'indentation est de 3 points.

• Catégorie:

Technologie CSS Il est principalement utilisé par les concepteurs, car ce sont eux qui créent le design du site Web. Cependant, c'est une erreur de croire que les webmasters CSS pas besoin de savoir. Il suffit de rappeler au moins un exemple de la description de la section suivante. En plus de la portabilité de votre site, les feuilles de style vous permettent de créer diverses solutions de conception classiques (par exemple un menu déroulant). Et avec eux, ils vous permettent de créer une dynamique Pages HTML (HTML), dont la beauté et la commodité sont parfois tout simplement étonnantes.

Bien sûr, pour créer de telles choses, vous devez vous familiariser avec Bases CSS. Et cette catégorie du site vous aidera à le faire aussi rapidement et efficacement que possible.

Cours complet sur HTML, CSS et mise en page du site Web:

Après avoir lu des articles sur les bases de CSS, vous apprendrez :

1) Syntaxe CSS.

2) Les méthodes et leurs priorités d'affectation Style CSS.

3) Types de sélecteurs dans CSS.

4) CSS Piratage du navigateur.

5) Règles d'écriture CSS.

6) Comment créer une info-bulle sur CSS.

7) Comment changer l'apparence de la première lettre via CSS.

8) Comment définir le type de curseur via CSS.

9) Comment changer l'apparence du curseur lors du survol de la souris en utilisant CSS.

10) Comment créer un sous-menu sur CSS.

11) À propos du remplacement des propriétés largeur minimale V IE6.

12) À propos de la validité CSS.

13) Comment définir la couleur des liens visités.

14) Comment mettre en retrait un paragraphe en utilisant CSS.

15) Comment faire des coins arrondis CSS.

16) Comment faire passer votre image à la place d'un marqueur de liste CSS.

17) Comment faire de l'arrière-plan une image.

18) Comment assombrir l'arrière-plan CSS.

19) Dans quoi sont les sélecteurs d'enfants CSS.

20) Quelles unités de mesure sont disponibles dans CSS.

21) Comment créer une fenêtre pop-up avec gradation.

22) Comment créer un arrière-plan animé.

23) Comment créer un beau champ de texte.

24) Comment changer une image lorsque vous passez le curseur de la souris dessus.

25) Que sont les pseudo-éléments dans CSS.

26) Qu'est-ce que c'est Sprits CSS.

27) Comment appuyer sur le pied de page (pied de page) vers le bas CSS.

28) Comment empêcher le redimensionnement zone de texteà travers CSS.

29) Comment dessiner un triangle traversant CSS.

30) Comment gérer un événement cliquezà travers CSS.

31) Comment définir votre curseur via CSS.

32) Comment créer un menu déroulant horizontal sur CSS.

33) Comment utiliser une police non standard sur le site.

34) Comment changer l'arrière-plan d'un bouton radio via CSS.

35) Puis-je utiliser CSS3.

36) Comment faire une ombre sur CSS.

37) Comment définir les attributs rembourrage cellulaire Et espacement des cellules sur CSS.

38) Comment faire div avec 100% de hauteur.

39) À propos de la compatibilité indice z et joueur YouTube.

40) Pourquoi est-il mauvais d'utiliser -moz, -MS, -kit Web et d'autres propriétés.

41) Est-ce que ça vaut la peine d'utiliser Réinitialisation CSS.

42) Comment aligner verticalement un marqueur de liste.

43) Comment créer une version imprimable.

44) Comment assurer la transparence entre navigateurs sur CSS.

45) Qu'est-ce que c'est clairfix.

46) Comment annuler partiellement flotter.

47) Comment créer une disposition à deux colonnes avec des hauteurs de colonnes égales.

48) Qu'est-ce que la mise en page adaptative.

49) Que sont les requêtes média dans CSS.

50) Qu'est-ce que c'est moins.

51) Comment faire Effet de coin de chien en CSS.

52) Comment faire pied de page de site Web « collant » réactif.

53) Comment utiliser API des polices Google.

54) Comment utiliser le service Outils en direct.

55) Comment autoriser ou désactiver la sélection de texte sur CSS.

56) Comment changer l'apparence d'un élément en standard à l'aide d'une propriété apparence V CSS.

57) Pourquoi est-il nécessaire propriété de saut de page à l'intérieur V CSS.

58) Comment Aligner au centre un bloc de largeur variable sur CSS.

59) Comment faire triangles en CSS pur.

60) Service par générer des triangles CSS.

61) Comment pousser le pied de page vers le bas de la page(positionnement).

62) Comment pousser le pied de page vers le bas de la page(méthode tabulaire).

63) Étudier Toupet. Installation et configuration.

64) Comment masquer un élément sur une page sur CSS.

65) Étudier Toupet. Les bases.

66) Quand utiliser réinitialiser.css Et normaliser.css.

67) Service d'images avec puissant API.

68) Comment faire Effet d'agrandissement d'image CSS.

69) Koala- compilation rapide toupet fichiers.

70) Comment ajouter filtres pour photos utilisant CSS.

71) Étudier Toupet. Myxine.

72) Étudier Toupet. Opérations mathématiques.

73) Animé icône de menu dans Sass.

74) Étudier Toupet. Fonctions.

75) Qu'est-ce que c'est PostCSS.

76) Comment installer et configurer PostCSS.

77) Comment faire possibilité d'évaluation sur CSS.

78) Étudier Toupet. Style d'écriture du code.

79) Étudier Toupet. Extension du sélecteur parent.

80) 10 utiles Mixins SASS.

81) Comment faire Introduction de style Star Wars utilisant CSS.

82) Amorçage 4. Introduction.

83) Amorçage 4. Installation.

84) Amorçage 4. Redémarrez.

85) Amorçage 4. Conteneurs et points clés.

86) Amorçage 4. Système de grille.

87) Amorçage 4. Propriétés flexibles de la grille.

88) Dans quelles 5 innovations apparaîtront CSS4.

89) Amorçage 4. Que sont les Jumbotron ?

90) Amorçage 4. Utilitaires et typographie.

91) Amorçage 4. Composant cartes.

92) Différence entre classe Et identifiant en utilisant une balise comme exemple div.

93) Éléments infructueux conception de sites Web, qui ne doit pas être utilisé.

94) Amorçage 4. Fenêtres modales.

95) Ah priorité Et héritage V CSS en pratique

96) Comment mettre en page une mise en page PSD en utilisant Grille d'amorçage. Partie 1.

97) Comment mettre en page une mise en page PSD en utilisant Grille d'amorçage. Partie 2.

98) Comment utiliser les pseudo-éléments après et avant en CSS.

99) À propos des fonctionnalités largeur et hauteur du bloc en CSS.

100) Pseudo éléments après et pseudo-classe dernier enfant.

101) Comment afficher un site sur différents appareils.

102) Disposition sur une grille Amorçage(partie 1)

103) Disposition sur une grille Amorçage(partie 2)

104) Disposition sur une grille Amorçage(partie 3)

105) Disposition sur une grille Amorçage(partie 4)

CSS (feuilles de style en cascade) est un langage de feuille de style qui vous permet d'attacher un style (tel que des polices et des couleurs) à des documents structurés (tels que des documents HTML et des applications XML). Les styles CSS sont généralement utilisés pour créer et styliser des éléments de pages Web et d'interfaces utilisateur écrites en HTML et XHTML, mais peuvent également être appliqués à tout type de document XML, notamment XML, SVG et XUL. En séparant le style de présentation du document du contenu du document, 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 aux navigateurs visuels, aux appareils auditifs, aux imprimantes, aux appareils braille, aux appareils portables, etc.

Les feuilles de style en cascade décrivent les règles de formatage des éléments à l'aide de propriétés et les valeurs autorisées pour 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 celui-ci.

Une déclaration de style se compose de deux parties : sélecteur Et publicités. En HTML, les noms d'éléments ne sont pas sensibles à 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 (code entre accolades) répertorie les commandes de formatage - les propriétés et leurs valeurs.

Riz. 1. Structure des annonces

Bien que l'exemple fourni tente uniquement d'affecter quelques propriétés nécessaires au rendu d'un document HTML, il est considéré comme une feuille de style à part entière. Lorsqu'elle est combinée avec d'autres feuilles de style (une caractéristique fondamentale du 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 est un fichier texte avec l'extension .css, qui contient un ensemble de styles CSS pour les éléments. Le fichier est créé dans un éditeur de code, tout comme une page HTML. Le fichier ne peut contenir que des styles, sans balisage HTML. Une feuille de style externe est connecté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 , indiquant l'objectif de cette feuille de style dans l'attribut de balise média. rel="stylesheet" précise le type de lien (lien vers une 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, la valeur par défaut est type="text/css" .

1.2. Styles internes

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

...

1.3. Styles intégrés

Quand on écrit styles en ligne, nous écrivons le code CSS dans le fichier HTML, directement à l'intérieur de la balise element en utilisant 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 apparaître dans la feuille de style (externe ou interne) avant toutes les autres règles :

La règle @import est également utilisée pour inclure les 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 aident à créer des règles de formatage des éléments de page Web. Les sélecteurs peuvent être des éléments, leurs classes et identifiants, ainsi que des pseudo-classes et pseudo-éléments.

2.1. Sélecteur universel

Correspond à n’importe quel élément HTML. Par exemple, * (marge : 0 ;) réinitialisera les marges de tous les éléments du site. Le 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éments

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

2.3. Sélecteur de classe

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

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

.headline ( transformation de texte : majuscule ; couleur : bleu clair ; )

Si un élément possède 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 vous permet de formater unélément spécifique. La valeur id doit être unique, ne peut apparaître qu'une seule fois sur une seule page et 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 l'identifiant ; en particulier, les identifiants peuvent être composés uniquement de chiffres, commencer par un chiffre, commencer par un trait de soulignement, n'avoir que des signes de ponctuation, etc.

L'ID 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'ID de fragment, pour cibler un élément lors de l'écriture de scripts et pour styliser un élément spécifique à partir de CSS. .

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

2.5. Sélecteur de descendants

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

Si vous souhaitez formater les descendants d'un élément particulier, vous devez attribuer à cet élément une classe de style :

p.first a (couleur : vert ;) - ce style sera appliqué à tous les liens descendants du paragraphe de première classe ;

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

D'abord a (couleur : vert ;) - ce style sera appliqué à tout lien situé à l'intérieur d'un autre élément, désigné par class.first .

2.6. Sélecteur d'enfant

Un élément enfant est un enfant direct de son élément conteneur. Un élément peut avoir plusieurs éléments enfants, mais chaque élément ne peut avoir qu'un seul élément parent. Le sélecteur d'enfant vous 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 aucun autre élément entre eux, 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 de soeur

La sororité se produit entre des éléments qui partagent un parent commun. Les sélecteurs frères et sœurs vous permettent de sélectionner des éléments dans un groupe d'éléments du même niveau.

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

sans affecter les paragraphes restants ;

h1 ~ p - sélectionnera tous les paragraphes qui sont frères d'un en-tête h1 et immédiatement après celui-ci.

2.8. Sélecteur d'attribut

Les sélecteurs d'attribut 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 spécifié ;

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

selector[attribute="value"] - éléments de ce type contenant l'attribut spécifié avec une valeur spécifique, img - toutes les images dont le titre contient le mot fleur ;

selector[attribute~="value"] - éléments contenant partiellement une valeur donnée, par exemple, si plusieurs classes sont spécifiées pour un élément séparées par un espace, p - 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 est feature ou commence par feature ;

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 permettent d'appliquer des règles CSS aux éléments lorsqu'un événement se produit ou obéit à une règle spécifique. Les pseudo-classes caractérisent les éléments ayant les propriétés suivantes :

:hover - tout élément sur lequel le curseur de la souris est survolé ;

:focus - un élément interactif sur lequel vous avez navigué à l'aide du clavier ou activé à l'aide de la souris ;

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

:valid - champs de formulaire dont le contenu a été vérifié dans le navigateur pour vérifier sa 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 bloqués, c'est-à-dire dans un état inactif ;

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

:hors plage - champs de formulaire dont les valeurs ne se trouvent pas dans la plage spécifiée ;

: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 un élément avec le symbole # référencé dans le document ;

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

2.10. Sélecteur de pseudo-classe structurelle

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 pairs enfants ;

:nth-child(3n) - un élément sur trois parmi les enfants ;

:nth-child(3n+2) - sélectionne un élément sur trois, en commençant par le deuxième enfant (+2) ;

:nth-child(n+2) - sélectionne tous les éléments à partir du 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 élément 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

Indique un type spécifique de balise enfant :

:nth-of-type() - sélectionne des éléments similaires à :nth-child() , mais ne prend en compte que le type de l'élément ;

:first-of-type - sélectionne le premier enfant d'un type donné ;

:last-of-type - sélectionne le dernier élément de ce type ;

:nth-last-of-type() - sélectionne un élément du type donné dans une liste d'é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 éléments 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électeur

Pour sélectionner plus précisément les éléments à formater, 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. Regroupement des sélecteurs

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

H1, h2, p, span ( couleur : tomate ; fond : blanc ; )

5. Héritage et cascade

L'héritage et la cascade sont deux concepts fondamentaux en CSS étroitement liés. L'héritage est l'endroit où 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 dont différents types de feuilles de style sont appliqués à un document et dans la manière dont les règles contradictoires se remplacent les unes les 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 permet l'héritage des propriétés liées au contenu textuel de la page, telles que la couleur, la police, l'espacement des lettres, la hauteur de ligne, le style de liste, l'alignement du texte, l'indentation du texte, la transformation du texte, la visibilité, le blanc. -espace et espacement des mots. Dans de nombreux cas, cela est pratique car vous n'avez pas besoin de définir la taille et la famille de polices pour chaque élément de la page Web.

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

Héritage forcé

Vous pouvez utiliser le mot-clé hériter pour forcer un élément à hériter de n'importe quelle 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 en utilisant la valeur héritée) ;

2) Les styles situés dans la feuille de style ci-dessous remplacent les styles situés dans le tableau 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 en mode développeur du navigateur. Pour ce faire, faites un clic droit sur l'élément et sélectionnez « Afficher le code » (ou quelque chose de similaire). La colonne de droite répertorie toutes les propriétés définies sur cet élément ou héritées d'un élément parent, ainsi que les fichiers de style dans lesquels elles sont spécifiées et la ligne de code ordinale.

Riz. 2. Mode développeur dans le 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

En 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 importante, 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 annonce prévaudra sur toutes les autres règles. Cette règle permet d'annuler une valeur de 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 d'accès direct au fichier de style.

Spécificité

Pour chaque règle, le navigateur calcule spécificité du sélecteur, et si un élément a des déclarations de propriétés contradictoires, la règle qui a le plus de spécificité 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 :

pour l'identifiant, 0, 1, 0, 0 est ajouté ;
pour la classe 0, 0, 1, 0 est ajouté ;
pour chaque élément et pseudo-élément, 0, 0, 0, 1 est ajouté ;
pour un style en ligne ajouté directement à un élément - 1, 0, 0, 0 ;
Un 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, les règles plus spécifiques seront appliquées à l'élément. Par exemple, si un élément possède deux spécificités de 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 connecter à une seule page Web. Si différentes valeurs de propriété pour un élément sont trouvées dans différentes tables, la règle trouvée dans la feuille de style répertoriée ci-dessous sera appliquée à l'élément.