Signe CSS plus
Exemple 01:
Commençons par le premier exemple d'utilisation du signe plus dans le code HTML pour l'utiliser de plusieurs façons. Nous jetons un coup d'œil à l'étiquette corporelle du code HTML. Dans le corps de la page HTML, nous avons une rubrique de taille 1 qui indique que nous utilisons le signe plus via le style CSS pour que les meilleurs histoires soient publiés. Nous utilisons un autre titre de taille 2 qui est la deuxième plus grande taille des titres HTML suivis par l'étiquette DIV. Cette balise «div» crée une nouvelle section contenant des informations concernant la date de sortie et l'endroit où il est publié.
Après cette balise, nous avons une autre balise «div» qui est utilisée pour la création d'une nouvelle section sur la page HTML. La section corporelle de ce HTML est terminée ici. Jetons un coup d'œil à l'étiquette «style» d'une page HTML pour jeter un œil au style des différents éléments. Dans cette balise, nous utilisons le signe plus «+» parmi les rubriques 2 et la balise «div» pour appliquer le style sur l'élément «div» adjacent à la tête 2. La taille de la police est de 22 pixels, le poids de la police est plus léger, l'affichage est en ligne, tandis que la couleur d'arrière-plan de la section «div» est violette et la couleur du texte est un cyan clair. Après cela, nous utilisons le titre de cap H1 pour le coiffer avec la couleur de texte proche du noir. Le style est terminé ici.
La sortie de ce code s'affiche dans l'image suivante. Le premier cap de la taille 1 est coloré en bleu foncé tandis que l'autre ruban de la deuxième plus grande taille est affiché dans une couleur noire de jet. Étant donné que la première étiquette DIV est adjacente à l'en-tête 2 d'une page HTML, elle est stylée en fonction des propriétés utilisées pour les éléments combinés «div» et «h2». D'un autre côté, l'en-tête 1 est stylé en fonction de l'utilisation du H1 dans la balise de style.
Exemple 02:
Commençons par un autre exemple d'utilisation du signe plus pour style. Nous commençons cet exemple avec l'utilisation de la balise principale Doctype HTML suivie de l'ouverture unique de la balise de tête. Il suit l'ouverture de la balise de titre contenant le titre «CSS Plus signe» et la fermeture de la balise de titre.
Jetons un coup d'œil à la zone corporelle d'un code HTML en utilisant la balise de l'élément corporel. Nous utilisons les différents titres et paragraphes via leurs balises particulières, je.e. "H1, H2 et P". Tout d'abord, nous utilisons le cap H1 de la plus grande taille. Après cela, nous utilisons le titre 2 de la deuxième plus grande taille avec le paragraphe adjacent. Nous créons une nouvelle balise Div après l'attribution pour créer une nouvelle section dans la page HTML. Enfin, nous utilisons à nouveau le titre 2 suivi de l'élément de paragraphe dans la section div.
En utilisant le signe plus entre l'en-tête 2 et le paragraphe, nous stylisons le paragraphe adjacent à l'en-tête 2. Nous avons plus d'un cap de la même taille. Par conséquent, il prend le cap 2 qui vient en premier du début de l'étiquette du corps. Nous utilisons la couleur verte du paragraphe adjacent à cette première rubrique 2 avec la taille de la police de 28 pixels, le khaki en arrière-plan et la propriété de transformation de texte pour afficher le texte majuscules.
Après cela, nous utilisons la balise de paragraphe pour styliser les paragraphes restants de notre page HTML en le colorant avec du rose de thé avec le poids de la police audacieux et la famille de polices fantastiques. Il s'agit de l'utilisation du signe plus pour le style. Exécutons ce code maintenant.
Nous obtenons la sortie avec les titres des tailles 1 et 2 sans aucun style. Le premier paragraphe est affiché dans tous les mots majuscules avec l'arrière-plan khaki et texte de couleur verte. Tandis que le dernier paragraphe s'affiche séparément en texte de couleur violette. L'utilisation du panneau Plus pour le style du paragraphe n'affecte pas le style du deuxième paragraphe.
Exemple 03:
Le corps commence par l'en-tête 1 élément suivi de l'élément div pour créer une nouvelle section. Cette section contient un total de quatre éléments de paragraphe pour créer les différents paragraphes et une section Div qui utilise également la balise de paragraphe pour créer un seul paragraphe dans cette section.
Une fois tous les éléments intérieurs de cette section terminés, nous fermons la section DIV externe avec la fermeture de la section du corps. Dans la balise de style, nous utilisons le paragraphe «P» pour appliquer le poids de la police comme audacieux et la taille de la police de 25 pixels à tous les paragraphes du corps. Maintenant, nous utilisons le panneau Plus dans les deux balises de paragraphe pour appliquer le style spécifié sur le paragraphe adjacent du premier paragraphe de la section Body. Différentes propriétés de police, de bordure et de texte sont définies pour le deuxième paragraphe, je.e. Double bordure 5px.
Maintenant, nous utilisons à nouveau les étiquettes de paragraphe avec le signe plus pour styliser les 3e et 4e paragraphes adjacents de la zone du corps. Les différentes propriétés de style de police ainsi que les propriétés de la couleur de la couleur et de la bordure sont définies, je.e. Border de 5 pixels pointillés et la couleur de texte cramoisie sont spécifiées pour les paragraphes adjacents. Maintenant, le code est terminé et nous nous dirigeons vers l'exécution.
La sortie montre que le deuxième paragraphe est stylé en tout à fait du reste des paragraphes tandis que les 3e et 4e paragraphes sont stylisés de manière similaire. Le 1er et 5e paragraphe semble similaire dans le style.
Conclusion
Cet article montre quelques exemples simples pour illustrer l'utilisation du signe «+» plus dans le script HTML. Nous avons appris comment le signe «+» plus peut styliser certains éléments mentionnés après le signe «+» plus dans le style CSS sans modifier le style du premier élément spécifié du HTML. À cette fin, nous avons utilisé un total de 3 exemples pour coiffer les paragraphes et les sections div. En utilisant cet élément d'attribut, vous pouvez apporter des modifications à n'importe quelle page HTML sans craindre de perdre le formatage pour votre page HTML.