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. Il est normalisé par le W3C. Il permet la séparation du contenu (HTML) et de sa présentation (CSS). De ce fait, il devient possible à l'utilisateur de choisir des présentation différentes et de les adapter aux tailles ou spécificité des médias de sortie (écran, tablette, smartphone, imprimante …). On parle de site RWD (Responsive Web Design).
Les feuilles de styles ont été développés, sous différentes formes, en même temps que les premiers navigateurs. Petit à petit, les différentes versions ont convergé vers le CSS. Le développement de la version 3 à débuté dès les années 2000 et le HTML4.
Aujourd'hui la référence devient la version CSS3.
Mise en œuvre
Méthode
- Les mises en forme sont écrites dans une feuille de style (un fichier séparé avec une extension “.css”).
- Le fichier HTML doit contenir dans son entête le lien vers le fichier contenant les mises en forme.
- Les instructions de mise en forme sont groupées par type de balise ou en fonction de l'attribut “class='xx'” des balises.
- Les instructions, sauf précision contraires, se répercutent aux balises de niveau inférieur.
- Les instructions, regroupées grâce à des accolades, sont 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.
<link rel='stylesheet' href='ma_feuille_de_style.css' type='text/css' /> ------------ // Mise en forme des balises titre de premier niveau h1 { font-family: sans-serif; font-size: 16pt; } // Mise en forme des paragraphes en général p { font-family: serif; font-size: 12pt; } // Mise en forme des paragraphes de classe intro <div class="intro"> p.intro { margin: 20px; color: gray; border 3px solid blue; }
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 (à éviter)
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
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).
Sauf précisions apportées dans une autre règle plus précise :
- Classes de balise .nom_de_classe { … } (toutes les balises inclues dans la classe)
- Type de balise : balise { … } (uniquement la balise)
- Élément2 dans élément1 element1 element2 { … } (élément = balise ou classe)
- Balise et classe balise.classe { … } (<balise class=“classe”>)
- Élément unique #identifiant_unique { … } (seul l'élément possédant l'attribut <balise id='identifiant_unique'>).
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
Adaptation aux médias
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" />
Alignement des blocs
Une balise de type bloc (<div><h1><p>…) utilise toute la largeur du média et la suivante se place en dessous.
Une balise de type inline (<span><cite>…) se place à la suite de la précédente.
Cette règle générale peut être modifiée par la propriété “float” (bloc flottant) valeur : none (par défaut) left, right … .
Mise en place précise des blocs
Une mise en place précise des différents blocs pour réaliser une interface est possible avec les "flexbox"
Compléments
- 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
Activités
- Création d'un premier site avec CSS
