Formatage conditionnel CSS
Exemple 01: Formatage conditionnel basé sur la règle conditionnelle de support de CSS
Dans cet exemple, nous utiliserons la propriété de règle conditionnelle de la prise en charge de CSS pour déterminer comment le changement de style sera appliqué lorsque le navigateur ou ses paramètres seront modifiés. Nous opterons pour l'approche CSS de la balise de style interne dans cet exemple.
Dans ce script, nous commencerons par l'en-tête du fichier où les propriétés de style pour la mise en forme conditionnelle de support seront incluses. Dans la balise de style, nous appellerons la règle des conditions de «support». Ensuite, appliquez la mise en forme liée à l'affichage à l'étiquette de cap H1 dans laquelle la grille changera lorsque la taille de l'écran change. Ensuite, nous ouvrirons la balise corporelle et insérer une section pour la balise de cap H1. La balise de section appellera les propriétés de style que nous avons ajoutées dans la balise de style de l'en-tête du fichier. Nous fermerons la section et la balise corporelle pour mettre fin au fichier.
Dans cette sortie, nous pouvons voir que le navigateur est ouvert en taille maximisée et que la section est largement répandue. Mais lorsque nous minimisons la taille de l'écran, la section s'adapte au changement de taille et rétrécit en conséquence à la nouvelle taille de page comme indiqué ci-dessous:
Exemple 02: Formatage conditionnel basé sur la règle conditionnelle des médias de CSS
Nous utiliserons la technique CSS Tag Tag de style dans cet exemple. Dans cet exemple, nous utiliserons la propriété de la règle conditionnelle des médias de CSS pour contrôler la façon dont le style change lorsque la taille du navigateur change.
Dans ce script, nous commencerons par l'en-tête du fichier où les propriétés de style pour la mise en forme conditionnelle des médias seront incluses. Nous invoquerons la règle de la condition de «média» dans la balise de style et appliquerons la mise en forme liée à l'écran à l'étiquette de cap H1 afin que la grille change lorsque la taille de l'écran passe à 700px ou plus. Ensuite, nous ouvrirons l'étiquette corporelle où nous ajouterons une section pour la balise de cap H1. La balise de section appellera les propriétés de style que nous avons ajoutées dans la balise de style de l'en-tête du fichier. Nous fermerons la section et la balise corporelle pour mettre fin au fichier.
Dans ces deux extraits, nous pouvons voir que lorsque la taille change, le formatage est différent, et lorsqu'il l'élargit s'adapte aux propriétés de style définies dans l'en-tête du fichier.
Exemple 03: Formatage conditionnel basé sur la règle conditionnelle du document de CSS
Nous utiliserons la capacité de règle conditionnelle du document de CSS gérer la façon dont le style change dans cet exemple lorsque la taille du navigateur change.
Nous commencerons par l'en-tête du fichier, qui contient la balise de style, dans laquelle nous utiliserons la règle de condition «document». Ensuite, nous ajouterons la mise en forme liée à l'écran à l'étiquette de tête H1 afin que la grille change en fonction de la visite d'URL. Nous allons également changer la couleur d'arrière-plan, la couleur de la police et le rembourrage. La balise de section invoquera les attributs stylistiques ajoutés dans la balise de style de l'en-tête du fichier. Pour terminer le fichier, nous fermerons la section et les balises corporelles.
La sortie ci-dessus est la vision de l'apparence de la page lors de la visite de l'URL du document donné.
Exemple 04: Formatage conditionnel sur un élément de table en transformant la couleur de la police
Dans cet exemple, nous formaterons une table et ses éléments en utilisant la mise en forme conditionnelle. Il s'agit d'un type de formatage conditionnel qui ne suit aucune des trois règles de conditions CSS.
Dans ce script, nous ajouterons les propriétés de style CSS dans une balise de type de texte de style. Dans cette balise, nous nous concentrerons sur la police des données de la table. Tout d'abord, nous ajouterons deux propriétés qui auront certaines conditions. La première propriété sera pour l'entrée de données normale qui sera affichée comme l'entrée par la fonction sélecteur «ATR». Ensuite, la deuxième propriété sera pour le montant qui aura le signe «-» avec eux dans lequel la fonction après transforme la couleur de la police en une couleur rouge qui mettra en évidence la valeur ou la perte négative dans notre cas.
Après cela, nous fermons les balises de style et de tête et ouvrirons le corps du fichier HTML. Nous incluons une table avec une bordure dans le corps du fichier. En utilisant la balise TR, nous ajouterons deux lignes à ce tableau. La première ligne aura deux colonnes, une pour l'en-tête et une pour les données de la table. Dans les données du tableau, nous inclurons le montant monétaire qui correspond à la propriété indiquée dans la balise de style. La deuxième ligne aura également une structure similaire, mais les données du tableau auront une valeur négative. Après cela, nous terminerons le fichier en fermant toutes les balises restantes.
Comme le montre la sortie ci-dessus, la valeur positive est dans une police noire, tandis que la valeur négative dans la deuxième ligne est en police rouge, comme indiqué dans la balise de style.
Exemple 05: Formatage conditionnel sur un tableau à l'aide de la transformation des données du tableau
Dans cet exemple, nous utiliserons la mise en forme conditionnelle sur l'élément TD (données de table) d'un tableau. Il s'agit d'un type de formatage conditionnel qui ne suit aucune des trois règles de conditions CSS.
Les attributs de style CSS seront ajoutés dans une balise de type de texte de style dans ce script. La valeur des données du tableau sera l'accent mis par cette balise. Tout d'abord, nous donnerons la table et son contenu une frontière. La première propriété sera pour l'entrée de données standard, qui sera affichée comme entrée par la fonction de sélection «ASTR». La deuxième propriété sera pour le montant, avec la valeur «0»,. La fonction après fera de cette valeur la vue par défaut. Après cela, nous fermerons les balises de style et de tête et ouvrirons le corps du fichier HTML.
Nous présenterons une table avec deux lignes dans le corps du fichier en utilisant la balise TR. La première ligne comprendra deux colonnes: une pour le titre de table et une pour les données de la table. Dans les données du tableau, nous inclurons le montant monétaire qui correspond à la propriété indiquée dans la balise de style. La deuxième ligne sera structurée de la même manière, mais les données du tableau seront définies sur «0."
Comme nous pouvons le voir dans le résultat suivant, la première ligne a une valeur normale, tandis que la deuxième ligne a un espace réservé comme indiqué dans la balise de style.
Conclusion:
Dans cet article, nous avons discuté de la mise en forme conditionnelle que CSS fournit. Le formatage conditionnel est généralement défini sur trois règles liées au support, aux médias et au document. Tous ces trois ont des limites différentes pour appliquer des modifications à la page Web qui ont toutes été discutées et mises en œuvre dans cet article. Alors l'autre type de formatage ne suit pas ces règles et se fait uniquement sur la perception visuelle d'un individu concerné. Nous avons mis en œuvre ce type de formatage conditionnel sur un élément de table dans le Bloc-notes ++ IDE dans cet article.