ipw course 3 css
TRANSCRIPT
Cascading Style Sheets
Plan du course
• Qu'est-ce que CSS
• CSS niveaux
• Attacher un fichier CSS au HTML
• Syntaxe CSS
• Couleurs en HTML
• Exemples
CSS
• CSS = Cascading Style-Sheets
• Style = la façon dont les balises HTML sont affichés Style-sheets = documents où l'information de style est stockée - le plus souvent des documents externes Cascade = il ya plusieurs niveaux sur lesquels on peut définir le style d'une page
Utilisation de CSS
• Le style peut être joint dans la page HTML à chaque élément
• => Problèmes dans le maintien de la page• => Problèmes dans les grands sites contenant
beaucoup de pages • Beaucoup plus facile si le style de tous les
éléments sont stockés séparément - les modifications apportées à 1 place sont répartis à l'ensemble des pages automatiquement
CSS niveaux
• Style information peut être défini à plusieurs niveaux
• niveau Browser - le style par défaut du navigateur – la manière dont la page est affichée si aucune
information de style est présent
CSS Browser level example
Default browser style; no style specified in html
After we modified the default browser style
CSS niveaux
• niveau document externe - le style est spécifié dans un fichier .css.
• Ce fichier est inclus dans le document HTML en utilisant l'élément link
• <link rel="stylesheet" type="text/css" href=“style.css" />
CSS External Document Level
• h1 { color: blue;}
CSS levels
• Feuille de style interne (à l'intérieur de la balise <head>) – Définir le style de la feuille à l'intérieur de la
page html– Style spécifiées dans un élément de type
“style”
• Exemple:• <style type="text/css"> h1 {color: yellow}
</style>
CSS Internal Style Sheet Level <head>
<title>le titre du document</title><link rel="stylesheet" type="text/css" href="style.css" /><style type="text/css"> h1 {color: yellow} </style>
</head>
CSS Levels
• Niveau Élément - le style est spécifié à l'intérieur de l'élément
• PAS RECOMMANDÉ!
• Example
• <h1 style="color: black;" > Introduction dans la programmation web</h1>
CSS Element Style Level
• <h1 style="color: black;" > Introduction dans la programmation web</h1>
CSS Levels - Conclusion
• Browser niveau
• Niveau des documents externes – Celui que nous allons utiliser
• Niveau feuille de style interne (à l'intérieur de la balise “head”) – Ne doit pas être utilisé
• Niveau de l'élément de style – Ne doit jamais être utilisé
La priorité augmente
CSS Syntax
• La syntaxe contient triples:– Selector - sur quel élément (s) nous
appliquons le style– Propriété - qui est la propriété de changer– Valeur - la valeur modifiée
h1 {color: yellow;}
CSS syntax – selector types
• Un sélecteur peut être– le nom d'un élément HTML (h1)
• Le style défini s'applique pour tous les éléments de ce type
– Le nom d'un élément "." le nom du style de classe• H1.blue{color:blue;}• La classe est utilisée à l'intérieur de l'élément HTML comme
un attribut– <h1 class=“blue”>
• Un sélecteur peut être– L’id d’un élément
• #id5 {color:blue;}• L’élément doit avoir l’id défini
– <h1 id=“id5”>
• Une combinaison des options précédents
Couleurs in html/css
• Les couleurs sont identifiés grâce à – les noms (red, green,blue ...)
• Cela est possible pour un très petit nombre de couleurs
– Valeurs • Une couleur est représentée par un triplet de valeurs RGB • Chaque valeur dans le triplet peut prendre une valeur
comprise entre 0-255 (FF en hexa) • Le nombre total de couleurs qui peuvent être exprimés
comme celle-ci est d'environ 16 millions• Une valeur de couleur est formé comme # RRGGBB où RR
= la valeur hexa pour le rouge, GG = valeur hexa vert ...
Couleurs in html exemples
• Noir #000000
• Blanc #FFFFFF
• Rouge #FF0000
• Vert #00FF00
• Bleu #0000FF
• Jaune #FFFF00
CSS Examples
• body { background-image: url('bgdesert.jpg') }
• body { background-color: #FFFF00; }
Text properties
list properties
padding properties
margin properties
CSS Tables Example
table, td, th
{
border:1px solid green;
//border-collapse:collapse;
}
th
{
background-color:green;
color:white;
}
Without border-collapse
With border-collapse
CSS HowTO
• Il ya beaucoup de valeurs et attributs CSS pour définir le style
• Il est difficile de les connaître tous• Vous devez utiliser une référence internet
comme http://www.w3schools.com/css/css_reference.asp
• Vous avez besoin de comprendre les mécanismes de CSS
• Vous avez besoin d’exercise
Conclusions
• CSS = la façon de modifier le style d'une page html
• Un grand nombre de propriétés - les valeurs possibles ne devraient pas être connues par coeur - le recours à la documentation
• Vous devez connaître les principes, les niveaux et quelle est la finalité de chaque propriété