Delweddau canolfan, testun, ac elfennau bloc wrth adeiladu gwefannau
Os ydych chi'n dysgu sut i adeiladu gwefannau , un o'r driciau mwyaf cyffredin y bydd angen i chi feistroli yw sut i ganolbwyntio eitemau yn y ffenestr porwr. Gallai hyn olygu canolbwyntio delwedd ar y dudalen, neu gallai fod yn ganolbwynt testun fel penawdau fel rhan o'r cynllun.
Y ffordd briodol o gyflawni'r edrychiad gweledol hwn o ddelweddau neu destun testun neu hyd yn oed eich gwefan gyfan yw trwy ddefnyddio Cascading Style Sheets (CSS) . Mae'r rhan fwyaf o'r tai i ganolbwyntio wedi bod yn CSS ers fersiwn 1.0, ac maent yn gweithio'n wych gyda CSS3 a phorwyr gwe modern.
Fel sawl agwedd ar ddylunio gwe, mae sawl ffordd o ddefnyddio CSS i elfennau canolfan mewn tudalen we. Gadewch i ni edrych ar rai ffyrdd gwahanol o ddefnyddio CSS i gyflawni'r edrychiad gweledol hwn.
Ar Trosolwg o Defnyddio CSS i Elfennau'r Ganolfan yn HTML
Gall canoli gyda CSS fod yn her i ddechrau dylunwyr gwe oherwydd bod cymaint o wahanol ffyrdd o gyflawni'r un arddull weledol hon. Er y gall yr amrywiaeth o ddulliau fod yn ddatblygwyr gwe braf neu ffrwythlon sy'n gwybod nad yw pob techneg yn gweithio ar bob elfen, gall hyn fod yn hynod heriol i weithwyr proffesiynol gwe newydd, gan fod yr amrywiaeth eang o ddulliau'n golygu bod angen iddynt wybod pryd i ddefnyddio pa ddull gweithredu. Y peth gorau i'w wneud yw cael dealltwriaeth o ychydig ymagweddau. Wrth i chi ddechrau eu defnyddio, byddwch yn dysgu pa ddull sy'n gweithio orau ym mha achosion.
Ar lefel uchel, gallwch ddefnyddio CSS i:
- Testun y Ganolfan
- Canolwch elfen lefel bloc (fel adran)
- Canolfan delwedd
- Canolwch bloc neu ddelwedd yn fertigol
Mae llawer (nifer) o flynyddoedd yn ôl, y gallai dylunwyr gwe ddefnyddio'r elfen
Canolbwyntio Testun gyda CSS
Y peth hawsaf i ganolbwyntio ar dudalen we yw testun. Dim ond un eiddo arddull sydd angen i chi ei wybod i wneud hyn: testun-alinio. Cymerwch yr arddull CSS isod, er enghraifft:
p.center {testun-align: center; }
Gyda'r llinell hon o CSS, byddai pob paragraff a ysgrifennir gyda'r dosbarth canolfan yn cael ei ganoli yn llorweddol o fewn ei elfen riant. Er enghraifft, pe bai'r paragraff tu mewn i adran, gan olygu ei bod yn blentyn i'r adran honno, byddai'n cael ei ganoli yn llorweddol tu fewn i'r
Dyma enghraifft o'r dosbarth hwn a ddefnyddiwyd yn y ddogfen HTML:
Mae'r testun hwn wedi'i ganoli.
Wrth ganolbwyntio testun gyda'r eiddo testun-alinio, cofiwch y bydd yn cael ei ganoli o fewn ei elfen sy'n cynnwys ac nid o reidrwydd yn ganolog o fewn y dudalen lawn ei hun. Cofiwch hefyd y gall y testun hwnnw fod yn anodd ei ddarllen gan y ganolfan ar gyfer blociau mawr o gynnwys, felly defnyddiwch yr arddull hon yn anaml. Yn aml, mae penawdau a blociau bach o destun, fel testun teaser ar gyfer erthygl neu gynnwys arall, yn hawdd eu darllen a'u harddangos wrth ganolbwyntio, ond byddai blociau mwy o destun, fel yr erthygl lawn ei hun, yn heriol i'w defnyddio pe bai'r cynnwys yn gwbl ganolfan wedi'i gyfiawnhau. Cofiwch, mae darllenadwyedd bob amser yn allweddol o ran testun gwefan!
Canolbwyntio Blociau Cynnwys gyda CSS
Blociau yw unrhyw elfennau ar eich tudalen sydd â lled diffiniedig ac fe'u sefydlir fel elfen lefel bloc. Oftentimes, mae'r blociau hyn yn cael eu creu trwy ddefnyddio'r elfen HTML
div.center {
ymyl: 0 auto;
lled: 80em;
}
Byddai'r llawlyfr AG CSS hon ar gyfer yr eiddo ymylol yn gosod yr ymylon uchaf a gwaelod i werth 0, tra byddai'r chwith a'r dde yn defnyddio "auto." Yn y bôn mae'n cymryd unrhyw le sydd ar gael ac yn ei rannu'n gyfartal rhwng dwy ochr ffenestr y port, gan ganolbwyntio'n effeithiol yr elfen ar y dudalen.
Yma fe'i cymhwysir yn yr HTML:
ond mae'r testun y tu mewn iddo wedi'i adlinio.
Cyn belled â bod gan eich bloc led diffiniedig, bydd yn canoli ei hun y tu mewn i'r elfen sy'n bodoli. Ni chanolir y testun a gynhwysir yn y bloc hwnnw ynddo, ond fe'i cyfiawnheir ar ôl. Mae hyn yn golygu bod testun yn cael ei gyfiawnhau'n ôl yn y rhagosodiad mewn porwyr gwe. Os oeddech am i'r testun gael ei ganoli hefyd, gallech ddefnyddio'r eiddo a deliwyd â ni yn gynharach ar y cyd â'r dull hwn i ganolu'r adran.
Canolbwyntio Delweddau gyda CSS
Er y bydd y rhan fwyaf o borwyr yn dangos delweddau sy'n canolbwyntio ar ddefnyddio'r un testun a allemwyd eisoes ar gyfer y paragraff, nid yw'n syniad da dibynnu ar y dechneg honno gan nad yw'r W3C yn argymell hynny. Gan nad yw'n cael ei argymell, mae cyfle bob amser y gallai fersiynau o borwyr yn y dyfodol ddewis anwybyddu'r dull hwn.
Yn hytrach na defnyddio testun-alinio i ganoli delwedd, dylech ddweud yn glir wrth y porwr bod y ddelwedd yn elfen lefel bloc. Fel hyn, gallwch ei ganoli fel y byddech chi'n unrhyw bloc arall. Dyma'r CSS i wneud hyn yn digwydd:
img.center {
arddangos: bloc;
ymyl-chwith: auto;
ymyl-dde: auto;
}
Ac dyma'r HTML ar gyfer y ddelwedd yr hoffem ei ganoli:
Gallwch hefyd ganu gwrthrychau gan ddefnyddio CSS ar-lein (gweler isod), ond NID yw'r argymhelliad hwn yn cael ei argymell gan ei fod yn ychwanegu arddulliau gweledol yn eich marc HTML. Cofiwch, yr ydym am wahanu arddull a strwythur, gan ychwanegu arddulliau CSS i'ch cod HTML gyda thorri'r gwahaniad hwnnw ac, fel y cyfryw, dylid ei osgoi pryd bynnag y bo modd.
Eitemau Canoli Yn Fertigol gyda CSS
Mae gwrthrychau canoli yn fertigol bob amser wedi bod yn heriol wrth ddylunio gwe, ond gyda rhyddhau Modiwl Gosod Blwch Hyblyg CSS yn CSS3, mae bellach yn ffordd i'w wneud.
Mae aliniad fertigol yn gweithio'n debyg i aliniad llorweddol a gwmpesir uchod. Mae eiddo CSS yn cyd-fynd yn fertigol gyda'r gwerth canol.
.vcenter {
fertigol-alinio: canol;
}
Yr anfantais i'r dull hwn yw nad yw pob porwr yn cefnogi CSS FlexBox, er bod mwy a mwy yn dod i'r dull cynllun CSS newydd hwn! Mewn gwirionedd, mae pob porwr modern heddiw nawr yn cefnogi'r arddull CSS hon. Mae hyn yn golygu mai eich unig bryderon gyda Flexbox fyddai fersiwn porwr llawer hŷn.
Os oes gennych broblemau gyda phorwyr hŷn, mae'r W3C yn argymell eich bod yn canoli testun yn fertigol mewn cynhwysydd gan ddefnyddio'r dull canlynol:
- Rhowch yr elfennau i'w ganoli o fewn elfen sy'n cynnwys, fel div.
- Gosod isafswm uchder ar yr elfen sy'n cynnwys.
- Datganwch sy'n cynnwys elfen fel cell bwrdd.
- Gosodwch yr aliniad fertigol i "canol."
Er enghraifft, dyma'r CSS:
.vcenter {
uchder uchel: 12m;
arddangos: cell bwrdd;
fertigol-alinio: canol;
}
Ac dyma'r HTML:
Mae'r testun hwn wedi'i ganoli'n fertigol yn y blwch.
Canolfan Fertigol a Fersiynau Hŷn o Internet Explorer
Mae rhai ffyrdd o rymio Internet Explorer (IE) i ganolbwyntio ac yna'n defnyddio sylwadau amodol fel mai dim ond IE sy'n gweld yr arddulliau, ond maen nhw'n braidd ac yn hyll. Y newyddion da yw, gyda phenderfyniad diweddar Microsoft i ollwng cefnogaeth ar gyfer fersiynau hŷn o IE, y dylai'r rhai nad ydynt yn cefnogi porwyr fod ar y gweill yn fuan, gan ei gwneud hi'n haws i ddylunwyr gwe ddefnyddio dulliau gosod modern fel CSS FlexBox a fydd yn gwneud pob cynllun CSS, nid yn unig yn canolbwyntio, yn haws i bob dyluniwr gwe.