publié le jeu. 11 janvier 2018

Class-header-css3

Les feuilles de style en cascade, généralement appelées CSS de l'anglais Cascading Style Sheets, forment un langage informatique qui décrit la présentation des documents HTML et XML. Les standards définissant CSS sont publiés par le World Wide Web Consortium (W3C). Introduit au milieu des années 1990, CSS devient couramment utilisé dans la conception de sites web et bien pris en charge par les navigateurs web dans les années 2000. Source Wikipedia

Lors de la dernière séance, nous avons vu le langage de de base à la création des pages web, le html. Maintenant nous allons voir comment mettre en forme notre page web avec le css, pour qu'elle soit moins austère qu'avec les styles par défaut utilisés par les navigateurs.

L'utilisation de ces deux langages répond à un principe de séparation du fond et de la forme qui est utilisé depuis longtemps dans le monde de l'édition. D'abord on écrit du contenu(le fond), ensuite, on met en forme le contenu.

Le document html décrit le contenu du document: le fond, et le document css décrit sa forme.

Nous allons d'abord voir comment lier une feuille de styles à notre page html.

Intégration de code css dans une page html

Il existe trois façons d'ajouter des règles css à une page.

1ère méthode(recommandée): Utilisation d'une feuille de style externe

On écrit le code css dans un fichier avec l'extension .css, par exemple style.css et on la lie dans l'en-tête du document(le <head>).

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

C'est la méthode préférée lorsque l'on a un ensemble de pages qui contiennent des styles identiques, cela permet d'alléger l'écriture du code et les requêtes vers le serveur de documents.

2e méthode: Utilisation d'une feuille de style interne

On intègre le code css au sein de balises <style> dans l'entête du document(le ).

<head>
    <style>
        body {
              background-color: linen;
             }
        h1 {
            color: maroon;
            margin-left: 40px;
            }
    </style>
</head>

Méthode pratique lorsque l'on a des documents html d'une seule page ou avec des styles spécifiques.

3e méthode(à éviter): Insertion directe dans les balises html

On utilise alors l'attribut style au sein de la balise ouvrante de l'élément à styler.

<p style="color: red; font-weight: bold;">
    Maintenant mon texte est écrit en rouge et en gras.
</p>

RENDU

Maintenant mon texte est écrit en rouge et en gras.

Cette méthode est peu recommandée car on mélange le fond et la forme, et aussi parceque cela rend le code html encore plus illisible qu'il ne l'est!

Syntaxe

Une règle css est constituée d'un sélecteur suivi d'un bloc de déclaration entre accolades. Chaque déclaration se termine par un point-virgule.

Les sélecteurs

Pour pouvoir savoir, quelles balises doivent être mises en forme dans le document html, on utilise des sélecteurs, p.ex:

Le bloc de déclaration

Il s'agit des règles de style à appliquer sur les élements sélectionnés, p.ex:

p {
    color: red;
    text-align: center;
}

Cette règle permet de colorier en rouge et de centrer tous les paragraphes du document html.

L'ensemble des mots-clés en css est listé sur l'excellent site MDN.

Commentaires

Les commentaires utilisent la syntaxe suivante: /* Un commentaire */

Ordre d'application des règles

Ce n'est pas pour rien qu'on parle de feuilles de styles en cascade, car en fait la difficulté en css est souvent que l'on définit des règles différentes pour des tags identiques, et qu'il faut savoir qu'elle règle va s'appliquer sur notre élément.

Par ordre de priorité croissante:

Sélecteurs plus élaborés

h1, h2, h3 {color: lime;}
div p {background-color: red;}

Des styles plus élaborés

Références des propriétés css

Cette référence CSS sur MDN liste toutes les propriétés standards CSS.

Tutoriels et exemples en ligne

Le site w3cschools présente des exemples éditables et dynamiques de situations courantes lors du stylage d'une page web, voir notamment les pages suivantes:

Déboguer son code css

Inspecteur de styles du navigateur

Pour savoir qu'elle règle a été utilisée par le navigateur, la console web du navigateur est d'un grand secours. On peut par exemple inspecter un élément et savoir qu'elles règles css s'appliquent et qu'elles règles css ont été supplantés(elles apparaissent barrées dans l'inspecteur de styles).

Pour accéder à la console web, taper CTRL+MAJ+K sur firefox, pour inspecter un élément il suffit de le sélectionner et de faire un clic droit de la souris puis de taper x.

Validateur du W3C

Le site du W3C propose comme pour le language html un (validateur)[http://jigsaw.w3.org/css-validator/#validate_by_input+with_options] de fichier css.

Matière: isn Mots-clés: html5 css css3