CSS

Le CSS (Cascading Style Sheets ou Feuilles de style en cascade en français) permet de modifier les propriétés des différents élément d’une page internet.

Une régle CSS se compose de deux éléments, le sélecteur et le bloc qui contient les déclarations. Le sélecteur permet de cibler un élément et les déclarations l’effet à appliquer.

Syntaxe CSS

Avec le HTML nous avons manipuler des balises, avec le CSS nous allons maintenant les cibler pour en modifier l’affichage.

p{color : red;} //défini le rouge comme couleur pour le texte dans les paragraphes

Sélecteur { propriété : valeur;} //commentaire

Le sélecteur permet de choisir l’élément dans la page HTML, afin de lui appliquer la propriété avec une valeur défini.

En langage courant la règle utilisée en exemple se lit : la couleur des balises <p> est rouge.

Balises, class et ID.

Pour cibler efficacement les balises de nos pages internet le CSS utilise les sélecteurs pour commencer nous allons distinguer 3 sélecteurs simples.

div {width : 100%;}
//sélecteur de type cible les balises <div> 

.div {color : #000;}
//sélecteur de classe cible la classe "class" <div class="div">

#div {background : url("monimage.gif");}
//sélecteur d'identifiant cible l'id "div" <div id="div">

Pour cibler les balises HTML5 il suffit d’écrire leurs tags, pour une classe un ajoute un point ‘.’  au début du nom de la classe et enfin pour les id on utilise la dièse ‘#’.

Affiner la sélection.

Pour cibler les éléments il devient rapidement indispensable d’affiner la sélection, pour ce faire on utilise la structure du HTML.

<html>
<body>
<div class="content">
<h1 id="titre">Titre</h1>
<p class="paragraphe">mon paragraphe</p>
</div>
<p>paragraphe hors div</p>
</body>
</html>

Le CSS initial change la couleur du texte pour du rouge.

p{color : red;} //défini le rouge comme couleur pour le texte dans les paragraphes

Mais si nous voulons cibler le premier paragraphe uniquement, il faut améliorer la précision du sélecteur. Le premier paragraphe est parent d’une balise générique <div>.

div p {color:red;}

De cette façon seul le premier paragraphe sera coloré.

Outre l’aspect pratique il faut aussi garder en tête qu’en cas de conflit entre deux règles c’est le sélecteur le plus précis qui s’appliquera.

div.content { //sélectionne les balises div ayant pour classe content
}
.content h1 {//sélectionne les balises h1 contenu dans une balise de classe content
}
h1#titre {//sélectionne la balise h1 ayant l'identifiant titre
}

Utiliser plusieurs sélecteurs

Pour modifier plusieurs éléments à la fois il ne faut pas multiplier les règles mais les sélecteurs en utilisant une virgule pour les séparer.

p,div,.content,#titre {
color : #eeeeee;
//on colore le texte des balises p et div la classe content et l'id titre. 
}

On peut utiliser « * » pour sélectionner l’ensembles des éléments HTML.

* {margin : 0;}
//on applique une marge intérieurs égale à zéro sur 
//l'ensemble des éléments HTML.

Enfin les sélecteurs d’attribut sont le coeur du systéme CSS ils permettent de cibler les léléments HTML par leurs attributs.

.content {color : black;}
//et l'équivalent simplifié de
[class=content] {color : black;}

//ou on peut aussi cibler tout les éléments ayant une classe
[class] {color : black;}

Les sélecteurs avancés

Nous avons vu quatre sélecteurs (type, classe, id et attribut) mais il en existe beaucoup plus (liste des sélecteurs CSS).

Sélecteurs de voisin direct

Permet de sélectionner un élément directement voisin d’un autre.

<style>
div + p {color : red;}
</style>

<html>
<div>juste une div</div>
<p>Est ciblé</p>
<p>N'est pas ciblé</p>
</html>

Sélecteurs de voisins

Permet de sélectionner un élément voisin d’un autre.

<style>
div ~ p {color : red;}
</style>

<html>
<div>juste une div</div>
<p>Est ciblé</p>
<p>Est aussi ciblé</p>
</html>

Sélecteurs d’éléments de fils

Permet de sélectionner les élément qui sont directement sous un autre.

<style>
div > p {color : red;}
</style>

<html>
  <ol>juste une div
    <li>Est ciblé</li>
    <li>Est aussi ciblé</li>
    <span><li>n'est pas ciblé</li></span>
  </ol>
</html>

 Les pseudo-classes

Permet de sélectionner les éléments en fonction d’un état ou d’un statut. Il en existe beaucoup et nous en aborderons certains via des exercices.

li:hover {color: red;)
//colore le texte en rouge au survol du curseur

Les pseudo-éléments

Permet de cibler les éléments à l’intérieur d’un élément par exemple le premier caractère de la balise p::first-letter.

p::first-letter {font-size : 3em;}
//multiplie par 3 la taille de la première lettre d'un paragraphe.

Les valeurs

Une fois le sélecteur choisi on affecte une valeur à une propriété CSS

*{color : red;}

Ici la couleur assigné est rouge. Pour le même résultat on aurait put utiliser plusieurs format de valeurs.

Couleurs

Pour renseigner nos propriétés on peut utiliser différent codage pour définir une couleur. Les trois format suivant sont supporté par tout les navigateurs, si certains ne gèrent pas la transparence ils ignorent l’information ce qui permet de l’utiliser sans avoir a pré-fixé sont code CSS.

Vous devrez choisir le format que vous utiliserez en fonction de ce que vous allez en faire. si vous voulez décliner une couleur en en fonction de sa saturation le format HSL sera plus lisible que HEX par exemple.

Format RGB

Red Green Blue correspond à la quantité de chaque couleurs sur une échelle de 255. 0 0 0 absence de couleur donc noir. A contrario 255 255 255 correspond au blanc.

*{color : rgb(255, 0, 0);}

On peut aussi utiliser la transparence avec le RGBA. En attribuant une valeur entre 0 et 1.

*{color : rgba(255, 0, 0, .5);}

Ici la couleur rouge est a moitié affiché on utilise la valeur par défaut pour les 50% restant.

Format HSL

Hue, saturation, and lightness.

Hue c’est la position de la couleur dans une palette allant de 0 à 360 (les degrés d’un cercle). 0 étant le rouge, 120 le vert et 240 le bleu (pour ceux qui se demande la valeur de 360, c’est rouge la boucle et bouclé).

Saturation c’est la teinte allant de la nuance de gris (0%) à la couleur pleine (100%).

lightness c’est la luminosité allant du noir 0% au blanc 100%.

*{color : hsl(0, 100%, 50%);}

Format hexadécimal (HEX)

Peut le plus abstrait à comprendre il est cependant le format le plus inter compatible. Le principe est simple #RRGGBB. Les deux premier caractère correspondent a la quantité de rouge (RR) les deux suivant au vert (GG) et enfin BB correspond au bleu.

Mais pour rendre la chose efficace on utilise les 10 chiffres et les 6 premières lettres de l’alphabet pour faire non pas des dizaines mais des seizeines de qui permet avec 2 caractères de passé de 100 nuances (10²) à 256 (16²). Ainsi on arrive au même degrés de précision que le RGB et ses 255 niveaux de couleur.

*{color : #ff0000;}

Le format HEX supporte aussi la transparence. Avec l’ajout de 2 caractères supplémentaire. 00 étant 100% transparent, FF 100% opaque.

*{color : #ff000088;}

Dimensions

Pour définir les dimensions des vos éléments il faut déjà appréhender une notion fondamentale, les dimensions dépendent du média de lecture. 20px sur une écran 4k c’est peu sur un smartphone cela se remarque beaucoup plus.

Nous y reviendrons sur le cour sur le Responsive.

Les différentes unité de mesure ne sont pas lié aux CSS mais au média de sortie. Ce qui signifie que qu’il n’y a pas de restriction à utiliser une format ou un autre. C’est à vous de choisir l’unité de mesure qui correspond à la fonction que vous souhaitez mettre en place.

Pixels

Le pixel est l’unité de mesure la plus facile à appréhender. Dans le principe il correspond à un point sur l’écran.

div { border: 2px;}

Pourcentage

Les pourcentages seront très utile pour placer ou dimensionner des éléments. Ils permettent de mettre en place un semblant de responsive sans les média-queries.

#main {width : 70%;}
#sidebar {width : 30%;}

EM

Ici ça se complique un peu. Un élément à forcément une valeur que vous l’ayez défini ou non. L’unité EM permet de modifié la valeur d’un élément en prenant la dimension de la police de caractères en référence.

p { margin-left: 1em; //une fois la taille d'origine
}
h1 { 
   font-size: 3em; //trois fois la taille d'origine
   margin-left: 0.333em; //1/3 de la taille défini soit 1em
}

REM

Le REM permet de prendre la valeur initiale pour référence et non la valeur en cour.

p { margin-left: 1rem }
h1 { font-size: 3em; margin-left: 1rem }

Cet exemple et exactement le même que le précédent.

A lire  CSS grid - Galerie responsive

Les animations en CSS

Pour améiorer l’esthétique de vos page le CSS permet d’animer des éléments. Voyons rapidement la syntaxe de base avant de voir plus en détails le fonctionnement des animations en CSS.

Fonctionnement des animations CSS

Les animation en CSS s’utilise en deux temps. Pour commencer on créer un pattern d’animation via @keyframes.

@keyframes

La syntaxe de base est la suivante :

@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

Notre animation changera la couleur d’arriéré plan du rouge au jaune. On défini la valeur initiale et la valeur finale.

Il est important de bien définir les valeurs initiale dans l’animations, l’utilisation ds valeur hérité peu entraîner des effet disgracieux.

Pour le même résultat nous aurions put utiliser une autre syntaxe :

@keyframes example {
    0% {background-color: red;}
    100% {background-color: yellow;}
}

Cette syntaxe permet d’ajouter plusieurs étapes à une animation.

@keyframes example {
    0% {background-color: red;}
    50% {background-color: blue;}
    100% {background-color: yellow;}
}

animation-name

Une fois le pattern d’animation créé, il faut le rappeler dans une règle CSS :

.classeanime {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}

Ainsi à l’affichage de la classe .classeanime l’arriére plan passera du rouge au jaune en 4s grâce à la propriété animation-duration.

Pré-fixage du CSS

Comme d’autre propriété avancé en CSS il est nécessaire d’utiliser des préfixes pour améliorer la compatibilité. Un préfixe est comme son nom le laisse entendre, une entité qu’on ajoute avant le nom d’une propriété.

@-webkit-keyframes example {
    0% {background-color: red;}
    50% {background-color: blue;}
    100% {background-color: yellow;}
}
@-moz-keyframes example {
    0% {background-color: red;}
    50% {background-color: blue;}
    100% {background-color: yellow;}
}
@-o-keyframes example {
    0% {background-color: red;}
    50% {background-color: blue;}
    100% {background-color: yellow;}
}
@keyframes example {
    0% {background-color: red;}
    50% {background-color: blue;}
    100% {background-color: yellow;}
}

Ainsi le code sera lut sur des navigateurs qui ne sont pas nativement compatible avec la fonctionnalité. L’exemple est inutilement complet pour le cas des @keyframes mais pour des propriétés plus avancée cela s’avérera nécessaire.

div {
    width: 100px;
    height: 100px;
    background-color: red;
    -webkit-animation-name: example;
    -moz-animation-name: example;
    -o-animation-name: example;
            animation-name: example;
    -webkit-animation-duration: 4s;
    -moz-animation-duration: 4s;
    -o-animation-duration: 4s;
            animation-duration: 4s;
}

Vous remarquez que le préfixe ne se place pas sur le sélecteur comme on l’observe pour la @keyframes. C’est parce-que la keyframe est une propriété qu’on appelle dans une déclaration. Elle est particulière car elle est créer à l’extérieur d’une déclaration avant d’y être rappel.

Les propriétés indispensables

Il existe plus de 300 propriété modifiable en CSS et la liste grandi. Avant de les connaitre toutes ils faut déjà savoir utiliser les plus utilisés.

.listedespropriétés {
 color : black;
//affecte la couleur du texte.
 background : white;
//affecte l'arriére plan de l'élément.
 width :50px;
//défini la largeur d'un élément.
 height : 100%;
//la hauteur de l'élément.
 margin : 0px;
//espace entre la bordure et les autres éléments.
 padding : 0px;
//espace entre la bordure et le contenu.
 display : block;
//modifie l'affichage de l'élément.
 float : left;
//détermine l'alignement de l'élément.
 }

 

 

© 2018 Occitaweb formation WordPress et média sociaux