Un peu de CSS (suite)

Un peu de CSS (la suite !)…
Les cours sur le CSS se suivent et ne se ressemblent pas ! 😉

Après avoir vu les bases de mises en page en CSS, nous abordons dans la suite du post les notions pour agencer les éléments sur la page.

L’occupation de l’espace

En CSS, il est possible de définir quel espacement / place occupera un élément sur la page. Pour cela, on utilise la propriété « display » que l’on peut alors appliquer à n’importe quel élément.
Ses différentes valeurs sont :
– display : block; : l’élément occupe tout l’espace (c’est le cas des balises div ou p par exemple).
– display : inline; : l’élément occupe juste l’espace nécessaire et permet que les éléments soient les uns à côté des autres (c’est le cas des balises span par exemple).
– display : initial; : l’élément reprend sa valeur par défaut.
– display : inherit; : l’élément prend la valeur de ses parents (il en hérite !)
– display : inline-block; : combine les propriétés du inline et du block. Sur l’espacement déterminé par le inline, il est alors possible de modifier les espacements autour grâce aux propriétés du block.
– display : none; : cache l’élément.
– display : flex; : apparu avec HTML5, il permet de créer de nouvelles façons de mettre en page (nous verrons ce sujet plus tard !).

La flottaison des éléments

Sur les balises de type block (ou lorsque l’on ajoute un display : block; à un élément), il est possible de modifier la position de l’élément avec la propriété « float ».
Avec cette propriété, on peut alors mettre les « blocks » en ligne et faire en sorte qu’ils se placent les uns à côté des autres.
Ses valeurs sont :
– float : none; : retour à l’état initial.
– float : left; : les éléments se placent les uns à côté des autres en partant de la gauche, jusqu’à la ligne suivante.
– float : right; : ils se placent les uns à côté des autres en partant de la droite, jusqu’à la ligne suivante.
– clear : both; : casse la ligne de flottaison (retour à la ligne).

Pour que la flottaison ne s’applique qu’à l’enfant, il est important de rajouter à l’élément parent la propriété suivante : overflow : auto;

Les espacements

De base, tous les éléments sont les uns à côté des autres. Une bordure vient ensuite agrandir la taille de base des éléments. Cette bordure créée des espacements que l’on peut styliser en leur appliquant une dimension (généralement en pixel).
Le padding est un espacement interne. Il s’ajoute à la taille de l’élément. De plus, il ajoute de l’espacement à l’intérieur de l’élément et garde donc les propriétés de cet élément.
Le margin est un espacement externe. Il s’ajoute aussi à la taille de l’élément. Comme il ajoute de l’espacement à l’extérieur de l’élément, il ne garde pas les propriétés de cet élément.

Il est aussi possible de spécifier une dimension pour chaque côté (top, right, bottom, left) séparément, ou deux à deux (top+bottom, right+left) ou la même dimension pour tous les côtés.

Calculs mathématiques

Si on ne peut pas déterminer de façon exacte une valeur d’espacement, il est possible de la calculer directement dans la propriété (par exemple 1/3 ou 1/5, etc.). On utilise alors la fonction « calc ».
Par exemple : width : calc(100% / 3);

Il existe une propriété qui permet de supprimer tous les espacements internes : box-sizing : border-box;
On ajoute alors cette propriété à tous les éléments au début du fichier CSS, ce qui permet de rajouter du « padding » et des bordures dans que leurs tailles soient prises en compte dans le calcul de la largeur totale.

Les bordures

Chaque élément détient une bordure (qui agrandit aussi la taille de l’élément). On peut aussi styliser :
– son épaisseur avec border-width : valeur; (ici la valeur est définie de la même manière que pour les espacements)
– son style :
border-style : none;  il n’y a pas de trait
border-style : solid;  la bordure est un trait plein
border-style : dotted;  c’est un trait pointillé
border-style : dashed;  ici c’est un trait en petits tirets
border-style : double;  la bordure est un double trait plein
– sa couleur avec border-color : value; (ici la valeur est définie comme pour les couleurs).

border : width style color;

Le positionnement

position : relative;
left : 10px;

Mise en forme

On peut appliquer une mise en forme spéciale sur les éléments.

border-radius : valeur;

background : linear-gradient(to right, couleur1 0%, couleur2 100%);

@font-face {
    font-family : "Name";
    /* règles récupérées via le générateur */
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

<i class="material-icons"> android </i>

Il existe aussi des façons plus rapides pour désigner les éléments sur le fichier CSS. Nous en avons vu 2 différentes.

Les sélecteurs avancés

Pour faciliter la désignation des éléments (et donc éviter de mettre des class de partout !), il existe différents sélecteurs avancés qui permettent de sélectionner les éléments par rapport à leur hiérarchie.

• Cible directe : parent > enfant
  Permets de sélectionner les enfants directs du parent.
• Sélecteur adjacent : élément1 + élément2
  Sélectionne uniquement l’élément 2 qui est tout de suite après l’élément 1 (même s’il y a plusieurs éléments 2 après l’élément 1).
• Sélecteur successeur : élément1 ~ élément2
  Permets de sélectionner tous les éléments 2 qui suivent l’élément 1 pour un même parent.
• Cibler certains enfants:
  le 1er enfant : parent :first-child
  le dernier enfant : parent :last-child
  le n-ième enfant : parent :nth-child(no) (le no correspond à la place ciblée).
  A noter : l’espace avant les deux-points correspond à un lien de parenté. Sans espace, c’est alors l’élément direct qui est ciblé.
• Ciblage par rapport à un type de balise
  balise :first-of-type : cible le 1er type de la balise
  balise :last-of-type : cible le dernier type de la balise.

Les pseudo-classes

On peut aussi donner des états différents en fonction de ce que fait l’utilisateur sur la page. Il en existe 5 différents :
– élément:focus {   }
Lorsque l’utilisateur sera focalisé sur un champ de formulaire, ce dernier changera d’état selon les propriétés ajoutées.
– élément:hover {   }
Dès que l’utilisateur passe la souris sur l’élément, celui-ci change d’état.
– élément:active {   }
Au moment où l’utilisateur clique sur l’élément, il change d’état. Cela s’arrête lorsque l’utilisateur lâche le « click ».
– élément:disable {   }
tant que la « réponse » précédente n’a pas été donnée, l’élément reste non accessible (grisé).
– élément:normal-state {   }
C’est l’état initial de l’élément.

Voici donc toutes les bases de mise en forme utilisables en CSS.
La prochaine notion que j’ai ensuite abordée lors de ma formation est FLEXBOX.
À voir lors du prochain post…! 😉