aide gratuite page perso Accueil  | Internet | Informatique | Créer sa page persoGlossaireMenu | CSS
www.aidenet.com

 

CSS
Feuilles de style
Priorité des styles internes
sur feuille externe css

Page - 23  www.aidenet.com

 


exemple css

Ajout conjoncturel d'un style

Précision importante : cette page est liée à la feuille externe "vert.css".

Par exemple plusieurs paragraphes de votre page font appel à un style bien défini qui ne se trouve pas sur votre feuille externe. Cette solution n'est souhaitable que si ces styles ne sont appliqués que rarement et à titre conjoncturel. La "Définition spécifique" de la page 3, à l'aide des balises DIV référence page 18 peut alors être employée et ces codes deviennent prioritaires sur toutes autres définitions. (Sauf "! important" qui sera vu plus tard.)

Vous pouvez alors conserver cette feuille externe ( pour cet exemple existe le fichier de la page 21 avec son lien dans le code source placé entre les HEAD : <link rel="stylesheet" type="text/css" href="vert.css">). Mais pour les besoins conjoncturels de cette page et de ses exemples, il va être placé entre les deux HEAD, la (ou les) déclaration(s) adéquate(s).

 

Paragraphe avec "Méthode interne"

Code ajouté dans HEAD de cette page

 

<style type="text/css">

p.italic
{
font-style: italic ;
color: green ;
font-size:14pt ;
}
</style>

 

Code 1 appliqué au paragraphe dans BODY

<p class="italic">Les chroniques rapportent qu'en 1994 aurait eu lieu une comp&eacute;tition d'aviron entre l'&eacute;quipe de l'ENA et celle d'une &quot;Petite universit&eacute; de province&quot;.&lt;/P&gt;</p>
<p>Quant &agrave; cette deuxi&egrave;me partie du paragraphe, le s&eacute;lecteur &quot;p&quot; qui s&eacute;pare, fait que le code &quot;p.italic&quot; ne le concerne plus. voir la suite pour obtenir l'inverse.</p>


Résultat de l'exemple 1

Les chroniques rapportent qu'en 1994 aurait eu lieu une compétition d'aviron entre l'équipe de l'ENA et celle d'une "Petite université de province".

Quant à cette deuxième partie du paragraphe, le sélecteur "p" qui sépare, fait que le code "p.italic" ne le concerne plus. voir la suite pour obtenir l'inverse.

Remarque : en effet à la fin du mot en vert "province", se trouve un </p> fermé et, de ce fait le nouveau paragraphe qui démarre sur un <p> ouvert rend la priorité à la feuille de styles externes c-à-d en 10pt, noir et style normal.


 

Pour obtenir la présentation tout en vert il faut considérer les deux paragraphes comme n'en formant qu'un seul, et supprimer le </p> fermé bleu et ensuite remplacer le <p> ouvert par <br> qui égale un retour à la ligne. Pour simuler un interligne normal placer deux <br> en suivant. (Majuscule+Entrée).

 

Code 2 appliqué au paragraphe complet, dans BODY

<p class="italic">Les chroniques rapportent qu'en 1994 aurait eu lieu une comp&eacute;tition d'aviron entre l'&eacute;quipe de l'ENA et celle d'une &quot;Petite universit&eacute; de province&quot;.&lt;/P&gt;
<br><br>
Quant &agrave; cette deuxi&egrave;me partie du paragraphe, il n'y a plus de
s&eacute;lecteur &quot;p&quot; qui s&eacute;pare, et le code &quot;p.italic&quot; concerne donc tout le paragraphe.</p>

 

Résultat de l'exemple 2

Les chroniques rapportent qu'en 1994 aurait eu lieu une compétition d'aviron entre l'équipe de l'ENA et celle d'une "Petite université de province".

Quant à cette deuxième partie du paragraphe, il n'y a plus de sélecteur "p" qui sépare, et le code "p.italic" concerne donc tout le paragraphe.




Méthode interne (déclaration spécifique) pour mémoire

Code 3 dans BODY devant le paragraphe

< span style="font-family: arial, verdana, sans-serif ; font-style: italic ; color: green ; background-color: #FFFFFF ; " > "Les chroniques rapportent qu'en 1994 aurait eu lieu une compétition d'aviron entre l'équipe de l'ENA et celle d'une "Petite université de province". </span>

 

Résultat de l'exemple 3

Les chroniques rapportent qu'en 1994 aurait eu lieu une compétition d'aviron entre l'équipe de l'ENA et celle d'une "Petite université de province".

 

Maintenant vous pouvez soit revenir en arrière pour revoir la page traitant de cette méthode externe >>>  page 21  ou sinon continuer à avancer en cliquant le lien ci-dessous ...

  

Sommaire CSS... @ ... Mise en forme des paragraphes

 

 

 aide gratuite

Tous droits réservés © 1997- 2005. www. aidenet.com

 

validateur HTML  validateur CSS