Modele CSS

Titre niveau 1 - <h1>…</h1>

Chapeau niveau 1 - <p class="chapo1">…</p> - lien rouge (par défaut)

 

Titre niveau 2 - <h2>…</h2>

Chapeau niveau 2 - <p class="chapo2">…</p> - lien rouge (par défaut)

 

Titre niveau 3 - <h3>…</h3>

Chapeau niveau 2 - <p class="chapo3">…</p> - lien orange (par défaut)

 

Titre niveau 4 - <h4>…</h4>

Chapeau niveau 4 - <p class="chapo4">…</p> - lien orange (par défaut)

 

Titre niveau 5 - <h5>…</h5>

 

Titre niveau 6 - <h6>…</h6>

 

Textes

Texte normal dans le corps de l’article avec lien orange (par défaut) :
<p> Lien de couleur orange esse filium criminis loco poni ab accusatoribus neque his iudicantibus oportuit neque defendentibus nobis.</p>

Texte normal dans le corps de l’article avec lien rouge :
<p class="textRed"> Lien de couleur rouge esse filium criminis loco poni ab accusatoribus neque his iudicantibus oportuit neque defendentibus nobis.</p>

Petit texte dans le corps de l’article avec lien orange (par défaut) :
<p class="textSmall">Equitis Roman autem esse filium criminis loco poni ab accusatoribus neque his iudicantibus oportuit neque defendentibus nobis.</p>

Petit texte dans le corps de l’article avec lien orange :
<p class="textSmall textRed">Equitis Roman autem esse filium criminis loco poni ab accusatoribus neque his iudicantibus oportuit neque defendentibus nobis.</p>

Listes

  • type liste « orange »  <ul><li> - lien orange (par défaut)
    • sous-liste <ul><li><ul><li>
  • item 2
  • item 3

 

  • type liste « rouge » <ul class="pucesRed"><li> - lien rouge (par défaut)
    • sous-liste <ul><li><ul>
  • item 2
  • item 3

Deux colonnes

<div class="largeur50">
Colonne 1
</div>

<div class="largeur50">

Trois colonnes

<div class="largeur33">
Colonne 1
</div>

<div class="largeur33">
Colonne 2
</div>

<div class="largeur33">
Colonne 3
</div>

Quatre colonnes

<div class="largeur25">
Colonne 1
</div>

<div class="largeur25">
Colonne 2
</div>

<div class="largeur25">
Colonne 3
</div>

<div class="largeur25">
Colonne 4
</div>

3/4 de colonne

<div class="largeur75">
Colonne 3/4
</div>

<div class="largeur25">
Colonne 1/4
</div>

Autres formats de colonne

Mise en page utilisée pour la présentation de certaines formations
Ex : novancia.fr/MS-Finance-entrepreneuriale

<div class="formaColonne">

Class formaColonne
Colonne 1

</div>

<div class="formaColonne">

Class formaColonne
Colonne 2

</div>

<div class="formaInfoColonne">

class formaInfoColonne

<p class="times">
class Times
</p>

<p class="cash">
class Cash
</p>

<p class="dates">
class dates texte
</p>

<p class="public">
<strong>

class public Strong
</strong>
class public texte
</p>

</div>

Classes spécifiques aux liens

Téléchargement

<p><a class="telecharger" href="#">Téléchargement 1 ligne</a></p>

<p><a class="telecharger2" href="#">
Téléchargement 2 lignes</a></p>

En savoir plus

<p><a class="savoirPlus" href="#">En savoir plus</a></p>

Les encarts

textBkg

<div class="textBkg">

<p class="titleTextBkg">Titre</p>

<p>texte</p>

</div>

textBkg couleur1

<div class="textBkg couleur1">

<p class="titleTextBkg">Titre</p>

<p>texte</p>

</div>

textBkg couleur2 encart

<div class="textBkg couleur2 encart">

<p class="titleTextBkg">Titre</p>

<p>texte</p>

</div>
<p>
Post quorum necem nihilo lenius ferociens Gallus ut leo cadaveribus pastus multa huius modi scrutabatur. quae singula narrare non refert, me professione modum, quod evitandum est, excedamus.</p>

<p>Post quorum necem nihilo lenius ferociens Gallus ut leo cadaveribus pastus multa huius modi scrutabatur. quae singula narrare non refert, me professione modum, quod evitandum est, excedamus.</p>

Images : <p><img src="..." />...<br/>...</p>

<p>Quis enim aut eum diligat quem metuat, aut eum a quo se metui putet ?</br>
Coluntur tamen simulatione dumtaxat ad tempus. Quod si forte, ut fit plerumque, ceciderunt, tum intellegitur quam fuerint inopes.</p>

 

<p>Quis enim aut eum diligat quem metuat, aut eum a quo se metui putet ?</br>
Coluntur tamen simulatione dumtaxat ad tempus. Quod si forte, ut fit plerumque, ceciderunt, tum intellegitur quam fuerint inopes.</p>

Vidéos

Les vidéos sont affichées à partir de notre chaîne You-Tube par iframe

Largeur 616px

<p><iframe allowfullscreen="" frameborder="0" width="616 height="347" src="lien embed de You-tube"></iframe></p>

Note : la balise <p> permet d’aligner la vidéo sur le texte.

Largeur 50

<div class="largeur50"><p>...</p></div><div class="largeur50"><p><iframe allowfullscreen="" frameborder="0" width="293" height="165" src="lien embed de You-tube"></iframe></p><p>...</p></div>

Post quorum necem nihilo lenius ferociens Gallus ut leo cadaveribus pastus multa huius modi scrutabatur. quae singula narrare non refert, me professione modum, quod evitandum est, excedamus.

Post quorum necem nihilo

Les tableaux

<table class="pairImpair">
<thead class="bkgCouleur1">
<tr><th>...</th><th>...</th>...</tr>
</thead>
<tbody>
<tr><td>...</td><td>...</td>...</tr>
</tbody>
</table>

  • La class pairImpair permet d’assigner automatiquement une couleur aux lignes paires et une couleur aux lignes impaires.
  • La class bkgCouleur1 permet d’assigner la couleur orange à la ligne d’en-tête thead.
Entête 1 Entête 2 Entête 2
texte texte texte
texte texte texte
texte texte texte