Mae CSS neu Daflenni Arddull Cascading yn pennu arddull a gwelediad gweledol gwefan. Mae'r rhain yn ddogfennau sy'n llunio marc HTML ar y we, gan ddarparu cyfarwyddiadau ar borwyr gwe ar sut i arddangos y tudalennau sy'n deillio o'r marc hwnnw. Mae CSS yn delio â chynllun tudalen, yn ogystal â lliw, delweddau cefndir, typograffeg a llawer mwy.
Os edrychwch ar ffeil CSS, fe welwch hynny fel unrhyw iaith farcio neu godio, mae gan y ffeiliau hyn gystrawen benodol iddynt. Mae pob dalen arddull yn cynnwys nifer o reolau CSS. Y rheolau hyn, wrth eu cymryd yn llawn, yw pa arddulliau y safle.
Rhannau Rheolau CSS
Mae rheol CSS yn cynnwys dwy ran wahanol - y detholydd a'r datganiad. Mae'r detholydd yn penderfynu beth sy'n cael ei styled ar dudalen ac mae'r datganiad yn sut y dylid ei styled. Er enghraifft:
p {
lliw: # 000;
}
Mae hon yn rheol CSS. Y rhan detholydd yw'r "p", sy'n ddewisydd elfen ar gyfer "paragraffau". Felly, byddai'n dewis POB paragraffau mewn safle ac yn rhoi'r arddull hon iddynt (oni bai bod paragraffau sy'n cael eu targedu gan arddulliau mwy penodol mewn mannau eraill yn eich dogfen CSS).
Mae'r rhan o'r rheol sy'n dweud "lliw: # 000;" yw'r hyn a elwir yn y datganiad. Mae'r datganiad hwnnw'n cynnwys dwy ddarn - yr eiddo a'r gwerth.
Yr eiddo yw darn "lliw" y datganiad hwn. Mae'n nodi pa agwedd o'r detholydd fydd yn cael ei newid yn weledol.
Y gwerth yw y bydd yr eiddo CSS dewisol yn cael ei newid i. Yn ein hes enghraifft, yr ydym yn defnyddio gwerth hecs o # 000, sef llawlyfr AG ar gyfer "du".
Felly, gan ddefnyddio'r rheol CSS hon, byddai gan ein tudalen baragraffau a ddangosir mewn ffont-liw du.
Basics Eiddo CSS
Pan fyddwch yn ysgrifennu eiddo CSS, ni allwch eu gwneud i fyny fel y gwelwch yn dda. Ar gyfer achosion, mae "lliw" yn eiddo CSS gwirioneddol, fel y gallwch ei ddefnyddio. Yr eiddo hwn yw'r hyn sy'n pennu lliw testun elfen. Os ceisiwch ddefnyddio "text-color" neu "font-color" fel eiddo CSS, byddai'r rhain yn methu oherwydd nad ydynt yn rhannau gwirioneddol o'r iaith CSS.
Enghraifft arall yw'r eiddo "cefndir-ddelwedd". Mae'r eiddo hwn yn gosod delwedd y gellir ei ddefnyddio ar gyfer cefndir, fel hyn:
.logo {
cefndir-ddelwedd: url (/images/company-logo.png);
}
Os ceisiwch ddefnyddio "cefndir-lun" neu "gefndir-graffig" fel eiddo, byddent yn methu oherwydd, unwaith eto, nid eiddo gwirioneddol CSS yw'r rhain.
Rhai Eiddo CSS
Mae nifer o eiddo CSS y gallwch eu defnyddio i arddull safle. Dyma rai enghreifftiau:
- Gororau (gan gynnwys arddull y ffin, ffin-lliw a lled y ffin)
- Golchi (gan gynnwys top padio, padio-dde, gwaelod padio, a chwith padio)
- Margins (gan gynnwys ymyl-top, ymyl-dde, gwaelod ymyl, ac ymyl-chwith)
- Ffont-deulu
- Maint y ffont
- Lliw cefndir
- Lled
- Uchder
Mae'r eiddo CSS hyn yn rhai gwych i'w defnyddio fel enghreifftiau, gan eu bod i gyd yn syml iawn ac, hyd yn oed os nad ydych chi'n gwybod CSS, mae'n debyg y byddwch yn dyfalu beth maent yn ei wneud yn seiliedig ar eu henwau.
Mae yna eiddo CSS eraill y byddwch yn dod ar eu traws hefyd, ac efallai na fyddant mor amlwg â sut maent yn gweithio yn seiliedig ar eu henwau:
- Arnofio
- Clir
- Gorlif
- Testun-drawsnewid
- Z-mynegai
Wrth i chi fynd yn ddyfnach i ddylunio gwe, byddwch yn dod ar draws yr holl eiddo hyn (a defnyddiwch) a mwy!
Mae angen Gwerthoedd Angen
Bob tro y byddwch yn defnyddio eiddo, mae'n rhaid i chi roi gwerth iddo - a gall rhai eiddo ond dderbyn rhai gwerthoedd.
Yn ein enghraifft gyntaf o'r eiddo "lliw", mae angen i ni ddefnyddio gwerth lliw. Gallai hyn fod yn werth hecs , gwerth RGBA, neu eiriau allweddol lliw hyd yn oed. Byddai unrhyw un o'r gwerthoedd hynny yn gweithio, fodd bynnag, pe baech yn defnyddio'r gair "tywyll" gyda'r eiddo hwn, ni fyddai'n gwneud dim oherwydd, fel y bo'n ddisgrifiadol â'r gair hwnnw, nid yw'n werth cydnabyddedig yn CSS.
Mae ein hail enghraifft o "gefndir-ddelwedd" yn ei gwneud yn ofynnol i lwybr delwedd gael ei ddefnyddio i geisio delwedd wirioneddol o ffeiliau eich gwefan. Dyma'r gwerth / cystrawen sydd ei angen.
Mae gan holl eiddo CSS werthoedd y maent yn eu disgwyl. Er enghraifft:
- Mae lliw y ffin yn disgwyl gwerth lliw
- Mae maint y ffin yn disgwyl gwerth sizing, fel picseli neu ganrannau
- Mae arddulliau ffiniol yn disgwyl i un o'r arddulliau neilltuedig a ddefnyddir ar gyfer yr eiddo hwn, fel "solid"
Os byddwch yn mynd trwy'r rhestr o eiddo CSS, byddwch yn darganfod bod gan bob un ohonynt werthoedd penodol y byddant yn eu defnyddio i greu'r arddulliau y bwriedir eu gwneud.
Golygwyd gan Jeremy Girard