Sisältö Markkinointi

Blogger: CSS-tyyli koodille blogissasi

Ystävä kysyi minulta, kuinka tein koodialueet Blogger-merkinnässä. Tein sen käyttämällä Blogger-mallissani olevaa CSS-tyylitunnistetta. Tässä mitä lisäsin:

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: Tämä on CSS-sääntö, joka kohdistuu HTML:ään <p> elementtejä luokan nimellä "code". Se tarkoittaa, että kaikki tämän luokan kappaleet muotoillaan seuraavien ominaisuuksien mukaan.
  2. font-family: Courier New;: Tämä ominaisuus asettaa kirjasinperheeksi "Courier New". Se määrittää fontin, jota käytetään kohdistettujen elementtien tekstissä.
  3. font-size: 8pt;: Tämä ominaisuus asettaa kirjasinkooksi 8 pistettä. Kohdistettujen elementtien teksti näytetään tällä kirjasinkoolla.
  4. border-style: inset;: Tämä ominaisuus asettaa reunuksen tyyliksi "inset". Se luo upotetun tai puristetun ulkonäön reunukselle kohdistettujen elementtien ympärille.
  5. border-width: 3px;: Tämä ominaisuus asettaa reunuksen leveydeksi 3 pikseliä. Elementtien ympärillä oleva reunus on 3 pikseliä paksu.
  6. padding: 5px;: Tämä ominaisuus lisää 5 pikseliä täytettyä sisältöä kohdeelementtien sisälle. Se tarjoaa välin tekstin ja reunuksen välillä.
  7. background-color: #FFFFFF;: Tämä ominaisuus asettaa taustavärin valkoiseksi (#FFFFFF). Kohdistettujen elementtien sisällöllä on valkoinen tausta.
  8. line-height: 100%;: Tämä ominaisuus asettaa rivin korkeudeksi 100 % kirjasinkoosta. Se varmistaa, että tekstirivit jaetaan kirjasinkoon mukaan.
  9. margin: 10px;: Tämä ominaisuus lisää 10 pikselin marginaalin koko elementin ympärille. Se tarjoaa välin tämän elementin ja sivun muiden elementtien välillä.

Toimitettu CSS-koodi määrittää tyylin HTML-kappaleille, joiden luokka on "koodi". Se määrittää näiden kappaleiden fontin, fontin koon, reunuksen tyylin, reunuksen leveyden, täytön, taustavärin, rivin korkeuden ja marginaalin. Tätä tyyliä voidaan soveltaa koodinpätkiin tai esimuotoiltuun tekstiin Blogger-viestissä, jotta niille saadaan erityinen ulkoasu.

Tältä se näyttää:

p.code {
font-family: Courier New;
kirjasinkoko: 8pt;
reuna-tyyli: upotettu;
reunan leveys: 3px;
täyte: 5px;
taustaväri: #FFFFFF;
linjan korkeus: 100 %;
marginaali: 10px;
}

Hyvää koodausta!

Douglas Karr

Douglas Karr on CMO of OpenINSIGHTS ja perustaja Martech Zone. Douglas on auttanut kymmeniä menestyneitä MarTech-startuppeja, auttanut yli 5 miljardin dollarin due diligence -tarkastuksessa Martechin hankinnoissa ja investoinneissa ja avustaa edelleen yrityksiä niiden myynti- ja markkinointistrategioiden toteuttamisessa ja automatisoinnissa. Douglas on kansainvälisesti tunnustettu digitaalisen transformaation ja MarTechin asiantuntija ja puhuja. Douglas on myös julkaissut Dummie's-oppaan ja yritysjohtajuuskirjan.

Aiheeseen liittyvät artikkelit

Takaisin alkuun -painiketta
lähellä

Adblock havaittu

Martech Zone pystyy tarjoamaan sinulle tämän sisällön veloituksetta, koska ansaitsemme sivustomme mainostulojen, kumppanilinkkien ja sponsoroinnin kautta. Olisimme kiitollisia, jos poistaisit mainosten esto-ohjelman, kun katselet sivustoamme.