Télécharger la présentation
La présentation est en train de télécharger. S'il vous plaît, attendez
1
Le CSS Principe de séparation du contenu et de la mise en forme
Lycée Marcel Rudloff ISN Baptiste Cerdan & Geoffrey Kugelmann
2
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)
3
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" />
4
Principe de base Code sans CSS Résultat sans CSS Résultat avec CSS
Fichier .css
5
Cibler une balise On cible la balise <p> en lui donnant un nom
[fichier .css] Résultat
6
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
7
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é
8
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
9
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
Présentations similaires
