C ascading S tyle
Css3 S heets
• CSS est le langage que nous utilisons pour styliser un
document HTML
• Cet autre langage qui vient compléter le HTML
Où écrit-on le CSS ?
Vous avez le choix car on peut écrire du code en langage CSS à trois endroits
différents :
•dans un fichier .css (méthode la plus recommandée) ;
•dans l'en-tête <head> du fichier HTML ;
Cela consiste à insérer le code CSS directement dans une balise <style>
à l'intérieur de l'en-tête <head> .
•directement dans les balises du fichier HTML Vous pouvez ajouter un
attribut style à n'importe quelle balise. Vous insérerez votre code CSS
directement dans cet attribut ,
Syntaxe CSS
• Un ensemble de règles CSS se compose d'un sélecteur et d'un bloc de
déclaration:
• Le sélecteur pointe vers l'élément HTML que vous souhaitez styliser.
Appliquer un style: sélectionner une balise
Dans un code CSS comme celui-ci, on trouve trois éléments différents :
• Des noms de balises on écrit les noms des balises dont on
veut modifier l’apparence exp: si je veux modifier les paragraphes
<p> je dois écrire p
• Des propriétés CSS: les « effets de style » de la page sont
rangés dans des propriétés.
• Les valeurs : pour chaque propriété CSS, on doit indiquer une
valeur
schématiquement,
une feuille de style
CSS ressemble donc
à cela
pour faire un commentaire, Tapez /* , suivi de votre commentaire,
puis */
pour terminer votre commentaire.
Si deux balises ou plus h1, p
doivent avoir la même
présentation. Il suffit de {
combiner la déclaration,
comme l’ exemple ceci : color: blue;
}
LES DIFFÉRENTS TYPES DE SÉLECTEURS
Nom du sélecteur Ce qu'il sélectionne Exemple
Sélecteur d'élément (parfois appelé « Tous les éléments HTML d'un type
P sélectionne tous les <p>
sélecteur de balise » donné.
L'élément d'une page qui possède l'ID #my-id
Sélecteur d'ID
fourni sélectionne <p id="my-id">
Les éléments d'une page qui sont de .my-class
Sélecteur de classe
la classe donnée sélectionne <p class="my-class">
img[src]
Les éléments de la page qui sélectionne <img
Sélecteur d'attribut
possèdent l'attribut donné. src="monimage.png"> mais
pas <img>
Appliquer un style : Class et id
pour que certains éléments seulement soient écrits d'une manière différente ?
On peut utiliser ces attributs spéciaux qui fonctionnent sur toutes les balises :
•l'attribut class
•l'attribut id
L’attribut :class
• Vous devez écrire (en html)un nom qui sert à identifier la balise exp:
<p class=introduction>
• Vous allez pouvoir réutiliser ce nom dans le fichier CSS pour dire : « Je
veux que seules les balises qui ont comme nom soient modifié.
• Pour faire cela en CSS, indiquez le nom de votre classe en
commençant par un point:
• Exemple:
L’attribut :id
Il fonctionne exactement de la même manière que class , à un détail près :
il ne peut être utilisé qu'une fois dans le code
Si vous utilisez des id , lorsque vous définirez leurs propriétés dans le fichier CSS,
il faudra faire précéder le nom de l' id par un dièse (#) :exemple: #nomid
Si vous vous emmêlez les pinceaux entre class et id , retenez que deux
balises
peuvent avoir le même nom avec l'attribut class .
Un nom d' id doit en revanche être unique dans la page HTML
LES SÉLECTEURS AVANCÉS
• * : sélecteur universel :Sélectionne toutes les balises sans exception. On l'appelle le sélecteur
universel.
• A + B : une balise qui en suit une autre: Sélectionne la première balise <p> située après un
titre <h3>
• Sélectionner un élément B contenu dans A:
• A B {propriété : valeur;}
• A[attribut] : une balise qui possède un attribut: exemple: a[title] Sélectionne tous les liens <a>
qui possèdent un attribut title
• Sélectionner tous les éléments D possédant un attribut en particulier et une valeur exactement:
• D[attribut="valeur"] {propriété : valeur;}
SÉLECTEUR AVANCÉS
• Sélectionner le dernier enfant, indépendamment du type de son parent:
• C:last-child {propriété : valeur;}
• Sélectionner le premier enfant, indépendamment du type de son parent:
• C:first-child {propriété : valeur;}
L’HERITAGE
• Les éléments en HTML « héritent » des styles de leurs parents.
• D’où le « cascading » de CSS.
• En cas de conflit, le style le plus proche de l’élément en question sera
appliqué.
MARGIN & PADDING
• La propriété margin permet de définir la taille de
l’espace entourant l’élément.
• Elle peut être utilisée pour positionner des éléments.
• La propriété padding permet de définir la marge
intérieure (à l’intérieur des bordures) d’un élément.
• Elle ne doit pas être utilisée pour positionner des
éléments.
LES COULEURS
• On utilise la propriété color
• color : valeur textuelle (nom de la couleur)
• color : un code couleur (#code en hexadécimal)
• color : rgb(vr,vv,vb)
RÉSUMÉ
• CSS est un autre langage qui vient compléter le HTML. Son rôle est de mettre en forme votre
page web.
• Il faut être vigilant sur la compatibilité des navigateurs avec certaines fonctionnalités récentes de
CSS3. Quand un navigateur ne connaît pas une instruction de mise en forme, il l'ignore
simplement.
• On peut écrire le code CSS à plusieurs endroits différents, le plus conseillé étant de créer un
fichier séparé portant l'extension .css (exemple : style.css ).
• En CSS, on sélectionne quelles portions de la page HTML on veut modifier, et on change leur
présentation avec des propriétés CSS :
• l existe de nombreuses façons de sélectionner la portion de la page que l'on veut mettre en
forme. Par exemple, on peut viser :
• toutes les balises d'un même type, en écrivant simplement leur nom ( h1 , par exemple) ;
• certaines balises spécifiques, auxquelles on a donné des noms à l'aide des attributs class
ou id ( .nomclasse ou #nomid ) ;
• uniquement les balises qui se trouvent à l'intérieur d'autres balises,
