Passerelle Numérique

Qu'est-ce que le CSS ?

CSS (Cascading Style Sheets) est un langage qui définit la façon dont les documents sont présentés aux utilisateurs. Un document est habituellement un fichier texte qui est structuré en utilisant un langage de balises tel que HTML. Les navigateurs web appliquent des règles CSS à un document afin que ceux-ci soient affichés correctement. Une règle CSS est une liste de propriétés associées à un sélecteur. Une liste de règles de CSS est contenue dans une feuille de style qui définit la mise en forme d'une page. La notion de "cascade" fait référence aux règles de priorité qui existent entre les différents sélecteur. C'est un aspect très important car on peut "facilement" avoir des milliers de règles CSS lorsqu'on gère un site complexe.

Le fonctionnement de CSS

Lorsqu'un navigateur affiche un document, il doit combiner le contenu du document avec les règles de mise en forme. Pour cela, il traite le document en deux étapes : Le navigateur convertit le contenu HTML et le CSS dans le DOM (Document Object Model ou « Modèle objet du document »). Le DOM représente le document dans la mémoire de l'ordinateur. Pour cela il combine le contenu et la mise en forme (le style). Le navigateur affiche le contenu du DOM.

Les Sélecteurs

Les selecteurs simples
- Les sélecteurs de type nomelement
- Les sélecteurs de classe .classe
- Les sélecteurs d'identifiant #id
- Les sélecteurs universels *
- Les sélecteurs d'attribut [attr=valeur]
Les combinateurs
- Les sélecteurs de voisins directs A + B
- Les sélecteurs de voisins A ~ B
- Les sélecteurs d'éléments fils A > B
- Les sélecteurs d'éléments descendants A B
Les pseudo-elements
- ::after
- ::before
- ::first-letter
- ::first-line
Les pseudo-classes standard
- :active
- :checked
- :first
- :first-child
- :first-of-type
- :focus
- :hover
- :last-child
- :last-of-type
- :not()
- :nth-child()
- :nth-last-child()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :visited

Les Propriétés CSS

Les propriétés de police CSS

Les propriétés de police CSS contrôlent tous les aspects de la représentation graphique de votre texte. De l'épaisseur de votre police (font-weight) au type de police (font-family) de votre choix. Voici toutes les propriétés de police à votre disposition:

font
font-family
font-size
font-style
font-weight
font-variant

Les propriétés de texte CSS

Les propriétés de texte CSS contrôlent l'espacement, l'alignement, la décoration et d'autres aspects divers du texte. Voici une liste de toutes les propriétés du texte CSS.

letter-spacing
word-spacing
text-decoration
vertical-align
text-transform
text-align
text-indent
line-height

Les propriétés de la boîte CSS

Les propriétés de la boîte CSS sont utilisées pour définir l'espacement dans et autour des éléments HTML, leurs bordures et d'autres aspects de positionnement. Border, Margin et Padding ont chacun quatre propriétés: haut, droite, bas et gauche.

margin
padding
border
border-width
border-color
width
height
float
clear

La propriété CSS Color

La propriété CSS color définit la couleur du texte à l'intérieur de l'élément HTML spécifié. Utilisez des classes ou des identifiants pour avoir plusieurs couleurs pour un type d'élément HTML.

Color

Les propriétés d'arrière-plan CSS

Les propriétés d'arrière-plan CSS contrôlent des choses comme si l'arrière-plan est une couleur unique ou peut-être une image. S'il s'agit d'une image, vous pouvez définir la position de l'image et lui indiquer si vous souhaitez ou non que l'image soit répétée de gauche à droite et / ou de haut en bas.

background
background-color
background-image
background-repeat
background-attachment
background-position

FlexBox (pour Flexible Box) est un mode de mise en page prévoyant une disposition des éléments d’une page de telle sorte que ces éléments possèdent un comportement prévisible lorsqu’ils doivent s’accommoder de différentes tailles d’écrans/appareils.(responsive design)

L’aspect principal d'une mise en page flex est la capacité à modifier la largeur et/ou la hauteur des éléments pour remplir au mieux l'espace disponible sur n'importe quel appareil; Un conteneur flex élargit les éléments pour remplir l'espace libre ou les rétrécir pour éviter les débordements.

display:flex
Cette valeur genere un container flex, de niveau block a l'interieur de l'element
display:inline-flex
Cette valeur genere un container flex, de niveau inline a l'interieur de l'element

flex direction

La propriété flex-direction établit l'axe principal.

row
(valeur par défaut): de gauche à droite si la lecture se fait dans ce sens, de droite à gauche dans le cas inverse.
row-reverse
inverse le sens
column
comme row mais du haut vers le bas
column-reverse
comme row-reverse mais du bas vers le haut

justify content

La propriété justify-content définit l'alignement le long de l'axe principal. Elle permet de distribuer l'espace excédentaire lorsque tous les items flex sur une ligne sont inflexibles ou lorsqu'ils ont atteint leur taille maximale. Elle contrôle aussi l'alignement des items lorsqu'ils débordent.

flex-start:
(par défaut) : les items sont regroupés en début de ligne
flex-end:
les items sont regroupés en fin de ligne
center:
les items sont centrés le long de la ligne
space-between:
les items sont répartis sur la ligne; le premier est collé du côté start, le dernier du côté end.
space-around:
les items sont répartis sur la ligne avec un espacement égal autour de chacun.