Passer au CSS et autres... Quelle différence entre ces deux pages ? Si vous regardez uniquement le...
-
Upload
fleurette-fernandez -
Category
Documents
-
view
104 -
download
1
Transcript of Passer au CSS et autres... Quelle différence entre ces deux pages ? Si vous regardez uniquement le...
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
Passer au CSS et autres...Voici l'envers du décors, le xhtml
Une fois que nous avons retrouvé nos balises habituelles comme :<html>,<head>,<body>,
penchons nous peusur certaines :
<div id= « conteneur »>
<h1 id= « header »>
<ul id= « menu »>
<div id= « contenu »>
<p id= « footer »>
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éeavec des
styles
Masquer la boite
utf-8
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 :
<style type= »text/css »>
Celui-ci sera refermé par la balise </style>
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
Passer au CSS et autres...Nous sommes dans la partie CSSfeuilles de style en cascadeEn 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 ;
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
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.
On passe rapidement sur : text-align: center ; et voila ce que cela donne :
Avant Après
Un peu décevant non ?
On retrouve tout de même notremarge haute de 10px
Pour le reste on ne voit riensi ce n'est le centrage du texte.
On continue quand même ?
Oui ?
Masquer la boite
Passer au CSS et autres...
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...
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.Avant Après
Revoir...
Passer au CSS et autres...
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...
Une pause déjà ! Juste quand cela commençait à devenir intéressant
Aller, on continue...
Passer au CSS et autres...