Kugwiritsa ntchito @import muzithunzi za Cascading (CSS)

Pali njira zingapo zomwe mungagwiritsire ntchito mafashoni a CSS ku tsamba la webusaiti, kuphatikizapo mafilimu akunja akunja kapena mafashoni apakati. Ngati mukugwiritsira ntchito pepala lakunja, ndi njira yowonjezeretsera kuti muwonetsetse kuyang'ana ndi kumverera kwa chilembo cha HTML, njira imodzi ndiyo kugwiritsa ntchito @import.

Lamulo la @import likukuthandizani ku mapepala ofunika apamwamba omwe ali m'kabuku lanu - kaya mu HTML tsamba kapena ngakhale malemba ena a CSS. Kuphwanya mafashoni ambiri kukhala ochepa, mafayilo oyang'aniridwa (imodzi yokha, gawo la zojambulajambula , imodzi ya mafano, etc.) nthawi zina zingakhale zosavuta kusamalira ma fayilo ndi mawonekedwe osiyanasiyana omwe ali nawo. Ngati mukufuna kusangalala ndi phindu limenelo, ndiye kuti mukuitanitsa maofesi osiyanasiyana ndi zomwe muyenera kuchita kuti onsewo azigwira ntchito pa tsamba lanu.

Kulowa mu HTML

Kuti mugwiritse ntchito @import malamulo mu HTML yanu, mungawonjezere zotsatirazi pa za chikalata:
:

@import url ("/ styles / default.css");

Makhalidwewa angalowetseni tsambali lamasewera kuti agwiritsidwe ntchito pa tsamba la HTML ndipo mutha kuyang'anira mafashoni anu onse mu fayilo limodzi. Chotsutsana ndi mafilimu ofunika kwambiri ndikuti njira iyi salola kuti zolembedwera zofanana. Tsambali liyenera kutsegula ma stylesheet yonse isanayambe kupita ku tsamba lonse, kuphatikizapo ma fayilo ena a CSS omwe mukuwagwiritsa ntchito pogwiritsa ntchito njirayi.Zomwezo zidzakhala ndi zotsatira zoipa pa tsamba la tsamba lanu ndikuwongolera ntchito. Poganizira momwe tsamba likugwirira ntchito ndi webusaiti yathu lero, zotsatirazi zokha ndizo chifukwa chomwe mungayesere kugwiritsa ntchito @import.

Njira Yina

Monga njira yogwiritsira ntchito @import mu HTML yanu, mukhoza kugwirizana ndi fayilo ya CSS monga iyi:

Izi zimagwirizananso chimodzimodzi ndi @import chifukwa zimakulolani kuti muyang'ane CSS yanu yonse kuchokera pamalo amodzi / fayilo, koma njira iyi ndi yabwino kuchoka pawotheka. Ngati mukufunabe kuti mutenge mawonekedwe osiyanasiyana mu mafayela osiyana, mukhoza kupitiriza kuchita izi ndi kugwiritsa ntchito @import ntchito mkati mwa fayilo yanu ya CSS. Izi zikutanthauza kuti mafayilo anu a kunja a CSS angathe kukhazikitsidwa payekha, koma popeza onse alowetsedwa mu Master CSS imodzi, ntchito ikuwongolera.

Kulowetsa mu CSS

Kugwiritsa ntchito code chitsanzo pamwamba kumabweretsa "default.css" fayilo ntchito pa HTML tsamba. M'kati mwa fayiloyi ya CSS, mungakhale ndi ma pepala anu osiyanasiyana. Mukhoza kukhala ndi mafashoni onsewa pa tsamba limodzi, kapena mungagwiritse ntchito @import kuti muwawononge kuti mukhale ovuta. Apanso, tiyerekeze kuti tikugwiritsa ntchito mafayilo 4 a CSS osiyana - imodzi yokha, imodzi yojambula, ndi imodzi ya mafano. Fayilo yachinayi ndi fayilo yathu "yeniyeni" yomwe ndi tsamba lathu lomwe limalumikiza (mwachitsanzo, izi ndi "default.css"). Pamwamba kwambiri pa fayilo ya Master CSS titha kuwonjezera malamulo omwe ali pansipa:

@import url ('/ styles / layout.css');
@import url ('/ styles / type.css');
@import url ('/ styles / images.css');

Dziwani kuti malamulowa ayenera kukhala patsogolo pa mafayilo onse a CSS yanu kuti agwire ntchito. Simungathe kukhala ndi machitidwe ena a CSS pamaso pa malamulo awa.

Pansi pa malamulo amenewa, mungathe kuwonjezera zida zina za CSS zomwe mumafuna kuti mukhale ndi pepala lanu losasintha. Pamene fayilo yayikulu ya CSS yanyamula, iyamba kutumiza mafayilo osiyanawa ndi kuwonjezera mafashoni awo mpaka pamwamba pazithunzi. Zidzakhala ndi mafayilo anu onse pansi pa izi, kutenga fayilo yonse ya CSS yomwe msakatuli angagwiritse ntchito kusonyeza tsamba lanu. Muli ndi phindu loyang'anira maofesi ang'onoang'ono, okhudzidwa kwambiri pamene mukukhala ndi stylesheet imodzi yokha yogwirizana ndi HTML.

Kugwiritsa ntchito & # 64; kuitanitsa Media Queries

Chinthu chimodzi chomwe mungachiganizire mukuchichita polekanitsa masamba anu a webusaiti ndi mauthenga omwe amavomerezedwa pa webusaitiyi . Chifukwa mafashoniwa amatha kusokoneza pamene mukuwoneka pa malamulo ena amtundu wanu, kukhala nawo pawonekedwe osiyana kungakhale kokongola. Chodetsa nkhaŵa ndi njirayi ndi chakuti, popeza anu @import malamulo ayenera kukhala oyamba, izi zikutanthauza kuti mafunso anu a zamagetsi adzasungidwa musanakhale mafashoni anu onse a tsamba. Pogwiritsa ntchito tsamba loyamba lamasewera lomwe limagwira ntchito, izi zikhoza kukhala zovuta.Pachifukwa ichi, zikuperekedwa kuti musatengere machitidwe ovomerezeka a webusaiti yanu ndikugwiritsa ntchito @import kuti mubwere nawo ku tsamba lanu. Inde, pangakhale phindu lochita zimenezo, koma zovuta zimaposa phindu limenelo.

Kodi Ndiyenera Kugwiritsa Ntchito & # 64; kuitanitsa?

Ayi, simukutero. Masamba ambiri amangosonyeza machitidwe awo onse mkati mwa fayilo imodzi ndipo, monga yaikulu ngati fayiloyo, imayikidwa motere (ndi momwe ndikuchitira ntchito yanga). Ngati mutapeza @import zothandiza, ndiye zikhoza kukhala gawo lanu. Popanda kutero, mungathe kumanga mawebusaiti omwe anu osakayikira a malamulo anu onse a CSS.

Zothandizira Otsata

Ma browser akale kwambiri amakumana ndi zina mwa izi :import rules, koma osatsegula awa sangaoneke vuto kwa inu masiku ano. Izi ndi zoona makamaka tsopano kuti mapeto a moyo wamasiku omaliza atsopano a Internet Explorer adutsa. Pamapeto pake, ngati mutasankha kugwiritsa ntchito @import malamulo mu HTML kapena CSS yanu, simuyenera kuyendetsa muzolemba ndi zolemba zamasewera osatsegula pokhapokha mutakhala ndi zosowa zachilendo zothandizira malemba oyambirira a IE.

Nkhani yoyamba ndi Jennifer Krynin. Kusinthidwa ndi Jeremy Girard.