64
Maîtrise des CSS
background-image: url(/img/bullet.gif);
background-repeat: no-repeat;
background-position: 0 50%;
}
La.spécification.CSS.indique.que.vous.n’êtes.pas.censé.mélanger.des.unités.telles.que.des.
pixels.ou.des.pourcentages.avec.des.mots-clés..Cette.règle.n’a.pas.beaucoup.de.sens.et,.de.
fait,.bon.nombre.des.navigateurs.web.l’ignorent.délibérément..Quoi.qu’il.en.soit,.le.mélange.
des.unités.et.des.mots-clés.échoue.sur.certains.navigateurs.et.risque.de.rendre.vos.CSS.invalides..Cette.option.n’est.donc.pas.judicieuse,.pour.le.moment..
Pour. gagner. du. temps,. les. CSS. proposent. aussi. une. version. raccourcie. de. la. propriété.
background..Elle.permet.de.définir.toutes.les.propriétés.en.une.fois,.sans.les.détailler.de.
manière.individuelle..
h1 {
background: #ccc url(/img/bullet.gif) no-repeat left center;
}
Si.le.fonctionnement.des.images.d’arrière-plan.est.assez.simple.à.comprendre,.il.n’en.forme.
pas.moins.la.base.de.nombreuses.techniques.CSS.avancées..
Boîtes à bords arrondis
L’une. des. principales. critiques. qu’essuient. les. mises. en. page. CSS. tient. au. fait. qu’elles.
sont.très.carrées,.structurées.de.manière.rectangulaire..Certains.concepteurs,.pour.parer.à.
ce. problème,. ont. alors. commencé. à. concevoir. des. pages. en. incorporant. plus. de. formes.
courbes..Les.rectangles.à.bords.arrondis.sont.rapidement.devenus.l’une.des.techniques.les.
plus.recherchées.en.CSS..Il.existe.plusieurs.moyens.de.créer.des.boîtes.à.bords.arrondis..
Chacun. a. ses. avantages. et. ses. inconvénients..Votre. choix. dépendra. en. grande. partie. des.
. circonstances.dans.lesquelles.vous.souhaiterez.les.utiliser..
Boîtes à largeur fixe et bords arrondis
Les.boîtes.de.largeur.fixe.à.bords.arrondis.sont.les.plus.faciles.à.créer..Elles.ne.requièrent.
que.deux.images :.l’une.en.haut.de.la.boîte.et.l’autre.en.bas..Par.exemple,.supposons.que.
vous.souhaitiez.créer.une.boîte.comme.celle.de.la.Figure 4.3.
Figure 4.3
Une boîte simple à
bords arrondis.
Maîtrise des CSS
background-image: url(/img/bullet.gif);
background-repeat: no-repeat;
background-position: 0 50%;
}
La.spécification.CSS.indique.que.vous.n’êtes.pas.censé.mélanger.des.unités.telles.que.des.
pixels.ou.des.pourcentages.avec.des.mots-clés..Cette.règle.n’a.pas.beaucoup.de.sens.et,.de.
fait,.bon.nombre.des.navigateurs.web.l’ignorent.délibérément..Quoi.qu’il.en.soit,.le.mélange.
des.unités.et.des.mots-clés.échoue.sur.certains.navigateurs.et.risque.de.rendre.vos.CSS.invalides..Cette.option.n’est.donc.pas.judicieuse,.pour.le.moment..
Pour. gagner. du. temps,. les. CSS. proposent. aussi. une. version. raccourcie. de. la. propriété.
background..Elle.permet.de.définir.toutes.les.propriétés.en.une.fois,.sans.les.détailler.de.
manière.individuelle..
h1 {
background: #ccc url(/img/bullet.gif) no-repeat left center;
}
Si.le.fonctionnement.des.images.d’arrière-plan.est.assez.simple.à.comprendre,.il.n’en.forme.
pas.moins.la.base.de.nombreuses.techniques.CSS.avancées..
Boîtes à bords arrondis
L’une. des. principales. critiques. qu’essuient. les. mises. en. page. CSS. tient. au. fait. qu’elles.
sont.très.carrées,.structurées.de.manière.rectangulaire..Certains.concepteurs,.pour.parer.à.
ce. problème,. ont. alors. commencé. à. concevoir. des. pages. en. incorporant. plus. de. formes.
courbes..Les.rectangles.à.bords.arrondis.sont.rapidement.devenus.l’une.des.techniques.les.
plus.recherchées.en.CSS..Il.existe.plusieurs.moyens.de.créer.des.boîtes.à.bords.arrondis..
Chacun. a. ses. avantages. et. ses. inconvénients..Votre. choix. dépendra. en. grande. partie. des.
. circonstances.dans.lesquelles.vous.souhaiterez.les.utiliser..
Boîtes à largeur fixe et bords arrondis
Les.boîtes.de.largeur.fixe.à.bords.arrondis.sont.les.plus.faciles.à.créer..Elles.ne.requièrent.
que.deux.images :.l’une.en.haut.de.la.boîte.et.l’autre.en.bas..Par.exemple,.supposons.que.
vous.souhaitiez.créer.une.boîte.comme.celle.de.la.Figure 4.3.
Figure 4.3
Une boîte simple à
bords arrondis.