Le Webdesign par CSS

Résumé du document

Le langage CSS (Cascading Style Sheets ou feuilles de style en cascade) est utilisé pour décrire la présentation des documents structurés écrits en HTML ou en XML. Ce langage est défini par le World Wide Web Consortium (W3C) qui en assure la direction et édite les spécifications. CSS est utilisé afin de définir les caractéristiques liées à la mise en forme d'un document (couleurs, polices, rendu, vitesse de lecture sur les navigateurs vocaux…). L'objectif est de séparer la structure du document Web, le plus souvent écrite en HTML ou dans un langage
similaire, de la présentation du document, écrite en CSS.
Cette séparation possède de nombreux avantages :
- Une meilleure accessibilité pour les déficients visuels
- Une plus grande souplesse dans le changement de la structure et de la présentation
- Une réduction de la complexité des documents par la séparation de la structure du
document et de la présentation
- Une conception de la page qui ne se soucie pas de l'affichage
- Dans le cas d'un site, une uniformisation de la mise en page et la possibilité d'un
changement de style plus rapide
- Une réduction de la taille et de la complexité du code HTML

Extraits

[...] On adopte donc un positionnement flotant. Le bloc de contenu va venir se positionner à côté de ce blod de menu. On lui attribue une couleur, et une marge à gauche de 150 pixels afin qu'il ne se superpose pas avec le bloc de menu. Enfin, on indique au bloc de pied de se positionner après le dernier de ces deux blocs (par clear :both) et on lui donne une couleur. On peut écrire tout cela avec le code suivant : body{ margin:0; padding:0; } #en-tete{ background-color: blue; } h1, margin:0; padding:0; } #menu{ background-color: purple; float:left; width:150px; } #contenu{ margin-left:150px; background-color:cyan; } #pied{ clear:both; background-color:yellow; } On obtient l'affichage suivant : Figure 21 - Mise en page deux colonnes On peut aussi créer un site de largeur fixe en définissant un bloc après l'ouverture de la balise que l'on refermera avant . [...]

[...] Deux colonnes Il s'agit d'une mise en page assez souvent utilisée avec un cadre d'en-tête et un pied de page. On va donc procéder de la façon suivante. On commence par écrire le code HTML en structurant. On va rédiger une première balise div qui va servir d'en-tête et dans laquelle on va mettre le titre du site. On va ensuite écrire la balise div qui correspond au menu et dans laquelle on va placer une liste à puce avec des liens. Le bloc div suivant va correspondre au corps du site. [...]

[...] Une charte graphique réussie rassemble à la fois un choix judicieux et harmonieux de couleurs ainsi que des aspects liés à l'ergonomie générale du document et sa lisibilité. Le choix des couleurs se fera en fonction du public visé et en considérant les aspects sociologiques et symboliques de la couleur dans la culture de destination. Chaque couleur joue un rôle important dans le design. Une couleur chaude est généralement associée au domaine du sentiment, elle attire l'œil. La couleur chaude par excellence étant le rouge et ses dérivés (orange, Une couleur froide est associée au pragmatisme et à l'esprit, elle agrandit l'espace. [...]

[...] L'élément reste fixe dans la page par rapport à la zone de visualisation. Il ne se déplace pas lors du défilement. Cette propriété peut être rapprochée de background-attachement pour une image. On peut ainsi simuler le comportement de frames sans en rencontrer les inconvénients en terme d'accessibilité pour les navigateurs non graphiques ou la lourdeur de structure. Cette fonctionnalité ne fonctionne pas avec Internet Explorer. Le positionnement flottant retire l'élément du flux normal et le place à gauche (si on a utilisé float : left ) ou à droite (si on a utilisé float : right ) du bloc qui le contient. [...]

[...] Il se prit d'intérêt pour les CSS et organisa un groupe de travail autour de ce langage, avec Håkon et Bert en tant que responsables du projet. D'autres membres dont Thomas Reaedon, de Microsoft, complètent l'équipe. La norme CSS1 fut publiée en 1996. Bien que la norme ai été publiée fin 96, trois ans ont été nécessaires pour qu'un navigateur achève l'implémentation complète des spécifications. Il s'agit de Microsoft Internet Explorer 5.0 pour Macintosh, lancé en mars 2000, et qui supporte plus de 99% de CSS1. Les autres navigateurs suivirent peu après, et la plupart implémentèrent des parties de CSS2. [...]