Propriétés usuelles en Css☘

Les couleurs☘

De nombreux éléments d'une page web peuvent être mis en couleur à l'aide des proprétés correspondantes.
Par exemple :

  • la propriété `color`` modifie la couleur du texte écrit dans l'élément Html ciblé ;

  • la propriété background-color modifie la couleur d'arrière-plan de l'élément Html ;

  • la propriété border-color modifie la couleur des bordures qui entourent l'élément Html.

Les valeurs prisent par ces propriétés peuvent être :

  • une couleur nommée.
    On trouvera 500 couleurs nommées en cliquant ici ;

  • une couleur représentée par un codage héxadécimal (c'est le plus utilisé) ;

  • ou une couleur représentée par un codage RGB sous la forme rgb(r, v, b).

Astuce

Pour obtenir ces représentations héxadécimales ou RGB, on peut utiliser un « analyseur de couleur ».

  • Just Color Picker convient aux systèmes d'exploitation Windows et MacOS ;

  • GColor2 convient au système d'exploitation Linux.

Bac à sable - Des couleurs partout

L'interface ci-dessous, permet de modifier les couleurs de plusieurs éléments Html et de visualiser les codes Css correspondants. N'hésitez pas à modifier ces valeurs puis à les copier/coller dans votre propre fichier Css si besoin.

Les bordures☘

Chaque élément Html est contenu dans une boîte.
Cette boîte possède des bordures modifiables grâce à trois propriétés :

  • border-width pour l'épaisseur ;

  • border-style pour la forme ;

  • border-color pour la couleur.

On peut aussi utiliser la propriété raccourcie border qui permet de préciser les trois valeurs précédentes en une seule déclaration.

On trouvera les valeurs possibles pour ces propriétés sur cette page de w3schools.

Bac à sable - Des bordures autour des boîtes

L'interface ci-dessous, permet d'ajouter des bordures autour d'un élément Html et de visualiser les codes Css correspondants (les dimensions sont en pixels). N'hésitez pas à modifier ces valeurs puis à les copier/coller dans votre propre fichier Css si besoin.

Bac à sable - Identifier les bordures

Une bordure est en fait un rectangle constitué de quatre côtés, chacun est identifié par sa position. N'hésitez pas à modifier ces valeurs puis à les copier/coller dans votre propre fichier Css si besoin.

Bac à sable - Arrondir les angles

La propriété border-radius permet d'arrondir les « coins » des bordures. N'hésitez pas à modifier ces valeurs puis à les copier/coller dans votre propre fichier Css si besoin (les dimensions sont en pixels).

Pour obtenir le même arrondi à tous les angles, il est possible de ne donner qu'une seule valeur : 

1
2
3
p {
    border-radius : 5px;
}
On trouvera le détail sur cette page de w3schools.

Les textes☘

La mise en forme des textes permet de changer les polices de caractères, de mettre en gras, en couleur, en italique, de souligner et beaucoup d'autres choses encore :

  • font-size permet de préciser la taille de police utilisée. Il existe deux types d'unités :

    • les unités absolues : px (pixels), cm(centimètres), ...
    • les unités relatives : % (par rapport à la taille de police du conteneur), em, ...

  • font-family permet de spécifier la famille de police pour le texte.
    Comme une police donnée n'est pas nécessairement présente sur le poste de l'utilisateur, on précise en général plusieurs choix séparés par des virgules.

  • font-weight permet de définir la graisse de la police : valeurs possibles ;

  • font-style permet d'afficher du texte en italique ;

  • text-decoration permet de souligner l'élément sélectionné ;

  • font-variant permet d'afficher du texte en petites majuscules.

Bac à sable - Mettre en forme les textes

N'hésitez pas à modifier ces valeurs puis à les copier/coller dans votre propre fichier Css si besoin. Les dimensions sont en pixels.

Bac à sable - Les ombres

Dans ce bac à sable, on peut attribuer une ombre au texte ou bien au conteneur du texte (ici le paragraphe). N'hésitez pas à modifier ces valeurs puis à les copier/coller dans votre propre fichier Css si besoin.

Dimensions et espaces d'une boîte☘

Chaque élément Html est contenu dans une boîte.
Pour comprendre le comportement des boîtes, il faut savoir ce que désigne chaque dimension utilisée.

Par défaut, les propriétés width et height désignent la largeur et la hauteur du contenu de la boîte. Pour avoir les dimensions de la boîte complète, il faut donc ajouter la valeur de :

  • padding, dimensions entre le contenu et les bordures ;

  • border-width, taille des bordures de la boîte ;

  • margin, dimensions extérieures de la boîte.

Les propriétés précédentes peuvent être différenciées entre le haut (-top), le bas (-bottom), la gauche (-left) et la droite (-right).

Il est aussi possible de définir des dimensions minimum et maximum pour la largeur et la hauteur d'une boîte grâce aux propriétés min-width, max-width, min-height et max-height (détails sur w3schools).

Bac à sable - Visualiser les différentes dimensions

Dans ce bac à sable, les dimensions sont en pixels et les valeurs haut-bas-gauche-droite sont identiques. Ne pas hésiter à tester des valeurs négatives pour les marges intérieures et/ou extérieures.

Survoler un élément avec la souris☘

En Css, il existe de très nombreux pseudo-éléments. Vous pouvez par exemple vous renseigner sur :

  • :first-of-type ;
  • :last-of-type ;
  • :nth-of-type

qui permettent d'identifier des éléments en fonction de leur « ordre d'apparition » dans un conteneur. Le pseudo-élément :hover permet, quant à lui, de modifier l'affichage de l'élément ciblé lors du survol de cet élément par la souris.

Bac à sable - Survol d'un élément

Dans ce bac à sable, les dimensions sont en pixels et les valeurs haut-bas-gauche-droite sont identiques. Ne pas hésiter à tester des valeurs négatives pour les marges intérieures et/ou extérieures.

Type d'affichage d'une boîte☘

Les éléments Html sont, par défaut, de type inline ou de type block. C'est la propriété Css display qui permet de changer le type d'une boîte afin de modifier la manière dont elle se comporte.

  • display: inline;
    Par défaut, les éléments de texte (<em>, <strong>, <code>, <span>, etc...) sont des boîtes de type inline. Elles seront affichées les unes à côté des autres.
    Les boîtes de type inline ne peuvent contenir que d'autres boîtes de type en-ligne. Ces boîtes ont des marges internes et externes nulles par défaut.

  • display: block;
    Par défaut, <p>, <section>, <div>, etc... sont des boîtes de type block. Elles seront affichées les unes en-dessous des autres, alignées sur le bord gauche.
    Les boîtes de type block peuvent contenir d'autres boîtes de type block et/ou des boîtes de type inline. La plupart des éléments bloc possèdent des marges internes et externes non nulles, parfois différentes selon les navigateurs.

  • display: inline-block;
    Les boîtes auxquelles on attribue cette propriété auront les « avantages » des deux types précédents. Elles seront :

    • affichées les unes à côtés des autres ;

    • alignées sur leur bord inférieur ;

    • réduite à la largeur minimum pour leur contenu (elles ne prennent pas toute la largeur de leur conteneur).

    On peut spécifier les dimensions (hauteur et largeur) et les marges verticales des boîtes inline-block.

  • display: none;
    Une boîte de propriété display: none; ne sera pas affichée, ainsi que toute boîte qu'elle contiendrait. Les autres conteneurs se placent dans le flux d'affichage comme si cette boîte n'existait plus.
    Cette propriété s'utilise par exemple pour les menus : les sous-menus sont par défaut endisplay: none; et passent en display: block; lorsqu'on les survole avec la souris.

    Attention !

    Il ne faut pas confondre une déclaration display: none; avec une déclaration visibility: hidden;.
    Pour cette seconde déclaration, le contenu de la boîte est invisible mais occupe le même espace dans la page que si cette boîte était visible.

Bac à sable - Boîtes flexibles

La propriété Css display: flex; permet de définir un « conteneur flexible ». Ses enfants (les éléments contenus dans cette boîte) deviennent alors automatiquement (sans déclarer quoi que ce soit) flexibles.

La boîte encadrée d'une bordure noire peut devenir « flexible », les blocs enfants sont encadrés de pointillés.
On trouvera un article plus complet sur le site alsacréations.