Partie CSS

Le langage CSS

LeLe langage CSS sert à appliquer un style visuel à une page web, il va permettre de colorer, positionner, appliquer des effets visuels, etc..

Mise en place d'une feuille de style

Il y a plusieurs façons de procéder, le plus habituel est de créer un fichier de style ( un fichier d'extension css) et de l'associer à la page web avec une balise link placée dans la partie head du document html; ci-dessous, on associe le fichier mystyle.css avec la page web:

Contenu du fichier de style

Règle CSS

Une règle CSS se caractérise par deux parties:

- Le sélecteur de balises qui précise à quelles balises du document html s'applique le style

- Les déclarations de style sont définies entre accolades et séparées par des points virgules " ; ",

les déclarations forment des couples propriétés : valeurs;

Exemple: si on veut que le texte du body soit écrit en Arial de taille 12 pixels, on doit préciser les valeurs des deux propriétés font-family et font-size pour le sélecteur body ; si on veut aussi que tous les paragraphes aient le texte écrit en rouge, on doit régler la propriété color du sélecteur p ; ces règles seront écrites:

body {
font-family: Arial;
font-size: 12px;
}

p {

color: red;

}

Le vocabulaire:

Ci-dessus on a réglé que tous les paragraphes de la page html ont la couleur de texte rouge. Le sélecteur p représente toutes les balises <p> dans la page html qui utilise cette feuille de style.

Remarque: Il y a plusieurs façons de définir la couleur rouge d'un texte (ou la couleur de fond d'un élément):

Par son nom, color : red;
Par son code rgb, color : rgb(255, 0, 0);

Avec sa notation hexadécimale du code rgb précédé de #: color : #FF0000;

Le sélecteur p s'applique donc à tous les paragraphes de la page web, comment faire si on veut ne décorer que certains? Il faut utiliser les identifiants et les classes, c'est l'objet du chapitre suivant.

Attributs id et class

Pour pouvoir appliquer un style à un élément unique (ou une ensemble d'éléments) on peut les repérer:

- L'identifiant ( id) permet d'identifier un élément qui doit être unique.

- La classe (class) permet d'identifier un ensemble d'éléments qui doivent avoir le même style ( ces éléments peuvent être des balises différentes).

C'est dans la partie html que l'on définit l'identifiant avec l'attribut id ou la classe avec l'attribut class.

La valeur de ces deux attributs sera utilisée afin d'imposer un style graphique aux éléments associés depuis le langage CSS.

Voir des exemples:

Exemple1: un div avec un identifiant ( un div est un conteneur rectangulaire de type block)

Dans le HTML:

Dans le fichier de style CSS, on définit les règles CSS:

- Si le style de l'élément d'identifiant fond doit avoir un fond gainsboro , on définit une règle CSS pour l'identifiant fond ( dans le css un id est précédé d'un #)

- Si tous les paragraphes doivent avoir le texte en rouge et un fond blanc, on définit une règle CSS pour le sélecteur p:

Exemple2 :

Dans le HTML, on veut qu'un titre (balise h1) et un texte gras ( balise b) soient de la classe metal:

Les règles CSS on définit la règle pour la classe metal ( un nom de classe commence par un . dans le fichier css), ici on définit que les éléments de cette classe doivent avoir le texte de couleur steelblue ,

Testez le code html en cliquant sur les liens:

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Liens vers id</title>

Compléter le fichier de style pour obtenir le rendu suivant appliqué au code html ci-dessous:

Ajouter les pages html 1 et 2 au projet pour tester les liens hypertextes du code html.

<!DOCTYPE html>

<head>

</head>

<body>

<h1 class="niveau1">Entête</h1>

<nav>

<br/>

</nav>

</header>

<main>

<h2>Section 1</h2>

</section>

<h2>Section 2</h2>

</section>

</main>

Pied de page

</footer>

</body>

</html>

Les sélecteurs

Le CSS permet pour sélectionner un élément conteneur puis d’indiquer le chemin jusqu’à une balise à styliser dans ce conteneur.

Les sélecteurs sont des symboles qui vont pouvoir donner des informations précises afin de sélectionner une balise et lui appliquer un style.

Exemple: ci-dessous on veut décorer ( appliquer une règle) uniquement les titres de niveau h2 qui sont dans l'élément qui possède l'id section1:

Cela se code dans le CSS:

#section1 h2 {
border: 1px red solid;
}

Dans le code HTML, il y a un élément h2 dans le conteneur d'Id section1 ( entouré en rouge ci-dessous):

Sélecteurs exotiques

Supposons que l'on cherche à stylisér toutes les balises div qui commencent par le mot truc qui se trouvent dans l'élément conteneur d'identifiant "conteneur_global"

Cela se code ^="truc", le ^ placé devant = veut dire tout ce qui commence par:

En rouge, toutes les balises html concernées:

Le code html:

<div class="Noir">Noir</div>
<div class="truc Rouge">truc Rouge</div>
<div class="Noir_truc">Noir_truc</div>
</div>

Le code CSS:

#conteneur_global div[class^="truc"]

{

background-color:green;

color:white;

}

le rendu:

Avec le tilde ~ à la place du ^ il n’est pas impératif que le nom commence par truc, peu importe où se trouve le mot truc à partir du moment où il est écrit et clairement séparé :

Le CSS:

#conteneur_global div[class~="truc"]

{

background-color:green;

color:white;

}

En rouge les balises html concernées:

<div class="Noir">Noir</div>
<div class="truc Rouge">truc Rouge</div>
<div class="Noir_truc">Noir_truc</div>
</div>

le rendu:

Avec l'étoile * toutes les balises qui contiennent la suite de caractères "truc" sont concernées:

#conteneur_global div[class*="truc"] {
background-color:green;

color:white;
}

En rouge les balises html qui sont concernées:

<div class="Noir">Noir</div>
<div class="truc Rouge">truc Rouge</div>
<div class="Noir_truc">Noir_truc</div>

<div class="NoirTruc">NoirTruc</div>
</div>

Le rendu

Les pseudos-classes

Appliqués aux liens

Un lien possède plusieurs états qui sont sauvegardés par le navigateur. Avec une pseudo classe on peut modifier l'apparence du lien.

Soit un code html avec deux liens:

Par défaut, le rendu sera:

- si le lien page1 n'a pas été cliqué, il est bleu et souligné

- si le lien page2 a été cliqué, il est violet et souligné:

La pseudoclasse link va permettre de modifier l’aspect des liens :

a:link {
color:red; /* on colore en rouge au lieu de bleu par défaut */
text-decoration:none; /* on ne veut pas de soulignement */
}

Le rendu si aucun des liens n'a été cliqué:

Si un lien a déjà été cliqué, il apparaît en violet à l’écran mais pas souligné.

L’écriture suivante va changer en vert un lien déjà cliqué avec la pseudo classe visited:

a:visited {
color:green;
}

Lorsque la souris survole un lien, la pseudoclasse hover peut être utilisée.

Ci-dessous le lien sera rose et souligné quand on le survole, sa taille sera le double de la taille par défaut (2em) au moment du survol:

a:hover {

color:pink;

text-decoration:underline;

font-size: 2em;

}

le rendu au moment du survol:

Dans la pratique, il est fréquent d’associer certaines pseudoclasses. Par exemple si on veut que les liens apparaissent identiques cliqués ou pas, on peut coder:

a:link, a:visited {
color:purple;
text-decoration :none;
}

Appliqués aux textes

Les pseudoclasses permettent d’accéder à des éléments particuliers d'un texte. Ainsi le style ::first-line va mettre en gras et rouge la première ligne de texte de tout élément ayant l'identifiant fond.

Le CSS:

#fond::first-line {

font-weight:bold;

color:red;

}

Le HTML:

Le rendu:

Un autre cas pratique est ::first-letter qui s'applique à la première lettre du texte d'identifiant fond:

#fond::first-letter {

font-weight:bold;

color:green;

font-size:2em;

}

Les pseudoclasses ::before et ::after permettent de faire apparaître un texte avant (before) ou après (after) un autre texte.

Le CSS:

.prix {

color:green;

}

.prix::after {

content:"€" ;

margin-left:2px ;

}

Le html:

Le rendu ajoute le symbole € après le 15:

Écrire les styles et les sélecteurs CSS pour le code HTML ci-dessous, vous trouverez dans les commentaires ce qui est demandé au niveau du CSS. Vous ne devez pas modifier le code HTML !

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Css selector</title>
</head>
<body>
<header class="topPage">
<nav>
<ul>



<li><a href="#" title="Css selector 1">liens 1</a></li>
<li><a href="#" title="Css selector 2">liens 2</a></li>
<li><a href="#" title="Css selector 3">liens 3</a></li>
<li><a href="#" title="Css selector 4">liens 4</a></li>
<li><a href="#" title="Css selector 5">liens 5</a></li>
</ul>
</nav>
</header>
<section>
<header>

<h1>Titre</h1>
<h4>Chapeau</h4>
</header>

<article>

<header>
<span> Ecrit le 02/04/2024 </span>
</header>



<h3>sous-titre</h3>
<p> blabalabaalallalalalbalalalal</p>

<footer>
<span> Auteur : Mobilette</span>
</footer>
</article>
<article>
<header>
<span> Écrit le 02/04/2024</span>
</header>

<h3>sous-titre 2 </h3>
<p>blabalabaalallalalalbalalalal</p>

      <div class="box_1">1</div>
<div class="box_2">2</div>
<div class="box_3">3</div>

<div class="megaBox_1">1</div><div class="megaBox_2">2
</div><div class="megaBox_3">3</div>
<footer>
<span>Auteur: Louis Stiti</span>
</footer>
</article>
</section>
<footer>

<nav>
<ul>
  


<li><a href="#" title="Css selector 6">liens 6</a></li>
<li><a href="#" title="Css selector 7">liens 7</a></li>
<li><a href="#" title="Css selector 8">liens 8</a></li>
</ul>
</nav>
</footer>
</body>
</html>

Le positionnement

Les balises conteneurs de type block comme div peuvent être positionnées n’importe où dans la page html. Il existe en CSS les propriétés left, top, right et bottom qui permettent d’indiquer la distance qu’il y a entre le div et autre chose. Il est donc possible d’écrire en CSS:

div {

left: 100 px;

}

Le div est donc à 100 pixels à gauche de quelque chose mais de quoi? Il faut combiner les propriétés top, right, bottom et left avec la propriété position qui doit toujours être précisée avant le côté top, right...

La propriété position permet d’indiquer par rapport à quoi vont être calculées les distances. Les valeurs possibles sont static, relative, absolute et fixed.

Par défaut, la valeur de position est static. Avec cette valeur, le bloc ne peut pas être positionné librement. Il s’affiche en fonction des éléments qui le précèdent.

La valeur relative permet de se situer par rapport à la position actuelle du conteneur de ce bloc, c’est-à-dire que les 100 pixels à gauche seront 100 pixels par rapport au conteneur contenant le bloc qui a ce style.

La valeur absolute prend la page comme référence pour positionner le bloc . Dans ce cas, le décalage (left : 200px; pour contenu2 ) se fait par rapport au coin en haut à gauche de la page et n’est plus soumis au flux qui fait que les éléments sont les uns sous les autres.

La propriété z correspond à la profondeur d’un élément par rapport aux autres.

Le positionnement peut se faire selon les trois axes x, y et z :

x : l’abscisse. Afficher à gauche ou à droite se fait avec les propriétés left et right.

y : l’ordonnée. Il y a les propriétés top et bottom pour positionner en haut et en bas.

z : la profondeur est choisie en donnant une valeur à la propriété z-index.

Par défaut, tous les éléments sont à la même profondeur. Pour en placer un devant un autre, il suffit d’utiliser la propriété z-index, Plus la valeur est grande, plus l’élément est devant.

z-index ne peut être utilisée que si la propriété position est sur relative, absolute ou fixed.

On ajoute un z-index à contenu1 pour le faire passer devant:

La dernière option de position est fixed, le bloc est fixé à un endroit de la page. C'est pratique par exemple pour mettre au premier plan un menu ou un bandeau au sommet de la page avec z-index. Ainsi si on descend plus bas dans la page, le top restera toujours affiché à l’écran en haut de la page. Il faut alors bien gérer les autres zones qui sont derrière pour que tout reste accessible à l’utilisateur.

La propriété display:flex

On a vu dans la partie html qu'une balise in-line peut devenir block et l'inverse avec la propriété display.

Cette propriété est utile pour l'agencement des éléments notamment avec display: flex

Cette propriété fera que tous les enfants du conteneur seront des éléments de type flex, Cela va permettre de les répartir automatiquement dans l’espace qu’ils peuvent occuper. Par défaut, ils seront affichés en ligne.

Il y a différents paramètres qui peuvent être indiqués pour gérer le positionnement. Si les éléments doivent se positionner en colonne et non en ligne, alors la syntaxe du CSS sera flex-direction:column :

Les notations possibles sont flex-direction:row (en ligne) :

flex-direction:row-reverse: en ligne et en commençant par afficher le dernier élément:

En colonnes avec flex-direction:column:

En colonne invérsée avec flex-direction:column:

Une autre propriété de flex est la possibilité d’indiquer si les éléments enfants seront sur une seule ligne, ou une seule colonne, ou s’ils peuvent passer à la ligne.

La commande permettant cela est flex-wrap qui peut avoir trois valeurs:

wrap : permet aux éléments de passer à la ligne.

nowrap : les élément resteront sur la même ligne. C’est la valeur par défaut.

wrap-reverse : fait passer les éléments à la ligne, en les affichant dans l’ordre inverse.

Il est possible de simplifier l’écriture avec la commande flex-flow. Par exemple :

flex-flow: column wrap;

Il est possible de donner des indications pour les éléments flexibles, c’est-à-dire soumis à la commande flex, de façon à ce qu’ils soient redimensionnés automatiquement. Les commandes sont flex-grow, flex-shrink et flex-basis.

flex-grow : donne la capacité à un élément de s’étirer dans l’espace restant.

flex-shrink : donne la capacité à un élément de se contracter.

flex-basis : taille initiale d’un élément.

Les valeurs par défaut de ces propriétés sont : flex-grow: 0, flex-shrink: 1 et flex-basis: auto.

Si un élément a pour propriété flex-grow: 1, il occupera l’espace restant de son conteneur.

Si un autre élément a la propriété flex-grow: 2, il occupera deux fois plus d’espace que l’élément avec la valeur 1.

Si par contre la commande est flex-grow: 0, l’élément ne sera pas redimensionné.

Une dernière commande, justify-content, va permettre d’organiser les éléments horizontalement en les faisant s’aligner à gauche du conteneur avec flex-start ou en les alignant à droite avec flex-end. Ils peuvent être centrés avec center.

Deux dernières options peuvent être bien pratiques : space-between qui va répartir avec un même espace chaque élément,

et space-around, où l’espace entre le bord du conteneur et le premier élément et l’espace entre le dernier élément et le bord du conteneur représentent la moitié de l’espace entre deux éléments.

Pour finir avec flex, un site permet de s’exercer en déplaçant une grenouille sur un nénuphar avec les règles de CSS :

http://flexboxfroggy.com/#fr

Le débordement

Le débordement (overflow) permet de définir la façon dont est géré le contenu qui déborde, c’est-à-dire ce qui ne rentre pas dans le bloc.

Les options pour la propriété overflow sont les suivantes :

inherit : comme d’habitude, il récupère les règles d’overflow de son parent.
hidden : dans ce cas, tout ce qui ne rentre pas dans le bloc n’est pas affiché.
scroll : cette option affiche un ascenseur à l’intérieur du bloc qui récupère ce style, cette option affiche un ascenseur même s'il ne sert à rien
auto : cette option analyse le contenu du bloc s’il y a plus de contenu à afficher que le bloc n’a de place il affiche un ascenseur (comme scroll). Par contre, si tout s’affiche et que tout est visible, il n’affichera pas l’ascenseur.

Avec ascenseur:

Padding et Margin

Il s’agit de deux propriétés qu’il faut absolument maîtriser pour leur importance dans l’affichage esthétique d’une page.

La première, padding, permet de définir la marge à l’intérieur d’un bloc. Sans ce padding, si le bloc contient du texte, il sera collé au bord du bloc.

Pour aérer il est possible d’écrire :

padding : 4px;

;

Pour appliquer des valeurs différentes à chacun des côtés, l’écriture peut se faire en notant la marge en haut (4px) en premier puis celle de droite (5px), celle du bas (3px) et la marge intérieure gauche (6px) pour finir.

padding : 4px 5px 3px 6px;

De son côté, margin va être très utile pour organiser l’espace entre les blocs. Ces deux propriétés utilisent les mêmes règles d’écriture, il sera possible d’avoir :

/* en haut:2, à droite: 2, en bas:3, à gauche:10 */

margin : 2px 2px 3px 10px;

Ci-dessous des marges de 10 px autour de chaque div:

La propriété margin peut être utilisée pour centrer un bloc, dans ce cas ce sera la valeur auto qui sera appliquée. Avec cette valeur, le navigateur calculera lui-même la marge.

margin : 0 auto;

En utilisant ce qui a été vu précédemment, réaliser le bandeau ci-dessous qui propose 4 liens hypertextes (boutons de navigation) vers les sites web de Pronote, Qwant, Pix et Gmail:

Vous devrez rechercher certaines fonctionnalités CSS sur le web comme la gestion des bordures (border) et de la fonte d'un texte (font-family; font-size).

Les variables

CSS permet de stocker des informations dans des variables. Par exemple si on utilise de nombreuses fois la même couleur, il est possible de donner un nom à cette couleur, pour ensuite utiliser ce nom à la place de la couleur.

Le nom devra commencer par deux tirets : --ma-couleur.

On utilise ensuite le sélecteur :root qui pointe à la racine du document. Ce sélecteur est placé en premier ( en haut) dans le fichier CSS:

:root {
--couleur-fond:#007DB7;

--marge_gauche:10px;

}

Pour utiliser une variable pour l'élément d'ID contenu, on coderait :

#contenu {
background-color : var(--couleur-fond);

margin-left: var(--marge_gauche);
}

Les décorations

propriété box-shadow :

Ajoute une ombre portée.

Exemple: box-shadow:0px 0px 10px 5px grey inset;

box-shadow va créer une ombre portée sous le bloc, comme s’il était surélevé sur la page. Les deux premières valeurs, ici à 0px, indiquent la position x et y de l’ombre par rapport au bloc. La troisième valeur 10px, indique que l’ombre a un flou qui va s’étendre sur 10 pixels. La valeur 5px indique la taille de l’ombre. La quatrième valeur est pour la couleur de l’ombre, ici du grey, inset indique que l'ombre est à l'intérieur du bloc.

Il est possible de créer plusieurs ombres, une extérieure et une intérieure, en les séparant d’une virgule :

box-shadow:0px 0px 10px 5px grey inset, 0px 0px 5px 2px black;

Il est possible de faire des dégradés en CSS, chaque navigateur n’accepte pas la même écriture.

Le site http://www.colorzilla.com/gradient-editor/ propose un générateur qui facilite l’écriture et aide à produire un code valable sur tous les navigateurs.

background: -moz-linear-gradient(to top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);

Pour Firefox, le mot to top indique que le dégradé démarre d'en bas vers le haut. Au début, à 0%, il a une couleur de départ (#1e5799), puis le dégradé se fait automatiquement vers le haut sur la moitié de la zone à peindre (50%) avec la seconde couleur (#2989d8). Puis à 51% de la hauteur totale, un autre dégradé s’effectue avec une nouvelle couleur (#207cca). Enfin, le dégradé se termine en haut de page (100%) avec une dernière couleur (#7db9e8).

L’écriture pour les autres navigateurs est similaire.

webkit (Chrome et Safari).
o (Opera).
ms (Microsoft).
moz (Mozilla Firefox).

background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);

background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);

background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);

Les animations

Il est possible de faire des animations en CSS. Cela se fait en deux étapes. Dans un premier temps, des images clés (keyframes) doivent être définies en utilisant le mot-clé @keyframes suivi du nom donné à l’animation ci-dessous blink_anim. Lors de l’utilisation de l’animation, il faut indiquer la durée. La définition de l’animation n’attend pas du temps, mais du pourcentage de temps.

@keyframes blink_anim {

0% { background-color: #3498db ; }

50% { background-color: #57a2d5 ; }

100% { background-color: #2a79ad ; }

}

Il est défini qu’au début de l’animation, à 0%, la couleur sera bleu (#3498db). à 50% du temps la couleur sera un autre bleu (#57a2d5), au bout de 1 seconde ce sera 100% et on aura encore un autre bleu. Et ce sera lors de l’utilisation avec la propriété animation que sera définie la durée de l’animation blink_anim :

#conteneur-global {

background-color:steelblue;

/*background: -moz-linear-gradient(to bottom, #1e5799 0%, #2989d8 50%, */

#207cca 51%, #7db9e8 100%);

display:flex;

justify-content: space-around;

border-radius:10px;

margin:50px 100px 10px 100px;

/* utilisation de l'animation */

animation: blink_anim 1s linear infinite;

}

Le mot-clé linear indique que le passage de 0 à 100 % se fera d’une manière constante. Il est cependant possible d’avoir une accélération au début ou à la fin pour donner une animation plus rythmée. Le site alsacreations propose à l’adresse http://www.alsacreations.com/tuto/lire/876-transitions-css3-transition-timing-function.html des illustrations permettant de comprendre ce concept d’accélération.

Si une animation est prévue pour durer uneseule seconde, elle ne dure pas longtemps. Par contre, selon l’accélération choisie, l’animation est plus rapide au début qu’à la fin en utilisant la valeur ease. La valeur ease-in est plus lente au début alors qu’ease-out commence avec une vitesse constante pour ralentir à la fin. La dernière valeur possible, ease-in-out, donne un ralentissement au début et à la fin.

Le dernier mot, infinite, indique que l’animation bouclera sans fin, c’est-à-dire qu’une fois arrivée à 100 % elle reprend à 0 %.

Responsive Design

Le responsive design est un style qui s’adapte en fonction de la taille de l’écran et de sa position (portrait ou paysage).

Le design s’adapte à condition que le webmaster ait prévu les adaptations. Il faut prévoir que si la taille de l’écran est comprise entre telles ou telles dimensions, que certains styles soient réécrits en conséquence.

Pour détecter la résolution de l’écran, on peut utiliser les media queries, qui « interrogent » l’écran pour avoir ces informations et savoir dans quelle résolution s’affiche la page HTML. Leur type de fonctionnement est le suivant : « si la zone d’affichage de la page a une dimension comprise entre 800px et 1200px, utiliser telle feuille de style. Si c’est une autre fourchette, utiliser d’autres styles. »

L’utilisation des media queries peut se faire directement au niveau de l’appel par la page HTML du fichier CSS.

Dans l’exemple suivant, le fichier ecran800.css sera chargé si l’affichage est destiné à un écran d’une largeur supérieure à 800 pixels et inférieure à 1024 pixels.

Créé avec HelpNDoc Personal Edition: Générer facilement des livres électroniques Kindle