HTML, CSS Accueil
Chapitres :
HTML et CSS Chapitre 6
mise en place du CSS
Comme déjà vu précédemment, le CSS se concentre sur la mise en forme de notre page Web. Ainsi, on comprend qu'il entretient des relations étroites avec les différents navigateurs en jeu.
Alors qu'officiellement la version 3 du CSS n'est pas totalement finalisée, et que des travaux de normalisation commencent déjà sur la version 4, on constate que cette version 3 est déjà bien stabilisée chez la plupart des navigateurs du marché.
Ayant proposé de très nombreuses fonctionnalités intéressantes venant compléter la version 2.1, cette nouvelle version fait consensus, et bien qu'encore en perpétuelle évolution, nous la considérons ici comme une base fiable, du moment que l'on exploite les pages Web avec des navigateurs « à jour ». Plus de détails ici: (Compatibility tables for support of HTML5, CSS3, SVG and more)
6.1 Comment insérer du CSS
Je vous présente 3 méthodes, celle qui est recommandée, et les 2 autres qui sont signalées ici pour que vous les connaissiez si vous les croisez. Il est plus facile de travailler sur un fichier à part, car en faisant ainsi plusieurs fichiers HTML peuvent se référer au même jeu de style CSS pour être uniforme.
6.1.1 <link> pour lier le HTML et le fichier CSS
C’est la méthode recommandée pour lier HTML et CSS dans la plupart des cas. La balise <link> est une balise HTML orpheline qui nous permet de mettre en place cette méthode. On remarque au passage que cette balise est à placer DANS LE HEAD, et qu’il faut y associer l’attribut rel="stylesheet".
Exemple:
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Premiers tests du CSS</title>
</head>
Dans ce cas, le fichier style.css doit être dans le même dossier que notre fichier HTML. Comme vu précédemment (avec <img>), on peut spécifier un chemin vers un dossier différent.
L’avantage de cette méthode est que le fichier HTML ne contient PAS de code CSS, car celui-ci est uniquement présent dans un fichier avec l’extension .css, qui lui-même contient exclusivement du code CSS, et aucun code HTML. Chacun cez soi, les choses sont plus claires. Autre avantage : si votre site comporte plusieurs pages (donc plusieurs fichiers HTML), toutes ces pages peuvent faire appel au MÊME fichier de style CSS afin d’uniformiser les styles dans toutes les pages de votre site Web.
6.1.2 <style> pour faire du CSS dans l'en-tête du HTML
(Peu recommandé) Au sein de l'en-tête <head> du fichier HTML, on utilise cette balise en paire pour insérer directement du code CSS dans le fichier HTML.
Dans ce cas les styles s’appliqueront à l’ensemble du fichier.
Exemple:
<style> /* mon code CSS à partir d’ici */
p {
color: blue;
}
</style>
6.1.3 Attribut style dans le corps du code HTML
(Très peu recommandé) Directement dans les balises HTML, utiliser l'attribut style.
Dans ce cas les styles s’appiqueront localement à la balise qui contient l’attribut.
Exemple:
<body>
<h1>Mon super site</h1>
<p style="color: blue;">Bonjour et bienvenue sur mon site !</p>
<p>Pour le moment, mon site est un peu <em>vide</em>. Patientez encore un peu !</p>
</body>
6.2 Structure du code CSS
Un code CSS se structure systématiquement en 3 composants successifs :
· Un nom de balise
Si par exemple je spécifie p, je vais pouvoir attribuer les propriétés d'apparence qui suivent à tous les paragraphes de ma page.
· Des propriétés CSS
Ici je spécifie les propriétés auxquelles je veux attribuer des valeurs spécifiques.
· Des valeurs attribuées à la propriété
Ici je donne les valeurs aux propriétés.
Exemple:
h1, em
{
color: blue;
}
Ici, tous mes titres de niveau 1 (mes balises <h1>) et mots en italique (mes balises <em>) auront leur texte coloré en bleu.
6.3 CSS, règles de base :
· Tout comme le C, une commande de CSS se termine par un point-virgule
· Les commentaires sur des lignes multiples se codent comme en C :
/* voici
un exemple de commentaire
sur plusieurs lignes dans mon fichier CSS */
· Tout comme HTML, CSS n'est pas en soi sensible à la casse. Mais il est de bon goût de respecter la casse pour les balises, pour respecter les normes XML.