13 668
modifications
« Le langage HTML/Internationalisation » : différence entre les versions
→Exemple de feuille de style différenciant la langue : Décryptage de la feuile de style
m (→Exemple de feuille de style différenciant la langue : formulation) |
(→Exemple de feuille de style différenciant la langue : Décryptage de la feuile de style) |
||
|
L'exemple suivant est une feuille de style (écrite en CSS) dans laquelle la mise en page d'un paragraphe dépend de la langue.
{{rouge|/*}} ********** Français ********** {{rouge|*/}}
[lang|="fr"]
p:lang(fr) {
text-align: justify; {{rouge|/*}} texte justifié {{rouge|*/}}
}
{{rouge|/*}} ********** Anglais ********** {{rouge|*/}}
[lang|="en"]
[lang|="en-
p:lang(en) {
text-align:left; {{rouge|/*}} texte aligné à gauche {{rouge|*/}}
{{vert|<style}} type="text/css"{{vert|>}}
{{rouge|/*}} ********** Français ********** {{rouge|*/}}
[lang|="fr"]
p:lang(fr) {
text-align: justify; {{rouge|/*}} texte justifié {{rouge|*/}}
}
{{rouge|/*}} ********** Anglais ********** {{rouge|*/}}
[lang|="en"]
[lang|="en-
p:lang(en) {
text-align:left; {{rouge|/*}} texte aligné à gauche {{rouge|*/}}
: Comme on a défini la page de code dans l'en-tête du fichier HTML, on peut utiliser les guillemets « en clair » (caractères non-ASCII) dans la feuille de style intégrée.
----
=== Décryptage de la feuile de style ===
Le CSS possède son propre wikilivre. Toutefois, afin que cela ne soit pas juste du copier-coller et que vous puissiez modifier l'exemple sans lire tout le wikilivre ''[[Programmatin CSS]]'', voici quelques éléments.
Dans l'expression « <code>[lang|="en"] > * {…}</code> » :
* <code>[lang|="en"]</code> signifie « les éléments dont l'attribut est « <code>lang="en"</code> » » ;
* <code>> *</code> désigne tous les éléments (<code>*</code>) situés en-dessous (<code>></code>) de l'élément pré-cité, donc tous les sous-éléments de l'élément ayant pour attribut « <code>lang="en</code> ».
L'expression « <code>[lang|="en"]</code> » désigne aussi les éléments ayant les attributs dérivés de <code>en</code>, notamment <code>en-GB</code>.
L'expression « <code>p:lang(en)</code> » désigne les paragraphes (éléments introduits par la balise <code><p …></code>) dont l'attribut <code>lang</code> est <code>"en"</code>.
La propriété <code>quote</code> indique les guillemets utilisés, sous la forme « "''guillemet ouvrant''" "''guillemet fermant''" ». Lorsqu'il y a deux paires de délimiteurs, la première paire correspond aux citations de premier niveau, la seconde paire aux citations de deuxième niveau (citation dans la citation).
Les autres éléments sont assez explicite en anglais.
{{loupe|Programmation CSS/Les sélecteurs#Autres pseudo-classes}}
| |||