Comment modifier le design d'iGalerie ?
Comme vous pouvez vous en douter, c'est le genre de question qui revient assez souvent. Malheureusement, et comme vous pourrez également le comprendre, je n'ai pas le temps d'adapter iGalerie à tous les sites qui l'utilisent ! En revanche, je peux expliquer comment procéder, grâce notamment à ce petit tutoriel qui, je l'espère, vous aidera à personnaliser ou adapter iGalerie à vos goûts.
Dans tout ce qui suit, je suppose que le lecteur maîtrise au moins les bases du HTML (sait ce qu'est une balise et un attribut de balise). Cette page n'est qu'une brève introduction au langage CSS, destinée à permettre à tout utilisateur d'iGalerie de personnaliser rapidement et sans connaissance spécifique le design d'iGalerie, en vue de l'adapter à son site par exemple. Créer un nouveau style de A à Z demande un peu plus de connaissances et d'expériences.
La première chose à savoir, c'est que les templates d'iGalerie sont écrit en XHTML 1.0. Le XHTML (Extensible HyperText Markup Language) est une évolution de HTML 4 (plus précisément, le XHTML est une reformulation de HTML en XML, d'où le « X » qui le précède). Le XHTML utilise des balises similaires au HTML, mais doit respecter la syntaxe du XML. En outre, certaines balises propres au HTML sont désormais interdites (<center>, <font>, etc.), ainsi que certains attributs HTML. Ces balises et attributs qui ne font plus partie du XHTML sont des éléments du langage HTML qui servent pour la mise en forme du contenu. Ainsi, XHTML est uniquement un langage de description de données. Si l'on souhaite appliquer une couleur à un texte ou mettre une bordure ici ou là, il faut impérativement passer par un langage différent, un langage dédié à la présentation du document. Ce langage, pour le Web, c'est CSS, que l'on désigne aussi souvent par « feuille de style » (terme qui ne désigne pas spécifiquement CSS mais tout langage similaire).
Les feuilles de styles permettent d'appliquer et de définir à des éléments HTML : des couleurs, des polices, des tailles de caractères, des bordures, mais aussi des marges entre éléments, des tailles d'éléments, des positionnements d'éléments, etc. Bref, tout ce qui concerne l'apparence d'une page Web (mais pas uniquement). Le plus difficile en CSS concerne sans doute le positionnement, que nous n'allons pas aborder ici. On se contentera de styles simples de mise en forme (couleurs, polices, bordures). Une page écrite en XHTML à laquelle on a enlevé sa feuille de style (ou qui n'en possède pas), n'a donc ni couleurs (hormis celles éventuellement utilisées par défaut par le navigateur), ni positionnement : seul le contenu « brut » subsiste, lequel reste bien sûr accessible tel quel puisqu'il n'est pas indispensable de styler la page pour pouvoir la lire.
=> Voir par exemple cette même page sans feuille de style.
Les feuilles de styles CSS sont situées dans le répertoire « style » de chaque template (voir la doc pour plus de détails). Dans iGalerie, une feuille de style est un simple fichier texte, qui est dotée ici de l'extension « .css », et qui sera appelé sur chaque page qui utilisera ce style. Ainsi, un même fichier pourra être utilisé sur plusieurs pages pour effectuer la mise en forme de ces pages : il s'agit là d'un des grands avantages des CSS puisque la modification d'un seul fichier aura des répercussions sur l'ensemble des pages qui l'utilisent. L'appel d'une feuille de style CSS dans une page se fait par une balise <link> située dans l'en-tête de la page (entre <head> et </head>) :
<link rel="stylesheet" type="text/css" media="screen" title="style" href="/demo/template/defaut/style/defaut/defaut.css" />
Depuis la version 0.7, il est possible d'ajouter du code CSS sans modifier la feuille de style du template, via le lien « Style additionnel » situé dans la section « Options » de l'admin. L'avantage de ce système est double : pas besoin de télécharger le fichier CSS pour le modifier puis de le renvoyer sur le serveur, d'où un gain de temps non négligeable surtout s'il l'on souhaite faire des tests; ce code CSS additionnel est enregistré dans la base de données, et donc permet d'éviter tout écrasement du code dû à une mise à jour ultérieure d'iGalerie. Cela évite également de devoir créer un nouveau style à part entière si l'on souhaite simplement faire quelques modifications.
CSS est un langage très simple dans sa structure. A la base, il faut essentiellement connaître trois choses : les sélecteurs, les propriétés et leurs valeurs. Le rôle du sélecteur est, comme son nom l'indique, de sélectionner l'élément HTML auquel la valeur de la propriété qui lui est rattachée va s'appliquer. Toute règle CSS est toujours formée par ces trois composants. L'ensemble forme un langage permettant d'écrire des choses du genre : « colore le texte de ce tableau en bleu », « augmente la taille du texte de ce paragraphe de 120% », etc.
Concrètement, une règle CSS simple s'écrira de cette manière :
p { color: red }
La lettre p désigne ici la balise <p> (utilisée pour les paragraphes) : il s'agit du sélecteur. Le sélecteur doit être suivi d'accolades entre lesquels on écrira les propriétés que l'on souhaite appliquer à l'élément : ici on appliquera la couleur rouge au texte.
Notez aussi que la règle CSS de cet exemple s'appliquera à tous les éléments contenu dans la balise <p>, c'est à dire que tous les éléments enfants vont hériter de cette règle. Ce système d'héritage s'applique à toutes les balises HTML, mais pas pour toutes les propriétés CSS ! Parmis les propriétés communément utilisées, ce sont uniquement les propriétés liées au formatage du texte pour lesquelles ce système d'héritage s'applique.
Dans cet exemple nous avons un sélecteur très simple, puisqu'il désigne une balise HTML. Cela signifie donc que le style qui lui est rattaché va s'appliquer à toutes les balises <p> de la page qui utilise cette CSS. Pour délimiter l'élément auquel on souhaite appliquer cette propriété, on peut le faire de plusieurs manières différentes, lesquelles peuvent être combiner pour construire des sélecteurs complexe mais très précis, comme nous allons le voir plus loin.
Pour rattacher plusieurs propriétés à un sélecteur, il suffit de les séparer par un point-virgule :
h2 {
color: green;
font-weight: bold;
font-size: 120%;
}
Chaque couple propriété-valeur forme une déclaration. Toutes les déclarations d'une règle CSS doivent ainsi être séparées par un point-virgule. Le retour à la ligne entre chaque déclaration n'est pas indispensable, mais il améliore la lisibilité du code.
Tout langage de description ou de programmation permet l'insertion de commentaires, soit une suite de caractères qui ne sera pas pris en compte, c'est à dire qui ne sera pas interprété comme du code. Cela sert à décrire la fonction d'un bout de code ou de mettre une note quelconque servant pour la compréhension et la maintenance du code. En CSS, un commentaire commence par un slash et une étoile (« /* ») et se termine par une étoile et un slash (« */ »). On peut placer des commentaires n'importe, sauf dans une chaîne de caractère :
/* Menu.
---------------------------------------- */
#menu { ... }
p { color: green /* le texte de chaque paragraphe en vert */ }
Le dernier exemple que nous avons donné utilise un sélecteur de type d'élément, c'est à dire un sélecteur qui va appliquer une règle à toutes les balises de même nom. Si nous voulons délimiter l'application de règles, il faudra utiliser des sélecteurs plus précis, dont nous allons présenter les principaux.
S'il l'on souhaite appliquer une propriété à un seul et unique élément, on utilisera l'identifiant de cet élément. Prenons le bout de code suivant :
<span id="ex">texte</span>
La valeur de l'attribut id est l'identifiant de l'élément. Pour lui appliquer une règle CSS, on utilisera cette syntaxe :
#ex { font-weight: bold }
ou bien (à condition de connaître l'élément auquel va s'appliquer la règle) :
span#ex { font-weight: bold }
(Attention! Comme nous le verrons dans la section consacrée à la priorité des sélecteurs, ces deux exemples ne sont pas strictement identique)
Toute balise HTML peut avoir un identifiant, lequel permet d'identifier de façon unique un élément. C'est pourquoi il ne peut pas y avoir deux éléments dans un même document possédant le même identifiant.
Si l'on souhaite appliquer une propriété à un ensemble d'éléments (ne correspondant pas forcément à la même balise), on utilisera un sélecteur de classe, qui appliquera un style à tous les éléments possédant le même nom de classe définit par l'attribut « class » :
<h1 class="ex">titre</h1> <span class="ex">texte</span> <span class="ex">texte</span> <p class="ex">texte</p>
Toutes ces balises possèdent la même classe. Pour leur appliquer une règle CSS commune, on utilisera cette syntaxe :
.ex { font-weight:bold }
En revanche, ceci n'a pas la même signification :
span.ex { font-weight:bold }
car dans ce cas, la règle CSS sera appliquée seulement aux balises <span> possédant la classe « ex ».
Toute balise HTML peut avoir un attribut « class ».
Le sélecteur universel, noté « * », permet de sélectionner tous les types d'éléments. Ainsi, la règle suivante va s'appliquer à tous les éléments du document :
* { font-size: 110% }
Les pseudo-classes et les pseudo-éléments sont des sélecteurs spéciaux qui s'appliqueront dans certaines conditions ou pour certains morceaux de document inaccessibles avec les sélecteurs classiques. Il en existe une dizaine en CSS 2, mais nous présenteront les trois plus utiles et les plus universellement reconnu par les navigateurs. Une pseudo-classe ou un pseudo-élément commence toujours par un sélecteur classique (sinon il s'appliquera à tous les éléments du document) suivi du caractère séparateur « : » puis du nom de la pseudo-classe ou du pseudo-élément.
La pseudo-classe :hover
Cette pseudo-classe permet d'appliquer un style à un élément lorsque le pointeur de la souris se trouve sur cet élément. En pratique, certains navigateurs (enfin, surtout IE 6...) ne savent pas appliquer cette pseudo-classe à tous les éléments, et il vaut mieux se contenter de l'appliquer à la balise <a> car il n'y a que sur cette balise que cette pseudo-classe fonctionne avec tous les navigateurs. Notez qu'il existe une alternative et que l'on peut obtenir le même effet pour à peu près n'importe quel élément et pour tous les navigateurs en utilisant un autre langage : JavaScript. C'est notamment cette « astuce » qu'utilise iGalerie pour permettre un hover sur toutes les vignettes pour les navigateurs qui ne supportent pas le hover CSS sur les éléments autres que <a>...
La règle suivante va s'appliquer à n'importe quel lien du document dont le pointeur de la souris sera positionné dessus :
a:hover { color: #D58B0B }
La pseudo-classe :visited
Cette pseudo-classe concerne uniquement les liens (<a>) et permet d'appliquer un style lorsque le lien en question a déjà été visité (au sens de « signalé comme visité dans l'historique du navigateur »). Par exemple :
a:visited { text-decoration: none }
Le pseudo-élément :first-letter
Ce pseudo-élément permet d'accéder au premier caractère du texte d'un élément. Par exemple :
p:first-letter { font-size: 150% }
Les sélecteurs de descendance sont des combinaisons de sélecteurs permettant d'appliquer un style à tout élément B descendant d'un élément A dans l'arborescence HTML du document. Le combinateur de descendance consiste en un simple espace. Ainsi, il suffit de séparer deux sélecteurs par un espace pour obtenir un sélecteur de descendance. Si l'on souhaite par exemple appliquer un style à toutes les balises <em> contenues dans chaque balise <p>, on écrira ceci :
p em { color: green }
On peut combiner ainsi autant de sélecteurs qu'on le souhaite et de tout les types, il n'y a pas de limites. Par exemple :
div.texte table #th p:first-letter { color: red }
Donc il faut faire attention aux espaces car les deux sélecteurs suivants ont bien évidemment une signification totalement différente :
span#ex span #ex
Tous les sélecteurs peuvent être regroupés, en les séparant par une virgule, afin de définir des styles identiques pour des sélecteurs différents :
h1, h2, h3 { font-weight: normal }
Cette règle est strictement identique à ces lignes :
h1 { font-weight: normal }
h2 { font-weight: normal }
h3 { font-weight: normal }
Admettons que nous ayons deux règles CSS différentes :
p#ex { color: blue; }
p { color: red; }
qui s'appliqueront dans une page contenant ce bout de code HTML :
<p id="ex">texte du paragraphe</p>
Comme on peut le voir, ces deux règles peuvent s'appliquer à ce même élément. Laquelle sera retenue au final ? On pourrait croire que, étant donné que la navigateur lit la feuille de style de haut en bas, c'est la dernière qui sera appliquée. Eh bien non ! Ça aurait été le cas si les deux sélecteurs étaient identiques, mais ce n'est pas le cas, et cela a toute son importance ! En effet, un sélecteur d'ID est plus « fort » qu'un sélecteur de classe, qui lui même est plus fort qu'un sélecteur de type d'élément. En plus de cela, comme nous allons le voir, il faut tenir compte du nombre de chacun dans les constructions de sélecteurs complexes. Au final, donc, c'est bien la première règle qui s'appliquera, et le texte de notre paragraphe sera coloré en bleu.
Le degrè de priorité d'un sélecteur se mesure avec un nombre à 3 chiffres. Le premier indique le nombre de sélecteurs d'ID, le second le nombre de sélecteurs de classe et le dernier le nombre de sélecteurs de type d'élément. Le sélecteur qui sera prioritaire sera celui dont le nombre sera le plus grand.
Ainsi, prenons pour exemple ce bout de code HTML :
<div class="txt" id="div"> <span class="ex" id="css">Cascading Styles Sheets</span> </div>
Les quatre règles du tableau suivant peuvent s'appliquer à ce bout de code. Elles sont accompagnées du nombre indiquant la priorité de chacune d'elle :
| règle CSS | priorité |
|---|---|
| div#div span.ex { color: blue } | 112 |
| #div #css { color: red } | 200 |
| * { color: gray } | 000 |
| .txt span.ex { color: green } | 021 |
La règle qui sera finalement appliquée si nous les utilisions toutes les quatre dans une même feuille de style sera donc la deuxième (puisque 200 > 112 > 021 > 000). Cette règle se voit attribuée le nombre 200 car elle possède 2 sélecteurs d'ID, 0 sélecteur de classe et 0 sélecteur de type d'élément.
Evidemment, si deux règles ont la même priorité, ce sera toujours la dernière de la feuille de style qui sera appliquée.
=> Pour en savoir plus : http://openweb.eu.org/articles/cascade_css/
Il existe plusieurs formats pour définir une couleur : RGB, hexadécimal et les noms de couleurs prédéfinies. Le format RGB consiste en trois valeurs représentant le rouge, le vert et le bleu. Chaque valeur peut être un nombre allant de 0 à 255 ou bien un pourcentage allant de 0% à 100% :
a { color: rgb(255,0,0) } /* tous les liens en rouge */
h2 { color: rgb(0%,50%,0%) } /* tous les titres de niveau 2 en vert */
Le deuxième format possible consiste en une valeur hexadécimale composé de six chiffres et précédée d'un dièse :
a { color: #FF0000 } /* tous les liens en rouge */
a:hover { color: #e8af56 }
Les deux premiers chiffres définissent la quantité de rouge, les deux suivant la quantité de vert et les deux derniers la quantité de bleu. Il est possible de donner une valeur hexadécimale à trois chiffres, chaque chiffre étant alors implicitement dupliqué :
a { color: #F00 } /* strictement équivalent à #FF0000 */
a { color: #ef4 } /* strictement équivalent à #eeff44 */
Ce format de couleur est le plus courant car le plus pratique : n'importe quel logiciel de retouche photo propose une palette de couleur permettant d'obtenir n'importe quel couleur sous ce format dit « HTML ».
Enfin, viennent les couleurs prédéfinies. Ce sont des noms tels que « black », « fuchsia », etc. Il en existe un certain nombre, mais 17 seulement sont des couleurs standards. Voici un tableau récapitulatif des 17 couleurs prédéfinies de CSS 2.1, avec leur équivalent hexadécimal et RGB :
| couleur | nom de couleur | équivalent RGB | équivalent hexadécimal |
|---|---|---|---|
| aqua | (0,255,255) | #00FFFF | |
| black | (0,0,0) | #000000 | |
| blue | (0,0,255) | #0000FF | |
| fuchsia | (255,0,255) | #FF00FF | |
| gray | (128,128,128) | #808080 | |
| green | (0,128,0) | #008000 | |
| lime | (0,255,0) | #00FF00 | |
| maroon | (128,0,0) | #800000 | |
| navy | (0,0,128) | #000080 | |
| olive | (128,128,0) | #808000 | |
| orange | (255,165,0) | #FFA500 | |
| purple | (128,0,128) | #800080 | |
| red | (255,0,0) | #FF0000 | |
| silver | (192,192,192) | #C0C0C0 | |
| teal | (0,128,128) | #008080 | |
| white | (255,255,255) | #FFFFFF | |
| yellow | (255,255,0) | #FFFF00 |
Nous avons déjà utilisé à plusieurs reprises la propriété color dans les exemples précédents. Cette propriété permet de définir une couleur à un texte :
p { color: green } /* colore tous les paragraphes en vert */
En CSS, il est possible de définir une couleur de fond et/ou une image de fond à n'importe quel élément.
La propriété background-color
Cette propriété accepte les mêmes valeurs que la propriété color :
body { background-color: #DEE0C6 }
La propriété background-image
Cette propriété permet de définir une image de fond d'un élément. Elle peut prendre deux valeurs : un URL, via la notation url() ou la valeur none.
body { background-image: url(images/fond.png) }
div { background-image: none }
La propriété background-repeat
Cette propriété permet d'indiquer de quel manière une image doit remplir le fond d'un élément. Elle peut prendre plusieurs valeurs : repeat, repeat-x, repeat-y et no-repeat. Par exemple :
body { background-repeat: repeat-y }
Voici à quoi correspond chaque valeur :
| repeat | répète l'image sur l'axe des abscisses et l'axe des ordonnées |
| repeat-x | répète l'image sur l'axe des abscisses (horizontal) |
| repeat-y | répète l'image sur l'axe des ordonnées (vertical) |
| no-repeat | affiche une seule fois l'image |
La propriété background-attachment
Cette propriété permet de définir si l'image de fond doit être fixe (valeur fixed) ou attachée au contenu (scroll, valeur par défaut) lorsqu'on fait défiler le contenu de la page :
body { background-attachment: fixed }
La propriété background-position
Cette propriété permet de définir la position d'une image de fond. Les valeurs possibles sont soit deux pourcentages, soit deux longueurs, soit un ou deux identificateurs, chaque fois séparés par un espace. Par exemple :
body { background-position: 50% 100% } /* positionne l'image en bas au centre */
body { background-position: right bottom } /* positionne l'image en bas à droite */
body { background-position: 12px 125px } /* positionne l'image à 12 pixels du bord gauche et à 125 pixels du bord supérieur */
La première valeur représente la position sur l'axe des abscisses (horizontale) et la seconde la position sur l'axe des ordonnées (verticale). Un identificateur est l'un mots suivants : top, left, center, right et bottom. Voici maintenant un tableau résumant les équivalences entre les identificateurs et les valeurs en pourcentage :
| identificateurs | équivalent en pourcentage | position |
|---|---|---|
| left top | 0% 0% | angle supérieur gauche |
| center top | 50% 0% | en haut, au centre |
| right top | 100% 0% | angle supérieur droit |
| left center | 0% 50% | à gauche, au centre |
| center | 50% 50% | au milieu |
| right center | 100% 50% | à droite, au centre |
| left bottom | 0% 100% | angle inférieur gauche |
| center bottom | 50% 100% | en bas, au centre |
| right bottom | 100% 100% | angle inférieur droit |
Le raccourci background
Toutes les propriétés précédemment évoquées peuvent être regroupées en une seule via la propriété background. Ainsi, cette règle :
body {
background-image: url(images/fond.png);
background-repeat: repeat-y;
background-attachment: fixed;
}
est strictement équivalente à celle-ci :
body {
background: url(images/fond.png) repeat-y fixed;
}
Les valeurs des différentes propriétés doivent simplement être séparées par un espace. En outre, il n'est pas nécessaire de respecter un ordre particulier, les valeurs de chaque propriété étant bien distinctes de celles des autres. C'est aussi pour cette raison que l'on peut très bien n'utiliser qu'une seule valeur ou bien toutes à la fois :
body { background: #DEE0C6 }
body { background: url(images/fond.png) no-repeat fixed center #DEE0C6 }
=> voir aussi http://openweb.eu.org/articles/background_css/
Cette propriété permet de définir un ou plusieurs noms de police de caractères ou noms de familles génériques de fontes à appliquer à un texte :
p { font-family: Verdana, Arial, sans-serif }
Cette règle va appliquer la police « Verdana » à tous les éléments <p> ou, si cette police n'est pas disponible sur l'ordinateur de l'internaute, la police « Arial », ou bien encore, si cette dernière n'est pas disponible, une police sans empattement (« sans-serif »). Ainsi, il est possible de définir plusieurs noms de police de caractères en les séparant par une virgule, la première disponible étant celle qui sera appliquée au texte. Quant à « sans-serif », il s'agit d'un nom générique de fonte. Il en existe cinq :
| nom générique | caractéristique |
|---|---|
| serif | polices avec empattement ("Times New Roman", "Garamond") |
| sans-serif | polices sans empattement ("Verdana", "Arial") |
| monospace | polices ayant tous les caractères de même largeur ("Courrier new") |
| cursive | polices plus proches de l'écriture manuscrite ("Comic Sans MS") |
| fantasy | polices décoratives ("Webdings") |
Si sur votre ordinateur vous possédez des dizaines ou centaines de polices de caractères, toutes ne sont pas forcément disponibles sur l'ordinateur de tous les internautes. C'est pourquoi il est recommandé de toujours spécifier un nom générique après un nom de police, de sorte que si la police de caractères n'est pas disponible sur la machine de l'internaute, une police similaire sera choisie par le navigateur. Sachez simplement qu'il n'existe aucune même police de caractères installée sur toutes les machines du monde ! Cependant, on peut citer quelques polices très courantes qui seront à utiliser de préférences à d'autres plus "exotiques", ou du moins en tant que deuxième police :
| police de caractères | nom générique |
|---|---|
| Arial | sans-serif |
| Courier New | monospace |
| Georgia | serif |
| Times New Roman | serif |
| Verdana | sans-serif |
Notez enfin que dans une règle CSS, les noms de polices composés d'un ou plusieurs espaces doivent être placés entre guillemets :
pre { font-family: "Courier New", monospace }
Il existe plusieurs unités de deux types différents permettant de régler la taille du texte (et que l'on peut également utiliser pour d'autres propriétés utilisant des longueurs). Les deux types d'unités de longueurs sont : les unités absolues (« cm », « mm », « in », « pt » et « pc ») et les unités relatives (« em », « ex » et « px »).
En plus de ces unités, on peut utiliser des pourcentages pour définir la taille d'un texte. Les unités qu'il est conseillé d'utiliser pour définir la taille d'un texte sont celles du type relative, car elles permettent à l'utilisateur de redimensionner la taille du texte quel que soit le navigateur utilisé. Mais, au final, seules deux unités sont recommandées pour cette propriété : em et % (pourcentage). Un em est une unité arbitraire définie proportionnellement à la taille de la fonte courante. Exemple :
body { font-size: .8em } /* .8em = 0.8em */
La graisse de la fonte peut se définir avec un nombre allant de 100 à 900 (100, 200, 300, 400, 500, 600, 700, 800 ou 900), mais il est plus courant d'utiliser les valeurs « normal » ou « bold » :
p { font-weight: bold } /* bold = 700 */
Cette propriété est généralement utilisée pour mettre un texte en italique. Elle accepte trois valeurs : « normal », « italic » et « oblique » :
p { font-style: italic }
Cette propriété permet de définir l'espace entre chaque caractère d'un texte. On utilise pour cela une longueur dont l'unité recommandée est em :
p { letter-spacing: .2em }
Notez qu'il est possible de spécifier une valeur négative pour condenser les caractères :
p { letter-spacing: -.1em }
La propriété text-align permet de régler l'alignement du texte, et peut prendre quatre valeurs : « left », « right », « center » et « justify » :
p { text-align: center }
Cette propriété accepte cinq valeurs, résumées dans ce tableau :
| valeur | description | exemple |
|---|---|---|
| underline | soulignement de chaque ligne du texte | texte |
| overline | surlignement de chaque ligne du texte | texte |
| line-through | chaque ligne du texte est traversée par une ligne à mi-hauteur | texte |
| blink | clignotement du texte (reconnu que par quelques navigateurs) | texte |
| none | supprime toute décoration | texte |
Il est également possible de combiner ces valeurs :
p { text-decoration: underline overline } /* souligne et surligne le texte */
Les propriétés « border » permettent de définir le style, la couleur et l'épaisseur de chaque coté du cadre d'un élément. Il existe au total 20 propriétés de bordure ! En effet, il est possible de définir chacun des trois paramètre d'une bordure (style, épaisseur et couleur) à chaque coté du cadre, ce qui fait donc déjà 12 propriétés. Les autres sont des « raccourcis » : 3 raccourcis pour chaque paramètre, 4 raccourcis pour chaque coté du cadre et 1 raccourci global (pour les trois paramètres des quatre cotés du cadre). Afin d'y voir plus clair, voici un tableau de toutes ces propriétés :
| style |
border-top-style border-right-style border-bottom-style border-left-style |
| épaisseur |
border-top-width border-right-width border-bottom-width border-left-width |
| couleur |
border-top-color border-right-color border-bottom-color border-left-color |
| raccourci par paramètre |
border-style border-width border-color |
| raccourci par coté |
border-top border-right border-bottom border-left |
| raccourci global | border |
Ces propriétés permettent de définir le style du cadre parmis 9 valeurs possibles :
dotted |
dashed |
|
solid |
double |
groove |
ridge |
inset |
outset |
Notez que chaque style n'apparaîtra pas forcément de la même manière dans tous les navigateurs.
Cette propriété accepte les mêmes valeurs que la propriété color.
Cette propriété accepte les mêmes valeurs que la propriété font-size. L'unité la plus répandue pour cette propriété est le pixel (px) car c'est l'unité la plus pratique pour ajuster l'épaisseur du cadre précisément.
Voici à présent un exemple de ces trois types de propriété :
h2 span {
border-left-style: solid;
border-left-color: #37679D;
border-left-width: 3px;
}
Pour les raccourcis border-top, border-right, border-bottom et border-left, les trois paramètres du cadre (style, épaisseur et couleur) doivent êtres indiqués, peu importe leur ordre. Ainsi, l'exemple précédent est strictement identique à celui-ci :
h2 span {
border-left: solid #37679D 3px;
}
Les raccourcis border-style, border-width et border-color acceptent entre 1 et 4 valeurs. Avec une seule valeur, celle-ci s'applique à tous les cotés du cadre. Avec deux valeurs, elles s'appliquent respectivement aux cotés horizontaux et verticaux du cadre. Lorsque trois valeurs sont spécifiées, la première s'applique au coté supérieur, la deuxième aux cotés verticaux et la troisième au coté inférieur. Quand les valeurs des quatre cotés sont indiquées, la première s'applique au coté supérieur, la deuxième au coté droit, la troisième au coté inférieur et la quatrième au coté gauche. Exemples :
border-color: blue; /* tous les cotés de la même couleur */ border-width: 1px 3px; /* épaisseur de 1px pour les cotés horizontaux, 3px pour les cotés verticaux */ border-width: 1px 3px 1px; /* équivalent de la déclaration précédente */ border-width: 1px 3px 1px 3px; /* équivalent de la déclaration précédente */
Enfin, l'ultime raccourci permet de définir en une seule déclaration le style, l'épaisseur et la couleur pour les quatre cotés du cadre d'un élément :
h1 {
border: 1px solid green;
}
La propriété display avec la valeur none permet de désactiver l'affichage d'un élément. Cela peut être très pratique si l'on ne souhaite pas afficher certaines parties de la galerie. L'exemple suivant permet de cacher la partie "statistiques" de la galerie :
#stats { display: none }
http://www.pompage.net/pompe/cssdezero-1/