Mae yna nifer o ffyrdd y gallwch chi ddefnyddio arddulliau CSS i dudalen gwe, gan gynnwys taflenni arddull allanol neu hyd yn oed arddulliau mewnline . Os ydych chi'n defnyddio dalen arddull allanol, sef y ffordd a argymhellir i bennu edrychiad a theimlad dogfen HTML, un dull yw defnyddio @import.
Mae'r rheol @import yn caniatáu i chi daflenni arddull allanol pwysig yn eich dogfen - naill ai i dudalen HTML neu hyd yn oed i mewn i ddogfennau CSS eraill. Gall torri llawer o arddulliau i mewn i nifer o ffeiliau sy'n canolbwyntio llai (un ar gyfer gosodiad, un ar gyfer teipograffeg , un ar gyfer delweddau, ac ati) weithiau ei gwneud yn haws i reoli'r ffeiliau hynny a'r arddull amrywiol y maent yn ei gynnwys. Os ydych chi am fwynhau'r budd-dal hwnnw, yna mae'r hyn y bydd angen i chi ei wneud i fewnfudo'r ffeiliau amrywiol hynny er mwyn sicrhau eu bod i gyd yn gweithio ar gyfer arddangosfa'ch gwefan.
Mewnforio Mewn HTML
I ddefnyddio'r rheol @import yn eich HTML, byddech yn ychwanegu'r canlynol i
:
@import url ("/ styles / default.css");
Byddai'r cod hwn nawr yn mewnosod y daflen arddull hon i'w defnyddio ar y dudalen HTML hon a gallech reoli eich holl arddulliau yn yr un ffeil honno. Yr anfantais i ddalennau arddull pwysig fel hyn yw nad yw'r dull hwn yn caniatáu i lawrlwytho cyfochrog. Rhaid i'r dudalen lawrlwytho dalen arddull gyfan cyn iddo symud ymlaen i weddill y dudalen, gan gynnwys unrhyw ffeiliau CSS eraill yr ydych yn eu mewnforio gan ddefnyddio'r dull hwn. Bydd hyn yn cael effaith negyddol ar gyflymder eich tudalen a llwytho i lawr perfformiad. O ystyried pa mor bwysig yw perfformiad y dudalen i lwyddiant gwefan heddiw, efallai y bydd yr anfantais hon yn unig yn rheswm pam y byddech am osgoi defnyddio @import.
Dull Amgen
Fel dewis arall i ddefnyddio @import yn eich HTML, gallwch gysylltu â'r ffeil CSS fel hyn:
Mae'r swyddogaethau hyn yn debyg iawn i'r @import gan ei fod yn caniatáu i chi reoli eich holl CSS o un lleoliad / ffeil ganolog, ond mae'n well gan y dull hwn o lwytho i lawr. Os ydych chi'n dal i eisiau segmentu gwahanol fathau o arddulliau i mewn i ffeiliau ar wahân, gallwch barhau i wneud hynny a defnyddiwch y @import functionality y tu mewn i'ch ffeil meistr CSS. Mae hyn yn golygu y gall eich ffeiliau CSS allanol gael eu rheoli'n unigol o hyd, ond gan eu bod i gyd yn mewnforio i un meistr CSS, mae perfformiad yn cael ei wella.
Mewnforio i AG
Byddai defnyddio'r enghraifft cod uchod yn dod â'r ffeil "default.css" i'w ddefnyddio ar eich tudalen HTML. Y tu mewn i'r ffeil CSS hon, byddech chi'n cael eich gwahanol arddulliau tudalen. Gallwch chi gael yr holl arddulliau hynny a fanylir ar yr un dudalen honno, neu gallwch ddefnyddio @import i'w torri ar wahân i reoli'n haws. Unwaith eto, gadewch i ni ddweud ein bod yn defnyddio 4 ffeil CSS ar wahân - un ar gyfer gosodiad, un ar gyfer teipograffeg, ac un ar gyfer delweddau. Y bedwaredd ffeil yw ein ffeil "meistr" sef yr hyn y mae ein tudalennau yn cysylltu â (ar gyfer yr enghraifft hon, mae hyn yn "default.css"). Ar ben uchaf y ffeil meistr CSS honno, gallwn ychwanegu'r rheolau isod:
@import url ('/ styles / layout.css');
@import url ('/ styles / type.css');
@import url ('/ styles / images.css');
Sylwch fod yn rhaid i'r rheolau hyn fod o flaen yr holl gynnwys arall yn eich ffeil CSS er mwyn iddynt weithio. Ni allwch chi gael unrhyw arddull CSS arall cyn y rheolau mewnforio hyn!
O dan y rheolau mewnforio hynny, gallwch ychwanegu pa arddulliau CSS eraill yr ydych am eu cael yn eich taflen ddiofyn. Pan fydd y brif ffeil CSS wedi'i lwytho, bydd yn gyntaf mewnforio'r ffeiliau hyn ar wahân ac yn ychwanegu eu harddulliau i ben uchaf y dalen arddull. Yna bydd ganddo'ch holl arddulliau eraill o dan y rhai sy'n cael eu mewnforio, gan greu y ffeil CSS lawn y bydd y porwr gwe yn ei ddefnyddio i arddangos eich gwefan. Rydych chi'n cael y budd o reoli ffeiliau llai, mwy ffocws tra'n dal i gael un dalen arddull sy'n gysylltiedig â hynny yn HTML.
Defnyddio & # 64; mewnforio ar gyfer ymholiadau cyfryngau
Un peth y gallech ystyried ei wneud yn gwahanu ymholiadau cyfryngol eich gwefan ar gyfer arddulliau gwefan ymatebol i mewn i ffeil ar wahân. Oherwydd y gall yr arddulliau ymatebol hyn fod yn ddryslyd wrth eu gweld ochr yn ochr â rheolau arddull eraill eich safle, efallai y bydd eu cael ar eu pen eu hunain mewn ffeil wahanol yn ddeniadol. Un pryder gyda'r dull hwn yw, gan fod rhaid i'ch rheolau @import fod yn gyntaf, mae hyn yn golygu y byddai'ch ymholiadau cyfryngau yn cael eu llwytho cyn gweddill arddulliau eich gwefan. Wrth greu safle ymatebol symudol cyntaf sy'n cymryd i ystyriaeth, mae'n debygol y bydd hyn yn broblem. Oherwydd hyn, awgrymir na fyddwch yn rhan o arddulliau ymatebol eich safle ar wahân a defnyddiwch @import i'w dwyn i mewn i'ch gwefan. Ydw, mae'n debyg y bydd manteision gwneud hynny, ond mae'r anfanteision yn gorbwyso'r buddion hynny.
Oes angen i mi ei ddefnyddio & # 64; mewnforio?
Na dydych chi ddim. Mae llawer o safleoedd yn arddangos eu holl arddulliau yn unig o fewn un ffeil ac, mor fawr â'r ffeil honno, mae'n cael ei reoli fel hyn (dyma sut rwy'n ei wneud yn fy ngwaith fy hun). Os ydych chi'n dod o hyd i @import yn ddefnyddiol, yna gall fod yn rhan o'ch llif gwaith. Fel arall, gallwch adeiladu tudalennau gwe yn ddiogel sy'n eich taflen arddull sengl o'ch holl reolau CSS.
Cymorth Porwr
Mae porwyr hynod iawn yn cael trafferth gyda rhai o'r rheolau @import hyn, ond mae'r porwyr hyn yn annhebygol o fod yn broblem i chi heddiw. Mae hyn yn arbennig o wir nawr bod y dyddiad cau diwedd oes ar gyfer fersiynau hŷn o Internet Explorer wedi mynd heibio. Yn y pen draw, os penderfynwch ddefnyddio rheolau @import yn eich HTML neu CSS, ni ddylech fynd i'r afael â materion gyda fersiynau etifeddiaeth o borwyr gwe oni bai bod gennych rywfaint o angen rhyfedd i gefnogi fersiynau hynod o hen IE.
Erthygl wreiddiol gan Jennifer Krynin. Golygwyd gan Jeremy Girard.