Faire son site et le publier

Kompozer et CSS

Feuille de style interne : Exercice 2

http://josar.free.fr/tutoKompozer/feuilleStyle/archimede/archimede.zip

Construction de la feuille de style

                                   Choisir Feuille incorporée                     bouton                 

Dès que nous allons créer une première règle avec Cascades, dans le code nous verrons la zone du head qui contiendra les directives de style de la page,à partir de la balise ouvrante  <style media="all" type="text/css"> jusqu'à la balise fermante </style>

Dans la balise ouvrante nous voyons 2 attibuts : 

Mise en forme du texte

Nous allons définir les styles de cette page en utilisant les onglets Texte, Fond et Bordures.
Il faut imposer des styles pour body, les titres, paragraphes, liens et la référence du document (blockquote)

fond jaune clair pour body
police Arial pour body . Cette police va s'appliquer à l'ensemble des éléments de la page, titres et paragraphes
couleur bleu foncé pour les titres, grenat pour le paragraphe
bordure  pour h1 bas, plein, 2px, jaune moutarde
liens police Times New Roman, couleur grenat foncé sur fond rose saumon, régler la taille en pourcentage
citation police courrier, régler la taille en pourcentage

Mise en forme de l'image

La balise qui caractérise les images est <img>.
Pour faire simple ici, nous centrerons l'image avec l'outil Centrer. Penser ensuite à décocher Barre Mise en forme 2 du menu Affichage.
Nous utiliserons les onglets : Bordures  plein, 2 px, couleur grenat ; Boite  espacement 10 px      

aspect de la pagebody
  • font-family: Arial,Helvetica,sans-serif;
  • color: #660000;
  • background-color: #fdfff2;
h1
  • border-bottom: 2px solid #ffcc00;
  • color: #000099;
p   background-color: #fffde0;

a 
  • color: #660000;
  • background-color: #fff5f4;
  • font-family: "Times New Roman",Times,serif;
  • font-size: 105%;
img 
  • border: 2px solid #660000;
  • padding: 10px;
blockquote
  • font-family: "Courier New",Courier,monospace;
  • font-size: 95%;
Sur cette page nous n'avons pas de sous-titre, comme sur d'autres pages nous en aurons, rajoutons un style pour h2  color: #000099;
Regardons l'ensemble des styles dans l'onglet Général de Cascades.

Visionner la page et le codel'outil Recharger dans Cascades de Kompozer

Dans Cascades penser à Recharger pour voir tous nos styles.
Si certains styles n'ont pas été pris en compte (comme l'espacement et le centrage de l'image) il faut tout fermer et relancer Kompozer.
Sauvegarder et visionner dans les 2 navigateurs.
Ouvrir le code avec l'Editeur texte et voir dans head tous les styles qui ont été appliqués. Aucun style interne ne se trouve dans les balises de body, tous les styles sont regroupés dans la feuille de style.

Haut de page
Jos Argaud - Mise à jour 26/11/2009  Pour m'écrire  Document made with KompoZer  D'après le cours d'Yves Mairesse et avec son consentement