19.11.2014 Views

Support de cours - Lita

Support de cours - Lita

Support de cours - Lita

SHOW MORE
SHOW LESS

You also want an ePaper? Increase the reach of your titles

YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.

h1, h2, h3 {<br />

}<br />

font-family: "Helvetica", "DejaVu Sans", sans-serif;<br />

font-weight définit la graisse <strong>de</strong> la police ; valeurs prédéfinies normal et bold ainsi que<br />

<strong>de</strong>s valeurs relatives au texte courant bol<strong>de</strong>r et lighter.<br />

font-size définit la taille <strong>de</strong> la police ; valeurs prédéfinies xx-small, x-small, small,<br />

medium, large, x-large et xx-large ; valeurs relatives au texte courant smaller et<br />

larger ou <strong>de</strong>s pourcentages ; ainsi que <strong>de</strong>s unités <strong>de</strong> longueurs (en particulier px).<br />

font-style définit la forme <strong>de</strong> la police ; valeurs prédéfinies italic, oblique, normal.<br />

3 Toujours plus, encore plus<br />

3.1 Sélecteurs <strong>de</strong> pseudo-classes<br />

En plus <strong>de</strong>s sélecteurs précé<strong>de</strong>nts, il existe <strong>de</strong>s sélecteurs <strong>de</strong> pseudo-classes. Ces<br />

sélecteurs particuliers sont prédéfinis et distinguent certains objets particuliers que le<br />

navigateur peut repérer facilement. Par exemple dans un paragraphe, la première lettre<br />

ou la première ligne peuvent être repérées par le navigateur, qui peut alors leur appliquer<br />

<strong>de</strong>s propriétés spécifiques (il s’agit respectivement <strong>de</strong>s pseudo-classes :first-letter et<br />

:first-line). Par exemple :<br />

p:first-letter {<br />

}<br />

font-size: 150%;<br />

p:first-line {<br />

}<br />

font-style: italic;<br />

De même, il existe <strong>de</strong>s pseudo-classes pour définir l’apparence <strong>de</strong>s liens selon qu’ils<br />

sont non visités, que la souris se trouve au-<strong>de</strong>ssus, qu’ils ont été visités ou qu’ils sont<br />

en train d’être activé (p .ex. par un clic) : il s’agit respectivement <strong>de</strong> :link, :visited,<br />

:hover et :active. Par exemple :<br />

a:link, a:visited, a:active {<br />

}<br />

text-<strong>de</strong>coration: un<strong>de</strong>rline;<br />

a:hover {<br />

text-<strong>de</strong>coration: none;<br />

color: white;<br />

background-color: black;<br />

}<br />

27

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!