Blogger: teie ajaveebi koodi CSS-stiil
Sõber küsis minult, kuidas ma Bloggeri kirjes koodipiirkonnad koostasin. Kasutasin seda oma Bloggeri mallis CSS-i stiilimärgendi abil. Siin on see, mida ma lisasin:
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
: see on CSS-reegel, mis sihib HTML-i<p>
elemendid klassi nimega "kood". See tähendab, et iga selle klassi lõigu stiil kujundatakse vastavalt järgmistele omadustele.font-family: Courier New;
: see atribuut määrab fondiperekonnaks "Courier New". See määrab fondi, mida kasutatakse sihitud elementide teksti jaoks.font-size: 8pt;
: see atribuut määrab fondi suuruseks 8 punkti. Sihitud elementide tekst kuvatakse selle fondi suurusega.border-style: inset;
: see atribuut määrab ääriste stiiliks "inset". See loob sihitud elementide ümber olevale piirile uppunud või pressitud välimuse.border-width: 3px;
: see atribuut määrab äärise laiuseks 3 pikslit. Elemente ümbritsev ääris on 3 pikslit paks.padding: 5px;
: see atribuut lisab sihitud elementide sisu ümber 5 pikslit polsterdust. See annab teksti ja äärise vahele tühiku.background-color: #FFFFFF;
: see atribuut määrab taustavärviks valge (#FFFFFF). Sihitud elementide sisul on valge taust.line-height: 100%;
: see atribuut määrab rea kõrguseks 100% fondi suurusest. See tagab, et tekstiread on paigutatud vastavalt fondi suurusele.margin: 10px;
: see atribuut lisab kogu elemendi ümber 10 piksli suuruse veerise. See annab selle elemendi ja lehe muude elementide vahel vahemaa.
Pakutav CSS-kood määrab HTML-i lõikude stiili klassiga "kood". See määrab nende lõikude fondi, fondi suuruse, ääriste stiili, äärise laiuse, polsterduse, taustavärvi, rea kõrguse ja veerise. Seda stiili saab rakendada Bloggeri postituse koodilõikudele või eelvormindatud tekstile, et anda neile konkreetne välimus.
See näeb välja järgmiselt:
p.code {
font-family: Courier New;
fondi suurus: 8pt;
ääriste stiil: sisestus;
äärise laius: 3 px;
polster: 5px;
taustavärv: #FFFFFF;
joone kõrgus: 100%;
veeris: 10px;
}
Head kodeerimist!