Defnyddio CSS - Rheolau Cyffredin
Canllawiau CSS
- Beth yw CSS?
- Ysgrifennu CSS
- Rheolau Cyffredin
- Datrysiadau
- Dewislenni (menus)
Ewch i CSSZenGarden i weld pwer CSS
Ar y dudalen hon, cewch ddod o hyd i wybodaeth ar y canlynol (dewiswch un i ddangos yr adran honno):
Gosod rheolau CSS a'r mathau o elfennau | fformatio a steilio testun | meintio | gosod a lleoli
Gosod Rheolau CSS a'r Mathau o Elfennau
Mae rhyw wyth phrif ffordd o osod elfennau (selectors) er mwyn fformatio a gosod rheolau. Gwnewn edrych ar rhyw saith, ond dim ond cyflwyniad syml i CSS yw pwrpas hyn.
- Syml neu "noeth"
- Rhestr o elfennau
- Elfennau disgynnol
- Gydag
ID - Gyda
Class - Ffug-elfennau (pseudo-elements) a ffug-ddosbarthiadau (pseudo-classes)
- Elfennau gyda phriodoledd
- Elfennau eraill
brig
Elfennau Syml
Dyma elfennau unigol neu "noeth". Mae elfennau syml yn cyfateb i dagiau HTML, e.e. mae tagiau paragraff <p></p> yn cyfateb i'r elfen p mewn CSS; y tag delwedd <img /> yn cyfateb i img; y tag <h2></h2> yn cyfateb i h2; ayyb, e.e.
p{
color:blue;
font-weight:bold;
}
h2{
text-align:center;
font-size:20px;
}
img{
border:2px dashed black;
float:left;
}
Mae'r darn uchod yn sicrhau bod pob paragraff ar y dudalen yn fras ac mewn lliw glas. Bydd pob pennawd h2 wedi'u canoli ac o faint 20 picsel. Bydd pob delwedd ag ymyl toredig, du gyda thrwch o 2 picsel. Hefyd bydd delweddau'n cael eu gosod i'r ochr chwith felly bod cynnwys gweddill y dudalen yn llifo o'u hamgylch:
Dyma enghraifft o steilio elfennau syml
Gallwch ddweud unrhyw beth rydych eisiau am Wil, mae'n foi iawn ac yn bwyta ei borej i gyd. Pleser yw paratoi ei frecwast pob bore.
Er gwaetha'r ffaith bod rhaid iddo sugno'r bwyd i fyny trwy ei ffrwynau ar ôl i Twm Puw bwrw'i ddannedd allan gyda gordd drom, mae'n siapo lan yn grêt!
brig
Rhestr o Elfennau
Ambell waith mae llawer o elfennau'n rhannu'r un priodweddau. Yn yr achos hwn, byddai'r wastraffus i ddyblygu pob rheol, felly gallwn eu cyfuno yn y ffordd hon:
/*== Yn hytrach na defnyddio'r isod ==*/
p{
font-family:Verdana, Arial, Sans-Serif;
color:#cc00ff;
}
h3{
font-family:Verdana, Arial, Sans-Serif;
color:#cc00ff;
}
h4{
font-family:Verdana, Arial, Sans-Serif;
color:#cc00ff;
}
/*== Gallwch wneud y canlynol ==*/
p, h3, h4{
font-family:Verdana, Arial, Sans-Serif;
color:#cc00ff;
}
brig
Elfennau Disgynnol
Yn aml, caiff tagiau HTML eu nythu (nest) un tu fewn i'r llall. Gall hwn gyflwyno cyfle i CSS steilio ardal neu eitem yn y dualen mewn ffordd unigryw:
<!-- ####### YR XHTML ####### -->
<p>Dyma baragraff.<p>
<div>
<p>Dyma baragraff arall tu mewn DIV.<p>
</div>
/* ####### Y CSS ####### */
p{
font-family:Geneva, Arial, Helvetica, sans-serif;
color:blue;
text-align:right;
}
div p{
color:red;
}
Mae'r uchod yn rhoi'r canlyniad isod:
Dyma baragraff.
Dyma baragraff arall tu mewn DIV.
Digwyddai hyn oherwydd bod "div p" yn sbesiffig ac yn trechu rheol cyffredinol ar gyfer "p".
Fe wnewch chi hefyd sylwi fod y testun coch (mewn DIV) wedi etifeddu priodweddau cyffredinol p. Hynny yw, mae'r rheol wedi rhaeadru trwy'r daflen. Heb law bo rheol sbesiffig mewn elfennau disgynnol (e.e. div p), byddant yn etifeddu'r rheol o'r elfen gyffredinol (e.e. p)
brig
Elfennau gydag ID
Yn amlwg gall gwahaniaethu rhwng elfen fan hyn ac elfen fan yna fwrw terfyn yn go gyflym, felly mae priodoleddau ID a CLASS yn ddefnyddiol iawn. Cânt eu defnyddio fel y canlynol:
<p id="tag">Dyfal donc a dyrr y garreg</p>
Y prif wahaniaeth rhwng ID a CLASS yw eich bod dim ond yn gallu defnyddio ID unwaith ar dudalen ond gallwch ail-ddefnyddio CLASS cymaint o weithiau ag y dymunwch.
Gallwch ddefnyddio'r cod isod ar gyfer CSS:
p#tag{
font-style:italic;
font-family:"Times New Roman", Times, serif;
}
Bydd yr elfen (p#tag) yn etifeddu pob priodwedd o'r brif elfen (p), ond bydd unrhyw briodwedd sy'n cael ei osod iddi'n sbesiffig yn trechu rheol flaenorol neu'n ychwanegu at y set o reolau os nac oes un flaenorol.
Dyfal donc a dyrr y garreg
Mae'r uchod yn dangos bod ID yn cael ei gynrychioli gan y symbol '#' mewn CSS.
brig
Elfennau gyda CLASS
Yn gyffredinol, mae defnydd CLASS yn gwymwys yr un peth ag ID, ond gyda dau brif gwahaniaeth:
- gallwch ddefnyddio yr un CLASS nifer fawr o weithiau yn yr un dudalen
- gallwch rhestru sawl CLASS gyda'i gilydd
<!-- ######## HTML ####### -->
<p class="pwysig" >Mae hwn yn bwysig.</p>
<p class="canoli" >Mae hwn yn cael ei ganoli.</p>
<p class="pwysig canoli" >Mae hwn yn bwysig ac yn cael ei ganoli.</p>
/* ######## CSS ####### */
.pwysig{
color:red;
font-weight:bold;
}
.canoli{
text-align:center;
}
Bydd yr uchod yn edrych fel y canlynol gyda'r CSS hwn:
Mae hwn yn bwysig.
Mae hwn yn cael ei ganoli.
Mae hwn yn bwysig ac yn cael ei ganoli.
D.S. Gallwn fod wedi gosod p.pwysig a p.canoli yn lle .pwysig a .canoli. Hefyd, fel rheol byddem yn ceisio ag osgoi gosod rhywbeth mor llythrennol â "canoli". Gweler y dudalen ar ddatrysiadau am esboniad.
brig
Elfennau gyda Ffug-elfennau a Ffug-ddosbarthiadau
Mae defnydd ffug-elfennau / ffug-ddosbarthiadau dal yn ddadleuol, ond mae defnydd rhai ohonynt yn ddiogel ar bron pob porwr. Ar gyfer hwyluso'r canllawiau, dwi'n mynd i alw ffug-elfennau a ffug-ddosbarthiadau'n ffug-elfennau. Mae gan ffug-elfennau'r ffurf isod:
elfen:ffug-elfen{
priodwedd: gwerth(oedd);
}
Un elfen sydd yn gwneud defnydd dilys o ffug-elfennau yw'r ddolen (A). Mae dolenni'n cael eu steilio/fformatio er mwyn sefyll allan.
Yn aml, bydd y fformat y ddolen wreiddiol (LINK) yn newid wrth i'r llygoden symud drosti (HOVER). Ambell waith bydd fformat y ddolen yn edrych yn wahanol os ydych wedi ymweld â hi eisoes (VISITED). Hefyd bydd rhai datblygwyr yn sicrhau bod y cyflwr "llygoden lawr" (defnyddiwr yn pwyso'r botwm chwith y llygoden dros y ddolen) yn edrych yn wahanol (ACTIVE).
Os ydych am fformatio'ch dolenni, mae'n rhaid eu diffinio mewn trefn: LINK, VISITED, HOVER, ACTIVE - ffordd hawdd i'w cofio yw LoVe HAte.
Os ydych yn rhoi'r rhain yn y drefn anghywir, ni fydd y dolenni'n ymddangos yn gywir.
a:link{
text-decoration:none;
color:blue;
}
a:visited{
text-decoration:line-through;
color:blue;
}
a:hover{
text-decoration:none;
color:green;
}
a:active{
text-decoration:none;
color:orange;
}
Ceisiwch ar y ddolen isod:
Dyma enghraifft o ddolen sydd yn mynd â chi i'r un dudalen.
Mae ffug-elfennau eraill sydd wedi dechrau cael eu defnyddio, er mae cynhaliaeth porwyr yn amrywio. Pwrpas y rhain yw i roi effeithiau arbennig i elfennau. Mae rhai porwyr yn caniatáu defnydd HOVER am elfennau eraill, felly bod modd creu effeithiau rollover, ond yn anffodus mae rhai porwyr yn anwybyddu hyn ac felly mae'r defnydd yn amheus.
Y rhai mwyaf poblogaidd yw'r canlynol:
- :focus mae hwn yn gallu fformatio elfen pan fydd yn derbyn y ffocws (e.e. ffurflenni a dolenni)
- :first-child mae hwn yn fformatio'r achos cyntaf o'r elfen
- :lang mae hwn yn fformatio'r ardaloedd iaith estron - nid yw'n gweithio mewn IE6 a chynt!!
Rheolau:
<!-- ######## HTML ####### -->
<p>Dyma'r paragraff cyntaf - gallwch weld ei fod wedi steilio'n wahanol i'r lleill?</p>
<p>Dyma'r ail baragraff - dim steilio <code>:first-child</code> gobeithio!</p>
<p lang="it" xml:lang="it">Narrasi che tutti gli uomini ... [wedi tocio]</p>
<p>Dyma'r pedwerydd paragraff.</p>
<form ... >
<input type="text" id="enw" name="enw" />
</form>
/* ######## CSS ####### */
input:focus{
background-color:yellow;
color:red;
}
p:first-child{
background-color:yellow;
color:red;
}
p:lang(it){
color:green;
font-weight:bold;
border:green 2px dotted;
}
Hoffwn orffen fanna, ond yn anffodus mae CSS3 wedi'i rhyddhau ac yn cynnig hyd at 17 ffug-elfen ychwanegol. Eto mae cynhaliaeth porwyr yn amrywio. Os ydych am wybod pa borwyr sy'n cynnal pa ffug-elfennau, ewch at webdevout.net.
brig
Elfennau gyda Phriodoledd
Am ddisgrifiad llawn o'r rhain, ewch i http://www.w3.org/TR/css3-selectors/.
Pwrpas y rhain yw bod yn sbesiffig ynghylch priodoleddau tagiau HTML, e.e.
<!-- ######## HTML ####### -->
...
<input type="text" id="enw" name="enw" />
<br />
<input type="submit" value="Anfon" id="cer" name="cer" />
...
/* ######## CSS ####### */
input[type="text"]{
background-color:blue;
color:yellow;
}
Dibynnu ar eich porwr, efallai ni welwch y blwch testun yn gywir (dylai fod yn las gyda thestun melyn). Dylai'r botwm 'Anfon' ymddangos yn normal.
brig
Elfennau Eraill
Ambell waith caiff elfennau eu cymharu ag elfennau eraill. Ystyriwch dwy elfen, E ac F. Caiff yr elfennau eu cynrychioli gan <E></E> a <F></F>.
E FMae hwn wedi'i drafod eisoes (elfennau disgynnol).
E > FDyma F yn 'blentyn' i E
<!-- ######## HTML ####### -->
<E>Brynaman yw <F>canol y Bydysawd</F> i bob Cymro glan.</E>
/* ######## CSS ####### */
E > F{
background-color:white;
color:black;
}
Nid yw IE6 a chynt yn ei ddeall!
Mae hwn yn debyg iawn i'r elfennau 'disgynnol'. Yr unig wahaniaeth yw bod 'plentyn' yn cyfeirio at y tag cyntaf (F) tu fewn i'r 'rhiant' (E). Gall 'ddisgynnydd' gyfeirio at unrhyw tag mewnol (F; e.e. 3 lefel i mewn) tu fewn i'r 'rhiant' (E; e.e.<E><X><Y><F></F></Y></X></E>).
E + FDyma lle bo F yn dod yn syth ar ôl E
Nid yw IE6 a chynt yn ei ddeall!
Nid oes 'rhiant' na 'phlentyn' / 'disgynnydd' yma, dim ond dau dag yn dilyn yn syth ar ôl ei gilydd, e.e.<E> ... </E><F> ... </F>.
E ~ FDyma lle bo F yn dilyn E yn anuniongyrchol
Nid yw IE6 a chynt yn ei ddeall!
Gall y canlynol weithio, e.e.<E> ... </E><X> ... </X><F> ... </F>.
Fformatio Testun
Mae'r adran hon yn ymwneud â phriodweddau sy'n effeithio ar ymddangosiad testun.
Mae nifer helaeth o briodweddau a allwn edrych arnynt, ond gwnaf ganolbwyntio ar y rhai amlwg. Ym mhob achos, byddaf yn defnyddio 'p' fel tag enghreifftiol, ond dylech sylweddoli bod y dulliau isod yn addas ar gyfer bron pob tag sydd yn gallu cynnwys testun (e.e. input, td, blockquote, code, cite, h1 - h6, ayyb).
Dyma'r darnau sylfaenol:
- Lliw (color; background-color)
- Ffont (font-family; font-style; line-height; font-size; font-weight)
- Lleoli (text-align)
- Addurno'r testun (text-decoration; text-transform)
- Bylchu (letter-spacing; word-spacing;)
brig
Lliw
Ar gyfer lliw'r testun, mae dwy brif briodwedd - lliw'r ysgrifen ei hun (color) a lliw'r cefndir (background-color).
p{
color:yellow;
background-color:blue;
}
p + p{
color:#6B8E23; /*OliveDrab yw hwn*/
background-color:#FAEBD7; /*AntiqueWhite yw hwn*/
}
dyma destun lliw melyn gyda chefndir glas
dyma destun lliw OliveDrab gyda chefndir AntiqueWhite
Gall y lliw gael ei osod yn lythrennol (Saesneg) neu fel rhif hecs (e.e. #33CCFF). Mae rhifau hecs yn rhoi Coch-Gwyrdd-Glas (RGB) mewn rhifau hecsadegol (rhifau bàs 16, sef 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F), felly '#' gyda 0 - 255 (162) mewn hecsadegol (00 - FF) ar gyfer pob un o'r 3 lliw.
Gwyn yw #FFFFFF (100% ym mhob lliw).
Du yw #000000 (0 ym mhob lliw).
Coch yw #FF0000 (100% coch 0 gwyrdd 0 glas).
Gwyrdd yw #00FF00 (0 coch 100% gwyrdd 0 glas).
Glas yw #0000FF (0 coch 0 gwyrdd 100% glas).
Enwau lliwiau derbyniol:
| Enw | Hecs | Lliw |
|---|---|---|
| AliceBlue | #F0F8FF | |
| AntiqueWhite | #FAEBD7 | |
| Aqua | #00FFFF | |
| Aquamarine | #7FFFD4 | |
| Azure | #F0FFFF | |
| Beige | #F5F5DC | |
| Bisque | #FFE4C4 | |
| Black | #000000 | |
| BlanchedAlmond | #FFEBCD | |
| Blue | #0000FF | |
| BlueViolet | #8A2BE2 | |
| Brown | #A52A2A | |
| BurlyWood | #DEB887 | |
| CadetBlue | #5F9EA0 | |
| Chartreuse | #7FFF00 | |
| Chocolate | #D2691E | |
| Coral | #FF7F50 | |
| CornflowerBlue | #6495ED | |
| Cornsilk | #FFF8DC | |
| Crimson | #DC143C | |
| Cyan | #00FFFF | |
| DarkBlue | #00008B | |
| DarkCyan | #008B8B | |
| DarkGoldenRod | #B8860B | |
| DarkGray NEU DarkGrey | #A9A9A9 | |
| DarkGreen | #006400 | |
| DarkKhaki | #BDB76B | |
| DarkMagenta | #8B008B | |
| DarkOliveGreen | #556B2F | |
| DarkOrange | #FF8C00 | |
| DarkOrchid | #9932CC | |
| DarkRed | #8B0000 | |
| DarkSalmon | #E9967A | |
| DarkSeaGreen | #8FBC8F | |
| DarkSlateBlue | #483D8B | |
| DarkSlateGray | #2F4F4F | |
| DarkSlateGrey | #2F4F4F | |
| DarkTurquoise | #00CED1 | |
| DarkViolet | #9400D3 | |
| DeepPink | #FF1493 | |
| DeepSkyBlue | #00BFFF | |
| DimGray NEU DimGrey | #696969 | |
| DodgerBlue | #1E90FF | |
| FireBrick | #B22222 | |
| FloralWhite | #FFFAF0 | |
| ForestGreen | #228B22 | |
| Fuchsia | #FF00FF | |
| Gainsboro | #DCDCDC | |
| GhostWhite | #F8F8FF | |
| Gold | #FFD700 | |
| GoldenRod | #DAA520 | |
| Gray NEU Grey | #808080 | |
| Green | #008000 | |
| GreenYellow | #ADFF2F | |
| HoneyDew | #F0FFF0 | |
| HotPink | #FF69B4 | |
| IndianRed | #CD5C5C | |
| Indigo | #4B0082 | |
| Ivory | #FFFFF0 | |
| Khaki | #F0E68C | |
| Lavender | #E6E6FA | |
| LavenderBlush | #FFF0F5 | |
| LawnGreen | #7CFC00 | |
| LemonChiffon | #FFFACD | |
| LightBlue | #ADD8E6 | |
| LightCoral | #F08080 | |
| LightCyan | #E0FFFF | |
| LightGoldenRodYellow | #FAFAD2 | |
| LightGray NEU LightGrey | #D3D3D3 | |
| LightGreen | #90EE90 | |
| LightPink | #FFB6C1 | |
| LightSalmon | #FFA07A | |
| LightSeaGreen | #20B2AA | |
| LightSkyBlue | #87CEFA | |
| LightSlateGray | #778899 | |
| LightSlateGrey | #778899 | |
| LightSteelBlue | #B0C4DE | |
| LightYellow | #FFFFE0 | |
| Lime | #00FF00 | |
| LimeGreen | #32CD32 | |
| Linen | #FAF0E6 | |
| Magenta | #FF00FF | |
| Maroon | #800000 | |
| MediumAquaMarine | #66CDAA | |
| MediumBlue | #0000CD | |
| MediumOrchid | #BA55D3 | |
| MediumPurple | #9370D8 | |
| MediumSeaGreen | #3CB371 | |
| MediumSlateBlue | #7B68EE | |
| MediumSpringGreen | #00FA9A | |
| MediumTurquoise | #48D1CC | |
| MediumVioletRed | #C71585 | |
| MidnightBlue | #191970 | |
| MintCream | #F5FFFA | |
| MistyRose | #FFE4E1 | |
| Moccasin | #FFE4B5 | |
| NavajoWhite | #FFDEAD | |
| Navy | #000080 | |
| OldLace | #FDF5E6 | |
| Olive | #808000 | |
| OliveDrab | #6B8E23 | |
| Orange | #FFA500 | |
| OrangeRed | #FF4500 | |
| Orchid | #DA70D6 | |
| PaleGoldenRod | #EEE8AA | |
| PaleGreen | #98FB98 | |
| PaleTurquoise | #AFEEEE | |
| PaleVioletRed | #D87093 | |
| PapayaWhip | #FFEFD5 | |
| PeachPuff | #FFDAB9 | |
| Peru | #CD853F | |
| Pink | #FFC0CB | |
| Plum | #DDA0DD | |
| PowderBlue | #B0E0E6 | |
| Purple | #800080 | |
| Red | #FF0000 | |
| RosyBrown | #BC8F8F | |
| RoyalBlue | #4169E1 | |
| SaddleBrown | #8B4513 | |
| Salmon | #FA8072 | |
| SandyBrown | #F4A460 | |
| SeaGreen | #2E8B57 | |
| SeaShell | #FFF5EE | |
| Sienna | #A0522D | |
| Silver | #C0C0C0 | |
| SkyBlue | #87CEEB | |
| SlateBlue | #6A5ACD | |
| SlateGray | #708090 | |
| SlateGrey | #708090 | |
| Snow | #FFFAFA | |
| SpringGreen | #00FF7F | |
| SteelBlue | #4682B4 | |
| Tan | #D2B48C | |
| Teal | #008080 | |
| Thistle | #D8BFD8 | |
| Tomato | #FF6347 | |
| Turquoise | #40E0D0 | |
| Violet | #EE82EE | |
| Wheat | #F5DEB3 | |
| White | #FFFFFF | |
| WhiteSmoke | #F5F5F5 | |
| Yellow | #FFFF00 | |
| YellowGreen | #9ACD32 |
brig
Ffont
Mae ffont y testun gallu gwneud neu difetha gwefan. Yn anffodus, nid oes modd defnyddio pob ffont ar eich cyfrifiadur. Mae porwyr dim ond yn gallu dangos ffontiau sydd ar beiriant y defnyddiwr. Erbyn hyn mae sawl ffont safonol yn cael eu defnyddio, mae'r rhain yn cynnwys:
- Arial yw'r ffont hwn - heb serif
- Verdana yw'r ffont hwn - heb serif
- Times New Roman yw'r ffont hwn - gyda serif
- Courier New yw'r ffont hwn - gyda serif a phob llythyren â'r un lled
Mae dulliau o ddangos rhyw faint o'ch hoff ffont gan ddulliau fel "flash-replacement" neu defnyddio delweddau, ond nid yw hyn ar gyfer testun tudalen yn gyffredinol.
Os oes gennych wir angen i ddangos ffont sydd yn weddol cyffredin i'r rhan helaeth o'ch cynulleidfa, gallwch osod rhestr o ffontiau, gyda'r un nesaf yn y rhestr yn cael ei ddefnyddio os nac ydy'r un cyn hynny ar gael. Y ffordd o wneud hyn yw defnyddio'r briodwedd, font-family.
font-family:Geneva, "Times New Roman", Times, serif;
Mae'r uchod yn golygu "defnyddiwch Geneva os ydyw ar gael, os na defnyddiwch Times New Roman ac os nac ydy hwnnw ar gael, defnyddiwch ffont Times, ac os nac ydy hwnnw ar gael ychwaith, defnyddiwch unrhyw ffont gyda seriff."
Sylwch os oes mwy nag un gair yn yr enw bydd angen ei osod mewn dyfynodau, "...".
Os nac oes unrhyw ffont yn y rhestr ar beiriant y defnyddiwr, bydd y ffont ddiofyn ar ei beiriant yn cael ei ddefnyddio (iyc!).
Mae'n rhaid bod yn ofalus wrth ddefnyddio'r dull hwn fel 'safety net' - sylwch ar y ddelwedd i'r dde - mae ffontiau, er eu bod ar yr un maint (16px yn yr enghraifft hon), yn cymryd lled gwahanol (gweler y llinellau llwyd yn marcio diwedd y gair 'mewn'). O ganlyniad, byddwch yn ofalus os yw hyd a lled eich testun yn gritigol. E.e. gall testun torri allan o'i focs taclus os oes llinell newydd yn cael ei greu oherwydd bod y ffont newydd yn hirach.
Maint y ffont
Gallwn newid maint y ffont gan y canlynol:
font-size:16px;
Yn aml, caiff maint y ffont ei osod mewn picsel, er mae sawl uned arall ar gael (pt; em; %). Nid yw pt a % yn cael ei ddefnyddio fel rheol, ond caiff em ei ddefnyddio lle bod angen gosodiad elastig neu gymharol.
Mae modd defnyddio em fel y canlynol:
body{
font-size:62.5%;
}
p, td, input, textarea, li{
font-size:1em;
}
h1{
font-size:2.2em;
}
h2{
font-size:1.8em;
}
Mae'r elfen body yn gosod y bàs i 10px (mae 62.5% yn hafal i 10px).
Mae pob elfen arall yn derbyn hwn fel sail ac yn gosod lluosydd arno, e.e. Mae 1em yn hafal i 10px X 1 = 10px. Bydd 2.2em yn hafal i 10px X 2.2 = 22px ayyb.
Yn anffodus, oherwydd bod CSS yn rhaeadrol, bydd 'plant' yn derbyn bàs o'r 'rhiant', e.e.
/*######### DYMA'R CSS ##########*/
body{
font-size:62.5%;
}
p{
font-size:1.5em;
}
span{
font-size:1.5em;
color:green;
}
<!-- ####### DYMA'R XHTML ########-->
<p>Dylai doethion ddarllen <span>Darwin</span></p>.
Mae'r uchod yn rhoi:
Dylai doethion ddarllen Darwin.
Sylwch fod y tag span wedi chwyddo. Y rheswm am hyn yw fod y tag p (y 'rhiant') yn 15px (10px X 1.5) ac mae'r span (y 'plentyn') yn 22.5px (15px X 1.5). Byddwch yn ofalus wrth osod em!!
Mae'n rhaid dweud bo'r enghraifft uchod braidd yn artiffisial oherwydd gallwch osgoi'r broblem gan beidio â gosod priodwedd font-size i'r tag span.
Llefydd amlwg am broblemau fel hyn yw tablau a rhestrau.
Steil y ffont
Mae'r briodwedd font-style yn ddefnyddiol am osod steil italig neu i'w ganslo.
/*######### DYMA'R CSS ##########*/
.dyf{
font-style:italic;
}
.hen{
font-style:oblique;
}
.dyf span, .hen span{
font-style:normal;
}
<!-- ####### DYMA'R XHTML ########-->
<p class="dyf">"Aeth y diafol bant o'r to a chymryd <span>purwen</span> o'i boced..."</p>
<p class="hen">"Daeth y trysor i'r arwyneb wrth i gapten <span>Y Morfil</span> dynnu ar ei raw a ..."</p>
Mae'r uchod yn rhoi:
"Aeth y diafol bant o'r to a chymryd purwen o'i boced..."
"Daeth y trysor i'r arwyneb wrth i gapten Y Morfil dynnu ar ei raw a ..."
Gosod Steil Bras
Mae'r briodwedd font-weight yn caniatáu steil bras:
/*######### DYMA'R CSS ##########*/
.pwysig{
font-weight:bold;
color:red;
}
<!-- ####### DYMA'R XHTML ########-->
<p>Mae genynnau'n <span class="pwysig">hunanol</span>.</p>
Mae'r uchod yn rhoi:
Mae genynnau'n hunanol.
Ar y pwynt hwn efallai rydych yn gofyn y cwestiwn, pam nid gosod tag em ar gyfer italig a thag strong ar gyfer bras? Yr ateb syml i hyn yw eich bod yn gorfod defnyddio 'cod caled' XHTML i wneud hyn. Meddyliwch am y sefyllfa, "Dwi eisiau newid golwg pob darn pwysig o fras i italig a thanlinellu." Byddai defnyddio XHTML yn real boen, yn enwedig os oedd llawer o dudalennau i'w newid. Gyda CSS, dim ond un newid bach i un ffeil!
Uchder Llinell
Mae uchder llinell (line-height) yn amlwg yn gosod uchder i'r llinell.
/*######### DYMA'R CSS ##########*/
p.gonzo{
font-size:10px;
line-height:25px;
}
p.fozzy{
font-size:10px;
}
<!-- ####### DYMA'R XHTML ########-->
<p class="gonzo">Mae pwer ocsidio yn lleihau wrth fynd lawr y gr&#373;p ond yn cynyddu wrth fynd ar draws y cyfnod. Fflworin yw ocsidydd mwyaf pwerus o ran yr elfennau. Mae hwn yn dilyn patrwm electronegatifedd.</p>
<p class="fozzy">Wrth fynd ar draws gyfnod mae mwy o brotonau er nid oes mwy o blisg, felly bydd maint yr atom yn lleihau (mwy o atyniad rhwng y niwclews a’r electronau allanol), felly bydd mwy o atyniad ar gyfer electronau mewn bond (MWY ELECTRONEGATIF).</p>
Mae pwer ocsidio yn lleihau wrth fynd lawr y grŵp ond yn cynyddu wrth fynd ar draws y cyfnod. Fflworin yw ocsidydd mwyaf pwerus o ran yr elfennau. Mae hwn yn dilyn patrwm electronegatifedd.
Wrth fynd ar draws gyfnod mae mwy o brotonau er nid oes mwy o blisg, felly bydd maint yr atom yn lleihau (mwy o atyniad rhwng y niwclews a’r electronau allanol), felly bydd mwy o atyniad ar gyfer electronau mewn bond (MWY ELECTRONEGATIF).
Mae'n rhaid dweud bod llinell tarw ar gyfer yr holl briodweddau hyn - gallwn ddefnyddio'r brif briodwedd, font:
p.sam{
font: italic small-caps bold 12px/14px arial
}
Mae'r uchod yn dangos llinell tarw am font-style (italic); font-variant (small-caps); font-weight (bold); font-size/line-height (12px/14px); font-family (arial).
Lleoli neu Alinio
Rydym yn gyfarwydd ag alinio mewn pecynnau prosesu geiriau a'r fath. Gallwn alinio testun gan y canlynol:
text-align:left;
Lle gall left gael ei amnewid gyda 'right', 'center' a 'justify'
Addurno'r Testun
Gallwn addurno'r testun gyda 'text-decoration' a 'text-transform':
/*######### DYMA'R CSS ##########*/
.kermit{
text-decoration:line-through;
}
.chef{
text-decoration:overline;
}
.beaker{
text-decoration:underline;
}
.animal{
text-transform:capitalize;
}
.prof{
text-transform:lowercase;
}
.zoot{
text-transform:uppercase;
}
<!-- ####### DYMA'R XHTML ########-->
<p>Dyma baragraff rhyfedd yn dangos sawl briodwedd gan gynnwys <span class="kermit">line-through</span>, <span class="chef">overline</span>, <span class="beaker">underline</span>, <span class="animal">capitalize</span>, <span class="prof">LoWeRCaSe</span> ac <span class="zoot">uppercase</span>.</p>
Mae'r uchod yn dangos:
Dyma baragraff rhyfedd yn dangos sawl briodwedd gan gynnwys line-through, overline, underline, capitalize, LoWeRCaSe ac uppercase.
Weithiau caiff yr uchod eu defnyddio i osod ymddygiad diofyn, e.e. text-transform:capitalize ar gyfer penawdau.
D.S. Mae text-decoration a text-transform hefyd yn gallu cael eu gosod i'r gwerth none. Mae hwn yn canslo unrhyw effaith gweledol.
Bylchu
Gallwn newid golwg y testun gan newid y bylchau sydd rhwng llythrennau neu eiriau gyda 'letter-spacing' a 'word-spacing.'
/*######### DYMA'R CSS ##########*/
.hutch{
letter-spacing:10px;
}
.magnum{
word-spacing:30px;
}
<!-- ####### DYMA'R XHTML ########-->
<p>Dyma baragraff normal</p>
<p class="hutch">Dyma baragraff letter-spacing</p>
<p class="magnum">Dyma baragraff word-spacing</p>
Mae'r uchod yn rhoi:
Dyma baragraff normal
Dyma baragraff letter-spacing
Dyma baragraff word-spacing
Meintio
Mae meintio elfennau'n gymharol hawdd i'w wneud, er mae'r posibiliad o gael e'n anghywir yn uchel! Cyn meintio, mae'n rhaid meddwl am y fath wefan rydych am greu - sefydlog neu hylifol/elastig. Os ydych yn creu gwefannau sefydlog, lle bydd popeth â maint penodol, dylech ddefnyddio picsel (px) i feintio elfennau. Ar y llaw arall, os ydych am i'r dudalen a'r elfennau tu fewn iddi ail-feintio, defnyddiwch ganrannau ac em.
Os ydych yn creu golwg i'w argraffu, gallwch ddefnyddio cm neu bwyntiau (pt) - gweler y dudalen ar ddatrysiadau.
/*########### Ar gyfer gwefannau maint sefydlog #########*/
body{
font-size: 12px;
text-align:center;
}
#wrapper{
width:730px;
margin: 0 auto;
text-align:left;
}
p,li,input,textarea,td,th{
font-size: 12px;
}
h1{
font-size: 30px;
}
h2{
font-size: 22px;
}
/*########### Ar gyfer gwefannau maint elastig #########*/
body{
font-size: 62.5%;
text-align:center;
}
#wrapper{
width:80%;
margin: 0 auto;
text-align:left;
}
p,li,input,textarea,td,th{
font-size: 1.2em;
}
h1{
font-size: 3em;
}
h2{
font-size: 2.2em;
}
/*########### Ar gyfer ffeil 'print.css' #########*/
body{
font-size: 12pt;
text-align:center;
}
#wrapper{
width:15cm;
margin: 0 auto;
text-align:left;
}
p,li,input,textarea,td,th{
font-size: 12pt;
}
h1{
font-size: 30pt;
}
h2{
font-size: 22pt;
}
<!-- ######### Ar gyfer tudalen fel hon ######## -->
<body>
<div id="wrapper">
<!-- gweddill y dudalen fan hyn -->
</div>
</body>
Mae gosod div o gwmpas y dudalen gyfan yn ffordd ddefnyddiol i reoli'r gosodiad, e.e. canoli'r dudalen a gosod delweddau i'r cefndir. Dwi pob amser yn gwneud hyn. Mae'n bosib bod rhai purdebwyr yn meddwl ei fod yn tag di-angen ac o ganlyniad yn 'big no-no'. Ar y llaw arall, mae'r rhan fwyaf o ddatblygwyr yn ei ddefnyddio ac mae'n gwneud gwaith y datblygwr llawer yn haws.
Gosod a Lleoli
Er mwyn gosod a lleoli elfennau ar y sgrin (neu bapur), mae angen deall sawl elfen a phriodwedd: margin; padding; float; clear; display; height; width; position; left; top; bottom; right; background-position.
Er mwyn deall margin a padding, mae angen edrych ar y 'box model.'
Mae'r 'box model' yn dangos y cymhlethtod o osod cynnwys tu fewn cynhwysydd. Fel rheol bydd y cynhwysydd yn tag div, er gall fod yn rhywbeth mor syml â thag p hefyd. Dyma enghraifft:
/*########### Y CSS #########*/
.snap{
padding: 20px;
border: 3px solid blue;
margin: 20px;
height: 150px;
background-color: yellow;
}
<!-- ######### Yr HTML ######## -->
<div class="snap">
<p>Dyma div gyda bits'n'bobs</p>
</div>
Dyma div gyda bits'n'bobs
Yn anffodus, mae'n bron yn amhosib i ddangos margin. Yn ogystal â defnyddio 'border', 'padding' a 'margin', gallwch hefyd ddefnyddio ochrau unigol:
border-left; border-top; border-right; border-bottompadding-left; padding-top; padding-right; padding-bottommargin-left; margin-top; margin-right; margin-bottom
D.S. Sawl blynedd yn ôl, roedd Internet Explorer (fersiynau 5 - 5.5) yn wallus iawn wrth ddangos y 'box model'. Erbyn hyn, dylai pob porwr fod yn gallu cynrychioli'r peth yn gywir.
Float a Clear
Ambell waith rydym am alinio testun o gwmpas delwedd yn hytrach na chael delwedd yn rhan o'r frawddeg. Mae IMG yn dag INLINE yn ddiofyn. Er mwyn dod o amgylch y broblem hon, gallwn osod priodoledd float iddi. Gall float osod elfen fel IMG i'r dde neu i'r chwith o'r dudalen.
/*########### Y CSS #########*/
img.inset{
float: left;
margin: 10px 10px 10px 0;
}
<!-- ######### Yr HTML ######## -->
<p><img class="inset" src = "/notepad.jpg" alt="dyma lun i'r chwith" />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum...</p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.