CSS Couleur de ligne alternative
Syntaxe:
La syntaxe du sélecteur de style pour changer la couleur des lignes alternatives est la suivante:
: nième enfant (même ou étrange)Déclaration CSS;
Exemple n ° 1: modifiez la couleur des lignes uniformes
Créez le fichier HTML pour la fabrication de tables contenant des lignes et des colonnes et modifiez la couleur des lignes alternatives en utilisant le sélecteur de style CSS. Le logiciel que nous utilisons pour effectuer ces exemples est Visual Code Studio. Nous devons générer le fichier HTML et saisir le code du HTML que nous utilisons pour créer le tableau. Vous pouvez voir le code pour créer le tableau dans HTML et ce fichier doit être enregistré avec le «.Extension de fichier html ».
Ici, nous allons concevoir une table et ajouter les données dans les lignes et les colonnes de la table. Le "
"Avec les cellules d'en-tête. Ensuite, nous ajoutons les données de ces cellules à l'intérieur du «
Lorsque cette table est créée, nous stylissons ensuite cette table et changeons la couleur des lignes alternatives. Pour cela, nous allons concevoir le fichier CSS dans ce code Visual Studio suivant:
Code CSS:
Ce code est pour colorier les lignes alternatives de la table que nous avons créées. Ce fichier sera enregistré avec le «.Extension de fichier CSS. Nous utiliserons le fichier CSS pour appliquer le sélecteur de style CSS pour modifier la couleur alternative des lignes.
Nous coiffons la table en utilisant la propriété «bordure de bordure» qui définit si la bordure de la table s'effondre en une seule bordure ou est séparée. Ici, nous l'avons réglé comme «effondrement». En utilisant cette propriété, nous avons une seule bordure de la table. La largeur de ce tableau est définie sur «100%». Vient ensuite «th» et «td» qui représentent les cellules d'en-tête et les cellules simples. Maintenant, nous les stylissons en utilisant le «Text-Align» qui aligne le texte à l'intérieur des cellules sur la «gauche» alors que nous le fixons sur la «gauche». Ensuite, nous utilisons le sélecteur de style de CSS pour changer la couleur des lignes alternatives. Nous appliquons le «: nth-child ()» donc il changera la couleur des rangées uniformes de la table. Nous plaçons la couleur «vert clair» comme couleur d'arrière-plan des lignes uniformes en utilisant la propriété CSS Background-Color.
Sortir:
La sortie est rendue à l'écran en appuyant sur «Alt + B» dans le fichier HTML que nous avons créé précédemment. La sortie montre la couleur verte de toutes les lignes pair alors que nous appliquons le sélecteur de style aux rangées uniformes de la table.
Exemple n ° 2: modifiez la couleur des lignes impaises
Dans cet exemple, nous allons changer la couleur des lignes impaises de la table précédente que nous avons conçue dans le premier exemple.
Code CSS:
La bordure de la table est effondrée ici pour qu'elle apparaisse comme une seule bordure. La largeur du tableau est «110%». Le «Text-Align» est utilisé pour l'alignement du texte. Il place le texte à l'intérieur des cellules que nous voulons. Nous définissons le «Text-Align» sur le «centre» puis le texte est placé au centre de la cellule. Le «rembourrage» génère l'espace entre la bordure de la table et le contenu écrit dans la table. Ce «rembourrage» est «10px», il est donc utilisé pour générer un espace «10px» entre le contenu de la table et la bordure. Nous passons ensuite «Odd» au sélecteur de style. Nous définissons la couleur «rose» comme arrière-plan des lignes étranges, et la couleur des lignes étranges sera rendue comme «rose». Vérifions la sortie suivante:
Sortir:
Ici, nous voyons que la couleur d'arrière-plan des lignes étranges devient rose parce que nous avons changé la couleur des lignes alternatives.
Exemple n ° 3: modifiez la couleur des lignes uniques et étranges
Dans notre troisième exemple, nous changerons les couleurs des lignes uniques et étranges en utilisant le même sélecteur de style de CSS que nous avons également utilisé dans les exemples précédents. Mais ici, nous utiliserons à la fois pair et étrange sur la table unique.
Code CSS:
La largeur est sélectionnée comme «100%». La frontière est réglée pour «s'effondrer». Le rembourrage est sélectionné comme «7px». La «bordure» est de couleur «noire», environ «2px» en largeur, et le type de bordure créé est «solide». Tout d'abord, nous définissons la couleur de fond de ligne comme «rose», mais lorsque nous utilisons le sélecteur de style, la couleur des lignes changera. Nous appliquons le sélecteur de style au nombre «impair» de lignes. Cela changera la couleur des lignes étranges de notre table. Nous voulons changer la couleur d'arrière-plan des lignes étranges en bleu clair donc, nous utilisons la propriété «couleur arrière» qui est fournie par le CSS et définissons la «couleur» sur «bleu clair». Ensuite, nous changeons également la couleur des lignes «pair» en «jaune-vert». Nous utilisons à nouveau le même sélecteur de style et cette fois, nous l'utilisons pour modifier la couleur des lignes uniformes. En mettant la couleur «jaune-vert» pour même les rangées.
Sortir:
Dans cette sortie, les lignes alternatives affichent différentes couleurs. Les rangées étranges sont bleu clair et les lignes uniformes sont jaunes-vert. C'est la façon de modifier la couleur des lignes alternatives en utilisant le sélecteur de style CSS.
Conclusion
Ce guide a expliqué le concept de modification des couleurs de ligne alternatives à l'aide du sélecteur CSS Nth-Child (). Nous avons expliqué comment cela fonctionne avec le nombre impair de lignes et aussi avec le nombre pair de lignes et comment il modifie la couleur à l'aide de la propriété en arrière-plan. Dans ce guide, nous avons utilisé le sélecteur nth-child () et appliqué différentes couleurs aux lignes alternatives, et expliqué chaque code en détail. Nous avons fourni le HTML ainsi que le code CSS avec sa sortie respective.