Defnyddio CSS - Ysgrifennu CSS
Canllawiau CSS
- Beth yw CSS?
- Ysgrifennu CSS
- Rheolau cyffredin
- Datrysiadau
- Dewislenni (menus)
Ewch i CSSZenGarden i weld pwer CSS
Yr unig beth sydd angen i greu ffeiliau CSS, yw golygydd testun fel Notepad. Er, nid yw Notepad yn neis iawn, gallwch lawrlwytho golygydd o'r enw Notepad++ o fan hyn wrth ddewis y ffeil "npp.5.0.3.Installer.exe" (y fersiwn diweddaraf wrth i mi ysgrifennu hwn). Dwi wedi cyfieithu'r rhyngwyneb ac mae ar gael yma.
Cystrawen CSS
Prif gystrawen CSS yw'r elfen ac yna tu fewn i frasys (braces) caiff y priodweddau (properties) eu rhestru. Bydd gan bob priodwedd o leiaf un gwerth a chaiff pob priodwedd:gwerth(oedd) ei wahanu o'r un nesaf gyda hanner colon (;):
elfen{
priodwedd1: gwerth1;
priodwedd2: gwerth2a gwerth2b gwerth2c;
priodwedd3: gwerth3;
}
Sylwch ar y mewnoliadau (indents) uchod. Dyma'r ffordd safonol o arddangos y cod. Nid yw peidio â gosod mewnoliadau yn effeithio ar y rheolau, ond mae'n anoddach i'w ddarllen. Eich dewis chi.
Sylwadau mewn CSS
Gall ffeiliau CSS golli trefn yn gyflym iawn os nac ydych yn ofalus. Er enghraifft, ysgrifennais ffeil CSS ar un tro a oedd gan dros 200 o rheolau (braidd yn hurt, reli). Yn anffodus, gwnes ychwanegu rheolau newydd i waelod y ffeil pob tro. Yn y diwedd roedd gennyf "mish-mash" ac yn anffodus, nid oedd llawer o syniad gennyf beth oedd yn mynd ymlaen pan ddes yn ô iddo pythefnos wedyn. Dysgais fy ngwers! Nawr rwyf yn ceisio â gosod "adrannau" i'r ffeil a sicrhau fy mod yn gosod sylwadau penodol mewn mannau allweddol, e.e.
/*=========================================*/
/*=========== FFEIL PRIF.CSS ==============*/
/*=========== GAN ALAN DAVIES =============*/
/*============ MEDI 2008 ==============*/
/*=========================================*/
/*======= DIOFYN A BOILERPLATE ============*/
body{
background-color:yellow;
font-family: Calibri, Verdana, Arial;
}
p, li, input, textarea{
font-size:12px;
}
/*====== STEILIO NAVBAR ===================*/
#navbar{
font-size:14px;
font-family: Trebuchet, Times New Roman;
color:red;
background-color:black;
}
Gallwch osod sylwadau gan ddefnyddio'r nodau "/*" i agor a "*/" i gau.