Blogger: Arddull CSS ar gyfer Cod ar Eich Blog
Gofynnodd ffrind i mi sut y gwnes i'r rhanbarthau cod yng nghofnod Blogger. Fe wnes i hyn gan ddefnyddio tag arddull ar gyfer CSS yn fy nhempled Blogger. Dyma beth a ychwanegais:
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
: Mae hon yn rheol CSS sy'n targedu HTML<p>
elfennau ag enw'r dosbarth “cod.” Mae'n golygu y bydd unrhyw baragraff gyda'r dosbarth hwn yn cael ei arddullio yn ôl y priodweddau canlynol.font-family: Courier New;
: Mae'r eiddo hwn yn gosod y teulu ffont i "Courier New." Mae'n nodi'r ffont a ddefnyddir ar gyfer y testun o fewn yr elfennau targed.font-size: 8pt;
: Mae'r eiddo hwn yn gosod maint y ffont i 8 pwynt. Bydd y testun o fewn yr elfennau targed yn cael ei arddangos ar y maint ffont hwn.border-style: inset;
: Mae'r eiddo hwn yn gosod arddull y ffin i "fewnosod." Mae'n creu golwg suddedig neu wasgu ar gyfer y ffin o amgylch yr elfennau a dargedir.border-width: 3px;
: Mae'r eiddo hwn yn gosod lled y ffin i 3 picsel. Bydd y ffin o amgylch yr elfennau yn 3 picsel o drwch.padding: 5px;
: Mae'r eiddo hwn yn ychwanegu 5 picsel o padin o amgylch y cynnwys y tu mewn i'r elfennau wedi'u targedu. Mae'n darparu gofod rhwng y testun a'r ffin.background-color: #FFFFFF;
: Mae'r eiddo hwn yn gosod y lliw cefndir i wyn (#FFFFFF). Bydd gan y cynnwys o fewn yr elfennau targed gefndir gwyn.line-height: 100%;
: Mae'r eiddo hwn yn gosod uchder y llinell i 100% o faint y ffont. Mae'n sicrhau bod bylchau rhwng y llinellau testun yn ôl maint y ffont.margin: 10px;
: Mae'r eiddo hwn yn ychwanegu ymyl o 10 picsel o amgylch yr elfen gyfan. Mae'n darparu gofod rhwng yr elfen hon ac elfennau eraill ar y dudalen.
Mae'r cod CSS a ddarperir yn diffinio arddull ar gyfer paragraffau HTML gyda'r “cod” dosbarth. Mae'n gosod y ffont, maint y ffont, arddull y ffin, lled ffin, padin, lliw cefndir, uchder llinell, ac ymyl ar gyfer y paragraffau hyn. Gellir cymhwyso'r arddull hon i bytiau cod neu destun wedi'i fformatio ymlaen llaw mewn post Blogger i roi golwg benodol iddynt.
Dyma sut y bydd yn edrych:
p.code {
ffont-teulu: Courier New;
maint y ffont: 8pt;
border-arddull: mewnosod;
ffin-led: 3px;
padin: 5px;
cefndir-lliw: #FFFFFF;
uchder llinell: 100%;
ymyl: 10px;
}
Codio Hapus!