Une démonstration de ce qu'on peut accomplir lorsqu'on utilise les CSS pour la conception web.

Les fichiers HTML et CSS proviennent du Jardin Zen.

Ici on s'amuse.. avec les standards web

La feuille de style et son rôle, suite 3

.. sa fonction et ses balises

Le but principal de la feuille de style ( CSS ) est de séparer le contenu d'une page web ( le XHTML ) de la présentation. Ces deux langages de base, créés et développés par le W3C ( World Wide Web Consortium ), ont pour raison d'être de rendre le net accessible au plus grand nombre dont les personnes avec handicaps. En exemple, il peut y avoir une feuille de style adaptée pour un lecteur vocal, une autre mieux balisée pour un petit mobile, une autre encore pour imprimer du texte, etc.

Aujourd'hui, nous parlerons de trois balises qu'on retrouve dans les CSS: 'img' pour une image - 'ul' / 'li' pour une liste à puce - et 'div' pour une boîte qui peut servir de conteneur.

Codage CSS

Pour placer une image dans une page, on utilise cette balise 'img' qui devient ainsi un sélecteur dans la feuille de style. A ce sélecteur, on applique des propriétés et des valeurs en y indiquant sa largeur et sa hauteur, sa position par rapport au bord supérieur de la page, puis l'endroit par rapport au bord gauche de cette page, etc. Cette image pourrait être une bannière placée tout en haut des pages. Et voilà le résultat assuré.

  • img {
  • width: 600px;
  • height: 150px;
  • margin-top: 20px;
  • margin-left: 50px; }

Codage CSS

Ensuite, on pourrait y mettre un menu au moyen d'une liste, élément bien pratique pour ce genre de fonction et on pourrait y ajouter du texte. Justement, ce sont des listes qui sont utilisées pour présenter les balises, comme celles ci-dessous et les autres plus bas. Cela vous donne une petite idée..? La première balise est 'ul' suivie directement par des 'li' entre lesquelles sont insérés les mots et les chiffres.

  • MENU {
  • accueil
  • services
  • produits
  • spéciaux
  • contact }

Codage CSS

Et pour terminer, on aborde la boîte qui sert vraiment à tout et de fourre-tout. Elle peut devenir le conteneur principal de la page. Elle sert à positionner alors des contenus faits d'images, de menus et de paragraphes. Elle peut servir pour créer un haut de page dans lequel on met une bannière ou un titre, et un bas de page avec différentes références. Ou bien, on peut en superposer deux et créer de jolis effets visuels. On met alors une boîte en 'position: absolute' pour la placer de façon précise et l'imbriquer dans l'autre conteneur.

  • div 1 {
  • background-color:
    #A6CB38;
  • width: 280px;
  • height: 360px;
  • margin-top: 75px;
  • margin-left: 30px;
  • border: 1px solid gray; }
  • div 2 {
  • position: absolute;
  • background-color: transparent;
  • width: 220px;
  • height: 270px;
  • top: 195px;
  • left: 245px;
  • border: 1px dashed gray;
  • border-top: 0;
  • border-right: 0; }

Voici deux exemples de boîtes avec positionnement dont une inclut un titre 'h4'.

Les termes techniques ont été plus développés, dernièrement. Nous reviendrons à des concepts plus généraux dans les prochaines mises à jour du site. S'il y a des visiteurs qui aimeraient recevoir un peu d'informations sur certains sujets, nous y répondrons avec grand plaisir. A bientôt !

signature de lisette