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:
Mae hefyd yn bosib i newid rhinweddau blociau testun:
Mae nifer o'r rhinweddau hyn yn defnyddio px (picsel) neu em. Er engraifft, gellir rhoi maint y testun yn
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:
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.
Os yw testun y neges i fod yn wahanol i destun y bar ochr neu'r sylwadau, nid yw hyn
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:
Ffeil CSS:
Mae'r # yn cael ei ddefnyddio gyda ids. Os mai class="sylwadau" sydd wedi'i ddefnyddio, bydd rhaid ei ysgrifennu fel hyn:
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:
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:
CSS, tiwtorial, dylunio.
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 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:
CSS, tiwtorial, dylunio.
