Propriété gauche CSS

Une langue CSS a plusieurs effets à appliquer en tant que code sur le contenu HTML qui est déclaré former une page Web. Une langue HTML crée les objets et la conception CSS et leur ajoute du style en appliquant plusieurs effets et valeurs. L'une des propriétés du CSS est l'alignement et la direction du contenu HTML. Dans cet article, nous parlerons de l'une des propriétés couramment utilisées pour aligner les objets HTML.

Propriété de gauche

CSS offre l'alignement du contenu HTML dans chaque direction. L'un d'eux est la propriété gauche. Le nom indique qu'il fait référence à la direction gauche, et cette direction est liée à l'alignement horizontal. Si un objet HTML ne reçoit aucune propriété de position, cette propriété gauche n'est pas appliquée à cet objet. En d'autres termes, cette propriété n'est pas destinée aux objets non positionnés.

Syntaxe
La syntaxe de base de la propriété gauche peut être:
Gauche: longueur | pourcentage | Auto | Initial | Hériter;

La valeur peut être de cinq types. Nous expliquerons chaque type de valeur de propriété gauche:

• Longueur: cette variable contient la valeur de la propriété gauche CSS de tout contenu. La valeur peut être un nombre positif ou négatif.
• Pourcentage: la propriété de largeur de l'objet HTML est prise dans le pourcentage d'unité.
• Auto: cette propriété CSS est utilisée pour définir la valeur de cette propriété à la valeur par défaut.
• Initial: cette valeur transforme la propriété gauche à sa valeur d'origine par défaut ou initialement lorsque l'objet a été déclaré avant toute transformation qui lui est appliquée.
• Héritage: l'héritage fait référence à l'héritage. La valeur d'une propriété gauche est définie par les parents de l'objet HTML.

Maintenant, nous utilisons un extrait de formes qui flottent au hasard sur la page Web. Tous ces blocs sont div, un conteneur créé dans le corps HTML. Chaque bloc est dans sa direction, certains se chevauchent. Tandis que certains blocs sont affichés indépendamment. Chacun d'eux est positionné par cette propriété gauche par le biais de CSS en utilisant les valeurs relatives ou absolues. Nous discuterons de la création de ces types de formes dans les pages Web.

Le travail de la propriété gauche CSS

Certaines terminologies de base qui sont essentielles à la mise en œuvre de la propriété gauche sont décrites comme suit:

• Propriété gauche en position relative
  Cette propriété est appliquée sur le côté gauche ou le bord gauche du contenu et c'est pourquoi il se déplace vers le côté droit de sa forme d'origine. Si cette valeur est prise dans une valeur positive, la boîte HTML ou toute forme est déplacée vers la droite. La position relative de tout objet HTML est la direction qui dépend des autres éléments de son environnement.
• Propriété gauche en position absolue
  Pour les éléments qui ont la valeur absolue du positionnement, cette propriété déplace le côté gauche de l'élément vers le côté droit du corps. L'élément est déplacé de sa position de départ. La valeur absolue est la valeur de l'élément en fonction de l'arrière-plan.
• Propriété statique
  Cette propriété n'affecte pas l'objet. Que nous l'appliquions ou non à l'élément, l'objet HTML reste intact.

Exemple 1:
Tout d'abord, considérez la section du corps qui contient le contenu HTML. La couleur d'arrière-plan est modifiée pour améliorer les couleurs des divs que nous avons créés. Une classe de div parent est créée et deux autres divs sont également déclarés à l'intérieur du parent div, formant deux divs enfants. Fermez le parent div. Ajouter deux div.

Tous les 5 divs sont mentionnés avec les cours CSS. Ces classes sont déclarées à l'intérieur de la section tête du code HTML.

< div class = :sample1" >longueur

Après le code corporel, nous rencontrerons la section tête du code. Tout d'abord, la couleur de la police du corps est réglée pour la rendre facilement visible sur l'arrière-plan noir.

Maintenant, nous parlons du CSS interne que nous avons utilisé ici. Chaque classe est expliquée ici pour ajouter des effets au div. Ces classes s'appliquent plus que des effets uniques sur le div collectivement à la fois, donc le CSS interne est préférable que le CSS en ligne. Les cinq propriétés qui sont ajoutées à chaque classe sont le type de position, la direction gauche et la taille de la div appliquée qui contient la largeur et la hauteur des pixels. Une bordure est appliquée à la divo en faire une forme. Toutes ces classes ont les mêmes propriétés mais toutes ont des valeurs différentes.

.échantillon1
Position: absolue;
Gauche: 109px;
Largeur: 200px;
hauteur: 100px;
Border: 5px Orange solide;

En parlant de ce cours d'échantillon1, la position est considérée comme absolue. Ceci est appliqué pour chaque classe, ce qui signifie que chaque div est déclarée en suivant les valeurs et en ne dépend pas de l'autre div qui est déclarée dans son environnement. La propriété gauche est appliquée en pixels.

Les classes Sample2 et Sample3 sont appliquées avec des couleurs rouges et vertes.

.échantillon2
Gauche: 47%;

La propriété gauche de la classe Sample2 est donnée en pourcentage. Pour la classe Sample3, nous définissons la direction automatique, ce qui signifie qu'il est affiché en fonction du nombre de ses tours dans le code HTML.

.Échantillon3
Gauche: Auto;

La classe d'échantillon4 contient la bordure rose et la propriété gauche est définie comme initiale.

.échantillon4
Gauche: initial;

Pour la dernière div, nous prenons la valeur gauche comme héritage. Tous ces effets sont compréhensibles lorsque nous exécutons le code.

.échantillon5
Gauche: héritage;

Chaque div a une couleur différente et une taille différente. Maintenant, enregistrez le code avec l'extension HTML. Exécutez le fichier dans le navigateur pour voir les résultats.

Vous verrez que les cinq divs sont affichés à différents endroits. Les conteneurs de la propriété de gauche initiale et héritée se sont effondrés car ils ont les mêmes dimensions.

Exemple 2:

Considérez l'image précédente créée en utilisant deux balises Div et déclarant les noms de classe comme nous l'avons fait dans l'exemple précédent. Nous ne considérerons que les balises CSS uniquement. La div violet contient la position comme absolue. La propriété de taille contenant la largeur et la hauteur est également appliquée.

La propriété gauche est donnée en pixels.

.dem-prurple
Position: absolue;
Gauche: 4px;

Le deuxième div vert est affiché à l'intérieur de la div externe violet. Cela est dû à la propriété de position considérée comme relative, donc cette div est affichée en fonction de la div environnante ou de la div externe.

.Dem-lightgreen
Position: relative;
Gauche: 8px;

Le déplacement de la div intérieure est selon la div externe.

Conclusion

Dans la propriété gauche CSS, nous avons cherché à décrire le fonctionnement de cette fonction directionnelle sur le contenu HTML. Il existe deux propriétés de base dans CSS qui sont liées les unes aux autres pour l'alignement de tout contenu HTML: la position et la propriété gauche. La propriété de position peut être absolue, relative ou statique. Tandis que la propriété gauche peut être automatique, hériter ou valeur initiale, soit en pixels ou en pourcentage. Dans cet article, nous avons expliqué l'utilisation de tous ces effets séparément en les appliquant à la div et en utilisant l'effet relatif en utilisant un div à l'intérieur de l'autre.