2. Premiers pas en CSS… Comprendre le fonctionnement de la syntaxe CSS

Présentation au sujet: "2. Premiers pas en CSS… Comprendre le fonctionnement de la syntaxe CSS"— Transcription de la présentation:

1 2. Premiers pas en CSS… Comprendre le fonctionnement de la syntaxe CSS
Appliquer un style sur un élément d’une page html Connaître au moins une dizaine de styles css par coeur

2 Petite mise en jambe… ça sert à quoi les CSS ?
CSS = « cascading style sheets » css et navigateurs : le casse-tête de la compatibilité IE Où et comment appliquer un style CSS ? En ligne en interne via une feuille de style externe

3 Syntaxe et principaux sélecteurs
Le principe : sélecteur + propriété(s) + valeur(s) Les commentaires en CSS Les principaux sélecteurs : Cibler tous les éléments html de même type a { } div { } Cibler un élément grâce à son identifiant (id) #monelement { } Cibler un élément grâce à sa classe (class) .monelement { } Cibler une balise html ayant une classe ou une id particulière div#monid { } div.maclass { } Cibler un élément enfant d’un autre ul li { } div p { } Cibler un élément descendant direct d’un autre a > span { } Gérer le style d’un lien au survol de la souris a:hover { }

4 Unités, couleurs, typo Notation des couleurs en CSS : lettres et notation hexadecimale Les unités “fixes” en CSS Les unités “fluides” en CSS Propriétés de typographie, polices et puces font-family et polices utilisables line-height font-size font-weight font-style color text-align text-decoration changer les icônes d’une liste à puce

5 Dimensions et marges Rappel de la différence inline et block
Largeur et hauteur avec width et height Marge extérieures « margin » Centrer horizontalement à l’aide de margin Padding : la marge « intérieure » Padding et calcul de dimension d’élément Overflow: hidden et auto

6 Bordures et background
Les bordures : border, style de bordure et bords arrondis CSS3 Background-color, Background-image, Background-repeat, Background-position

7 A vous de jouer (1er exercice) !
Connectez-vous à l’adresse suivante : Dans le dossier « cours2 », Ouvrez le questionnaire 3

8 A vous de jouer (2ème exercice) !
Connectez-vous à l’adresse suivante : Dans le dossier « cours2 », Ouvrez le questionnaire 4

9 Le positionnement Les « flottants » et le flux (left, right, clear)
La propriété « display » et la modification du comportement des balises (block, inline, inline-block) Positionnement CSS (absolute, relative, fixed)

10 A vous de jouer (3ème exercice) !
Connectez-vous à l’adresse suivante : Dans le dossier « cours2 », Ouvrez le questionnaire 5