Ordre CSS

Le concept d'ordre est également largement connu parmi les programmeurs informatiques, les développeurs et les gens du commun. Comme le montre le titre, le style CSS de Hyper Text Markup Language (HTML) utilise également la propriété de commande pour organiser les éléments d'un fichier HTML selon son choix. Cette propriété de commande peut être appliquée à plus d'un élément du même type en utilisant leurs balises HTML respectives dans le script HTML. Si vous n'avez aucune connaissance préalable concernant la propriété «Order» du style CSS, cet article démontrera l'utilisation de la propriété CSS «Order».

Exemple

Commençons par la première illustration de cet article pour démontrer l'utilisation de la propriété «Order» du style CSS dans le HTML. Vous avez besoin d'un fichier de type «HTML» pour ajouter et exécuter le code HTML. Nous avons donc créé un nouveau fichier, «Test.html ", dans notre dossier" Articles "et l'ouvrit avec le code Visual Studio. Le code HTML doit être démarré avec le «

Nous allons commencer à expliquer cet exemple à partir de la balise de base «tête». Dans cette balise, nous utilisons les différentes propriétés CSS pour des éléments HTML particuliers définis dans ce fichier HTML via la balise "Style". Tout d'abord, nous avons stylé la balise principale «div» utilisée dans le «corps» de notre page HTML via son identifiant spécifié, je.e., "principal". Les balises «div» sont toujours utilisées pour diviser la page en sections ou pièces pour séparer certains des éléments et le contenu d'une page HTML des autres. Nous utilisons la largeur et la hauteur de la propriété pour définir la largeur et la longueur de cet élément «div» dans la page HTML en pixels, je.e., 400px de largeur et 70px de hauteur.

Cette zone «dib» contiendrait la bordure solide d'une bordure noire de cinq pixels autour de lui. Cette frontière définirait la frontière de la zone principale «div». Ensuite, nous avons utilisé l'ID principal de la balise div principale pour appliquer le CSS sur les balises de l'enfant «div». Nous avons réglé la largeur à 100 pixels et une hauteur à 70 pixels pour les cinq balises d'élément «div» intérieures, qui se situeraient dans la section «div» principale de cette balise HTML. Ces hauteurs et largeurs pour les éléments div intérieurs et externes sont spécifiés pour s'adapter également aux cinq balises div dans la balise extérieure. Après cela, nous avons utilisé les cinq ID de balise div séparément sur cinq lignes pour styliser les cinq sections «div» en conséquence et différemment. Voici la propriété «commande» du style CSS pour commander les cinq étiquettes div selon les numéros. Le «div» brun sera affiché sur le 3^rd, bleu sur le 5^e, vert sur le 2^nd, violet sur le 1^St, et orange sur le 4^e. Le style et la tête sont devenus fermés ici.

Commençons à expliquer la balise de base «Body» utilisée pour définir et représenter les éléments de base sur la page Web de notre navigateur. Dans cette balise, nous avons utilisé la balise de tête principale de la taille un, la balise principale «div» et les cinq balises «div» les énumérées les unes après les autres. La balise principale «div» a été spécifiée avec l'ID, «Main», pour la coiffer dans la balise de tête et peut être différenciée facilement. Les cinq balises «div» intérieures ont été spécifiées avec un style et leurs identifiants séparés, je.e., marron, bleu, vert, violet et orange.

Ces identifiants seraient utilisés pour styliser ces balises «div» séparément dans la balise de style. Nous avons stylé les cinq balises en utilisant l'élément «style» dans l'ouverture des cinq balises Div en utilisant la méthode de style en ligne CSS. La propriété de couleur arrière a été utilisée pour spécifier les couleurs pour les cinq balises div séparément, je.e., marron, bleu, vert, violet et orange. Ces cinq couleurs seraient remplies dans les boîtes créées par les éléments «div» de la page Web et auraient fière allure à l'écran. La balise «Div» principale et la balise principale «corps» ont été fermées ici. De plus, notre fermeture de balises principale «HTML» serait utilisée ici pour mettre fin au code HTML et le faire fonctionner en douceur.

Tout d'abord, enregistrons ce code avec Ctrl + s. Ensuite, appuyez sur le menu «Exécuter» à partir de la barre des tâches de votre outil de code Visual Studio. Appuyez sur l'option «Exécuter sans débogage» affichée et sélectionnez le navigateur pour continuer. Nous utiliserons le navigateur Google Chrome pour l'exécuter.

L'onglet de sortie du navigateur Chrome affiche l'image suivante de cinq parties div dans un «div» principal de la bordure noire solide. La séquence des boîtes de «div» de l'enfant est la même que ce que nous avons décrite dans l'explication d'un code, je.e., violet 1^St, vert 2^nd, brun 3^rd, orange 4^e, et bleu 5^e. Bien que nous ayons défini la séquence aléatoire des éléments «div» dans le style CSS, il n'affecte pas la sortie et est affiché comme défini dans le style.

L'illustration de code précédente et sa sortie de page Web nous montrent l'utilisation de nombres aléatoires dans la propriété «Order» pour définir les balises «div» sur des positions aléatoires. Ces valeurs de la propriété «Order» étaient de simples entiers positifs. Par conséquent, nous n'avons aucun problème à l'utiliser. Et si un utilisateur essaie de définir la propriété de commande avec les valeurs négatives dans la balise de style? Essayons ceci pour voir les résultats. Donc, nous avons mis à jour notre code pour le faire. Dans la balise de style, nous avons mis à jour la valeur de la propriété «Order» pour chaque balise intérieure «div». Pour Brown, c'est 3. Pour le bleu, c'est -1. Pour vert, c'est 2. Pour violet, c'est -2. Enfin, pour Orange, c'est 0. Ces valeurs définissent l'indice d'un élément principal «div». Enregistrons ce code pour voir.

En exécutant ce code mis à jour dans le navigateur Chrome, nous avons le résultat de sortie mis à jour illustré ci-dessous. Comme nous avons défini 0 pour la propriété de l'ordre de la div «orange», elle a été affichée au milieu de la div principale. Les balises «div» vertes et brunes sont affichées sur le côté droit après le «div» orange. L'utilisation de -2 pour Purple Div et -1 pour Blue Tag a affiché les balises intérieures «div» selon la séquence des entiers négatifs.

Conclusion

Cet article contient une explication simple et brève de l'utilisation de la propriété CSS «Order» dans le code HTML. Pour cela, nous avons expliqué un bref exemple de code HTML. Cet exemple contenait l'utilisation d'éléments «div» pour élaborer correctement le concept de propriété CSS «Ordre». Nous avons discuté de l'analyse détaillée de l'utilisation des valeurs entières positives pour la propriété de l'ordre et l'avons comparée à l'utilisation de valeurs entières négatives pour la même propriété.