…
Maintenant en utilisant **CSS**, on écrit dans le fichier .html.
…
Et dans le fichier .css :
body {
background-color: #CCCCCC;
}
Vu que ça fait la même chose et que c’est plus long à écrire, quel est l’avantage me diriez-vous ? L’avantage est triple :
* Le fichier .css peut être partagé par plusieurs fichiers .html, donc non ce n’est pas forcément plus long à écrire.
* Puisque les fichiers partagent le même fichier .css, il garde la même charte graphique. Cela garantit donc d’avoir une cohérence d’une page à l’autre pour tout son site web.
* Le jour où on veut modifier l’esthétique du site web, il suffit de mettre à jour le fichier .css et toutes les pages du site web seront mises à jour.
==== Comment utiliser CSS ====
Il est possible de définir des commandes CSS dans une page html mais nous vous déconseillons fortement cette solution car elle annule une grande partie des bénéfices du CSS. Voici comment indiquer que votre code CSS se trouve dans un fichier séparé, dans les lignes qui suivent ''style.css''
Une autre solution est d’utiliser cette ligne.
==== 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 */
body {
color: #FF0000;
}
Si vous souhaitez une autre police pour les balises ''
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; }
h1, h2, h3, h4, h5, h6 {
color: #009900;
font-family: Georgia, sans-serif;
}
En CSS, des règles de reconnaissance de motifs déterminent les règles de style qui s'appliquent aux éléments de l'arbre du document. Ces motifs, nommés sélecteurs, sont variés, allant du simple nom d'un élément jusqu'aux riches motifs contextuels. Quand toutes les conditions d'un motif sont vérifiées pour un élément donné, celui-ci est retenu par le sélecteur.
Dans un sélecteur, la sensibilité à la casse d'un nom d'élément du document dépend du langage utilisé pour le document. Par exemple, ceux-ci sont insensibles à la casse en HTML, par contre, ils le sont en XML.
**Ils sont donc importants pour nous.**
* [[http://www.yoyodesign.org/doc/w3c/css2/selector.html|En savoir plus sur les sélecteurs]]
* [[http://openweb.eu.org/articles/cascade_css|Cascade CSS et priorité des sélecteurs]] … qui explique l’ordre de priorité des sélecteurs et l’utilisation de !important.
mon texte
On notera que la définition d’une classe commence par un « . ».
.nomDeLaClasse {
font-size: small;
color: #008080;
font-weight: bold;
}
=== Les pseudo-classes ===
HTML et CSS ont un mécanisme similaire aux classes, mais ad-hoc, pour faire le lien avec certaines fonctionnalités spécifiques, et en particulier les liens.
Le HTML a deux utilisations pour l'élément : faire un lien et poser une ancre. S'il est légitime de changer l'apparence d'un lien, il n'est probablement pas souhaitable que les ancres apparaissent de la même manière. Le sélecteur a:link désigne un lien par opposition à une ancre.
Vous avez sans doute remarqué que certains navigateurs affichent des couleurs différentes les liens déjà visités. CSS permet de changer ça en utilisant un sélecteur ''a:visited''. Attention, '':visited'' s'utilise à la place de '':link'' : un lien déjà visité n'est pas reconnu par ''a:link''.
Dans le même genre d'idée, il existe la pseudo-classe '':hover'', qui désigne un élément que l'utilisateur « touche », avec le pointeur de la souris par exemple. On trouve également les pseudo-classes '':focus'' et '':active'', qui ont des significations proches.
=== Le sélecteur id ===
Il a presque la même fonction, à la différence importante qu'on ne peut l'utiliser qu'une seule fois dans la page, contrairement au sélecteur class. C'est pour cela qu'il est plutôt utilisé à la mise en page qu'à la mise en forme de caractères. On trouvera par exemple dans la page html :
Et dans le fichier .css
#container {
background: url(/001/zen-bg.jpg) no-repeat top left;
padding: 0 175px 0 110px;
margin: 0;
position: relative;
}
#intro {
min-width: 470px;
}
Nous voulons ajouter dans le texte précédent différentes citations.
Voici le code html ajouté :
Citations
Les ordinateurs sont incroyablement rapides, précis et stupides ; les hommes sont incroyablement lents, approximatifs et brillants ; ensemble ils sont puissants au-delà de ce que l’on peut imaginer.
Einstein
Si vous avez l'impression que vous êtes trop petit pour pouvoir changer quelque chose, essayez donc de dormir avec un moustique... et vous verrez lequel des deux empêche l'autre de dormir.
Dalaï Lama
Everybody is a genius. But if you judge a fish by its ability to climb a tree, it will live its whole life believing that it is stupid.
Albert Einstein
* Remarquer les balises html5 utilisées ([[http://www.vectorskin.com/referentiels-standards-w3c/balises-html5/|en savoir plus]])
* Nous obtenons la visualisation suivante qui ne nous plaît pas.
{{ :2013_2014:s1:docweb:css:citations.png?800& |}}
* Modifier le fichier html en ajoutant uniquement des indications pour le fichier de style et le fichier de style pour que
* toutes les citations soient en gras
* les citations en français sont en "blue" et suivie de //par// Vous pourrez utiliser [[http://www.w3schools.com/cssref/sel_after.asp|le sélecteur "after"]].
* les citations en anglais sont en "aqua" et suivie de //by//
* [[http://www.w3schools.com/html/html_colornames.asp|en savoir plus sur les noms de couleurs]]
* [[http://www.w3schools.com/cssref/pr_class_display.asp|en savoir plus sur les formes d'affichages]]
* Attention, nous perdons le guillemet fermant... une idée?
{{ :2013_2014:s1:docweb:css:citations1.png?800& |Nouvelle visualisation qui étonnamment nous satisfait!!}}
* J'ai une préférence pour une des citations. Je voudrais la faire apparaître en rouge sans donner d'informations de présentation dans la page html. Que proposez-vous ?
* Je réalise que les couleurs choisies pour les citations sont particulièrement moches, quel code modifiez vous ou donnez vous à un designer pour modification?
===== Je sais répondre à =====
* Comment séparer le contenu de la présentation?
* Comment respecter la même charte graphique pour plusieurs éléments d'un même site web?
* Comment vérifier que la feuille de style est bien formée?
* Quelle différence entre id et class dans le CSS?
* Quelle différence entre ul et ol ?
* Comment fixer la taille des caractères?
* Comment définir des couleurs?
-