Nouveau design - Maxi Style
ACCUEIL <<< Partie "Contenu" <<<
 |
 |
 |
 |
 |
 |
 |
 |
 |
<!--
body{background:#707070;}
#cadre{background:#303030;}
#haut{background:#CFCFCF;}
#barre{background:#;}
#menu{background:#B0B0B0;}
#bas{background:#CFCFCF;}
#menu ul li{background:#B0B0B0;}
#menu ul li a{background:#606060; color:#3F3F3F;}
#contenu {
background:#CFCFCF;
padding: 10px;
border-width : 4px;
border-style : inset;
border-color : #707070;
color:#3F3F3F;
}
#contenu p {
padding: 5px;
background: transparent;
margin-bottom: 15px;
margin-left: 40px;
margin-right: 20px;
font-family: Comic sans MS;
}
.P1 {
margin: 20px auto;
padding: 10px;
background: #cc0000;
color: yellow;
width: 480px;
}
.P2
{
margin: 3px auto;
padding: 2px;
background: #EDEDED;
color: #CC0000;
width: 80%;
text-align:center;
}
.P3
{
margin: 20px auto;
padding: 10px;
background: #606060;
color: #CFCFCF;
width: 80%;
}
-->
</style>
Dans le code ci-dessus je reprends le Mini Style de l'article précédent [lien], uniquement pour montrer une procédure qui fera encore gagner de la place et du temps. J'ai également ajoutés quelques attributs supplémentaires, ainsi constitué une feuille de style plus importante. Ceci va me permettre de créer un article, avec un design différent, de gérer plusieurs présentations de paragraphes ou blocs.
Dans le style inséré dans cette page j'ai rajouté les régles pour les menus, haut et gauche. Pour éviter de compliquer mon article ce code n'est pas affiché ci-dessus, c'est inutile car ce n'est pas recommandé de faire ainsi dans chaque article, je me le suis permis pour tester et pour démontrer les possibilités du CSS. Vous pourrez également créer un article test mais si votre code est très long, il serait préférable de le mettre dans la bordure gauche ou droite(en version payantes), pour l'utiliser dans tous vos articles. Pour la création d'une feuille de style plus importante, je ferai des articles dans BRIC A BRAC(en version Gold), utilisation de la bordure, avec feuille complémentaire interne et même externe, du travail en perspective.
Pour ceux qui sont sous DizPerso, ils pourront garder et gérer la feuille de base, plus avoir des minis styles en version gratuites ou des feuilles complémentaires en version Silver ou Gold.
Les paragraphes en dessous des lignes de séparation, sont des extraits d'articles, en exemple de présentation, sans rechercher un design déco, seulement des variantes après chacun adaptera à son instinct créatif.
Paragraphe normal: balise P
Où et comment insérer du langage CSS pour remplacer ponctuellement le style global créé dans le DizPerso, voir avant, dans l'article précédent [lien] quelques conseils pour la saisie des articles dans le composeur de Blog4ever et un aperçu de l'insertion de style dans les balises HTML.
Exemples de paragraphes transformés en blocs.
puis formatage direct dans le composeur
Ce style étant utilisé plusieurs fois, vous imaginé facilement la quantité de code en moins à saisir et le gain de place. Certainement un peu difficile pour les non-initiés, par la suite j'essayerai de montrer un exemple plus simple, plus explicite de l'emploi de cette balise. Dans un premier temps elle n'est pas absolument indispensable
Les points forts du CSS... les diverses possibilités d'organiser les variantes de style, du global au détail du mot à mot, font de ce langage un outil fabuleux. La cerise sur le gâteau, vous le comprendrez, quand vous souhaiterez modifier, la couleur ou la taille des caractères de certaines parties de votre texte dont le style est géré par une règle de CSS. En changeant 2 valeurs, plusieurs pages seront modifiées... quel bonheur!!! D'où l'importance de bien prévoir cet avantage en créant vos formats de style, l'action de chaque règle selon son niveau, bien qu'il soit toujours possible de formater une exception, mon petit exemple le prouve.
Commentaires