Outils pour utilisateurs
Ceci est une ancienne révision du document !
Table des matières
Découverte du CSS
Le CSS (Cascading Style Sheets) décrit la présentation des documents HTML et XML. Il est normalisé par le W3C. Il permet aussi d'adapter les pages aux différents navigateurs, site RWD (Responsive Web Design).
Le CSS existe depuis les début du web mais la mise en forme était quasiment toujours obtenue grâce à des attributs des balises HTML. Depuis les années 2000 et le HTML4, il est recommandé de ne plus les utiliser et de passer par le CSS.
Aujourd'hui la référence devient la version CSS3.
Référence
- Référence du langage sur w3schools
- Référence du langage sur Mozilla
- Cours sur le HTML et le CSS sur OpenClassrooms
- Page officielle du CSS sur le site du W3C
- Validateur de feuille CSS sur le site du W3C
Les instructions CSS
Mise en œuvre recommandée
- Les mises en forme sont écrites dans une feuille de style (un fichier avec une extension “.css”).
- Les instructions de mise en forme sont groupées par type de balise grâce à des accolades.
- Chaque instruction est de la forme “type_de_mise_en_forme: valeur_de_mise_en_forme;”.
- Des commentaires peuvent être utilisés pour décrire les différentes mise en forme.
- Le fichier HTML doit contenir dans son entête le lien vers le fichier contenant les mises en forme :
...
<link rel='stylesheet' href='nom_feuille_de_style.css' type='text/css' />
...
Les commentaires peuvent prendre 2 formes.
- Sur une ligne, ils commencent par // et se terminent à la fin de la ligne
- Sur plusieurs lignes, ils commencent par /* et se terminent par */
Autres méthodes pour les mises en forme
Il est aussi possible, pour des pages simples, de mettre les commandes de mise en forme directement :
- dans le fichier HTML pour un ensemble de balise. On utilise dans l'entête la balise (<style> … </style>).
- dans le fichier HTML pour une balise. On utilise dans la balise l'attribut “style” (<h1 style=' … '>).
Éléments à mettre en forme
- Si la mise en forme s'applique à un type de balise (p { … }), ce type aura toujours cette mise en forme.
- Si la mise en forme s'applique à une classes de balise (.nom_de_classe { … }), toutes les balises possédant cet attribut classe sont concernées (dans le fichier HTML : <balise class='nom_de_classe'>).
- Si la mise en forme s'applique à une balise unique (#identifiant_unique { … }), seule cette balise est concernée (dans le fichier HTML : <balise id='identifiant_unique'>).
- Si la balise modifiée contient d'autres balises, les modifications s'appliquent en cascade.
Les balises, les classes et les identifiants peuvent se compléter mutuellement :
- p {toutes les balises paragraphes}
- p.info {uniquement les paragraphes de classe info}
- .info {tous les éléments de classe info qu'ils soit paragraphes ou titres de paragraphe ou autres
Exemple de modification en cascade : Si la couleur du texte est modifiée dans la balise <body>, tous les textes contenus dans la pages qu'ils soit de type <hx> ou <p> auront cette couleur (sauf si une nouvelle couleur est redéfinie pour un élément plus précis).
types de mise en forme
Il existe un très grand nombre de commande qui contiennent plusieurs possibilités. Les principales sont :
- color pour la couleur du texte. color: blue; écrit les textes en bleu
- background pour le fond. background-color: gray; passe le fond en gris, background-image: url(images/fond.jpg); utilise une image comme fond de page.
- margin et padding pour les marges et les espaces. margin-top: 10px; crée une marge (extérieur balise) de 10 pixels au dessus, padding-left: 10px; ajoute un espace (intérieur balise) de 10 pixels à gauche.
- border pour des encadrements. border: largeur type couleur; défini pour sa version raccourcie les propriétés de la bordure.
- font pour les polices. font-family: “Arial”, sans-serif; choisi la police Arial si elle est disponible ou une police sans-serif par défaut, font-size: 14pt; défini la taille de la police, font-style: italic; pour le style …
- …
De nombreuses propriétés permettent de fixer plusieurs éléments simultanément dans leur version raccourcie (border: largeur type couleur; font: style poids taille famille;).
Les couleurs peuvent être nommées par :
- leur nom HTML (red, green)
- le code RVB correspondant (#FF0000, #008000)
Exemple de site fournissant les correspondances couleur-nom-code.
Les dimensions peuvent être indiquées en :
- px pixels (taille écran)
- pt points (fonction de la résolution écran)
- % pourcentage (de la taille écran)
- cm centimètre (dimension précise)
Les marges et espacement
Comme pour le traitement de texte :
- Une marge est un espace à l'extérieur d'une page ou d'une zone.
- L'espacement est lui compris entre sa limite et son contenu.
Limites en marron et jaune, contenu en noir.
Mise en forme responsive
Une nouvelle présentation peut être facilement mise en place en changeant la feuille de style.
Le site peut s'adapter aux différents média (imprimante, ordinateurs, tablettes et smartphone) en utilisant une feuille de style dédiée à chaque média.
Pour mettre en place dans un fichier .html d'autres feuilles de style en plus de la feuille standard.
<!-- Définition des paramètres d'affichage --> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- Choix de la feuille de style par défaut --> <link rel="stylesheet" href="default.css" /> <!-- Choix d'une feuille de style alternative pour les écrans inférieurs à 500 pixels de large --> <link rel="stylesheet" media="screen and (max-width: 500px)" href="smartphone.css" /> <!-- Choix d'une feuille de style alternative pour une imprimante --> <link rel="stylesheet" media="print" href="print.css" />
Activités
- Création d'un premier site avec CSS
