Langage css

Disponible uniquement sur Etudier
  • Pages : 26 (6311 mots )
  • Téléchargement(s) : 0
  • Publié le : 15 avril 2011
Lire le document complet
Aperçu du document
FEUILLES DE STYLE

MULTIMÉDIA ET TECHNOLOGIES DU WEB

Les feuilles de styles
1. Contenu et Style
On distingue deux aspects de tout document : contenu et style. Le contenu concerne l information à présenter et le style définit comment l information est présentée. Le rôle principal du HTML est de définir le contenu. C est un langage de description de contenu pour le web. Quant aux feuilles destyles CSS, en anglais Cascading Style Sheets (ou CSS), elles utilisent un langage pour définir le style des pages web. On dit que CSS est un langage de mise en forme. CSS permet ainsi d avoir une séparation claire entre contenu et style. Le langage HTML permet à une page Web de s afficher dans des navigateurs avec une mise en forme par défaut. Ainsi h1 doit être plus grand que h2 et strong doitse distinguer du reste du texte en utilisant une police en gras. Mais cela ne va pas lus loin que cela. CSS quand à lui donne au développeur plus de possibilités pour mieux contrôler la manière dont une page web doit s afficher sur tous les navigateurs. Pour définir un style, on utilise une règle. Celle-ci est composée de deux parties. Un sélecteur qui définit quel élément HTML est contrôlé par larègle et une déclaration qui indique qu elle est l effet demandé : Sélecteur { propriété : valeur ; }

Règle

Déclaration
Exemple : h1 { color: blue; } Cette règle simple exige que tous les éléments h1 dans une page web doivent s afficher en bleu. Dans ce cas le sélecteur est h1 et la déclaration est color : blue. La déclaration est composée de la propriété color qui doit être modifiée et deblue, la nouvelle valeur de cette propriété. Une feuille de style est un ensemble de règles qui permettent de contrôler l affichage d une page web. Et ainsi, la modification de l apparence de la page web se fait en modifiant la feuille de style associée. Il n est donc pas nécessaire de faire les changements à l intérieur de la page web. Un autre avantage des feuilles de style est l accessibilité.On peut utiliser plusieurs styles pour plusieurs usagers selon leurs contraintes. En séparant le style du contenu on permet aussi un chargement des pages web plus rapide. Un ensemble de pages dans un site web peuvent utiliser la même feuille de style, ce qui assure au site web plus de consistance. Mais cela n empêche pas que pour des mises en forme spécifiques, on peut définir pour une page sonpropre style en précisant certains aspects. Non seulement elles sont plus pratiques, mais CSS est une recommandation du World Wide Web Consortium (W3C) et de ce fait elles font partie des standards du Web. En résumé le CSS : Permet une mise en forme plus riche, Diminue l effort de conception, de réalisation et de maintenance des pages web en centralisant les styles de mise en forme. Utilise le mêmestyle pour plusieurs pages et augmente la consistance du site web. Diminue le temps de chargement des pages web.
Pr Jaouad DABOUNOU 1/32 FST de Settat

FEUILLES DE STYLE

MULTIMÉDIA ET TECHNOLOGIES DU WEB

2. Utilisation
On considère la page web suivante :

Essai Présentation Présent au Maroc depuis 1996, Au travers de la première société STIMA, le groupe STIRO s'est peu à peuconstitué et rayonne maintenant sur une grande partie de l'afrique et du moyen orient avec les deux sociétés : STAFRIC et STORIENT. Les principaux pays dans lesquels nous sommes présents sont: MarocAlgérieTunisieMauritanieSénégalLibanSyrie. Mais nous entendons élargir notre activité à d'autres pays de la région. Nous produisons et distribuons principalement les produits suivants : Papier pourimpression / écriture Papiers de presse Papier pour ondulé Emballage

Ce document HTML est constitué d éléments HTML. Par exemple Présentation est un élément HTML défini par la balise ouvrante et la balise fermante . Présent au Maroc . , STORIENT, principalement, éléments du document. sont d autres

Pr Jaouad DABOUNOU

2/32

FST de Settat

FEUILLES DE STYLE

MULTIMÉDIA ET TECHNOLOGIES...
tracking img