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;
}
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.font-family: Courier New;
: Tämä ominaisuus asettaa kirjasinperheeksi "Courier New". Se määrittää fontin, jota käytetään kohdistettujen elementtien tekstissä.font-size: 8pt;
: Tämä ominaisuus asettaa kirjasinkooksi 8 pistettä. Kohdistettujen elementtien teksti näytetään tällä kirjasinkoolla.border-style: inset;
: Tämä ominaisuus asettaa reunuksen tyyliksi "inset". Se luo upotetun tai puristetun ulkonäön reunukselle kohdistettujen elementtien ympärille.border-width: 3px;
: Tämä ominaisuus asettaa reunuksen leveydeksi 3 pikseliä. Elementtien ympärillä oleva reunus on 3 pikseliä paksu.padding: 5px;
: Tämä ominaisuus lisää 5 pikseliä täytettyä sisältöä kohdeelementtien sisälle. Se tarjoaa välin tekstin ja reunuksen välillä.background-color: #FFFFFF;
: Tämä ominaisuus asettaa taustavärin valkoiseksi (#FFFFFF). Kohdistettujen elementtien sisällöllä on valkoinen tausta.line-height: 100%;
: Tämä ominaisuus asettaa rivin korkeudeksi 100 % kirjasinkoosta. Se varmistaa, että tekstirivit jaetaan kirjasinkoon mukaan.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!