Introduction à CSS
La syntaxe
Document constitue d’une suite de regles, chacune composee d’un selecteur, et de proprietes auxquelles on associe des valeurs.
Dans le xhtml :
selecteur {
propriete: valeur, valeur;
propriete: valeur, valeur;
propriete: valeur, valeur;
}
La syntaxe (exemple)
S´electeur : d´ecrit les balises affect´ees
Propri´et´ : caract´eristique de l’apparence
Valeur : apparence choisie
Structure :
h1 {
color: red;
}
La syntaxe (exemple 2)
S´electeur : d´ecrit les balises affect´ees
Propri´et´ : caract´eristique de l’apparence
Valeur : apparence choisie
Structure :
h1, h2 {
color: red;
}
L’imbrication
Possibilit´e de s´electionner une balise en fonction de son imbrication
S´electeur d´ecrivant une imbrication
S´electionne uniquement les balises ayant les anc`etres correspondants
Exemple : tous les <em> contenu dans des <h1> en vert
Fonctionnement g´en´eral
L’imbrication (exemple)
xhtml :
<body>
<h1>Mon <em>titre</em></h1> <h2>Premi`ere partie</h2> <p><strong>Fusce</strong>
vulputate lacus at
<em>ipsum</em>.Nam
condimentum.Nulla ut
mauris.</p>
<h2>Suite</h2>
<h3>Du contenu…</h3>
<p><em>C</em>urabitur
adipiscing, auris
non dictum aliquam.
</p>
</body>
css :
h1 em {
color: green;
}
Attributs class et id (description)
Par d´efaut, toutes les balises d’un type sont affect´ees.
Pour une s´election plus fine :
Utilisation de classes (peut correspondre `a plusieurs balises) Utilisation d’identifiants uniques
Attributs class et id (utilisation)
S’appliquent `a n’importe quelle balise Les classes :
Dans le xhtml, attribut class= »… »
Plusieurs classes possibles par balise :
class= »premiere deuxieme »
Plusieurs balises peuvent avoir la mˆeme classe
Dans le css, pr´efix´ee par un point : .premiere { … }
Les identifiants :
Dans le xhtml, attribut id= »… »
Une seule balise par identifiant
Un seul identifiant par balise
Dans le css, pr´efix´ee par un # : #premiere { … }
Attributs class et id (exemple)
xhtml :
<body>
<h1>Mon titre</h1>
<h2 id= »premier »>Premi`ere partie</h2>
<p><strong class= »rouge »>Fusce</strong>
vulputate lacus at
<em>ipsum</em>.Nam
condimentum.Nulla ut
mauris.</p>
<h2>Suite</h2>
<h3 class= »rouge »>Du contenu…</h3> <p><em>C</em>urabitur adipiscing, auris
non dictum aliquam.
</p>
</body>
css :
.rouge {
color: red;
}
#premier {
color: blue;
}
Priorit´e des r`egles
Il arrive que plusieurs selecteurs correspondent a une balise.
Les regles sont appliquees en cascade (depuis la premiere jusqu’`a la derniere)
Avec priorite a la plus specifique
1 Introduction
2 Fonctionnement de css
Description generale
Syntaxe
Fonctionnement géneral
3 Les proprietes disponibles
Valeurs de mesure et de couleur
Principales proprietes
4 Structuration de la page
Structure classique
5 Conclusion
Télécharger le cours complet
