> Tous les forums > Forum des Webmasters
 CSS Priorité de la prise en compte des propriétés.Sujet résolu
Ajouter un message à la discussion
Page : [1] 
Page 1 sur 1
telliak
  Posté le 28/10/2008 @ 11:33 
Aller en bas de la page 
Astucien

Bonjour,

Une question dont la réponse paraîtra triviale à nombre d'entre vous... car elle l'est sûrement .

Supposons que mon site soit constitué de 3 pages : PA (racine), PB (chargée depuis PA) et PC (chargée depuis PB).

A la page PA est associée une feuille de style CA. A la page PB sont associées, dans l'ordre, les feuilles de style CA et CB. A la page PC sont associées, dans l'ordre, les feuilles de style CA, CB et CC.

Si CA contient : #menu { width: 707px; } ... #menu ul { padding:3px 10px 0 101px; }

Si CB contient : #menu ul { padding:3px 10px 0 202px; } alors dans PB, menu aura une largeur de 707px et ul un padding gauche de 202px.

Si CC contient : #menu { width: 303px; } ... #menu ul { padding:3px 10px 0 303px; } alors dans PB, menu aura une largeur de 303px et ul un padding gauche de 303px.

Suffit de tester pour voir ? Oui, mais c'est la réponse théorique qui m'intéresse...

Merci d'avance pour votre aide éclairée.

Publicité
y.bli
 Posté le 28/10/2008 à 11:57 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Bonjour,

C'est le dernier lu qui s'applique.

Donc la dernière feuille de style l'emporte sur les précédentes, le dernier style d'un bloc l'emporte sur le style de la page et la dernière définition spécifique pour un paragraphe ou un mot l'emporte sur les autres.

@+

kalinka
 Posté le 28/10/2008 à 11:59 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Astucienne

theoriquement oui les css sont lus et affichées dans l'ordre donc si tu as 3 #menu c'est le dernier qui sera prioritaire mais pratiquement il est plus simple de differencier sur une seule feuille (surtout si le reste des css ne changent pas) tes #menu avec un id par exemple

#menua , #menua ul pour la page a

#menub, #menub ul pour la page b

elle
 Posté le 28/10/2008 à 15:44 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

y.bli a écrit :

C'est le dernier lu qui s'applique.

Donc la dernière feuille de style l'emporte sur les précédentes, le dernier style d'un bloc l'emporte sur le style de la page et la dernière définition spécifique pour un paragraphe ou un mot l'emporte sur les autres.

D'où l'appellation "cascading"...

telliak
 Posté le 28/10/2008 à 16:10 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Merci pour vos réponses.

Kalinka, ta réponse me chagrine : mon objectif est de définir une fois pour toute certains éléments de mes menus (tels que couleur ou dimension des caractères). Or si je suis ton conseil "pratique", je devrais modifier plusieurs feuilles si, par exemple, je veux passer du bleu au vert.

Vous les experts, comment faites-vous pour gérer ce point ?

P.-S. :

D'où l'appellation "cascading"...

Mon Oxford traduit en français Cascading par cascade et c'est un de mes pb, je ne comprends pas la métaphore de ce terme... peut-être parce que la cascade finit dans un tourbillon informe .

elle
 Posté le 28/10/2008 à 16:17 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

telliak a écrit :

Mon Oxford traduit en français Cascading par cascade et c'est un de mes pb, je ne comprends pas la métaphore de ce terme... peut-être parce que la cascade finit dans un tourbillon informe .

Par analogie, dans le sens d'un mouvement se déroulant en couches successives selon un axe vertical...

elle
 Posté le 28/10/2008 à 16:21 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

telliak a écrit :

mon objectif est de définir une fois pour toute certains éléments de mes menus (tels que couleur ou dimension des caractères). Or si je suis ton conseil "pratique", je devrais modifier plusieurs feuilles si, par exemple, je veux passer du bleu au vert.

Pourquoi ne fais-tu pas une seule feuille de styles? Si un menu est bleu à l'origine et que tu veux en mettre un vert, tu peux simplement créer une classe qui redéfinira uniquement la couleur. Les autres caractéristiques ne changeront pas.

kalinka
 Posté le 28/10/2008 à 16:38 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Astucienne

pourquoi plusieurs feuilles ?? avec mon conseil tout est regroupé sur une seule feuille css au lieu de trois par contre tu devras modifier le code de tes pages pour y inclure #menua, #menub etc etc mais tu ne devras le faire qu'une fois par page, ensuite chaque page cherchera le menu qui lui est attribué dans l'unique feuille de style

telliak
 Posté le 28/10/2008 à 17:16 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Bien sûr, chacun sa technique, LA solution n'existe pas.

Personnellement, je voulais prendre pour principes d'avoir :

- une feuille commune à l'ensemble des pages du site et contenant ce qui est commun à toutes les pages (positionnements, couleurs, formats des menus, etc.) ;

- une feuille pour chaque page (ou groupe de pages similaires) contenant les propriétés overridant -recouvrant, remplaçant, annulant?- ou complétant les définitions de la page principale.

Est-ce une organisation correcte ?

(Pour situer le volume, au départ je voyais écrire une quinzaine de pages, mais j'en suis à une bonne soixantaine dont une cinquantaine correspondent à trois types identiques, bref la centaine n'est pas loin)

y.bli
 Posté le 28/10/2008 à 18:13 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Re,

Sur mes sites j'ai un peu ton organisation :

- une page CSS commune à toutes les pages

- une page CSS complémentaire pour des groupes de pages comportant des similitudes

- des règles spécifiques à la page intégrées dans son <head>

@+

Dreamer
 Posté le 28/10/2008 à 18:49 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

telliak a écrit :

Bien sûr, chacun sa technique, LA solution n'existe pas.

Personnellement, je voulais prendre pour principes d'avoir :

- une feuille commune à l'ensemble des pages du site et contenant ce qui est commun à toutes les pages (positionnements, couleurs, formats des menus, etc.) ;

- une feuille pour chaque page (ou groupe de pages similaires) contenant les propriétés overridant -recouvrant, remplaçant, annulant?- ou complétant les définitions de la page principale.

Est-ce une organisation correcte ?

(Pour situer le volume, au départ je voyais écrire une quinzaine de pages, mais j'en suis à une bonne soixantaine dont une cinquantaine correspondent à trois types identiques, bref la centaine n'est pas loin)

Salut

Encore une solution .........Comme tu le dis un css , externe , commun à toutes les pages ... Et si il y a des propiétés uniques à chaque page , tu mets un css interne à ta page !!

telliak
 Posté le 28/10/2008 à 20:59 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

OK, merci à tous et à chacun.

Page : [1] 
Page 1 sur 1

Vous devez être connecté pour participer à la discussion.
Cliquez ici pour vous identifier.

Vous n'avez pas de compte ? Créez-en un gratuitement !
Recevoir PC Astuces par e-mail


La Lettre quotidienne +226 000 inscrits
Avec l'actu, des logiciels, des applis, des astuces, des bons plans, ...

Les bonnes affaires
Une fois par semaine, un récap des meilleurs offres.

Les fonds d'écran
De jolies photos pour personnaliser votre bureau. Une fois par semaine.

Les nouveaux Bons Plans
Des notifications pour ne pas rater les bons plans publiés sur le site.

Les bons plans du moment PC Astuces

Tous les Bons Plans
479,99 €PC portable 14 pouces Asus (Core i3, 8 Go RAM, SSD 256 Go, Windows 10, Office 365) + sac à 479,99 €
Valable jusqu'au 28 Janvier

Cdiscount fait une promotion sur le PC portable 14 pouces Asus R415JA-BV1155T qui passe à 479,99 € au lieu de 550 €. Ce portable dispose d'un écran 14 pouces HD (1368x 768 pixels), d'un processeur Intel Core i3-1005G1, de 8 Go de RAM et d'un espace de stockage SSD de 256 Go, d'une webcam, du WiFi et du bluetooth, de l'USB 3.0. Il pèse 1,6 kg et offre une autonomie de 5h environ.

Notez qu'un abonnement d'1 an à Office 365 (Word, Excel, OneNote, PowerPoint, Outlook, Access et Publisher) vous est également offert ainsi qu'une sacoche et une souris.

Une bonne affaire pour un petit portable à emmener partout avec vous.


> Voir l'offre
486,02 €Mini PC Beelink SER3 (Ryzen 7 3750H, 16 Go RAM, SSD 512Go) à 486,02 € avec le code BEEMINI4
Valable jusqu'au 30 Janvier

Geekbuying fait une promotion sur l'excellent mini PC Beelink SER3 qui passe à 486,02 € avec le code BEEMINI4. On le trouve habituellement autour de 640 €. Ce mini PC intègre un processeur AMD Ryzen 7 3750H (4 coeurs), 16 Go de RAM DDR4 et un SSD NVMe de 512 Go au format M.2 (un emplacement 2.5' libre est également disponible). Il possède un chip graphique RX Vega 10 qui fera tourner tous vos jeux. Il intègre le WiFi 5, le bluetooth 5.1, un port Ethernet Gigabit, 4 ports USB 3.0, un port USB-C et deux connecteurs HDMI. 

L'expédition se fait depuis un entrepôt en Allemagne et la TVA est comprise. Vous êtes ainsi certains d'être livré rapidement et de ne pas avoir de douane.

Une excellente affaire pour un PC très performant, silencieux et qui ne prendra pas de place ! 


> Voir l'offre
179,99 €Ecran 24 pouces AOC 24G2U5/BK (IPS, FullHD, 1 ms, 144 Hz, FreeSync) à 179,99 €
Valable jusqu'au 27 Janvier

Darty propose actuellement l'écran 24 pouces AOC 24G2U/BK à 179,99 € alors qu'on le trouve ailleurs à partir de 229 €. Cet écran à rétroéclairage LED dispose d'une dalle IPS Full HD (1920x1080), dispose d'entrées HDMIx2 et DisplayPort. 

Grâce à son temps de réponse ultra rapide de 1 ms et à sa fréquence de 144 Hz, compatible FreeSync et GSync, il se distingue par son excellente réactivité ! Il possède les technologies anti-scintillement (Flicker Free) et anti lumière bleue (Eye Care).  Il est réglable en hauteur et intègre des haut-parleurs et un hub USB 3.0 (4 ports).

Une excellente affaire !


> Voir l'offre

Sujets relatifs
changement de page non prise en compte
CVaden/Viadeo compte recruteur
Transfert de fichiers pas pris en compte
Compte Google Adsense désactivé
Centrer élément sans tenir compte du défilement ho
compte à rebours
créer un compte à Rebours
créer un compte?
Propriétés de la page - Liens
Mon compte Lycos ?
Plus de sujets relatifs à CSS Priorité de la prise en compte des propriétés.
 > Tous les forums > Forum Forum des Webmasters