Index général
- Outils
- Références
- Tuyaux
User Tools
Sidebar
2015_2016:s1:webdoc:td2
This is an old revision of the document!
Table of Contents
TD2 - Initiation à CSS
Inspiré du cours de Gaëtan Rey.
Les feuilles de style en cascade nommées CSS (Cascading Style Sheets) servent à décrire la présentation des documents (X)HTML et XML. Les standards définissant CSS sont publiés par le W3C. Introduit au fin 1996, CSS devient couramment utilisé dans la conception de sites web et bien pris en charge par les navigateurs web dans les années 2000. L'un des objectifs majeurs de CSS est de séparer le contenu de la forme dans un document (x)html. Il est par exemple possible de ne décrire que la structure d'un document en HTML, et de décrire toute la présentation dans une feuille de style CSS séparée. Les styles sont appliqués au dernier moment, dans le navigateur web des visiteurs qui consultent le document. Cette séparation fournit un certain nombre de bénéfices, permettant d'améliorer l'accessibilité, de changer plus facilement de structure et de présentation, et de réduire la complexité de l'architecture d'un document.
Ainsi, les avantages des feuilles de style sont multiples :
- La structure et la présentation du document sont gérées dans des fichiers séparés.
- La conception d'un document se fait sans se soucier de la présentation.
- La présentation est uniformisée (plusieurs pages (X)HTML peuvent faire référence aux mêmes feuilles de styles).
- Un même document peut donner le choix entre plusieurs feuilles de style, par exemple une pour l'impression et une pour la lecture à l'écran.
- La lisibilité des pages (X)HTML est améliorée puisqu’elles ne contiennent plus de balises ni d'attributs de présentation.
Inclusion de CSS
Toutes les instructions de mises en forme seront contenues dans un fichier CSS identifiable par son extension .css.
Le fichier (X)HTML contenant la structure du document doit alors contenir une référence vers le fichier CSS.
Par exemple, si vous possédez un fichier style.css, vous devrez ajouter la ligne suivante dans le bloc header du fichier HTML :
<head> <link rel="stylesheet" type="text/css" href="style.css" /> </head>
La syntaxe de CSS
De manière générale, la syntaxe du CSS est très simple. Elle correspond au schéma suivant :
selecteur { propriété:valeur }
Chaque sélecteur (ci-dessous body) peut avoir plusieurs propriétés avec des valeurs indépendantes,
il faut pour cela séparer les propriétés par un « ; ».
body { background: #eeeeee; font-family: "Trebuchet MS", Verdana, Arial, serif; }
Vous pouvez également insérer des commentaires dans votre code avec la syntaxe suivante :
/* Commentaire ici */
Couleurs
Vous pouvez choisir soit d'utiliser un nom standard de couleur (voir http://www.w3schools.com/cssref/css_colornames.asp) soit de donner les couleurs sous la forme rgb qui offre alors un plus large choix de couleurs en combinant le rouge, le vert et le bleu (http://www.w3schools.com/html/html_colors.asp)
La notion d’héritage/cascade
Si on traduit les trois mots de « Cascading Style Sheets » on obtient Feuille de style en cascade. Pourquoi « en cascade » ? Car si vous définissez une police de type “Trebuchet MS” sur la balise <body>, l'ensemble des autres éléments du site (parce qu'inclus dans cette balise) prendra comme police Trebuchet MS, inutile de le redéfinir pour chaque élément.
Autre exemple, si vous définissez la balise body avec une couleur rouge (comme le montre la commande suivante), les autres éléments du body auront une couleur rouge par défaut :
body { color: #FF0000; }
Si vous souhaitez une autre police pour les balises <h1> par exemple, il suffit de la définir à nouveau.
h1 {font-family: Georgia, sans-serif;} p {font-family: Tahoma, serif;}
Un sélecteur de la forme sélecteur1 > sélecteur2, au contraire, ne désigne que le cas où sélecteur2 est directement dans le sélecteur1. Par exemple, ceci peut être utile si on n'a pas envie que la règle s'applique à un li qui serait contenu dans une sous-liste de type ol.
ul > li { margin-left: 10em; }
A Faire :
- Visualiser le avec un navigateur
- Validez votre fichier Votre objectif est de le rendre valide en séparant contenu et présentation.
- Recopier le fichier sous
gardenWithCss.htmlpuis séparer le style dans un fichier css; - Valider votre fichier css (conseil : vérifier la validité de votre fichier css; modifier votre fichier html; visualiser le html; itérer…)
- Validez votre nouveau fichier html
gardenWithCss.htmlrésultant, il doit être conforme au fichier initial.
La taille des caractères
Si vous fixez la taille de vos caractères, elle ne pourra pas évoluer en fonction de votre navigateur.
Pour cette raison, vous pouvez utiliser des unités relatives qui vont permettre un redimensionnement des caractères à l'écran. Donc il vaut mieux éviter le point (noté pt), le centimètre (noté cm), … Vous préférerez le pourcentage % et le cadratin (notée em).
100%=1em=16pixels
correspondance entre taille en html et en css http://www.w3schools.com/cssref/pr_font_font-size.asp
Quelques Tips
| Type d'élément | Eléments en css |
|---|---|
| lien non visité | a:link {color: …} |
| lien visité | a:visited {color:} |
| lien actif (cliqué) | a:active {color:} |
| lien survolé | a:hover {color:} |
| Type de police | {font-family:“French Script MT”; |
| Taille de police | {font-size:xx-large; par exemple |
| Couleur du texte | color: |
| Texte en gras | font-weight:bold; |
| Texte en italique | font-weight:italic; |
| Couleur de fond | background-color: |
2015_2016/s1/webdoc/td2.1446996915.txt.gz · Last modified: 2015/11/08 16:35 by urli
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Noncommercial-Share Alike 4.0 International
