Blogger : style CSS pour le code de votre blog
Un ami m'a demandé comment j'avais créé les régions de code dans l'entrée Blogger. Je l'ai fait en utilisant une balise de style pour CSS dans mon modèle Blogger. Voici ce que j'ai ajouté :
p.code {
font-family: Courier New;
font-size: 8pt;
border-style: inset;
border-width: 3px;
padding: 5px;
background-color: #FFFFFF;
line-height: 100%;
margin: 10px;
}
p.code
: Il s'agit d'une règle CSS qui cible le HTML<p>
éléments portant le nom de classe « code ». Cela signifie que tout paragraphe de cette classe sera stylé selon les propriétés suivantes.font-family: Courier New;
: Cette propriété définit la famille de polices sur « Courier New ». Il précise la police qui sera utilisée pour le texte au sein des éléments ciblés.font-size: 8pt;
: Cette propriété définit la taille de la police à 8 points. Le texte dans les éléments ciblés sera affiché avec cette taille de police.border-style: inset;
: Cette propriété définit le style de bordure sur « encart ». Il crée un aspect enfoncé ou pressé pour la bordure autour des éléments ciblés.border-width: 3px;
: Cette propriété définit la largeur de la bordure à 3 pixels. La bordure autour des éléments aura une épaisseur de 3 pixels.padding: 5px;
: Cette propriété ajoute 5 pixels de remplissage autour du contenu à l'intérieur des éléments ciblés. Il fournit un espace entre le texte et la bordure.background-color: #FFFFFF;
: Cette propriété définit la couleur d'arrière-plan sur blanc (#FFFFFF). Le contenu des éléments ciblés aura un fond blanc.line-height: 100%;
: Cette propriété définit la hauteur de ligne à 100 % de la taille de la police. Cela garantit que les lignes de texte sont espacées en fonction de la taille de la police.margin: 10px;
: Cette propriété ajoute une marge de 10 pixels autour de l'ensemble de l'élément. Il fournit un espacement entre cet élément et les autres éléments de la page.
Le code CSS fourni définit un style pour les paragraphes HTML avec la classe « code ». Il définit la police, la taille de la police, le style de bordure, la largeur de la bordure, le remplissage, la couleur d'arrière-plan, la hauteur de ligne et la marge de ces paragraphes. Ce style peut être appliqué à des extraits de code ou à du texte préformaté dans un article Blogger pour leur donner une apparence spécifique.
Voici à quoi cela ressemblera :
p.code {
famille de polices : Courier New ;
taille de police : 8 pt ;
style de bordure : encart ;
largeur de la bordure: 3px;
padding: 5px;
background-color: #FFFFFF;
hauteur de ligne : 100 % ;
margin: 10px;
}
Codage heureux!