Content Marketing

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;
}
  1. 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.
  2. 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.
  3. font-size: 8pt;: Den här egenskapen anger teckenstorleken till 8 punkter. Texten i de inriktade elementen kommer att visas med denna teckenstorlek.
  4. 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.
  5. border-width: 3px;: Den här egenskapen ställer in kantens bredd till 3 pixlar. Kanten runt elementen kommer att vara 3 pixlar tjock.
  6. 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.
  7. 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.
  8. 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.
  9. 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!

Douglas Karr

Douglas Karr är CMO för Öppna INSIGHTS och grundaren av Martech Zone. Douglas har hjälpt dussintals framgångsrika MarTech-startups, har hjälpt till med due diligence på över $5 miljarder i Martech-förvärv och investeringar, och fortsätter att hjälpa företag att implementera och automatisera sina försäljnings- och marknadsföringsstrategier. Douglas är en internationellt erkänd digital transformations- och MarTech-expert och talare. Douglas är också en publicerad författare till en Dummies guide och en bok om företagsledarskap.

Relaterade artiklar

Tillbaka till toppen knappen
Stänga

Adblock upptäckt

Martech Zone kan ge dig detta innehåll utan kostnad eftersom vi tjänar pengar på vår webbplats genom annonsintäkter, affiliate-länkar och sponsring. Vi skulle uppskatta om du tar bort din annonsblockerare när du tittar på vår webbplats.