web-dev-qa-db-fra.com

Appliquer une feuille de style CSS différente pour différentes parties de la même page Web

J'ai une page Web avec différentes parties qui nécessitent l'application de feuilles de style CSS différentes à chacune. Ce que je voudrais savoir, c'est comment spécifier la feuille de style CSS à utiliser pour chaque partie différente de la page Web. si je les laisse tous ensemble, les composants ne s'affichent pas correctement.

cssstylesheet
22
C..

Vous ne pouvez pas appliquer différentes feuilles de style à différentes parties d'une page. Vous avez quelques options:

Le mieux est d'encapsuler les différentes parties de la page dans des divs avec des noms de classe:

<div class='part1'>
    ....
</div>

<div class='part2'>
    ....
</div>

Ensuite, dans votre CSS part1, préfixez chaque règle CSS avec ".part1" et dans votre CSS part2, préfixez chaque règle CSS avec ".part2". Notez qu'en utilisant des classes, vous pouvez utiliser un certain nombre de divs "part1" ou "part2" différents, pour délimiter de manière flexible quelles parties de la page sont affectées par quelles règles CSS.

20
Ned Batchelder

Il est appelé Cascading Feuilles de style (CSS) pour une raison ..

utilisez les règles spécificité de CSS pour cibler chaque section.

c'est à dire..

#section1 a{color:red}
#section2 a{color:blue}

cela fera tous les liens à l'intérieur d'un élément avec id section1 être rouge et tous les liens à l'intérieur d'un élément avec id section2 soyez bleu ..

<div id="section1">
 <a href="#">i will be red</a>
</div>
<div id="section2">
 <a href="#">i will be blue</a>
</div>
5
Gabriele Petrioli

Une feuille de style externe est appliquée à toute la page html. Afin d'appliquer différentes feuilles de style à différentes parties, Premièrement, la page html doit être divisée en différentes sections en utilisant la balise html (avec chaque div html à assigner un identifiant ou une classe unique) Deuxièmement, la feuille de style externe à appliquer à chaque div doit être conçue en fonction de l'id/classe qui lui est assignée

Exemple comme expliqué ci-dessus par Gaby alias G. Petrioli ...

1
kapil

Utilisez une classe différente pour chaque partie de votre page Web et personnalisez le code CSS pour chaque classe.

0
Ahmed Aman