28173 sujets

CSS et mise en forme, CSS3

bonjour,

je me demandais si en CSS à l'image de LateX, il était possible de reprendre un "environnement" comme img{} par exemple, en lui donnant un autre nom, par exemple img2{}, mais toutes les caractéristiques parents de l'environnement initial, nouvelle entité que l'on modifierait selon nos besoins ? (par exemple, une seule des caractéristiques parents: ajouter un cadre)....

merci,

Pluton
Salut,

les classes permettent de sélectionner un groupe d'éléments dans une page. En utilisant les sélecteurs CSS intelligemment, on doit y arriver sans devoir ajouter trop de code ...

Pour reprendre ton exemple, tu peux ajouter une bordure à toutes les images ayant l'attribut class="border"avec
img.border {
   border: 1px solid red;
}


Ça aide ou je suis à côté de la plaque ?
pour répondre à Hermann, imaginons la classe liste (li \li). Elle a des caractéristiques intrinsèques comme le type de bullet, la marge à gauche, l'indentation du texte.... Si on veut que toutes les listes du site soient identiques, on l'utilise telle quelle (la classe). Maintenant, si localement dans le site on veut une liste différente (le point est remplacé par une étoile par exemple), ce qui est fait en latex, c'est la création d'une nouvelle classe de type liste. Elle reprend en gros les caractéristiques existantes de (li \li) dans notre cas mais en modifie certaines comme l'étoile et avec un nouveau nom, par exmeple (li2 \li2).
J'ai réussi à faire ça avec content mais pas avec img, je ne sais pas pourquoi...

Je pense que la réponse de Thomas D. répond à la question, il faut juste que j'essaie pour voir si c'est le cas. Merci, je vous tiens au courant.

Pluton
Salut pluton Smiley cligne ,

je ne connais pas LateX mais d'après la façon dont tu en parles cela ressemble un peu aux classes java ou PHP Smiley rolleyes .

En tous les cas, cela ne me semble pas une bonne idée de comparer cette façon de voir avec les CSS : lorsque tu prends comme exemple la "classe" liste (li \li) il y a une confusion. Chaque "balise" d'une page html (li, ul, form, input...) a certaines caractéristiques par défaut en fonction du navigateur utilisé (un margin, un padding, un border, etc...).

Dans ta feuille CSS tu peux changer ces caractéristiques de plusieurs façons.

Par exemple globalement :
img {
border:none;
}
tu spécifies que toutes les balises img n'auront pas de border

Ou plus spécifiquement en mettant une "class" (ou un "id") à ta balise :

[b]CSS[/b]
img.border {
   border: 1px solid red;
}

[b]HTML[/b]
<img class="border" ...>
tu spécifies que toutes les balises img ayant une class="border" auront un border rouge de 1px d'épaisseur...

Si ce que je te dis n'est pas très clair Smiley murf je t'invite à jeter un oeil aux tutoriels (notamment "Bases et indispensables")...

A+ Smiley smile
oui, c'est très clair. En fait, c'est un peu la même façon de voir que Latex mais un peu moins automatisé. Dans le cas du CSS, à chaque que je veux q'une image ait une bordure rouge, je dois lui spécifier le code adéquat alors que dans latex, j'aurais créé une nouvelle classe qui automatiquement comprendrait une bordure rouge quand elle est appelé. En gros, ça permet de ne pas écrire class="border" à chaque fois que l'on veut un bord rouge autour d'une image, mais seulement img2 (nouvelle classe img avec un bord rouge autour).... Voilà voilà. Je vais essayer d'aller plus loin dans le CSS mais étant habitué un peu à Latex, j'avoue que j'aurais aimé transposer la philosophie....

merci,

Pluton
Bonjour

Ne connaissant LateX que de nom, si je comprends bien ton code devient :
<img2 src="toto.gif" etc...>

au lieu de :
<img class="border" src="toto.gif" etc...>
Pour être un peu précis: img (comme dans la balise <img />) et p (comme dans les balises <p>...</p>) ne sont pas des classes, mais des éléments HTML. Les éléments disponibles pour une version donnée de HTML sont définis dans la DTD (et décrits dans la spécification HTML correspondante), et sont en nombre limité.

Il ne sera donc jamais possible d'écrire: <p2>, <img4 />, etc.
Modifié par Florent V. (03 Aug 2007 - 14:33)