Page 1 sur 1

Imbriquer des classes en CSS

Posté : 09 janv. 2008, 19:07
par agité
Bonjour,

Pour pouvoir utiliser plusieurs elements dans divers feuille de style, il faudrait pouvoir les imbriquer, pour ca je n'ai encore aucune methode.

Il existe un moyen de reutiliser les noms de classes comme par exemple :

#header{ width: xx }

#header { background-color:xx}

maintenant j'ai une classe qui definis la couleur
.bgcolor1{backround-color:xx}

et je voudrais reutiliser ce bgcolor dans une autre classe type
.montableau{ je veux en plus mon bgcolor 1 }

plutôt que de redefinir la couleur a l'interieur de cette nouvelle classe.

une idée ? 8-)

Posté : 09 janv. 2008, 19:35
par Elie
Euh autant le remettre franchement ...

Mais bon je dis ca parce que j'ai pas la réponse :)

Posté : 09 janv. 2008, 20:10
par Berzemus
Tu peux donner plusieurs classes à un objet.

Code : Tout sélectionner

<a class="lien gras fondrouge" href="#">Texte du lien</a>
et des styles:

Code : Tout sélectionner

.lien { text-decoration:underline; color:blue; } .gras { font-weight:900; } .fondrouge { background-color:red; }

Posté : 09 janv. 2008, 21:05
par AB
Une autre variante, tu peux faire aussi par exemple

Code : Tout sélectionner

<style type="text/css"> .montableau, .bgcolor1 { background-color:#00CCCC; } .montableau { width:500px; border: 2px solid black; font-size:12px: } </style>

Posté : 10 janv. 2008, 04:40
par AB
En reprenant ton code tu peux bien entendu faire

Code : Tout sélectionner

<style type="text/css"> #header{ width: xx; } #header, .montableau, .bgcolor1 { background-color:#00CCCC; } .montableau { width:500px; border: 2px solid black; font-size:12px: } </style>

Posté : 10 janv. 2008, 11:00
par agité
Oui bien sur c'est déjà ce que je fais mais je ne veux pas imbriquer des elements de style dans une page ni donner des informations sur la structure puis sur le style.

Ce que je voudrais c'est pouvoir definir par exemple la couleur 1 comme :

.color1{ #FFFFFF; }

Et ensuite mettre cette balise dans une autre pour pouvoir reutiliser sur tout le site

De maniere a ce que je fasse par exemple, mon menu avec des elements qui ont la .color1

Et ensuite mettre cette .color1 dans les propriété de mes autres elements sans avoir a redefinir le #FFFFFF;

Pour faire un exemple mais je connais pas la methode :

#Montableau{ .color1; width:xx; height:xx; }

Comme ca la couleur si elle est changer l'est sur tout les elements menu + contenu du site.

je sais pas si je suis assez clair :?

Posté : 10 janv. 2008, 11:18
par Calimero
CSS ne permet hélas pas de faire des "variables". Mais tu peux par contre faire du php dans ta CSS, exactement comme tu le fais dans du HTML. C'est ce que je te recommande pour ton besoin.

Il faut commencer par nommer ta css en .php (pour que ton serveur web comprenne qu'il y a du PHP à éxécuter dedans). Il faut également changer les balises <link> de ton site qui font référence à la CSS pour prendre en compte ce changement de nom.

Voici la première ligne de ta css.php :
<?php header('Content-Type: text/css'); ?>
Elle permet au navigateur de reconnaître que le contenu servi par ce fichier est bien de type CSS.

La partie intéressante commence maintenant : tu vas pouvoir définir ta couleur une seule fois, directement en php, par exemple comme ceci :
<?php $color1='#FF0000'; // vive le rouge ! ?>
Et tu pourras l'utiliser dans autant de classes CSS que tu veux, comme ceci :
.maclassecss {color:<?php echo $color1; ?>;}
Et voilà le travail. On appelle parfois cette technique "CSS dynamique" ;-)

Posté : 10 janv. 2008, 11:19
par Berzemus
Le css n'est pas un langage de programmation.. y'a pas de variables ni tout ça.

ce que tu peux faire, c'est d'y mettre du php, en configurant ton serveur pour qu'il parse le fichier css. Le client ne verra qu'une ligne de style, mais du côté serveur ce sera une feuille de style dynamique.

edit: grilled..

Posté : 10 janv. 2008, 11:59
par agité
Merci pour cette reponse Calimero

CSS n'utilise pas de variables mais je pensais qu'il existait une methode d'imbrications des classes, etant donné son nom cascading style sheet.

Mais un fichier en php generer dinamiquement ca me semble un bon compromis.

Merci pour ta reponse je met la balise [Resolu].

Posté : 10 janv. 2008, 12:21
par Calimero
A ton service ! Content d'avoir pu t'aider ;-)
CSS n'utilise pas de variables mais je pensais qu'il existait une methode d'imbrications des classes, etant donné son nom cascading style sheet.
Je vois bien ton incompréhension. Le côté "cascading" des CSS n'est pas simple à appréhender, bien qu'il soit puissant et qu'il permette, s'il est bien maîtrisé, de faire plus ou moins quelquechose comme tu le souhaites. Mais cela dépend de plusieurs facteurs (structure du HTML, attribution des classes, choix des sélecteurs, complexité du design, compatibilité avec tel ou tel navigateur plus ou moins respectueux de la norme...) et selon le stade de développement où on se situe, on n'en tire pas toujours tous les bénéfices que l'on devrait dans un monde idéal.

J'ajouterais que si on en abuse on arrive à une CSS compliquée, très "technique" et peu "lisible" par un humain, ce qui peut poser problème si elle doit servir de base de travail à un site qui change de design tous les mois par exemple.

Je t'invite à te plonger dans la lecture de la norme CSS2 pour approfondir les possibilités du langage CSS, comment les navigateurs se comportent exactement envers ces directives (et le mécanisme de cascade) et aussi les limites de ce langage, qui font que la technique des CSS dynamique peut parfois être salutaire, comme dans ton cas.

Posté : 10 janv. 2008, 12:34
par agité
Disons que l'utilisation de php et CSS rends la feuille beaucoup moins lisible c'est sur mais je pense qu'en organisant avec des commentaires et gerant des feuilles de styles séparées il serait au final bien plus simple a entretenir que de revenir sur chaque page.

Par exemple si je veux changer la couleur il me suffira de changer le $Couleur1 plutôt que de repecher sur toute les pages et changer, c'est un gain de temps assez consequent.

Debugger de la manière suivant me permet de n'avoir a changer qu'une variable !

Bref je vais regarder ton lien sur le CSS2 mais je ne pense pas pouvoir y trouver de solution a mon problème, peut être que CSS3 apportera une solution :P

Posté : 10 janv. 2008, 12:54
par Calimero
Bref je vais regarder ton lien sur le CSS2 mais je ne pense pas pouvoir y trouver de solution a mon problème, peut être que CSS3 apportera une solution :P
Non, pas de vraie solution en effet, mais simplement de quoi lire et apprendre. Si tu avais eu une meilleure maîtrise des CSS avant d'écrire ce post, tu aurais pu mieux le formuler dès le départ, ce qui nous aurait permis de mieux répondre, et plus vite, à ton besoin.

Il faut être curieux, et je te sens mûr pour lire et assimiler la norme (qui est indigeste pour le débutant, il faut bien l'admettre), c'est pourquoi je te conseille cette lecture ;-)