CSS Bottom
Propriété inférieure
La propriété inférieure est utilisée pour définir le positionnement d'un élément à partir de la base de la page, et il définit l'écart entre la fin de la page et l'élément. Pour définir la propriété inférieure, nous utilisons la syntaxe suivante:
Comme nous pouvons le voir, la propriété inférieure est spécifiée en appelant le mot-clé suivi d'une valeur qui peut varier en cinq types différents qui sont: auto, longueur, pourcentage, initial et héritage. La propriété inférieure n'affectera l'élément que lorsque la propriété de position est définie pour corriger, sinon elle ne s'appliquera pas à l'élément.
Méthode 01: Utilisation du mot-clé automatique pour attribuer la propriété inférieure dans un fichier HTML à l'aide de CSS en ligne
Dans cette méthode, nous utiliserons le mot clé automatique pour attribuer la propriété inférieure d'un élément dans un fichier html. Cela alignera l'élément avec la base de la page du navigateur. Nous utiliserons le format de style CSS en ligne dans cette méthode pour attribuer la propriété inférieure à un élément.
Dans le script précédent, nous avons fourni une direction vers le corps en utilisant la balise H1 et certains CSS en ligne. Ensuite, nous avons ouvert une balise de paragraphe et, dans cette balise, nous avons ajouté la position et la propriété inférieure et les avons définies sur «Fix» et «Auto», respectivement. La propriété fixe de position permet au bas de créer un effet sur la balise de paragraphe et de le régler en fonction de notre navigateur. Maintenant, nous enregistrons ce fichier et l'exécutons sur notre navigateur pour observer l'effet de cette propriété.
Comme nous pouvons le voir dans la capture d'écran précédente, le paragraphe de la balise corporelle est présent entre la page après le titre. Cela s'est produit à cause de la position et des propriétés de fond.
Méthode 02: Utilisation des pixels pour affecter la propriété inférieure dans un fichier HTML à l'aide de CSS en ligne
Dans cette approche, nous attribuerons l'attribut inférieur d'un élément dans un fichier html en utilisant le format de longueur (valeur en pixels). Cela fera s'adapter à l'élément avec le bas de la page du navigateur à l'aide de la longueur donnée.
Nous avons utilisé la balise «H1» et certains CSS en ligne pour donner au corps une rubrique dans le script précédent. Ensuite, nous avons ouvert une étiquette de paragraphe et appliqué la position et les propriétés inférieures. La propriété de position a ensuite été définie sur «fixe» et la propriété inférieure a reçu une valeur de pixel de «25px."L'attribut fixe de position permet au bas d'avoir un effet sur la balise de paragraphe et de l'adapter en fonction de la longueur spécifiée et de la page de notre navigateur. Maintenant, nous enregistrons ce fichier et l'exécutons dans notre navigateur pour voir comment cette propriété fonctionne.
Comme nous pouvons le voir dans la capture d'écran précédente, le paragraphe de la balise corporelle est présent en bas de la page après la rubrique. Nous pouvons voir qu'il y a un écart entre le paragraphe et la base de la page car la position et les propriétés inférieures sont définies pour lui donner une longueur de «25px».
Méthode 03: Utilisation de la propriété inférieure avec un «pourcentage» pour un élément utilisant CSS en ligne
Dans cette méthode, nous utiliserons le format pourcentage pour définir la propriété inférieure d'un élément dans un fichier HTML. Cela fait que l'élément s'adapte au bas de la page du navigateur en utilisant une valeur de pourcentage. Dans cette méthode, nous ajouterons l'attribut inférieur à un élément utilisant le style CSS en ligne.
Dans le script précédent, nous avons utilisé la balise «H1» et certains CSS en ligne pour donner au corps une rubrique. Ensuite, nous avons ouvert une étiquette de paragraphe et réglé sa position et sa propriété inférieure. La propriété de position a ensuite été réglée sur «fixe» et la propriété inférieure a reçu une valeur de pourcentage qui est «30%."La propriété fixe de position permet au bas pour affecter la balise de paragraphe et la modifier en fonction du pourcentage donné et de la page de notre navigateur. Nous enregistrons maintenant ce fichier et l'ouvrons dans notre navigateur pour vérifier comment cette propriété fonctionne.
Comme le montre l'exemple précédent, le paragraphe de la balise corporelle apparaît en bas de la page après l'en-tête. La position et les attributs inférieurs sont définis sur un pourcentage de valeur de «30%», il y a donc un écart entre le paragraphe et le bas de la page.
Méthode 04: Utilisation du mot-clé hérité pour attribuer la propriété inférieure dans un fichier html à l'aide de CSS en ligne
Dans cette approche, nous définirons l'attribut inférieur d'un élément dans un fichier HTML en utilisant le mot-clé hérité. Cela obligera l'élément à s'adapter au bas de la page du navigateur en utilisant la valeur de propriété de la fonction parentale la plus proche. En utilisant le style CSS en ligne, nous ajouterons la propriété inférieure à un élément de cette approche.
Dans le script précédent, nous avons ouvert une balise de paragraphe et réglé sa position et sa propriété inférieure. Après cela, la propriété de position a été définie sur «fixe» et la propriété inférieure a reçu le mot-clé «Hériter."La propriété fixe de position permet au bas d'affecter la balise de paragraphe et de le modifier en fonction de la valeur de propriété de la fonction parentale la plus proche et de la page du navigateur. Ce fichier sera désormais enregistré et ouvert dans notre navigateur pour voir comment cette propriété fonctionne.
Le paragraphe de l'étiquette corporelle apparaît près de l'en-tête, comme on le voit dans l'extrait précédent. Il y a un écart entre le paragraphe et l'en-tête car la propriété inférieure est spécifiée pour donner au paragraphe la fonction de propriété de la fonction parentale la plus proche.
Méthode 05: Utilisation du mot-clé initial pour attribuer la propriété inférieure dans un fichier html à l'aide de CSS en ligne
Nous utiliserons le mot-clé «initial» pour définir la propriété inférieure d'un élément dans un fichier html. Cela obligera l'élément à s'adapter au bas de la page du navigateur en utilisant les paramètres par défaut du navigateur. Dans cette méthode, nous ajouterons l'attribut inférieur à un élément en utilisant le style CSS en ligne.
Nous avons ouvert une balise de paragraphe et réglé sa position et sa propriété inférieure comme indiqué dans le script ci-dessus. La propriété de position a ensuite été définie sur «fixe» et la propriété inférieure a reçu le mot-clé «initial."L'attribut fixe de position permet au bas d'affecter la balise de paragraphe et de le modifier en fonction des paramètres par défaut du navigateur. Ce fichier est maintenant enregistré et visualisé dans notre navigateur pour démontrer l'utilisation de cette fonctionnalité.
Comme observé dans l'extrait précédent, le paragraphe de l'étiquette du corps est près de l'en-tête. Étant donné que la propriété inférieure est spécifiée pour modifier le paragraphe aux paramètres par défaut de notre navigateur, il y a un écart entre le paragraphe et l'en-tête.
Conclusion
La propriété inférieure de CSS a été abordée dans cet article. La propriété inférieure est incluse dans un sous-groupe de propriétés de position telles que la gauche, la droite et le haut, et il dépend de la propriété de position comme nous avons expliqué. Nous avons mis en œuvre ce concept avec des variations du format de la valeur en utilisant le note de notes ++ pour modifier le fichier html.