Le CSS Principe de séparation du contenu et de la mise en forme Lycée Marcel Rudloff 2016-2017 ISN Baptiste Cerdan & Geoffrey Kugelmann
Qu’est-ce que le CSS ? Et à quoi sert-il ? Pas de CSS sans HTML CSS = « Cascading Style Sheets » ou « Feuilles de Style en Cascade » Mise en forme d’une page HTML Création en 1996 Version la plus utilisée : CSS3 (même si il existe le CSS 4 depuis 2010)
Mise en place du CSS 3 manières de le placer : - fichier .css - dans l’entête du HTML <head> - dans les balises du HTML directement Syntaxe de base : <balise> { "propriété": "valeur"; } A placer dans le <head> de la page HTML afin de relier le CSS avec le HTML <link rel="stylesheet" href="style.css" />
Principe de base Code sans CSS Résultat sans CSS Résultat avec CSS Fichier .css
Cibler une balise On cible la balise <p> en lui donnant un nom [fichier .css] Résultat
Sélecteurs avancés Selecteur Effet * Sélectionner toutes les balises p h1 Permet de sélectionner toutes les balises <h1> contenues dans une balise <p> h1 +p Sélectionne la première balise <p> située après une balise <h1> P{title} Sélectionne les balises <p> qui ont title en attribut
Différents types de propriétés Remplacer color par une propriété Changer la taille : font-size Changer la police : font-family Changer la forme : font-style Souligner, barrer : text-decoration Alignement : text-align Couleur : color Bordure autour du texte : border Différents types de polices Exemple de code avec une propriété
Apparences dynamiques [Fichier CSS] Survol de la souris : hover Au clic de la souris : active Lorsque que le lien a déjà été consulté : visited
Ce qu’il faut retenir Pas de CSS sans HTML Travaille la forme d’une page WEB Cibler les balises HTML De nombreuses possibilités