Créer et modifier les feuilles de style d'un site SPIP
(→Eléments, identifiants et classes : amélioration de la mise en forme) |
|||
| Ligne 75 : | Ligne 75 : | ||
Un style peut s’appliquer à un élément html, à un identifiant ou à une classe. | Un style peut s’appliquer à un élément html, à un identifiant ou à une classe. | ||
| − | * les éléments html sont par exemple body, a, p... A chacun peut être attribué des caractéristiques de style. | + | * les '''éléments''' html sont par exemple ''body'', ''a'','' p''... A chacun peut être attribué des caractéristiques de style.<br>Dans la feuille de style, la syntaxe est alors : <br><code>élément1 déclaration de style ; <br>élément2 déclaration de style ;</code> |
| − | Dans la feuille de style, la syntaxe est alors : | + | |
| − | + | ||
| − | déclaration de style ; | + | |
| − | + | ||
| − | déclaration de style ; | + | |
| − | + | ||
| − | Une possibilité offerte par les identifiants est d’utiliser des ancres du type a href="#navigation" pour créer | + | * les '''identifiants''' # concernent un élément unique dans la page html (signalé par div id="xxx" dans la page html ; par exemple, div id="''principal''" appellera dans la page html les caractéristiques de style associées à ''#principal'' dans la feuille de style). <br>Dans la feuille de style, la syntaxe est alors : <code></code><br>Une possibilité offerte par les identifiants est d’utiliser des ancres du type ''a href="#navigation"'' par exemple pour créer sur l’expression "Retour au menu principal" un lien vers le menu principal. |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | Les classes de style peuvent également ne s’appliquer qu’à un type d’éléments spécifique de la page html. Au lieu d’être appelée par div id="xxx" depuis la page html, une classe peut l’être par exemple par l’élément p marquant les paragraphes. Cela donne p class="xxx" dans la page html | + | * les '''classes''', autres caractéristiques de style, appelées par div class="xxx" depuis la page html et se présentant dans la feuille de style sous la forme :<br><code>.xxx déclaration de style ;<br>.yyy déclaration de style ;</code>. <br>Ces caractéristiques de style sont appelées ''classes'' et peuvent s’appliquer à plusieurs éléments dans la page html. <br>Les classes de style peuvent également ne s’appliquer qu’à un type d’éléments spécifique de la page html. Au lieu d’être appelée par div id="xxx" depuis la page html, une classe peut l’être par exemple par l’élément p marquant les paragraphes. <br>Cela donne : |
| − | p.xxx | + | ** <code>p class="xxx" </code> dans la page html |
| − | déclaration de style ; | + | ** <code> p.xxx déclaration de style ; ... déclaration de style ;</code> pour la feuille de style, <br>la syntaxe générale étant : <code>élément.nom_de_classe déclaration de style ; ... déclaration de style ;</code> |
| − | ... | + | |
| − | déclaration de style ; | + | |
| − | + | ||
| − | pour la feuille de style, la syntaxe générale étant : | + | |
| − | élément.nom_de_classe | + | |
| − | déclaration de style ; | + | |
| − | ... | + | |
| − | déclaration de style ; | + | |
== Les éléments html de type bloc et les éléments html de type en ligne == | == Les éléments html de type bloc et les éléments html de type en ligne == | ||
