CSES CSSS CSS

CSS est une langue qui est ajoutée à une autre langue de conception frontale, HTML pour créer un site Web ou une page Web. Pour la déclaration interne et externe de CSS, nous devons déclarer des identifiants ou des classes avec les fonctionnalités que nous souhaitons appliquer au contenu HTML.

Classe CSS:

Dans CSS ou tout autre langage de programmation, les classes jouent un rôle important lorsque nous parlons de la spécification de tout élément. Dans CSS, des classes sont créées pour déclarer quelques styles et effets sur les éléments HTML. Toutes les propriétés CSS sont écrites à l'intérieur du corps de la classe en attribuant des valeurs aux propriétés. Par exemple:

.nom du cours
Property_name: valeur;

Une classe est déclarée avec un point et le nom de classe. Ces classes sont accessibles par le contenu HTML lorsque le nom de la classe est écrit à l'intérieur des balises particulières - comme nous l'avons fait pour l'un des contenus HTML comme le paragraphe < p class= "class_name"> C'est un paragraphe

En mentionnant le nom, toutes les caractéristiques d'une classe sont appliquées à ce contenu. Le principal objectif de la création de cette classe est que toutes les caractéristiques et les styles soient autorisés au contenu HTML à la fois.

Classes imbriquées:

Tout comme la classe simple, les classes imbriquées sont également créées lors de la conception des pages Web. Le phénomène imbriqué n'est pas inconnu des développeurs et des concepteurs car ce terme s'applique aux déclarations IF-Else, sur des boucles, et etc. La Déclaration de la classe imbriquée CSS est en quelque sorte similaire aux boucles imbriquées. Non seulement la classe est aussi la classe mais aussi les balises HTML sont affectées par le terme «classes imbriquées». Une balise de contenu HTML est une fois déclarée avec un nom de classe. Ensuite, à l'intérieur de cette balise, l'autre balise du «même» contenu HTML est déclarée avec un autre nom de classe. En fin de compte, les deux balises sont fermées collectivement. Cela fait de la première balise la balise extérieure et la deuxième balise une balise intérieure. Nous pouvons utiliser plus d'une étiquette intérieure à la fois. Une fois le nom de classe mentionné dans les balises extérieures, toutes les balises intérieures des autres contenus HTML n'auront pas besoin d'ajouter davantage de nom de classe avec eux.

texte

texte

C'était la déclaration du nom de classe à l'intérieur du corps HTML. Maintenant, nous verrons comment les classes sont déclarées dans la section Head. Tout d'abord, la classe de la balise HTML externe est déclarée puis la casse intérieure.

C'est en quelque sorte la relation de classe parent-enfant. Parce que la balise HTML extérieure, par exemple, la balise a une classe «classe1». Il est déclaré avec son contenu de paragraphe comme:

.Classe1 p

Nous ne pouvons pas utiliser la classe des paragraphes directement. Maintenant, considérez une étiquette div intérieure ayant une autre classe «classe2». Pour la classe imbriquée, nous ajouterons la classe des deux balises. L'extérieur et le div intérieur.

.classe 1 classe 2 p

Ceci est nécessaire pour spécifier le contenu HTML à sa classe et à qui il appartient. Maintenant, nous allons essayer quelques exemples pour développer ce concept.

Exemple 1:

Dans cet exemple, une simple couleur de corps est ajoutée en utilisant la balise HTML. Ensuite, une balise Div est utilisée avec une classe CSS nommée conteneur.

À l'intérieur de cette div, une étiquette d'en-tête est utilisée pour ajouter un titre simple. Un paragraphe est utilisé pour ajouter une phrase simple. Les deux balises ne sont pas accompagnées de la classe CSS car celles-ci seront directement conçues à travers le nom du conteneur div.

Maintenant à l'intérieur de la balise Div, avant de fermer ce div, nous ajouterons un autre div avec un nouveau nom de classe CSS.

Cette div contient à nouveau à la fois le titre et les paragraphes à l'intérieur. Fermer la div, la première balise de clôture est pour le div intérieur et la deuxième balise de clôture est pour la div externe.

Fermez l'étiquette du corps. Dans l'étiquette de style de la tête, nous déclarerons la classe du premier div 'conteneur'. L'en-tête de la classe de conteneurs est accessible par le nom de classe du div extérieur.

.conteneur h1
Taille de police: 24px;
Couleur: cyan;

La couleur de la police et la taille de la police sont appliquées à l'en-tête. De même, le paragraphe est également appliqué par le CSS ayant la même taille de police et les mêmes propriétés. En ce qui concerne la description de la classe pour le div intérieur, nous utilisons toujours la classe de div externe avec la classe div intérieure puis les éléments à l'intérieur du div. C'est pour accéder correctement au contenu HTML. Nous ne pouvons pas accéder directement à la classe à l'intérieur de la div par son nom uniquement, tout comme la classe parent-enfant dans l'héritage. Tout d'abord, nous écrivons le nom de classe des parents puis la classe enfant. De cette façon, toute ambiguïté concernant plusieurs parents et plus de cours d'enfant sera supprimé.

.récipient .MyClass p
Taille de police: 24;
Couleur: LightGreen;

Fermez toutes les balises ouvertes et enregistrez le code dans le fichier de l'éditeur de texte en tant qu'extension HTML. Cette extension permettra à la page Web d'être affichée dans le navigateur.

En exécution, vous verrez qu'une page Web noire vers le fond sera créée avec tous les titres et paragraphes avec le même alignement et la même hiérarchie qu'ils ont été déclarés avec tous les effets CSS. En effet, la feuille de style contient la propriété CSS de la classe dans la même séquence que les classes définies dans les balises HTML.

Exemple 2:

Cet exemple concerne l'utilisation d'une liste dans le code HTML. La même div avec un conteneur de classe est utilisée comme div externe pour les classes imbriquées. Des étiquettes de ruban et de paragraphe simples sont utilisées pour le contenu de la div externe. Après cela, une div intérieure est déclarée avec la même classe. Cette div contient la liste HTML non ordonnée avec.

Après cette div, une autre div à l'intérieur du deuxième div est utilisée pour créer des classes imbriquées. Ce div contient un nom de classe différent pour être identifié correctement.

< div class = "MyClass1" >

À l'intérieur de cette div, nous avons utilisé un titre et une liste non ordonnée. Maintenant, voyons la section CSS. Toutes les classes et propriétés sont déclarées de la même manière que nous l'avons fait dans le dernier exemple. Seul l'ajout est la classe du plus intérieur ou du 3ème div.

.récipient .MyClass1 h1
Taille de police: 20px;
Couleur blanche;

Enregistrez le code et exécutez le fichier.

Vous verrez que chaque div et ses éléments sont appliqués avec les effets que nous avons fournis dans les classes CSS.

Conclusion

CSS Nested Classes est une approche pour déclarer hiérarchiquement les classes provoquant le phénomène extérieur et intérieur des étiquettes. Assurez-vous que les balises HTML sur lesquelles nous devons implémenter les classes imbriquées CSS sont du même type, par exemple, une rubrique. Si une hiérarchie de la déclaration de classe est modifiée ou si la séquence est perturbée, il sera difficile d'appliquer les propriétés CSS au contenu HTML dans une classe imbriquée. Nous avons élaboré sur ce sujet en utilisant deux exemples, un avec un seul contenu intérieur, tandis que le deuxième exemple contient deux contenus HTML intérieurs.