Ailddylunio Blogger, rhan 2

Dwi wedi rhoi cyflwyniad byr i fyd HTML a CSS, felly dyma cael ein dwylo'n fudur a dysgu i chwarae o gwmpas.

Y ffordd hawsaf o newid pryd a gwedd y blog yw drwy newid rhinweddau (properties) y testun. Mae gan y testun nifer o rinweddau gellir eu newid, ac nid dim ond math a maint:

font-family

Pa deulu mae'r ffont yn perthyn e.e. Arial, Times ayyb; neu monospace, serif, sans-serif

font-style

dewis o italic, normal neu oblique.

font-variant

Dewis o normal neu small-caps

font-weight

Dewis o normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900

font-size

Maint y ffont, i'w nodi gyda xx-small, x-small, small, medium, large, x-large, xx-large; neu gyda px neu em.

color

Lliw y ffont



Mae hefyd yn bosib i newid rhinweddau blociau testun:

word-spacing

Faint o fwlch sydd rhwng y geiriau.

letter-spacing

Faint o fwlch sydd rhwng y llythrennau.

text-transform

Newid y testun i unai capitalize, uppercase, lowercase, none.

text-align

Fformatio'r paragraff i left, right, center, justify.

text-indent

Yr indentation o'r linell gyntaf.

line-height

Y bwlch rhwng y llinellau.

Mae mwy o wybodaeth am hyn ar gael ar wefan y W3C.

Mae nifer o'r rhinweddau hyn yn defnyddio px (picsel) neu em. Er engraifft, gellir rhoi maint y testun yn 
font-size:12px;


Y broblem gyda hyn ydi ei fod yn atal i ddefnyddwyr allu newid maint y testun ar y sgrin (e.e. rhai a nam gweld) os ydynt yn defnyddio IE. Ffordd safonol yw defnyddio ems, sydd yn relative. Yn bersonol, dwi'n rhoi maint y testun yn y tag corff:

body {
font-size:0.84em;
}

Bydd maint y ffont yn unffurf, drwy gydol y ddogfen, gan adael i mi newid y tagiau h1, h2 ayyb.

Mae engraifft wych o hyn ar wefan Rentokil. Os yw'r testun yn cael ei fwyhau (FF:Ctrl a +; IE: View>Text Size>Larger; Safari:?sori!) mae gweddill y wefan hefyd yn newid hefyd. Os yw'r ffont mewn px, nid yw hyn yn bosib*.

Dyna be sy'n bosib gwneud i'r testun, ond sut mae'n gweithio?

Mae CSS yn defnyddio selectors. Yn yr engraifft uchod, defnyddiais dag y body. Mae popeth o fewn y tag yn mewn dogfwn HTML felly'n cael ei effeithio gan y rheolau steil.

Ond mae posib dewis rhannau eraill o'r ddogfen, heb effeithio ar bob un elfen.

O fewn y dudalen hon, mae tair adran: y neges, y bar ochr, a'r sylwadau.

<div>
<p>Neges</p>
</div>
<div>
<p>Sylwadau</p>
</div>
<div>
<p>Bar Ochr</p>
</div>

Os yw testun y neges i fod yn wahanol i destun y bar ochr neu'r sylwadau, nid yw hyn

p {
color:red;
}

yn llawer o ddefnydd.

Dyma lle mae id a class yn dod fewn. Os sbiwch dan y bonat (View source) mae nifer o'r tagiau HTML yn cario priodoleddau fel id="comments" neu class="post".

Os yw'r dair adran wahanol mewn divs sydd â id gwahanol, mae'r gwaith steilio'n haws: 

<div id="neges">
  <p>Neges</p>
</div>
<div id="sylwadau">
  <p>Sylwadau</p>
</div>
<div id="ar-ochr">
  <p>Bar Ochr</p>
</div>

Ffeil CSS:

#neges p {
color:red;
}
#sylwadau p {
color:blue;
}
#bar-ochr p {
color:green;
}

Mae'r # yn cael ei ddefnyddio gyda ids. Os mai class="sylwadau" sydd wedi'i ddefnyddio, bydd rhaid ei ysgrifennu fel hyn:

.sylwadau {
color:black;
}


Sylwer hefyd mae'r selector yn ond yn dewis pob tag paragraff o fewn y div. Ni fydd tag <h1> yn cael ei effeithio gan hyn. Gellir mynd a hyn ymhellach:

#neges p strong {
text-decoration:underline;
}

Bydd hyn yn dewis pob tag strong sydd o fewn paragraff sydd o fewn div id="neges".
Beth yw'r gwahaniaeth rhwng class ac id? Gellir ond defnydido id unwaith yn y ddogfen, ond gellir defnyddio class mwy nag unwaith.

Dyna ni am rwan. Dwi'n siwr gelli di fynd ati rwan i wenud smonach o dy flog. Cofia gadw copi o'r stylesheet cyn ei mynd ati i'w golygu.

Erbyn y tro nesaf, dwi wedi cynllunio templad syml sy'n barod i gael ei roi yn blogger. Mi wnai fynd dros hwnna i esbonio mwy am steilio a hefyd am CSS positioning.

Mae croeso i adael unrhyw gwestiynau neu sylwadau, yn enwedig ar pa mor glir dwi'n esbonio pethau.

*Yn ddigon eironig, mae'r erthygl yma'n deud yn hollol i'r gwrthwyneb i mi. Mae'n engraifft dda hefyd o bobl ignorant.

Technorati:
, , .

Ysgrifennwyd ar