Passer au CSS et autres... Quelle différence entre ces deux pages ? Si vous regardez uniquement le contenu, aucune. Tout se joue sur la mise en forme.

Présentation au sujet: "Passer au CSS et autres... Quelle différence entre ces deux pages ? Si vous regardez uniquement le contenu, aucune. Tout se joue sur la mise en forme."— Transcription de la présentation:

1 Passer au CSS et autres... Quelle différence entre ces deux pages ? Si vous regardez uniquement le contenu, aucune. Tout se joue sur la mise en forme

2 Passer au CSS et autres... Voici l'envers du décors, le xhtml Une fois que nous avons retrouvé nos balises habituelles comme :, penchons nous peu sur certaines : Nous reviendrons sur leur utilité un peu plus loin. Il s'agit juste ici de remarquer que cette page est déjà préparée pour être formatée avec des styles Masquer la boite utf-8

3 Passer au CSS et autres... Nous déclarons un Style. C'est à dire que nous appliquons des valeurs qui seront conservées tant que la balise ne sera pas refermée. Un style interne à la page se déclare toujours par : Celui-ci sera refermé par la balise

4 Passer au CSS et autres... Maintenant que la balise style est ouverte, nous allons définir une mise en forme. Pour cela nous allons utiliser la balise body. Oui, mais elle est déjà utilisé plus loin, me dit-on dans le fond de la salle. Yes ! Mais rien ne nous empèche de la formater. Nous allons appliquer une - marge extérieure haute de 10 pixels, idem en bas, 0 à droite et à gauche. - Pas de marge intérieure. - Nous allons centrer le texte

5 Passer au CSS et autres... Nous sommes dans la partie CSS feuilles de style en cascade En cascade car nous donnons un valeur à la balise body qui n'en avait aucune à l'origine. Cela va s'appliquer à toute la page. On écrit tout d'abord le nom de la balise : body puis tout de suite après on ouvre la balise spécifique au style qui ouvre la liste des paramètres à modifier : { Le premier paramètre sera : margin: 10px 0 ;

6 Passer au CSS et autres... margin signifie « marge externe» Celles-ci sont déclarées dans l'ordre suivant : Haut, droit, bas, gauche Dans notre cas deux valeurs : 10px indique une marge haute et basse de 10 pixels. En effet si vous rencontrez seulement deux valeurs, la déclaration s'applique pour les deux cotés opposés : Haut --> bas 0 (sans px) indique qu'il ne faut pas de marge ni à droite ni à gauche

7 Passer au CSS et autres... padding signifie « marge interne» Les valeurs sont déclarées dans l'ordre suivant : Haut, droit, bas, gauche Dans notre cas une valeur : 0 (sans px) indique une marge haute, droite, gauche et basse de 0 pixels. En effet si vous rencontrez seulement une valeur, la déclaration s'applique pour les quatre cotés espace et ; l'espace est facultatif (meilleure lecture), par contre le ; est indispensable.

8 On passe rapidement sur : text-align: center ; et voila ce que cela donne : AvantAprès Un peu décevant non ? On retrouve tout de même notre marge haute de 10px Pour le reste on ne voit rien si ce n'est le centrage du texte. On continue quand même ? Oui ? Masquer la boite Passer au CSS et autres...

9 Aller sur la lancée on rajoute : font: 0.8em ça c'est pour la grosseur des caractères (attention à bien mettre un point et non pas une virgule !). Cette unité permet de s'adapter au réglages de l'ordinateur hôte. Ensuite le nom des trois polices à utiliser avec en premier la prioritaire. « Trebuchet MS », helvetica, sans serif ; Enfin la couleur de fond : background: #ff9933 ; Passer au CSS et autres...

10 C'est pas encore terrible mais au moins il y a de la couleur et une police personnalisée. La première étape est presque terminée. AvantAprès Revoir... Passer au CSS et autres...

11 Cliquez ! On pourrait mettre des commentaires dans le code pour se rappeller ce qu'il signifie. Parce que dans un an quand vous remettrez le nez là dedans, vous ne penserez pas que vous avez perdu votre temps. Mais comme ce code ne restera pas dans une page HTML et qu'il sera déplacé dans une feuille de style externe qui gèrera tout les styles, nous mettrons les commentaires à ce moment là car les opérateurs ne sont pas les mêmes/ Un commentaire en HTML commence par : <!-- alors qu'en CSS c'est /* Passer au CSS et autres...

12 Une pause déjà ! Juste quand cela commençait à devenir intéressant Aller, on continue... Passer au CSS et autres...