Modifications de style et de mise en page
Table des matières
En bref
Les modifications de style et de mise en page peuvent être effectuées directement avec l'éditeur flottant. Celui-ci est immédiatement visible après le chargement de Varify.io sur ta page. Clique simplement sur l'élément que tu souhaites optimiser et définis la modification via le menu déroulant ou en saisissant l'option de style souhaitée.
Options de style et de mise en page
Les options suivantes sont disponibles avec le Floating Editor :
- Dimensions : Largeur et hauteur d'un élément
- Location : Positionnement d'un élément sur la page web
- Typography :
- font-family : Police
- font-size : Taille de police
- font-weight : Épaisseur du trait de la police
- text-align : Alignement horizontal du texte
- color : Définit la couleur du texte.
- text-decoration : Le texte peut par exemple être souligné ou barré.
- line-height : Est la hauteur d'une ligne.
- word-spacing : Cette option augmente ou diminue la largeur de la police.
- white-space : Grâce à white–space, on détermine comment les sauts de ligne et les espaces contenus dans le texte source sont affichés dans le navigateur.
- Background :
- background-color : Est la couleur de l'arrière-plan d'un élément.
- background-image : Image d'arrière-plan pour un élément. Le format de fichier de l'image d'arrière-plan peut être JPG, PNG, SVG, webP ou GIF.
- background-style : Si tu ne précises rien, le graphique d'arrière-plan est chargé dans sa taille complète en arrière-plan. Si l'élément est plus petit en hauteur ou en largeur que le graphique d'arrière-plan, le graphique est automatiquement recadré.
- background-repeat : Est le comportement de répétition d'un graphique d'arrière-plan inclus
- Border :
- margin : Description de la distance extérieure d'un élément par rapport aux éléments qui l'entourent.
- padding : Décrit la distance intérieure d'un élément par rapport à son cadre.
- border-style : La propriété CSS border-style définit le style des quatre côtés des bordures d'un élément.
- border-width : La propriété border-width détermine toutes les largeurs de bordure d'un élément.
- border-color : La propriété border-color détermine toutes les couleurs de bordure d'un élément.
- border-radius : La propriété border-radius détermine le rayon avec lequel les coins d'un élément sont arrondis.
- Layout :
- float : Avec cela, on demande à un élément de se déplacer vers le bord gauche ou droit de son élément parent. Cela a un effet non seulement sur l'élément lui-même, mais surtout sur les autres éléments liés à l'élément « flotté ».
- vertical-align : Aligne les images et le texte dans les cellules de tableau et le texte sur une ligne de base. La ligne de base, ou baseline, est une ligne invisible sur laquelle reposent la plupart des lettres d'une ligne.
- overflow : Lorsque les éléments sont trop grands pour tenir dans le bloc englobant, leur contenu déborde du bloc englobant sans aucune considération. Le CSS overflow masque les parties débordantes de l'élément afin que la partie restante tienne dans le bloc englobant.
- opacity : Opacité d'un élément. Les valeurs peuvent être comprises entre 0 et 1. 0 signifie complètement transparent. 1 signifie complètement visible.
- z-index : La propriété z-index spécifie l'ordre dans lequel les éléments sont disposés d'arrière en avant sur le support de sortie. Ceci est important si les éléments se chevauchent. Les éléments avec un z-index plus grand sont plus proches du spectateur et peuvent chevaucher les éléments avec un z-index plus petit.