picha

CSS - SOMO LA 27: Kutumia @import Katika CSS

Katika somo hili, tutajifunza kuhusu @import — amri inayotumika kuingiza faili moja la CSS ndani ya jingine. Tutaona namna ya kuitumia, faida zake, hasara zake, na tofauti kati yake na njia mbadala ya <link> ndani ya HTML.

📘 Utangulizi

Wakati mwingine, unapotengeneza tovuti kubwa au unataka kugawanya mitindo (styles) kwenye mafaili tofauti kwa urahisi wa usimamizi, unaweza kutumia @import ili kuunganisha faili hizo ndani ya faili kuu la CSS.

Hii hufanya CSS iwe modular (imegawanyika vizuri), mfano unaweza kuwa na:


📚 Maudhui ya Somo


✅ 1. Syntax ya @import

Unaweza kutumia njia hizi mbili:

@import "style.css";

Au:

@import url("style.css");

Unaiweka juu kabisa ya faili la CSS, kabla ya styles nyingine yoyote:

@import "reset.css";
@import "layout.css";

body {
  font-family: Arial, sans-serif;
}

✅ 2. Faida za @import


✅ 3. Hasara na Tahadhari


✅ 4. Tofauti kati ya @import na <link>

Kipengele @import <link>
Uwekaji Ndani ya CSS Ndani ya <head> ya HTML
Performance Polepole (delayed loading) Haraka zaidi (asynchronous)
Usimamizi Bora kwa modular CSS Bora kwa performance
Support ya browsers Baadhi ya browsers kongwe huzingua Inaungwa mkono na zote

✅ 5. Ushauri Bora wa Matumizi


Hitimisho

@import ni chombo kizuri katika CSS kinachokuwezesha kugawanya na kuunganisha mafaili kwa urahisi. Hata hivyo, ni muhimu kujua mipaka yake na athari zake kwenye performance. Katika miradi mikubwa, njia ya <link> ndani ya HTML bado ni bora zaidi kwa kasi na ufanisi.


 


🧠 Maswali ya Kujitathmini

  1. @import hutumiwa kufanya nini?
    a) Kufuta CSS
    b) Kuingiza faili la CSS jingine
    c) Kuongeza picha
    d) Kuweka JavaScript

  2. Wapi @import inapaswa kuandikwa katika faili la CSS?
    a) Chini kabisa
    b) Kati ya styles
    c) Juu kabisa kabla ya CSS nyingine
    d) Haijalishi

  3. Je, @import ina athari gani kwa performance?
    a) Huharakisha loading
    b) Hakuna tofauti
    c) Hupunguza performance
    d) Hufanya CSS isifanye kazi

  4. Tofauti kuu kati ya @import na <link> ni ipi?
    a) Moja ni kwa JavaScript
    b) Moja ni haraka zaidi na haina delay
    c) Zote ni sawa
    d) Hakuna tofauti

  5. Ni ipi kati ya hizi si faida ya @import?
    a) Kurahisisha usimamizi
    b) Kuweka code kwa utaratibu
    c) Kuwasha JavaScript
    d) Kuunda modular CSS

Jiunge nasi WhatsApp kupata update zetu

Zoezi la Maswali

Nyuma Endelea


Umeionaje Makala hii.. ?

Nzuri            Mbaya            Save
Author: Rajabu image Tarehe: 2025-07-03 Topic: CSS Main: ICT File: Download PDF Views 500

Share On:

Facebook WhatsApp
Sponsored links
👉1 Tafasiri ya Riyadh Swalihina    👉2 Madrasa kiganjani    👉3 Simulizi za Hadithi Audio    👉4 kitabu cha Simulizi    👉5 Kitau cha Fiqh    👉6 Sira ya Mtume Muhammad (s.a.w)   

Post zinazofanana:

Drone: Nyuki Dume na Majukumu Yake

Simulizi hii inaelezea maisha ya nyuki dume, zinazojulikana kama drone. Inafafanua majukumu yao, maisha yao ya kila siku ndani ya kiwanda cha nyuki, na hatima yao baada ya kufanikisha kuzaliana na kifalme cha nyuki. Simulizi pia inaangazia tofauti zao na nyuki wa kike, na umuhimu wao katika uzazi wa kifalme.

Soma Zaidi...
CSS - SOMO LA 24: CSS Variables (Custom Properties)

Katika somo hili, tutajifunza kuhusu CSS Variables, au Custom Properties. Utajifunza jinsi ya kuunda, kuitumia, na faida za kutumia variables katika CSS ili kuweka msimamizi mzuri wa rangi, ukubwa, na mitindo mingine ya kurudia-rudia.

Soma Zaidi...
CSS - SOMO LA 14: Position Property

Katika somo hili utajifunza kuhusu property ya position katika CSS, ambayo hutumika kuamua jinsi element inavyowekwa ndani ya ukurasa. Tutajifunza aina tano kuu za position: static, relative, absolute, fixed, na sticky.

Soma Zaidi...
CSS - SOMO LA 10: Box Model katika CSS

Katika somo hili utajifunza muundo wa boksi (Box Model) katika CSS. Box model ni mfumo wa msingi wa kupanga vipengele katika ukurasa wa HTML, ukiwa na sehemu kuu nne: content, padding, border, na margin.

Soma Zaidi...
CSS - SOMO LA 11: Mitindo ya Border (Border Styles)

Katika somo hili, utajifunza jinsi ya kudhibiti mipaka (borders) ya vipengele kwa kutumia CSS. Tutajifunza namna ya kuweka unene wa border, rangi, aina ya mstari, na pia jinsi ya kutumia border kwa upande mmoja tu.

Soma Zaidi...
CSS - SOMO LA 7: Kutumia Fonti (Fonts) kwenye CSS

Katika somo hili utajifunza jinsi ya kudhibiti mwonekano wa maandishi kwa kutumia fonti kwenye CSS. Utajifunza jinsi ya kubadilisha aina ya fonti, ukubwa, mtindo, unene, na mpangilio wa maandishi ili yaweze kuonekana kwa mvuto na usomaji bora.

Soma Zaidi...
CSS - SOMO LA 15: Float na Clear katika CSS

Katika somo hili utajifunza jinsi ya kutumia float ili kupanga elementi upande wa kushoto (left) au kulia (right). Pia utajifunza jinsi ya kutumia clear kuondoa athari za float na kuhakikisha layout yako inabaki thabiti.

Soma Zaidi...
CSS - SOMO LA 23: Uelewa Zaidi wa CSS Animation na Transition

Somo hili linakuletea ufahamu wa kina juu ya CSS Transitions na Animations, likifafanua vipengele vyake muhimu, matumizi, na namna ya kutumia properties mbalimbali za animation kwa ufanisi katika kurahisisha muonekano na mtumiaji wa tovuti.

Soma Zaidi...
CSS - SOMO LA 28: CSS Timing Functions

Katika somo hili tutajifunza kuhusu CSS Timing Functions, ambazo hutumika kudhibiti kasi na mtiririko wa transition na animation. Utaelewa tofauti kati ya ease, linear, ease-in, ease-out, ease-in-out, pamoja na jinsi ya kutumia cubic-bezier() kwa kudhibiti mwendo wa mabadiliko kwenye elementi.

Soma Zaidi...
Jinsi ya kumsaidia Mtoto mdogo aliyekabwa na kitu kooni

Mfano wa kitu kinachoweza kumaba mtoto kooni ni kama chagula kigumu, pesa ya sarafu, kijiwe na mengineyo. Endapo hili litataokea msaada wa haraka unahitajika kwa ulazima.

Soma Zaidi...