HTML - Premier pas
Créer une règle de style dans la feuille de style et son emploi dans le code source d'une page HTML.
Feuile de style CSS
Avant modifications il faut consulter l'aide, suivre ce [lien] et je vous conseille de faire une copie de votre feuille de style. En aucun cas ma responsabilité ne sera engagée, je vais mettre simplement en exemple ce qui fonctionne sur mon site/blog et si nécessaire vous aider à le mettre en place sur le vôtre selon mes connaissances.
Dans un premier temps j'ai créé une nouvelle règle dans le fichier CSS, "#article". Ceci pour délimiter le contenu global de mes articles dans la structure de la page HTML, laquelle contient déjà plusieurs divisions *(blocs, boites ou calques) empilées les unes au-dessus des autres et "#article" viendra en dernier.
- html
- #body
- #conteneur
- #head
- #menu_haut
- #menu_gauche
- #rubriques
- #article, que j'ai créé dans mon site/blog Bric à Brac.
Bien sûr chacune de ces divisions peut à son tour contenir des divisions qui viendront également s'empiler, comme c'est déjà le cas avec le titre, le menu du haut, le menu de gauche.
Chaque division peut avoir un style différent, à l'aide d'une règle de CSS, dans le cas contraire une division hérite du style de la division précédente.
En plus, dans chaque division, les "sélecteurs", appelés "balises" ou "tags" en HTML peuvent également avoir leur règle CSS :
- Titres : <h1>, <h2>, <h3>,...
- Paragraphe : <p>
- Span : <span>
- Liens : <a>
- Image : <img>
- Listes : <ul>, <ol>, <li>.
- Tableau : <table> <tr> <td>...
Ceci est un petit rappel de façon à pouvoir plus facilement expliquer la suite, j'indique ci-dessous des liens de ma documentation pour ceux qui souhaitent approfondir le sujet.
Liste des balises Html Tout sur le CSS Sommaire de référence: CSS
Règle - #article + celles des titres
text-align: left;
color: #00FFFF;
background: #000066;
font: 12pt;
font-family: "Comic Sans MS", Arial;
padding: 2px 2px 2px 2px;
margin: 2px 2px 2px 2px;
}
/* ici possible de modifier titre h2 article */
#article h2 {
border: 1px solid #FF6600;
margin: auto;
padding: 1%;
background: #FFFFCC;
color: #CC3300;
text-align: left;
text-indent: 3%;
font-family: Trebuchet MS;
font-style: normal;
font-weight: bold;
font-size: 13pt;
}
/* ici possible de modifier titre h3 article */
#article h3 {
background: url(img5/rub.jpg) no-repeat;
margin: 10px 0 10px 0;
width: 530px;
padding: 10px 0 15px 15px;
font: bold 11pt Comic Sans MS;
color: #FBB420;
}
Règle - .articlebleu (création class)
.articlebleu {
margin: 10px;
padding: 10px;
background: #dce4e5;
text-align: left;
color: #000066;
font-family: "Comic Sans MS",Arial,sans-serif;
width: 480px;
overflow: auto;
}Code Source HTML
Dans l'espace qui est réservé à la rédaction des articles, une division unique sera nommée par "<div id="article">" qui sera géré par la nouvelle règle "#article". Je précise que le nom de cette "id" "article" sera unique dans la page, une seule division nommée ainsi par page. D'autres divisions auront des "class" avec des règles de style ayant un point devant leur nom exemple ".articlebleu"
Dans cette division <div id="article"> seront utilisées les diverses balises HTML (ayant une règle ou pas) et également d'autres divisions(ayant une règle ou pas), sachant bien sûr qu'il est toujours possible d'appliquer un style en direct à ces balises ou divisions ainsi que sur le texte, comme on le fait dans le composeur de l'espace de gestion. Je reviendrai sur ce sujet au cours de mes exemples, pour faciliter la compréhension, petit à petit j'indiquerai le code et la façon de l'écrire.
Site du zéro Sommaire de référence: HTML
Code source - Exemple N°1
<br>
<h2>Exemple de page servant à un article sur CSS et HTML.</h2><br><br>
<h3>Titre intermédiaire N°1</h3><br>
<div class="articlebleu">
Division avec la règle artilebleu qui permet de faire
un bloc avec un fond différent du fond de l'article.
</div><!-- fin articlebleu -->
<br>
<p>Il est également possible d'écrire directement dans le bloc article,
le texte sera paramétré selon la règle <b>#article</b></p>
<br>
<h3>Titre intermédiaire N°2</h3><br>
<div class="articlebleu">
<p>Possibilité d'en faire plusieurs sur la même page.</p>
<p>Même avec des paragraphes à l'intérieur de ce bloc, pour faire
une présentation bien structurée.</p>
</div><!-- fin articlebleu -->
<br><br>
</div><!-- fin article -->
<br><br>
En copiant les règles et en les collant à la fin de votre fichier CSS, en principe sans problème en suivant la procédure indiquée dans les tutoriels. Un nouvel article d'essai pourra être créé, il suffit de copier le code source HTMLci-dessus et de le coller dans le composeur en ouvrant en HTML( cocher la case option) , puis sans oublier de décocher la case option, ajouter cet article pour voir le résultat dans votre blog.
Si le résultat est bon, en modifiant le texte mis pour faire l'essai, cet article pourra être utilisé à votre convenance, dans la suite de mes articles je montrerai les diverses possibilités de modifications... à bientôt.
