Ekzistas kelkaj manieroj, ke vi povas apliki CSS-stilojn al retpaĝaro, inkluzive de ambaŭ eksteraj stilo-folioj aŭ eĉ inlinaj stiloj . Se vi uzas eksterajn foliojn, kiu estas la rekomendinda maniero por dikti la aspekton kaj senton de HTML-dokumento, unu aliro estas uzi @import.
La regulo @import permesas al vi gravajn eksterajn foliojn en via dokumento - ĉu en HTML-paĝon aŭ eĉ en aliajn CSS-dokumentojn. Rompante multajn stilojn en kelkajn pli malgrandajn, koncentritajn dosierojn (unu por aranĝo, unu por tipografio , unu por bildoj, ktp) povas foje faciligi administri tiujn dosierojn kaj la diversajn stilojn, kiujn ili enhavas. Se vi volas ĝui tiun profiton, tiam importi tiujn diversajn dosierojn estas tio, kion vi bezonos fari por ke ĉiuj funkciu por la ekrano de via retejo.
Importante En HTML
Por uzi la @import-regulon en via HTML, vi aldonos la jenan al la
:
@import url ("/ styles / default.css");
Ĉi tiu kodo nun importus ĉi tiun stilon por uzi ĉi tiun HTML-paĝon kaj vi povus administri ĉiujn viajn stilojn en tiu dosiero. La malfacilaĵo al gravaj stiloj de ĉi tiu maniero estas, ke ĉi tiu metodo ne permesas paralelajn elŝutojn. La paĝo devas elŝuti tutan stilfolion antaŭ ol ĝi moviĝos al la resto de la paĝo, inkluzive de iuj aliaj CSS-dosieroj kiujn vi importas per ĉi tiu metodo. Ĉi tio havos negativan efikon sur la rapideco kaj elŝuta elfaro de via paĝo. Konsiderante kiom grava paĝo-rendimento estas la hodiaŭa retejo-sukceso, ĉi tiu malavantaĝo nur povas esti kialo kial vi volas eviti uzi @import.
Alternativa alproksimiĝo
Kiel alternativo al uzado de @import en via HTML, vi povas ligi tiun CSS-dosieron kiel ĉi tion:
Ĉi tio funkcias tre simile al la @import, ke ĝi ebligas al vi administri ĉiujn viajn CSS de unu centra loko / dosiero, sed ĉi tiu metodo preferas elŝuta perspektivo. Se vi ankoraŭ volas segmenti malsamajn specojn de stiloj en apartajn dosierojn, vi povas daŭrigi tiel kaj uzi la @import-funkciojn ene de via mastruma CSS-dosiero. Ĉi tio signifas, ke viaj eksteraj CSS-dosieroj ankoraŭ povas esti administritaj individue, sed ĉar ili ĉiuj importiĝas en unu majstro CSS, la agado pliboniĝas.
Importante En CSS
Uzante la kodon ekzemplo supre alportus la "default.css" dosieron por uzi en via HTML-paĝo. En tiu CSS-dosiero, vi havus viajn diversajn paĝajn stilojn. Vi povas havi ĉiujn tiujn stilojn detalajn en tiu paĝo, aŭ vi povas uzi @import por rompi ilin por pli facila administrado. Denove, ni diru, ke ni uzas 4 apartajn CSS-dosierojn - unu por aranĝo, unu por tipografio, kaj unu por bildoj. La kvara dosiero estas nia "mastro" dosiero, kio estas nia ligilo al (por ĉi tiu ekzemplo, tio estas "default.css"). Ĉe la supro de tiu mastra CSS-dosiero ni povas aldoni la regulojn montritajn sube:
@import url ('/ stiloj / layout.css');
@import url ('/ stiloj / type.css');
@import url ('/ stiloj / images.css');
Rimarku, ke ĉi tiuj reguloj devas esti antaŭ ĉiu alia enhavo en via CSS-dosiero por ke ili funkciu. Vi ne povas havi ajnan alian CSS-stilon antaŭ ĉi tiuj importaj reguloj!
Sub tiuj importaj reguloj, vi povas aldoni ajnajn aliajn CSS-stilojn vi volas havi en via defaŭlta folio. Kiam tiu ĉefa CSS-dosiero estas ŝarĝita, ĝi unue importos ĉi tiujn apartajn dosierojn kaj aldonos siajn stilojn al la plej alta parto de la stilfolio. Ĝi tiam havos ĉiujn viajn aliajn stilojn sub ĉi tiuj importitaj, kreante la plenan CSS-dosieron, kiun la retumilo uzos por montri vian retejon. Vi ricevas la profiton administri pli malgrandajn, pli koncentritajn dosierojn, kvankam ankoraŭ havas unu stilfolion ligita al tiu HTML.
Uzante & # 64; importi por amaskomunikiloj
Unu afero vi povas konsideri fari ĝin apartigante la amaskomunikilajn demandojn de via retejo por respondemaj retejaj stiloj en apartan dosieron. Ĉar ĉi tiuj respondemaj stiloj povas esti konfuzaj kiam vi vidas apud aliajn regulojn de via retejo, havante ilin laŭ si mem en malsama dosiero eble estas alloga. Unu koncerno kun ĉi tiu aliro estas tio, ĉar viaj reguloj @import devas esti unue, tio signifas, ke viaj amaskomunikiloj konsultus antaŭ la resto de la stiloj de via retejo. Kiam kreante movebla-unua respondema retejo, kiu okupas la rendimenton, ĉi tio verŝajne estos problemo. Pro tio, ĝi sugestas, ke vi ne apartigas la respondajn stilojn de via retejo aparte kaj uzu @import por alporti ilin en vian retejon. Jes, eble ŝajnas esti profitoj fari tion, sed la malfacilaĵoj superas tiujn profitojn.
Ĉu Mi Devas Uzi & # 64; Importi?
Ne, vi ne. Multaj retejoj simple montras ĉiujn siajn ĉefajn stilojn ene de unu dosiero kaj, kiom eble tiu dosiero povas esti, ĝi estas administrata tiel (kiel mi faras ĝin en mia propra laboro). Se vi trovos helpon al @import, tiam ĝi povas esti parto de via laborfluo. Alie, vi povas sekure konstrui retpaĝojn, kiuj
Foliumilo Subtenado
Tre, tre malnovaj foliumiloj havas problemojn kun kelkaj el ĉi tiuj @import-reguloj, sed ĉi tiuj retumiloj ne ŝajne estas problemo por vi ĉi tiuj tagoj. Ĉi tio estas precipe vera nun, ke la limtempo de vivo de pli malnovaj versioj de Interreto Explorer pasis. Finfine, se vi decidas uzi @import-regulojn en via HTML aŭ CSS, vi ne devus enketi problemojn kun legaciaj versioj de retumiloj krom se vi havas strangan bezonon subteni nekredeble malnovajn versiojn de IE.
Originala artikolo de Jennifer Krynin. Redaktita de Jeremy Girard.