Ngunit habang nagko-coding, mahirap isama ang parehong mga katangian ng CSS para sa bawat web page nang hiwalay. Kaya, kinakailangan na gumamit ng isang solusyon kung saan ang isang solong style sheet ay maaaring malikha at pagkatapos ay madaling ma-access ng maraming mga file.

Ano ang @import Rule sa CSS?

Ang pinakamahusay na paraan upang isama ang mga katangian ng estilo ng CSS ay sa pamamagitan ng paggamit ng @import na panuntunan. Ang @import ay ginagamit upang mag-import o mag-access ng CSS stylesheet mula sa isa pang style sheet. Binabawasan nito ang pagsisikap ng developer dahil ang lahat ng property na idinagdag sa imported na style sheet ay direktang ipinapatupad sa pamamagitan lamang ng pagsulat ng @import at pagkatapos ay ang eksaktong pangalan ng style sheet.

Syntax ng @import Rule

Ang syntax upang magdagdag ng @import na panuntunan upang ma-access ang isang style sheet mula sa isa pang stylesheet ay ang sumusunod:

Ang panuntunang @import ay maaari ding idagdag sa pamamagitan ng sumusunod na pamamaraan:

Idagdag lang ang pangalan ng CSS stylesheet file sa alinman sa inverted comma o sa mga round bracket na may ' url 'pagkatapos magsulat' @angkat ”.

Halimbawa: Pagdaragdag ng @import na Panuntunan

Upang maunawaan kung paano gumagana ang panuntunang @import, sumusulat kami ng isang simpleng snippet ng code:

Sa snippet ng code sa itaas, mayroong

na heading na may simpleng isang linyang pangungusap na idinagdag sa isang HTML na dokumento. Ang simpleng code na ito ay bubuo ng sumusunod na output:

Gumawa tayo ng stylesheet upang tukuyin ang ilang mga katangian ng CSS na maaaring ma-import sa ibang pagkakataon mula sa file kung saan nilikha ang interface ng web page sa itaas. Lumilikha kami ng isa pang file at pinangalanan itong ' stylesheet ” na may uri ng file na ipinahayag bilang “ css ”, at magdagdag lang ng ilang property para sa

heading at body:

h1 {

kulay : midnightblue ;

kulay ng background : azure ;

text-align : gitna ;

}

katawan {

kulay ng background : mapusyaw na asul ;

}

Upang ma-access ang stylesheet file na naglalaman ng mga style property para sa

heading at body, kailangan lang nating idagdag ang @import na panuntunan sa alinman sa mga CSS file kung saan kailangan ang styling na iyon.

Ang pagdaragdag lamang ng isang simpleng @import na panuntunan ay magpapatupad ng lahat ng mga katangian ng istilo sa interface ng web page nang hindi kinakailangang i-type nang hiwalay ang mga katangian sa bawat web page.

Kaya, kinakailangang isulat ang panuntunang @import bilang:

@angkat 'stylesheet.css' ;

Pagdaragdag ng @import na panuntunan sa pamamagitan ng pagsulat ng “ url ” at ang pangalan ng CSS file sa mga round bracket ay magpapakita rin ng parehong mga resulta:

@angkat url ( stylesheet.css ) ;

Ang mga katangian na tinukoy sa ' stylesheet 'Ang file ay ipinatupad sa pamamagitan lamang ng pagdaragdag ng isang simpleng ' @angkat ' tuntunin para dito:

Ito ang pinakamadaling paraan upang maisama ang mga katangian ng CSS sa isang file nang walang anumang karagdagang pagsisikap.

Mga benepisyo ng @import Rule sa CSS

Karaniwang ginagamit ang panuntunang @import para sa mga sumusunod na dahilan:

• Ang paggamit ng @import Rule ay nakakabawas sa oras at pagsisikap ng developer habang ipinapatupad nito ang lahat ng katangian ng isang partikular na style sheet sa pamamagitan lamang ng pagsusulat ng pangalan ng sheet na iyon pagkatapos ng @import.
• Sa malaki at kumplikadong mga web app, ang @import na panuntunan ay nagpapatunay na napakahusay dahil ang parehong mga katangian ng estilo ay maaaring ipatupad sa maraming file sa pamamagitan lamang ng pagdaragdag ng pangalan ng style sheet file.
• Ang mga elemento ng style sheet tulad ng mga header, footer, body, atbp ay maaaring maimbak sa magkahiwalay na mga file ng style sheet, at pagkatapos ay sa pamamagitan ng paggamit ng @import na panuntunan, maaaring ma-import ang alinman sa kinakailangang estilo nang hindi na kailangang magdagdag, mag-alis, o magkomento ng mga katangian ng istilo mula sa isang file.

Binubuo nito ang paggamit ng panuntunang @import at ipinapaliwanag kung paano itinuturing ang panuntunang ito na pinakamahusay na paraan upang maisama ang CSS.

Konklusyon

Ang isang CSS style sheet ay maaaring ma-import o ma-access nang direkta mula sa isa pang style sheet at lahat ng mga katangian sa na-import na style sheet ay direktang ipinapatupad sa web page ng file kung saan ito na-import. Hindi na kailangang isulat ang bawat CSS property nang hiwalay para sa bawat web page interface. Ang kailangan lang ay idagdag ang pangalan ng CSS style sheet file na may @import. At, ito ay itinuturing na pinakamahusay na paraan upang magdagdag ng CSS.