Cours CSS

CSS
Comment enjoliver sa page web
Timothey MAHIEUX – Intervenant

tmahieux@myges.fr
FONCTIONNEMENT
Principe du langage CSS
LES SÉLECTEURS
Les sélecteurs et les propriétés
associées
FLEXBOX
Le module des boîtes flexibles
01
Cascading Style
Sheets ?
#chuck-norris {
color: #BADA55
}
Qu’Est-Ce Que Le CSS ?
▪ Langage par feuilles de style
▪ Permet de décrire l’apparence d’un document HTML (ou XML)
▪ Décrit comment les éléments d’une page doivent apparaître à l’écran

Comment Ça Fonctionne ?
▪ Fichier textuel à part pour y inscrire le code CSS
▪ Intégré dans la balise <head> d’une page HTML via une balise <link>
▪ <link href="chemin/vers/fichier/de/style.css" rel="stylesheet">
▪ L’attribut "rel" permet de définir le type de fichier qui est lié
NOTE : Il est aussi possible d’intégrer directement le CSS dans la page HTML via une balise <style></style>,
ou encore directement dans chaque balise, mais cela rend le code beaucoup plus difficile à maintenir
Décomposition Du Code CSS
p /* Sélecteur qui détermine sur quel élément le style sera appliqué */
{ /* Accolade ouvrante pour le début des styles associés à ce sélecteur */
color : red; /* Propriété suivie de sa valeur */
} /* Accolade fermante pour la fin des styles associés à ce sélecteur */
NOTE : La ligne qui concerne une propriété se termine toujours par un point-virgule ;
02
Les Sélecteurs
TODO => Exercice Intégration
Les Sélecteurs
▪ Une balise p | h1 | body | div
Sélecteur d’une balise HTML
▪ Une classe .truc | .machin | .bidule

Sélecteur d’un attribut class= qui peut être utilisé plusieurs fois dans une page HTML
▪ Un id #un_id | #un_autre_id
Sélecteur d’un attribut id= qui peut être utilisé une seule fois dans une page HTML
▪ Une classe/id de balise p.une_classe | p#un_id

Sélecteur d’une balise qui possède une classe ou un id spécifique
Quelques Sélecteurs Plus Avancés
▪ Plusieurs sélecteurs :
h1, h2, h3, title, tr, .class, #id
▪ Sélectionner un élément contenu dans un autre :
p>b /* Les balises <b></b> qui sont directement incluses dans les paragraphes */
▪ Seulement si l’élément est survolé à la souris (ici c’est une pseudo-classe) :
a:hover /* Les styles associés seront appliqués lors du survol par le curseur */
▪ Sélectionner tous les éléments :
* /* Utilisé notamment pour modifier les marges du navigateur */
▪ Sélectionner un attribut particulier :
[attribut="valeur"] /* Selon la présence ou la valeur d’un attribut
03
Les Propriétés CSS
TODO => Exercice Sélecteurs
Les Propriétés CSS : Le Texte
▪ color /* Modifie la couleur du texte */
▪ font-size /* Modifie la taille de la police */
▪ font-family /* Modifie la police de caractères */
▪ font-weight /* Modifie l’épaisseur de la police de 0 à 1000 par tranche de 100 */
▪ text-decoration /* none, underline, overline, line-through */
▪ line-height /* Modifie la taille des interlignes */
▪ opacity /* de 0 à 1, modifie la transparence de l’élément */

Les Propriétés CSS : Le Positionnement
▪ margin /* Modifie l’espace situé autour du bloc */
▪ padding /* Modifier l’espace qui sépare le bloc de son contenu */
▪ display /* block, inline, none, flex | Le type d’affichage */
▪ width /* Modifie la largeur de l’élément */
▪ height /* Modifie la hauteur de l’élément */
▪ box-sizing /* border-box pour que les tailles prennent en compte les marges */
▪ z-index /* Défini l’ordre de superposition de l’élément */

Les Propriétés CSS : Le Design
▪ border /* Ajoute des bordures à l’élément | border: solid 3px red ; */
▪ border-top /* Ajoute une bordure sur le haut de l’élément ou bottom, left, right */
▪ background-color /* Ajoute un fond de la couleur choisie à l’élément */
▪ overflow /* Défini comment le contenu supplémentaire doit être traité */
▪ box-shadow /* Ajoute une ombre sur l’élément (avancé) */
▪ transition /* Ajoute une transition lorsque l’élément apparaît (avancé) */
NOTE : Il est aussi possible de créer ses propres variables en CSS grâce aux « custom
Le Positionnement
▪ Plusieurs possibilités avec la propriété position : absolute ou relative ou static ou sticky
▪ static est le positionnement par défaut
▪ relative positionne en fonction de l’élément parent (élément dans lequel il se trouve)
▪ absolute positionne toujours à un endroit spécifique sur la page
▪ sticky positionne toujours à un endroit spécifique sur l’écran (y compris au scrolling)
NOTE : Aide au positionnement : https://developer.mozilla.org/fr/docs/Web/CSS/position

Une Page HTML Avec Une Feuille De Style CSS
<p class="stats"> img
Nous réalisons vos exercices de stats sur Excel {
width: 350px;
</p>
}
<a href="https://exocel.fr" rel="stylesheet" class="stats"> .stats

{
Retrouvez le dernier exercice ici
border: solid 1px darkred;
</a> font-size: 40px;
}
<p id="chuck-norris">Je suis Chuck Norris !</p>

#chuck-norris
{
<img src="portrait.png" alt="Photo de Chuck-Norris"> color:: #BADA55;
}
03
Display : Flex
Les boites flexibles : Flexbox
Comment Ça Fonctionne Flexbox ?
▪ Il faut que la valeur de la propriété display soit égale à flex (ou inline-flex)
▪ Les éléments enfants (contenus à l’intérieur) obtiennent automatiquement display: flex ;
▪ Propriété flex-direction ayant comme valeur :
row ou row-reverse pour avoir un agencement en ligne
column ou column-reverse pour avoir un agencement en colonne

Les Axes De Flexbox ?
▪ Un axe primaire défini par la propriété flex-direction
▪ Un axe secondaire qui est perpendiculaire à l’axe primaire
Contenu
Axe principal flex-direction: row
Axe principal
flex-direction: Contenu
Contenu Contenu Contenu column
Contenu
Propriétés Flexbox
▪ flex-wrap: wrap /* Ajoute un retour à la ligne des éléments s’ils sont trop grands */
▪ align-items: flex-start /* Aligner les éléments sur le début de l’axe secondaire */
▪ align-items: flex-end /* Aligner les éléments sur la fin de l’axe secondaire */
▪ align-items: center /* Aligner les éléments au centre de l’axe secondaire */
▪ justify-content: flex-start /* Aligner les éléments au début de l’axe principal */
▪ justify-content: center /* Aligner les éléments au centre de l’axe principal */
▪ justify-content: space-between /* Équilibrer l’espace entre les éléments */

04
Medias queries
TODO : Froggy Flexbox
C’est Quoi Les Médias Queries ?
▪ La propriété @media permet de définir des styles uniquement pour une taille d’écran
▪ Permet de mettre en place notamment du responsive-design
@media screen and (min-width: 500px){
body{
background-color: deepskyblue;
}
Comment Utiliser Les Médias Queries
▪ Les types de médias : all, print, screen et speech (lecture audio)
▪ Plusieurs opérateurs : and, not et only
@media screen (min-width: 300px) and (max-width: 500px) {
body{
background-color: deepskyblue;
}
Pour aller plus loin
=> Glossaire des propriétés courantes CSS (Sur OpenClassroom)
● https://course.oc-static.com/courses/1603881/Glossaire+des+propri%C3%A9t%C3%A9s+CSS.pdf
=> Liste des pseudos-classes CSS
● https://developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes
=> CSS avec exemples
● https://www.w3schools.com/Css/default.asp
=> Tout sur les Médias Queries
● https://developer.mozilla.org/fr/docs/Web/CSS/Media_Queries/Using_media_queries
Merci !
Des questions ?
tmahieux@myges.fr
timotheymahieux.fr
CREDITS: This presentation template was created by Slidesgo, including

icons by Flaticon, and infographics & images by Freepik

Cours CSS

Transféré par

Droits d'auteur :

Formats disponibles

Cours CSS

Transféré par

Informations du document

Description originale:

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cours CSS

Transféré par

Droits d'auteur :

Formats disponibles

CSS

Comment enjoliver sa page web

Timothey MAHIEUX – Intervenant

▪ Langage par feuilles de style

▪ Permet de décrire l’apparence d’un document HTML (ou XML)

▪ Décrit comment les éléments d’une page doivent apparaître à l’écran

▪ <link href="chemin/vers/fichier/de/style.css" rel="stylesheet">

▪ L’attribut "rel" permet de définir le type de fichier qui est lié

p /* Sélecteur qui détermine sur quel élément le style sera appliqué */

{ /* Accolade ouvrante pour le début des styles associés à ce sélecteur */

color : red; /* Propriété suivie de sa valeur */

} /* Accolade fermante pour la fin des styles associés à ce sélecteur */

▪ Une classe .truc | .machin | .bidule

▪ Une classe/id de balise p.une_classe | p#un_id

▪ color /* Modifie la couleur du texte */

▪ font-size /* Modifie la taille de la police */

▪ font-family /* Modifie la police de caractères */

▪ font-weight /* Modifie l’épaisseur de la police de 0 à 1000 par tranche de 100 */

▪ text-decoration /* none, underline, overline, line-through */

▪ line-height /* Modifie la taille des interlignes */

▪ opacity /* de 0 à 1, modifie la transparence de l’élément */

▪ margin /* Modifie l’espace situé autour du bloc */

▪ padding /* Modifier l’espace qui sépare le bloc de son contenu */

▪ display /* block, inline, none, flex | Le type d’affichage */

▪ width /* Modifie la largeur de l’élément */

▪ height /* Modifie la hauteur de l’élément */

▪ z-index /* Défini l’ordre de superposition de l’élément */

▪ border /* Ajoute des bordures à l’élément | border: solid 3px red ; */

▪ background-color /* Ajoute un fond de la couleur choisie à l’élément */

▪ overflow /* Défini comment le contenu supplémentaire doit être traité */

▪ box-shadow /* Ajoute une ombre sur l’élément (avancé) */

▪ transition /* Ajoute une transition lorsque l’élément apparaît (avancé) */

▪ static est le positionnement par défaut

▪ relative positionne en fonction de l’élément parent (élément dans lequel il se trouve)

▪ absolute positionne toujours à un endroit spécifique sur la page

▪ sticky positionne toujours à un endroit spécifique sur l’écran (y compris au scrolling)

NOTE : Aide au positionnement : https://developer.mozilla.org/fr/docs/Web/CSS/position

<a href="https://exocel.fr" rel="stylesheet" class="stats"> .stats

<p id="chuck-norris">Je suis Chuck Norris !</p>

▪ Les éléments enfants (contenus à l’intérieur) obtiennent automatiquement display: flex ;

▪ Propriété flex-direction ayant comme valeur :

row ou row-reverse pour avoir un agencement en ligne

column ou column-reverse pour avoir un agencement en colonne

▪ Un axe primaire défini par la propriété flex-direction

▪ Un axe secondaire qui est perpendiculaire à l’axe primaire

Axe principal flex-direction: row

▪ align-items: flex-start /* Aligner les éléments sur le début de l’axe secondaire */

▪ align-items: flex-end /* Aligner les éléments sur la fin de l’axe secondaire */

▪ align-items: center /* Aligner les éléments au centre de l’axe secondaire */

▪ justify-content: flex-start /* Aligner les éléments au début de l’axe principal */

▪ justify-content: center /* Aligner les éléments au centre de l’axe principal */

▪ justify-content: space-between /* Équilibrer l’espace entre les éléments */

▪ Permet de mettre en place notamment du responsive-design

@media screen and (min-width: 500px){

▪ Les types de médias : all, print, screen et speech (lecture audio)

▪ Plusieurs opérateurs : and, not et only

@media screen (min-width: 300px) and (max-width: 500px) {

=> Glossaire des propriétés courantes CSS (Sur OpenClassroom)