Mtindo wa mtindo wa tovuti na mpangilio unatajwa na Karatasi za Sinema za CSS au Cascading. Hizi ni nyaraka ambazo zinaunda markup ya HTML ya ukurasa wa wavuti, kutoa vivinjari vya wavuti na maelekezo ya jinsi ya kuonyesha kurasa zinazosababishwa na markup hiyo. CSS inashughulikia mpangilio wa ukurasa, pamoja na rangi, picha za asili, uchapaji na mengi zaidi.
Ikiwa unatazama faili ya CSS, utaona kuwa kama lugha yoyote ya usajili au lugha ya coding, faili hizi zina syntax maalum kwao. Kila karatasi ya mtindo imeundwa na kanuni kadhaa za CSS. Sheria hizi, wakati zinachukuliwa kikamilifu, ni mitindo gani ya tovuti.
Vipengele vya Utawala wa CSS
Utawala wa CSS umeundwa na sehemu mbili tofauti - mteuzi na tamko. Mchezaji huamua nini kinachochapishwa kwenye ukurasa na tamko ni jinsi inavyopaswa kuonyeshwa. Kwa mfano:
p {
rangi: # 000;
}
Huu ni utawala wa CSS. Sehemu ya kuchagua ni "p", ambayo ni kipengele cha kipengele cha "aya". Kwa hiyo, ingekuwa kuchagua chaguo zote kwenye tovuti na kuwapa kwa mtindo huu (isipokuwa kuna vifungu ambavyo vinalengwa na mitindo maalum zaidi mahali fulani kwenye waraka wako wa CSS).
Sehemu ya utawala unaosema "rangi: # 000;" ni nini kinachojulikana kama tamko. Azimio hilo linajumuisha vipande viwili - mali na thamani.
Mali ni sehemu ya "rangi" ya tamko hili. Inataja ni kipengele gani cha chagua kitabadilishwa.
Thamani ni nini mali iliyochaguliwa CSS itabadilishwa. Katika mfano wetu, tunatumia thamani ya hex ya # 000, ambayo ni CSS shorthand kwa "nyeusi".
Kwa hiyo kutumia utawala huu wa CSS, ukurasa wetu ungekuwa na vifungu vinavyoonyeshwa katika rangi ya rangi ya rangi nyeusi.
Msingi wa Msingi wa Mali
Unapoandika mali za CSS, huwezi kuwafanya tu kama unavyoona. Kwa matukio, "rangi" ni mali halisi ya CSS, hivyo unaweza kuiitumia. Mali hii ni nini huamua rangi ya maandishi ya kipengele. Ikiwa ulijaribu kutumia "rangi ya maandishi" au "rangi ya fomu" kama mali ya CSS, haya yatashindwa kwa sababu si sehemu halisi ya lugha ya CSS.
Mfano mwingine ni mali "background-image". Mali hii inaweka picha ambayo inaweza kutumika kwa historia, kama hii:
.logo {
background-image: url (/images/company-logo.png);
}
Ikiwa ulijaribu kutumia "picha ya background" au "background-graphic" kama mali, wangeweza kushindwa kwa sababu, mara nyingine tena, haya si mali halisi ya CSS.
Baadhi ya Mali CSS
Kuna idadi ya mali za CSS ambazo unaweza kutumia kwa mtindo wa tovuti. Mifano fulani ni:
- Mpaka (ikiwa ni pamoja na mtindo wa mpaka, rangi ya mpaka, na upana-upana)
- Padding (ikiwa ni pamoja na padding-top, padding-right, chini padding, na padding-kushoto)
- Vifunguo (ikiwa ni pamoja na kiwango cha juu, margin-right, margin-bottom, na upande wa kushoto)
- Familia ya herufi
- Ukubwa wa herufi
- Rangi ya asili
- Upana
- Urefu
Mali hizi CSS ni bora kutumia kama mifano, kwa sababu wote ni sawa sana na, hata kama hujui CSS, unaweza pengine nadhani nini kufanya kulingana na majina yao.
Kuna vitu vingine vya CSS ambavyo utakutana pamoja na ambayo inaweza kuwa wazi jinsi wanavyofanya kazi kulingana na majina yao:
- Fungua
- Futa
- Kufurika
- Nakala-kubadilisha
- Z-index
Unapopata zaidi katika kubuni wavuti, utakutana (na kutumia) mali hizi zote na zaidi!
Mali zinahitaji Maadili
Kila wakati unatumia mali, lazima uipe thamani - na mali fulani zinaweza tu kukubali maadili fulani.
Katika mfano wetu wa kwanza wa mali "rangi", tunahitaji kutumia thamani ya rangi. Hii inaweza kuwa thamani ya hex , thamani ya RGBA, au hata maneno ya rangi . Jambo lolote la maadili hiyo lingefanya kazi, hata hivyo, ikiwa unatumia neno "kizito" na mali hii, halitenda chochote kwa sababu, kama maelezo kama neno hilo linaweza kuwa, si thamani ya kutambuliwa katika CSS.
Mfano wetu wa pili wa "picha-background" inahitaji njia ya picha kutumiwa kupakua picha halisi kutoka kwenye faili za tovuti yako. Hii ni thamani / syntax ambayo inahitajika.
Mali yote ya CSS yana thamani ambayo wanatarajia. Kwa mfano:
- Mipaka ya mipaka inatarajia thamani ya rangi
- Ukubwa wa mipaka unatarajia thamani ya ukubwa, kama saizi au asilimia
- Mitindo ya mipaka inatarajia moja ya mitindo iliyohifadhiwa inayotumiwa kwa mali hii, kama "imara"
Ikiwa unapita kupitia orodha ya mali za CSS, utagundua kuwa kila mmoja wao ana maadili maalum ambayo watatumia kuunda mitindo waliyopangwa.
Iliyotengenezwa na Jeremy Girard