Blogger: CSS-stílus a kódhoz a blogodban
Egy barátom megkérdezte, hogyan készítettem el a kódrégiókat a Blogger bejegyzésben. Ezt a Blogger-sablonban található CSS-stíluscímkével csináltam. Íme, amit hozzátettem:
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
: Ez egy CSS-szabály, amely a HTML-t célozza meg<p>
„code” osztálynévvel rendelkező elemek. Ez azt jelenti, hogy az ilyen osztályú bekezdések stílusa a következő tulajdonságok szerint történik.font-family: Courier New;
: Ez a tulajdonság a „Courier New” betűtípuscsaládot állítja be. Meghatározza azt a betűtípust, amelyet a megcélzott elemeken belül a szöveghez használunk.font-size: 8pt;
: Ez a tulajdonság 8 pontra állítja a betűméretet. A megcélzott elemeken belüli szöveg ezzel a betűmérettel jelenik meg.border-style: inset;
: Ez a tulajdonság a szegélystílust „inset”-re állítja. Süllyesztett vagy préselt megjelenést hoz létre a szegélynek a megcélzott elemek körül.border-width: 3px;
: Ez a tulajdonság a szegély szélességét 3 képpontra állítja be. Az elemek körüli szegély 3 képpont vastag lesz.padding: 5px;
: Ez a tulajdonság 5 képpontnyi kitöltést ad a tartalom köré a célzott elemeken belül. Térközt biztosít a szöveg és a szegély között.background-color: #FFFFFF;
: Ez a tulajdonság a háttérszínt fehérre állítja (#FFFFFF). A megcélzott elemeken belüli tartalom fehér hátterű lesz.line-height: 100%;
: Ez a tulajdonság a sormagasságot a betűméret 100%-ára állítja be. Biztosítja, hogy a szövegsorok a betűméretnek megfelelően legyenek elosztva.margin: 10px;
: Ez a tulajdonság 10 képpontos margót ad a teljes elem körül. Térközt biztosít ezen elem és az oldalon lévő többi elem között.
A mellékelt CSS-kód stílust határoz meg a „code” osztályú HTML-bekezdések számára. Beállítja a betűtípust, a betűméretet, a keret stílusát, a szegély szélességét, a kitöltést, a háttérszínt, a sor magasságát és a margót ezekhez a bekezdésekhez. Ez a stílus alkalmazható kódrészletekre vagy előre formázott szövegekre a Blogger-bejegyzésekben, hogy sajátos megjelenést kapjanak.
Így fog kinézni:
p.code {
font-family: Courier New;
betűméret: 8pt;
szegély-stílus: betét;
keret szélessége: 3 képpont;
padding: 5px;
háttérszín: #FFFFFF;
vonalmagasság: 100%;
margó: 10px;
}
Boldog kódolás!