Dans le développement web, en front-end, nous avons déjà passé en revue les notions essentielles du HTML5. Maintenant, abordons le CSS3.
On peut suivre des cours en ligne gratuitement pour se familiariser notamment sur :
Apprendre à coder : https://apprendre-a-coder.com (pas commandité)
Code Academy : https://www.codecademy.com
freeCodeCamp : https://www.freecodecamp.org
W3 Schools : https://www.w3schools.com/css
On peut aussi utiliser ces éditeurs de code :
Atom : https://atom.io
Sublime Text : https://www.sublimetext.com
Brackets : http://brackets.io
Avant de commencer, tel que mentionné dans l'article sur le HTML5, il faut s'assurer que l'on puisse afficher les extensions de fichiers comme index.html. Dans l'explorateur de fichiers, il faut permettre d'afficher ces extensions. https://www.astuces-aide-informatique.info/296/extension-fichier-windows
Le CSS signifie "Cascading Style Sheet". Pour utiliser le CSS, il faut créer un fichier styles.css.
Syntaxe
On utilise les accolades { } pour le CSS et des sélecteurs (selectors) comme (<p>) pour attribuer une valeur.
Style
Pour les couleurs, l’encodage est entre RGB 0 – 255.
Couleurs RGB ou RGBA (valeur alpha pour la transparence)
{color: rgb 0,0,255}
color hex (hexadécimal) 123456789ABCDEF
{color : rgb (0,0,255) 0.5} transparence - opacité entre 0 et 1
Unités de mesure en px (font étant la police)
font-size: em (par ex. d'un élément)
{font-size: 30px;}
valeur par défaut {/* font=size: 30 px*/}
Polices (font)
Il y a différentes polices. Elles sont incluses dans le code, installées sur l'ordinateur ou intégrées au CSS.
On parle ici de :
-serif;
-sans serif;
-monospace;
-cursive;
-fantasy.
font-family: choix de police. Voyons avec un exemple : Helvetica, Arial, serif.
On va d’abord au premier choix et on passe ensuite au suivant.
font-weight: mettre en gras (bold)
selector tout sélectionner * avec l'étoile
Les classes
Une classe est un attribut pour un ensemble d’éléments.
Pseudo-classe : mise en forme spécifique d'un élément.
: link - permet de cibler les éléments qui n'ont pas encore été visités;
: hover - permet de spécifier l'apparence d'un élément au moment où on le survole avec le curseur, sans nécessairement l'activer;
: visited - permet de modifier l'aspect d'un lien après que l'on l'ait visité;
: first-child - permet de cibler le premier élément familier à l'intérieur d'un groupe d'éléments familiers.
Affichage (display)
display : block - est utilisé pour afficher des éléments en tant qu'éléments en block;
display : inline - est utilisé pour afficher un élément en ligne;
display : inline-block - est utilisé pour afficher à la ligne les éléments en block;
display : none - est utilisé pour ne pas afficher un élément.
Modèle de la boîte à l'écran
Marges : margin
margin - Il y a 4 valeurs et l'on va dans le sens d'une aiguille d'une montre :
margin-top : haut;
margin-right : droite;
margin-bottom : bas;
margin-left : gauche.
auto - signifie même chose à gauche comme à droite
Écarts de remplissage (padding : l'espace entre la bordure et le contenu)
Le padding fonctionne comme les marges.
float : (place à droite, à gauche, etc.) - propriétés de flottement.
Bordures (borders)
border-style: solid (affiche une seule ligne droite et continue);
border-color: couleur;
border-width: largeur;
border (top, bottom, right, left) : haut, bas, droite, gauche.
Positions
static : pour un élément qui n'est pas positionné d'une manière spéciale;
relative : pour un élément relativement à sa position normale;
fixed : pour un élément qui reste toujours au même endroit même si la page défile;
absolute : pour un élément qui est positionné absolument relativement à son premier ancêtre positionné.
On peut finalement consulter cet aide-mémoire sur Sass : https://learnxinyminutes.com/docs/sass
J’espère que ce résumé vous donnera envie d’explorer plus en profondeur CSS3 !
Stéphanie Tessier
Comments