Avant : mise en forme dans le code HTML, au milieu des données (balises
Cours Programmation Web - cours CSS en pdf | Cours informatique gratuit
CSS pour Cascading Style Sheets :
Langage de mise en forme et mise en page Origine : 1994-1995 (standard W3C en 1996) Toujours en développement (CSS3 depuis 2010) Extension d’un fichier CSS : .css Tutoriaux et wikilivres disponibles
On peut placer du code CSS à cinq niveaux :
Dans une balise, via un attribut (inline) Dans un script intégré dans l’entête de la page web (interne)
Solution à privilégier (pour les projets) :
Bénéficie des avantages du CSS (séparation données/mise en forme, facilité de maintenance, etc.)
Moins complexe que l’utilisation de plusieurs feuilles Possibilité de découper en plusieurs feuilles externes plus tard
Comme le nom l’indique, les styles peuvent être “en cascades”, i.e., la possibilité de combiner des déclarations de styles externe, interne ou inline Priorité accordée à la déclaration la plus proche de l’élément à styliser, en cas de conflit sur une même propriété Ordre décroissant de priorité : [feuille utilisateurice,] inline, interne, externe
Sélecteur : “pattern” qui sélectionne l’élément ou le groupe d’éléments sur lesquels va s’appliquer le style Types de sélecteur possibles :
Rappel : les balises HTML ont un attribut class Sélecteur de type nom de classe
.classe {
propriete1 : valeur1 ;
propriete2 : valeur2 ;
}
Sélecteur de type nom de classe :
Sélectionne tous les éléments de la page dont l’attribut class vaut classe Plusieurs éléments (et de balises différentes) peuvent appartenir à la même classe
Rappel : les balises HTML ont un attribut id Sélecteur de type identifiant #identifiant {
propriete1 : valeur1 ;
propriete2 : valeur2 ;
}
ñSélecteur de type identifiant :
Sélectionne l’élément de la page dont l’attribut id vaut
identifiant Unique pour chaque page !
Combinaison et comparaison avec les sélecteurs :
balise1, balise2 : tous les éléments balise1 et balise2
balise1 balise2 : tous les éléments balise2 imbriqués
dans un élément balise1
balise1>balise2 : tous les éléments balise2 dont le
parent est un élément balise1
[attrib] : tous les éléments ayant l’attribut attrib
[attrib = 'val'] : tous les éléments ayant la valeur val
pour l’attribut attrib
Cours Programmation Web - cours CSS en pdf | Cours informatique gratuit