Njia 4 za Kuunda CSS

Orodha ya maudhui:

Njia 4 za Kuunda CSS
Njia 4 za Kuunda CSS

Video: Njia 4 za Kuunda CSS

Video: Njia 4 za Kuunda CSS
Video: 8 инструментов в Excel, которыми каждый должен уметь пользоваться 2024, Machi
Anonim

Karatasi ya Sinema ya Kuacha (CSS) ni mfumo wa kuweka alama kwenye wavuti ambayo inaruhusu wabunifu kudhibiti vitu kadhaa mara moja kwa kupeana vitu kadhaa kwa vikundi. Kwa mfano, kwa kutumia nambari ya usuli wa wavuti, wabuni wanaweza kubadilisha rangi ya asili au picha kwenye kurasa zote za wavuti na mabadiliko moja kwa faili ya CSS. Hapa kuna jinsi ya kuunda CSS kwa wavuti ya msingi.

Hatua

Sehemu ya 1 ya 4: Kuandika Inline CSS

Unda CSS Hatua 1
Unda CSS Hatua 1

Hatua ya 1. Hakikisha una uelewa wa kimsingi wa vitambulisho vya HTML

Unapaswa kujua jinsi lebo zinavyofanya kazi na ya

src

na

href

sifa.

Unda CSS Hatua ya 2
Unda CSS Hatua ya 2

Hatua ya 2. Jifunze baadhi ya mali za msingi za CSS

Utapata kwamba kuna mali nyingi sana. Walakini, sio lazima kuwajifunza wote.

  • Baadhi ya mali nzuri za msingi za CSS kujua ni

    rangi

    na

    font-familia

  • .
Unda CSS Hatua ya 3
Unda CSS Hatua ya 3

Hatua ya 3. Jifunze juu ya maadili kwa kila mali

Mali zote zinahitaji thamani. Kwa

rangi

mali, kwa mfano, unaweza kuweka

nyekundu

thamani.

Unda CSS Hatua 4
Unda CSS Hatua 4

Hatua ya 4. Jifunze kuhusu

mtindo

Sifa ya HTML.

Inatumika ndani ya kipengee kama

href

au

src

. Ili kuitumia, ndani ya alama za nukuu baada ya ishara sawa, weka sifa ya CSS, koloni, na kisha thamani ya mali. Hii inajulikana kama sheria ya CSS.

Unda CSS Hatua ya 5
Unda CSS Hatua ya 5

Hatua ya 5. Elewa kuwa ndani ya CSS haitumiwi kawaida kwa wavuti na watengenezaji wa wavuti wa kitaalam

CSS ya ndani inaweza kuongeza mafuriko yasiyo ya lazima kwenye hati ya HTML. Walakini, ni njia nzuri ya kuletwa jinsi CSS inavyofanya kazi.

Sehemu ya 2 ya 4: Kuandika CSS ya Msingi

Unda CSS Hatua ya 6
Unda CSS Hatua ya 6

Hatua ya 1. Anzisha programu unayotaka kutumia

Inapaswa kukuruhusu kuunda faili za HTML na CSS.

Ikiwa huna programu maalum iliyosanikishwa, unaweza kutumia Notepad au mhariri mwingine wa maandishi. Hifadhi faili yako tu kama faili ya maandishi na faili ya CSS

Unda CSS Hatua ya 7
Unda CSS Hatua ya 7

Hatua ya 2. Fungua faili ya HTML kwa wavuti yako

Unapaswa kufungua hii na mhariri wa HTML pia, ikiwa umeweka moja.

Wahariri wa HTML hukuruhusu kuhariri HTML na CSS kwa wakati mmoja

Unda CSS Hatua ya 8
Unda CSS Hatua ya 8

Hatua ya 3. Unda lebo ndani ya kichwa chako cha HTML

Hii itakuruhusu uandike CSS bila hitaji la faili tofauti.

Unda CSS Hatua ya 9
Unda CSS Hatua ya 9

Hatua ya 4. Chagua kipengee unachotaka kuongeza maridadi na uandike jina la kipengee ikifuatiwa na seti ya braces zilizopindika ({})

Ili kufanya nambari yako iweze kusomeka, kila wakati weka brace ya pili iliyosokotwa kwenye laini yake mwenyewe.

Unda CSS Hatua ya 10
Unda CSS Hatua ya 10

Hatua ya 5. Kati ya braces, andika sheria zako za CSS kama unavyotumia

mtindo

sifa.

Kila mstari lazima uishe na semicoloni (;). Ili kufanya nambari yako iweze kusomeka, kila sheria inapaswa kuanza kwa laini yake na kila laini inapaswa kuingiliwa.

Ni muhimu kutambua kwamba mtindo huu utaathiri vitu vyote vya aina iliyochaguliwa kwenye ukurasa. Styling maalum zaidi itafunikwa katika sehemu inayofuata

Sehemu ya 3 ya 4: CSS ya Juu zaidi

Unda CSS Hatua ya 11
Unda CSS Hatua ya 11

Hatua ya 1. Unda faili ya CSS, sio faili ya HTML na uihifadhi kwa kutumia

.css

ugani.

Fungua faili yako ya HTML pia.

Unda CSS Hatua ya 12
Unda CSS Hatua ya 12

Hatua ya 2. Unda lebo kwenye kichwa chako cha HTML

Hii itakuruhusu kuunganisha faili tofauti ya CSS na hati yako ya HTML. Lebo yako ya kiunga inahitaji sifa tatu:

rel

aina

na

href

  • rel

    inamaanisha "uhusiano" na inamwambia kivinjari uhusiano huo ni nini kwa hati ya HTML. Hapa inapaswa kuwa na thamani ya

    karatasi ya mitindo

  • .
  • aina

    inaelezea ni aina gani ya media inayounganishwa. Hapa inapaswa kuwa na thamani ya

    "maandishi / css"

  • href

  • hapa hutumiwa vile vile na jinsi inatumiwa katika kipengee, lakini hapa lazima iunganishwe na faili ya CSS. Ikiwa faili ya CSS iko kwenye folda sawa na faili ya HTML, jina la faili tu linahitaji kuandikwa ndani ya alama za nukuu.
Unda Hatua ya 13 ya CSS
Unda Hatua ya 13 ya CSS

Hatua ya 3. Chagua vitu vya aina tofauti unayotaka kuongeza mtindo huo

Ongeza faili ya

darasa

sifa kwa vitu hivi na uziweke sawa na jina la darasa la chaguo lako. Hii itatoa vitu vyako mtindo sawa.

Unda CSS Hatua ya 14
Unda CSS Hatua ya 14

Hatua ya 4. Tia darasa ambalo darasa litapokea

Chapa jina la darasa kwenye faili yako ya CSS na kipindi (.) Kikitangulia (i.e.

darasa

).

Unda CSS Hatua ya 15
Unda CSS Hatua ya 15

Hatua ya 5. Chagua vitu moja unayotaka kuongeza mtindo maalum na uongeze faili ya

kitambulisho

sifa.

Id zimeundwa katika CSS kwa kutumia alama ya pauni (#) badala ya kipindi.

Id ni maalum zaidi kuliko madarasa, kwa hivyo kitambulisho kitazidi mtindo wowote wa darasa ikiwa ina sifa yenye thamani tofauti na darasa

Sehemu ya 4 ya 4: Kujifunza Zaidi

Unda CSS Hatua ya 16
Unda CSS Hatua ya 16

Hatua ya 1. Tembelea shule za w3

Ni wavuti rasmi inayolenga kufundisha ustadi wa ukuzaji wa wavuti. W3 ina marejeleo mengi yaliyoorodheshwa kwa HTML na CSS, na pia lugha zingine za wavuti.

Unda CSS Hatua ya 17
Unda CSS Hatua ya 17

Hatua ya 2. Tafuta tovuti zingine ambazo zinalenga kujifunza na kufundisha HTML na CSS

Tovuti kama CSS tricks.com haswa zinalenga kufundisha ujuzi wa CSS na wavuti. Kupata vyanzo vyenye sifa kukusaidia katika safari yako ya kujifunza.

Unda CSS Hatua ya 18
Unda CSS Hatua ya 18

Hatua ya 3. Wasiliana na wabunifu wa wavuti na watengenezaji

Uzoefu wao na ujuaji unaweza kukufundisha maarifa na ustadi muhimu.

Unda CSS Hatua 19
Unda CSS Hatua 19

Hatua ya 4. Angalia msimbo wa chanzo wa wavuti unazokutana nazo

Kuangalia CSS ya tovuti zilizoendelea vizuri kunaweza kukuonyesha njia za kubuni sehemu za wavuti. Kuiga kama mazoezi na kucheza na nambari inaweza kukusaidia kujifunza jinsi ya kutumia sifa tofauti za CSS.

Video - Kwa kutumia huduma hii, habari zingine zinaweza kushirikiwa na YouTube

Vidokezo

Ilipendekeza: