Blogger: CSS-stil för kod på din blogg
En vän frågade mig hur jag gjorde kodregionerna i Blogger-posten. Jag gjorde det med en stiltagg för CSS i min Blogger-mall. Här är vad jag la till:
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
: Detta är en CSS-regel som är inriktad på HTML<p>
element med klassnamnet "kod". Det betyder att alla stycken med den här klassen kommer att utformas enligt följande egenskaper.font-family: Courier New;
: Den här egenskapen ställer in teckensnittsfamiljen på "Courier New." Den anger typsnittet som kommer att användas för texten inom de målinriktade elementen.font-size: 8pt;
: Den här egenskapen anger teckenstorleken till 8 punkter. Texten i de inriktade elementen kommer att visas med denna teckenstorlek.border-style: inset;
: Den här egenskapen ställer in kantstilen på "insatt". Det skapar ett nedsänkt eller pressat utseende för bården runt de målade elementen.border-width: 3px;
: Den här egenskapen ställer in kantens bredd till 3 pixlar. Kanten runt elementen kommer att vara 3 pixlar tjock.padding: 5px;
: Den här egenskapen lägger till 5 pixlar av utfyllnad runt innehållet inuti de inriktade elementen. Det ger avstånd mellan texten och kanten.background-color: #FFFFFF;
: Den här egenskapen ställer in bakgrundsfärgen till vit (#FFFFFF). Innehållet i de inriktade elementen kommer att ha en vit bakgrund.line-height: 100%;
: Den här egenskapen ställer in radhöjden till 100 % av teckenstorleken. Det säkerställer att textraderna är fördelade efter teckenstorleken.margin: 10px;
: Den här egenskapen lägger till en marginal på 10 pixlar runt hela elementet. Det ger avstånd mellan detta element och andra element på sidan.
Den medföljande CSS-koden definierar en stil för HTML-stycken med klassen "kod". Den ställer in teckensnitt, teckenstorlek, kantstil, kantbredd, stoppning, bakgrundsfärg, linjehöjd och marginal för dessa stycken. Den här stilen kan tillämpas på kodavsnitt eller förformaterad text i ett Blogger-inlägg för att ge dem ett specifikt utseende.
Så här kommer det att se ut:
p.code {
font-family: Courier Ny;
teckenstorlek: 8pt;
border-style: infälld;
kantbredd: 3 pixel;
padding: 5px;
bakgrundsfärg: #FFFFFF;
linjehöjd: 100%;
marginal: 10px;
}
Lycklig kodning!