Les bases du CSS
- Précédent
- par : App UI
Le Css : Définition
Les Cascading Style Sheets en anglais, ou « feuilles de style en cascade » (en bon français) sont le code utilisé pour mettre en forme une page web. Le ht ml étant le contenu de la page le CSS représente la mise en forme. Vous serez amenés à travailler avec différents niveau d'abstraction, mais vous devez comprendre les rudiments de la construction pour pouvoir à l'avenir personnaliser vos projets.
Les sélecteurs
les éléments
Si votre style s'applique à l'ensemble des éléments de votre page, alors vous pouvez styliser directement ces éléments
Code à intégrer
<style>body {background:grey;}
h1 {font-size:3rem;color:red;}
</style>
Les class
Lorsque des types d'éléments sont amenés à être reproduits à différents endroits sur une page ou dans un projet, on crée des classes qui seront réutilisées tout au long du projet et qui permettront d'avoir à écrire moins de code.
Code à intégrer
<style> .maclasse {background-color:blue;} </style>
Les id
Certains éléments sont et doivent être uniques, pour que vous puissiez vous référer via un lien, ou tout simplement parce que sa stylisation doit être unique. Pour se faire vous puvez utiliser un identifiant unique
Code à intégrer
<style> #monidentifiantunique {background-color:blue;} </style>
Sélecteurs globaux
Parfois il peut être intéressant, d'appeler globalement l'ensemble des éléments d'une page, pour se faire, il exsite un sélecteur global
Code à intégrer
<style> * {background-color:blue;} </style>
Les enfants
Le css reprend la logique d'imbrication vue plus tôt, le css peut donc viser un enfant d'un élément.
Code à intégrer
<style> p a {color:red;} </style>
Sélecteurs multiples
VOus pouvez bien entendu attriber un style css à un ensemble d'éléments et pas seulement un élément unique, pour se faire, vous utiliserez la virgule
Code à intégrer
<style> h1, h2 {color:red;} </style>
Gérer les couleurs
Le code hexadécimal
La notation la plus utilisée : trois numéros octets hexadécimaux (ce qui signifie qu'ils se composent de six chiffres), chaque octet, ou une paire de caractères dans le code Hex, représente l'intensité de rouge, de vert et de bleu dans la couleur.
Code à intégrer
<style>element {color:#B70A7F}</style>
Le code RGB
la notation la plus utilisée entre designers, cela correspond aux valeurs de rouge, vert et bleur sur une échelle de 0 à 255 (l'espace colorimétrique des écrans).
Code à intégrer
<style>element {color:rgb(183, 10, 12)}</style>
Le code RGBA
On ajoute tout simplement la notion de transparence à au cadre du RVB
Code à intégrer
<style>element {color:rgba(183, 10, 12, 0.5)}</style>
Le code HSL
La notation fonctionnelle hsl() exprime une couleur sRGB selon ses composantes de teinte (hue en anglais), saturation, et luminosité. Une composante alpha optionnelle représente l'opacité de la couleur.
Code à intégrer
<style>element {color:hsl(319, 95%, 38%)}</style>Liens en plus
Gérer le texte
Taille
Vous serez forcément amené à intervenir sur la taille de votre typographie dans votre document html, vous pourrez tout simplement le gérer au travers de la propriété font-size
Code à intégrer
<style> element {font-size:2rem;} </style>
Couleur
Vous serez également amené à intervenir sur la couleur de votre typographie dans votre document html, vous pourrez tout simplement le gérer au travers de la propriété color
Code à intégrer
<style> element {color;#B70A7F;} </style>
Alignement
Vous devrez gérer l'alignement de votre texte dans votre document html, vous pourrez tout simplement le gérer au travers de la propriété text-align
Code à intégrer
<style> element {text-align:left;} </style>
Hauteur de ligne
La hauteur de igne est un élément qui vous permet de gérer l'espace entre les lignes dans le cadre d'un texte multiligne, vus pouvez le gérez tous simplement avec line-height
Code à intégrer
<style> element {line-height:3rem;} </style>
Police
Afin de donner de la personnalité à votre document, vous pouvez bien entendu choisir la police d'affichage, attention les polices actives sur tous les périphériques ne sont pas identiques. Vous pouvez gérer cela avec font-family
Code à intégrer
<style> element {font-family:Arial;} </style>
Gérer l'espace
Margin
L'espace autour de l'élément est la marge extérieure qui se gère tout simplement avec la propriété margin
Code à intégrer
<style> element {margin:2rem;} </style>
Padding
L'espace à l'intérieur de l'éméent entourant le contenu de l'élément est la marge intérieure, elle est gérée par la propriété padding
Code à intégrer
<style> element {padding:2rem;} </style>
Les unités
Les unités absolues
En CSS, il y a des unités qui ne sont influencées par aucune autre dimension : on les appelle unités absolues, elles sont généralement utilisées pour traduire une longueur, par exemple un padding, une hauteur de bloc, la taille des caractères, etc.
Les unités que vous serez amenés à utiliser pour des écrans sont : Les pixels (px) -majoritairement- et Les points (pt>).Code à intégrer
<style> element {font-size:20px;} </style>
Les unités relatives au texte
S'il existe les unités relatives, il existe leur contraire les unités absolues, ces unités font varier la taille d’un élément en fonction de la taille de la police ou de l’élément parent..
- Em> : elle est proportionnelle à la taille de la police de l’élément parent ou du document. Par défaut, 1 em = 16 px si aucune taille de police n’est définie.
- Rem> : l’unité rem fait toujours référence à la taille de la police de l’élément racine. En d’autres termes, elle dépend du font-size définit par défaut.
Code à intégrer
<style> element {font-size:3rem;} </style>
Les unités relatives au viewport
Les unités vh et vw sont similaires, à la seule différence qu’elles dépendent respectivement de la hauteur et de la largeur de la fenêtre de navigation.
p>- Vh : La hauteur du viewport
- vw : La largeur du viewport
Code à intégrer
<style> element {width:50vw;height:50vh;} </style>
Les pourcentages
Le pourcentage est parfait puisqu’il s’adapte en fonction de son élément parent.
height:50%;} </style>
