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 /* Commentaire ici */
==== Couleurs ====
Vous pouvez choisir d'utiliser :
* un nom standard de couleur (voir [[http://www.w3schools.com/colors/colors_names.asp|le site du W3C]])
* de donner les couleurs sous la forme ''rgb'' qui offre alors un large choix de couleurs en combinant le rouge, le vert et le bleu
* de référencer une couleur par son code [[http://www.color-hex.com/|hexadécimal]]
Vous devriez jeter un oeil sur [[http://www.w3schools.com/html/html_colors.asp|l'aide des couleurs du W3C]].
body { color: #FF0000; }
Si vous souhaitez une autre couleur pour les balises ''
h1 {color: #FF7F50;}
p {
color: #696969;
font-family: Tahoma, serif;
}
Les navigateurs appliquent donc à un élément la règle la plus **spécifique** qui le concerne, donc préférentiellement une règle qui cible directement cet élément, s'il n'y en a pas ce sera la règle de son élément père, puis de son grand-père, etc, jusqu'à la règle par défaut.
CSS permet de créer des règles d'héritages plus complexes à l'aide de //motifs contextuels//.
Par exemple, un sélecteur de la forme //sélecteur1 sélecteur2// désigne le cas où sélecteur 2 descend de sélecteur 1.
Considérons par exemple la règle suivante~:
p a {color:Orange;}
Ceci colorera en orange uniquement les liens placés dans un paragraphe.
Considérons par exemple une page HTML contenant le code suivant, et à laquelle on associe la feuille de style contenant la règle ''p a {color:Orange;}'' :
Menu
Présentation
Ce site propose des informations sur la cryptographie :
Plus d'informations sur le site ici.
Disclaimer
Les informations contenues sur ce site sont sous licence Creative Commons CC-by-SA.
.
Quels sont les liens qui vont apparaître en orange sur la page ?
Cas particulier, un sélecteur de la forme //sélecteur1 > sélecteur2// ne désigne que le cas où sélecteur2 est ''directement'' fils de sélecteur1. Par exemple, ceci peut être utile si l'on souhaite que la règle s'applique à un ''li'' qui serait contenu dans une sous-liste de type ''ul'' seulement, mais pas ''ol'', y compris pour des listes imbriquées.
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
Cela permet de regrouper plusieurs éléments, possiblement de natures différentes, en un ensemble.
Par exemple, tous les éléments HTML de mon CV correspondant à de l'informatique peuvent utiliser une police particulière.
On notera que la définition d’un motif visant une classe commence par un « . ».
.nomDeLaClasse {
font-size: small;
color: #008080;
font-weight: bold;
}
En résumé, une classe peut contenir zéro, un ou plusieurs éléments, à différents niveaux hiérarchiques de mon arbre xHTML.
==== 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. Ceci permet de rendre plus réactif le style de vos pages statiques en fonction de l'utilisation qui en est faite.
==== Le sélecteur id ====
Comme son nom l'indique, il s'agit d'un identifiant donné à un élément.
Par définition, un identifiant est unique. Plusieurs éléments ne peuvent donc pas avoir le même identifiant.
Cela permet de sélectionner très facilement un bloc xHTML spécifique de notre arbre qui n'est pas discriminé par un type de balise spécial.
On trouvera par exemple dans la page html :
Et dans le fichier .css, le motif commençant par # suivant :
#container {
background: url(/001/zen-bg.jpg) no-repeat top left;
padding: 0 175px 0 110px;
margin: 0;
position: relative;
}
#intro {
min-width: 470px;
}
===== Mise en Pratique =====
Nous voulons ajouter quelques citations sur notre site perso.
Voici quelques exemples pour les moins éclairés :
Citations
Programs must be written for people to read, and only incidentally for machines to execute.
Harold Abelson
Any sufficiently advanced technology is equivalent to magic.
Sir Arthur C. Clarke
The real danger is not that computers will begin to think like men, but that men will begin to think like computers.
Sydney J. Harris
Si debugger, c’est supprimer des bugs, alors programmer ne peut être que les ajouter.
Edsger Dijkstra
Remarquez les balises html5 utilisées; ([[http://www.vectorskin.com/referentiels-standards-w3c/balises-html5/|en savoir plus]]).
La visualisation par défaut n'est pas satisfaisante. Modifier le fichier de style pour répondre aux critères suivants. Indice : [[http://www.w3schools.com/cssref/sel_after.asp|"after"]].
* toutes les citations soient en **gras**, les auteurs en //italique//
* les citations en français sont en violet et suivie de //par//
* les citations en anglais sont en vert et suivie de //by//
* j'ai une préférence pour une des citations, je voudrais la faire apparaître en rouge, que proposez-vous ?