Propriétés CSS3

Certaines propriétés CSS3 sont revisées rarement beaucoup d'autres sont utilisés assez souvent que les développeurs doivent savoir à leur sujet. Propriétés et leurs valeurs associées forment la base de la mise en forme que vous effectuez en utilisant CSS3. Voici une liste des propriétés que vous allez vous trouver en utilisant le plus souvent lorsque l'on travaille avec CSS3:

  • Contexte: Définissent le contenu de l'arrière-plan d'un élément. La valeur de cette propriété est souvent une fonction, comme linéaire à gradient ().

  • background-attachment: Indique comment une image interagit avec le reste d'un élément. Vous utilisez les mots clés suivants pour configurer cette propriété: volute, fixé, et local.

  • Couleur de fond: Indique la couleur d'une entité, de fond telles que la couleur de la page sous-jacente. Vous pouvez utiliser l'une de ces techniques pour définir la couleur de fond: valeur hexadécimale, nom de la couleur, rgb () fonction, RGBA () fonction, HSL () fonction, ou HSLA () fonction.

  • image de fond: Indique l'emplacement d'une ressource à utiliser comme arrière-plan graphique pour un élément de. Vous utilisez le url () fonctionner pour spécifier l'emplacement.

  • background-repeat: Permet à l'image de fond de répéter ou de ne pas répéter (utilisant le mot clé no-repeat) au besoin. Vous pouvez également choisir de répéter l'image que l'horizontale (repeat-x) Ou vertical (repeat-y) directions.

  • background-size: Détermine la taille de l'image d'arrière-plan en tant que valeur absolue ou en pourcentage.

  • frontière: Définit le type de bordure à créer en spécifiant l'un des mots-clés suivants: aucun, caché, pointillé, pointillés, solide, double, rainure, crête, insérer, début, ou hériter. Il est également possible de modifier individuellement le style de chaque côté de la frontière en utilisant le -bottom-style de bordure, border-left; le style, border-right; le style, et -top-style de bordure propriétés.

  • border-color: Indique la couleur de la bordure entourant une entité. Vous pouvez utiliser l'une de ces techniques pour définir la couleur de fond: valeur hexadécimale, nom de la couleur, rgb () fonction, RGBA () fonction, HSL () fonction, ou HSLA () fonction.

  • frontière image: Définit une image à utiliser pour le contenu de la frontière, plutôt que d'un type de ligne. Vous utilisez normalement la url () fonction pour spécifier la valeur de cette propriété.

  • border-radius: Détermine si les angles d'une frontière sont arrondis et le montant de l'arrondissement. Lors de la création d'un coin arrondi, vous indiquez le montant de l'arrondissement. Pour supprimer un coin arrondi, utilisez le aucun mot-clé.

  • border-width: Déterminer l'épaisseur de la bordure entourant un élément. Vous pouvez définir la largeur de la bordure en utilisant un mot-clé (moyen, épais, ou mince) Ou une mesure réelle.

  • column-count: Indique le nombre de colonnes à créer. La largeur des colonnes fluctue automatiquement lorsque l'utilisateur redimensionne la fenêtre du navigateur (ou le navigateur affiche une barre de défilement horizontale pour le rendre possible de faire défiler à travers les colonnes quand une largeur spécifique est défini ainsi).

  • colonne de remplissage: Détermine la façon dont le navigateur remplit les colonnes (soit remplir une colonne à un moment ou à remplir toutes les colonnes simultanément avec une quantité même de contenu).

  • colonne écart: Crée un fossé entre les colonnes pour le rendre plus facile à déterminer où une colonne se termine et un autre commence.

  • colonne règle: Crée une règle entre les colonnes afin que l'utilisateur peut voir un séparateur physique. Cette propriété se compose de la couleur, le style, et la largeur.

  • colonne règle couleurs: Détermine la couleur de la règle utilisée entre les colonnes.

  • colonne règle de style: Détermine le style de la règle utilisée entre les colonnes.

  • colonne règle largeur: Détermine la largeur de la règle utilisée entre les colonnes.

  • colonne travée: Indique le nombre de colonnes qu'un objet peut enjamber.

  • largeur de colonne: Indique une largeur de colonne.

  • colonnes: Fournit une méthode raccourci pour définir à la fois le column-count et largeur de colonne propriétés.

  • couleur: Indique la couleur de premier plan d'une entité, comme du texte. Vous pouvez utiliser l'une de ces techniques pour définir la couleur: valeur hexadécimale, nom de la couleur, rgb () fonction, RGBA () fonction, HSL () fonction, ou HSLA () fonction.

  • contenu: Affiche le texte ou autre ressource spécifiée dans le cadre de la présentation de l'élément. Cette propriété est souvent utilisée pour effectuer des tâches telles que l'ajout de flèches pour les éléments visuels. Vous spécifiez la valeur en utilisant le url () fonction, nombre de caractères Unicode précédée d'une barre oblique inverse (comme 27A8), ou un mot clé.

  • afficher: Indique la manière de présenter certains types d'éléments sur la page. Vous pouvez utiliser l'un des mots clés suivants pour définir le type d'affichage: aucun, boîte (ou flex-box), bloc, fléchir, en ligne, inline-block, inline-flex, inline table, élément de liste, table, table-caption, table-cell, table-column, table-column-groupe, Table-footer-groupe, Table-header-groupe, table-row, ou table-row-group.

  • flotteur: Permet une image de flotter dans la direction indiquée. Vous définissez cette propriété en utilisant les mots-clés suivants: gauche, droit, ou aucun.

  • famille de polices: Définit le nom de la police. Trois sont trois classifications de police généralement utilisés dans le cadre de CSS (et la plupart des pages CSS utiliser tous les trois à moins que vous indiquez également le src la propriété): spécifique, Sécurité Web, et générique.

  • taille de police: Détermine la taille de la police par rapport à d'autres polices sur la page ou fournit une taille de police spécifique. Vous pouvez utiliser l'une de ces techniques pour définir la taille de la police: taille spécifique, mot-clé (comme grand ou plus grande), Et le pourcentage.

  • le style de police: Détermine le style de police que le navigateur crée. Le navigateur doit supporter le style et la police doit fournir le style pour que cette propriété pour prendre effet. Les mots-clés de style de police sont: normal, italique, oblique (normalement une plus forte en italique), et hériter.

  • font-variant: Indique si la police doit être présenté dans une forme variante. Pas tous les navigateurs et les polices en charge cette fonctionnalité. Les mots-clés pour cette propriété sont normal, en minuscule, et hériter.

  • font-weight: Détermine l'obscurité relative de la police et de la largeur de ses coups. Il existe deux méthodes pour définir le poids de la police: numérique et le mot clé (comme audacieux).

  • hauteur: Indique la taille verticale d'un élément.


  • gauche: Indique l'emplacement le plus à gauche d'un élément sur une page.

  • list-style: Définit l'apparence d'un élément de la liste. Vous pouvez définir le type de marqueurs à utiliser, la position des marqueurs, et si les marqueurs sont effectivement créés à l'aide des images plutôt que des caractères standard.

  • marge: Indique la quantité d'espace entre la frontière d'un élément et la marge d'un autre élément.

  • margin-bottom: Indique l'emplacement plus basse d'une marge d'élément sur une page.

  • margin-left: Indique l'emplacement le plus à gauche d'une marge d'élément sur une page.

  • margin-top: Indique l'emplacement le plus élevé d'une marge d'élément sur une page.

  • rembourrage: Indique la quantité d'espace entre la frontière d'un élément et le contenu dans l'élément.

  • position: Indique l'emplacement des éléments sur une page. Vous spécifiez le placement en utilisant ces mots-clés: statique (les éléments sont coulaient), absolu (les éléments apparaissent dans un emplacement spécifique, même si un tel placement serait remplacer un autre élément), fixé (les éléments sont placés par rapport à la fenêtre de navigateur), ou relatif (les éléments sont placés par rapport à des éléments parents).

  • text-align: Indique le positionnement du texte sur une ligne. Vous spécifiez l'alignement en utilisant le justifier, droit, centre, et gauche mots-clés.

  • text-decoration: Définit l'ajout d'une caractéristique, tel que souligné, overline, ou de la ligne de passage de la fonte. Cette propriété fonctionne partout, de sorte que vous ne devez pas vous inquiéter de savoir si quelqu'un l'affichage de votre page sur un téléviseur ou à l'aide d'un smartphone va faire passer votre message.

  • text-overflow: Définit l'action qui aura lieu lorsque le texte déborde de la boîte utilisée pour la contenir. Les valeurs acceptables sont: agrafe, ellipses, ou une valeur de chaîne que vous fournissez.

  • text-shadow: Affiche une ombre des personnages cibles à la même largeur que le caractère cible. Le positionnement, la force, et la couleur de l'ombre sont déterminées par les propriétés suivantes: h-ombre (détermine le positionnement horizontal de l'ombre), v-ombre (détermine le positionnement vertical de l'ombre), tache (spécifie la clarté du texte de l'ombre), et couleur (définit la couleur du contour).

  • visibilité: Indique le niveau de visibilité pour un élément. Vous utilisez les mots clés suivants pour configurer cette propriété: visible, caché, ou effondrement.

  • largeur: Indique la taille horizontale d'un élément.

  • mot-break: Détermine comment le texte est enveloppé dans une boîte contenant lorsque vous travaillez avec un non-CJK langue (Japonais Coréen Chinois). Les valeurs acceptables sont: normal, rompre tout-, et hyphenate.

  • word-wrap: Détermine comment le texte est cassé et puis enveloppé à la ligne suivante dans une boîte contenant lorsque vous travaillez avec une langue non CJK. Les valeurs acceptables sont: normal et pause-mot.