Mazoezi 2

1. Fungua faili kiolezo. html. Ihifadhi chini ya jina jipya mraba. html kwenye folda public_html.

2. Andika kati ya vitambulisho kichwa kipya "Maeneo ya Nyumba".

3. Kwa yaliyomo nakala maandishi kutoka faili Maeneo ya nyumba.txt kutoka kwa folda html_ ccs_2 .

4. Tutaandika mitindo katika faili moja mtindo. css, ambayo tumeunda katika somo lililopita. Kwa hivyo kwenye faili mraba. html kiungo kwa laha hii ya mtindo kwa kuingiza kati ya lebo Na(Kielelezo 12)

Kielelezo cha 12

5. Fomati vichwa na lebo

na kipe kila kichwa darasa lake (Mchoro 13).

Kielelezo cha 13

Faili yako mraba. html sasa inapaswa kuonekana hivi (Mchoro 14).

Kielelezo cha 14

6. Katika karatasi ya mtindo mtindo. css tengeneza ingizo lifuatalo (Mchoro 15)

Kielelezo cha 15

7. Angalia ukurasa wa wavuti katika kivinjari chako. Matokeo ni katika Mchoro 16.

Kielelezo cha 16

8. Pengine umeona kwamba katika yetu ingizo jipya Mitindo ya vichwa ina miundo ya kurudia font-familia:Verdana; panga maandishi:kushoto; saizi ya herufi:14pt. Miundo kama hiyo inaweza kuandikwa mara moja kwa kuweka wateule ambao hutumiwa kwao. Ili kufanya hivyo, unahitaji kuorodhesha wateule waliotenganishwa na koma, na kisha uandike kwenye mabano ya curly mali ya jumla. Kisha karatasi yetu ya mtindo kwa vichwa itaonekana kama hii (Mchoro 17):

Kielelezo cha 17

Mazoezi 3

Chini ya kila kichwa kwenye faili mraba. html kuna maandishi. Fomati aya kwa kutumia madarasa mbalimbali. Tumia rangi tofauti, upangaji na aina za fonti. Majina ya darasa lazima yawe ya kipekee. Haipendekezi kutumia majina sawa kwa wateuzi tofauti. Moja ya chaguzi zinazowezekana katika Mchoro 18:

Kielelezo cha 18

5. Mtindo wa kitambulisho kwa kipengele maalum

Masomo ya CSS ni pamoja na kujifunza kuhusu kinachojulikana mitindo ya kitambulisho.

Kipengele chochote kinaweza kupewa kitambulisho kitambulisho, na kisha toa mtindo fulani kwa kipengee hiki ukitumia kitambulisho.

Kwa mfano:

Ingizo katika faili ya laha ya mtindo itakuwa kama ifuatavyo

# mtihani { rangi:#00 ffff}

Sasa unaweza kulinganisha mtindo huu na kipengele chochote kwenye hati ya html:

...

...

Katika mfano huu, neno mtihani ni jina la mtindo. Jina linaweza kuwa chochote kutoka Barua za Kilatini, lakini lazima iwe ya kipekee, i.e. hakuna kipengele kwenye laha ya mtindo kinapaswa kuwa na jina hilo tena.

Mazoezi 4

Wacha tufanye kiolezo cha menyu ya baadaye ya wavuti yetu.

1. Fungua faili kiolezo. html na uihifadhi chini ya jina jipya menyu. html kwenye folda public_html.

2. Kwa yaliyomo kwenye ukurasa wa faili menyu. html ingiza maandishi kutoka kwa faili menyu. txt kutoka kwa folda html_ css_2 .

3. Kwa kutumia lebo za HTML, tengeneza faili kama ifuatavyo:

• kwa vichwa “Kategoria za Miradi”, “Orodha ya Miradi ya Usanifu” na “Maeneo ya Nyumba” tumia lebo.

  ;

• kwa orodha ya "Kategoria za Mradi", tumia orodha iliyo na nambari
  ;
  1. kwa orodha ya "Orodha ya miradi ya usanifu" na "eneo la nyumba", tumia orodha yenye vitone

     4. Juu ya ukurasa wa wavuti, ingiza nembo (faili logo_myhouse.gif) Matokeo yanapaswa kuendana na Kielelezo 19.

     

     Kielelezo cha 19

     5. Kwa orodha hii tutafanya karatasi ya mtindo tofauti chini ya jina mtindo_ menyu. css. Unganisha faili menyu. html na karatasi ya mtindo mtindo_ menyu. css kwa kuingiza kiingilio kati ya vitambulisho Na katika faili menyu. html.

     6. Unda hati tupu na uihifadhi chini ya jina mtindo_ menyu.css kwenye folda yako.

     7. Kwa kikundi cha "Aina za Mradi", ambacho kinajumuisha kichwa na orodha iliyohesabiwa, na kwa kikundi cha "Orodha ya Miradi ya Usanifu", ambayo inajumuisha kichwa yenyewe na orodha iliyo na vitone, tutatumia jina la mtindo wa kitambulisho. bluu. Wale. nambari itaonekana kama hii (Kielelezo 20):

     

     Kielelezo cha 20

     8. Kwenye faili mtindo_ menyu. css Mtindo wa vipengele hivi utakuwa wa samawati iliyokolea, katika fonti ya Tahoma (Mchoro 21):

     Kielelezo 21

     9. Kwa kikundi cha "Maeneo ya Nyumbani", ambacho kinajumuisha kichwa na orodha yenye vitone, tutatumia jina la mtindo wa kitambulisho. kahawia. Wale. nambari itaonekana kama hii (Kielelezo 22):

     

     Kielelezo 22

     10. Kwenye faili mtindo_ menyu. css hebu tuunde vipengele hivi Brown, katika fonti ya Times (Kielelezo 23):

     Kielelezo 23

     11. Na ongeza rangi nyingine ya usuli kwenye faili ya menu.html (Mchoro 24)

     Kielelezo 24

     12. Kama matokeo, tunapata ukurasa wa wavuti unaofuata (Mchoro 25)

     

     Kielelezo 25

     Kama matokeo ya kukamilisha mafunzo haya ya CSS, unapaswa kuunda faili zifuatazo:

     • mtindo. css
       
     • mtindo_ menyu. css
     • mraba. html
       
     • menyu. html
       

     1. Je, Laha za Sinema za CSS Cascading ni nini?

     Habari wapenzi wasomaji wangu. Niliamua kufungua sehemu mpya ya tovuti iliyojitolea kufanya kazi na laha za mtindo wa CSS.

     Kwa hiyo, shuka za mtindo wa css ni nini?

     css(Kiingereza) Laha za Mtindo wa Kuachia — karatasi za mtindo wa kuteleza) ni lugha ya kuelezea mwonekano wa hati iliyoandikwa kwa kutumia lugha ya alama.
     Ili kurahisisha kuelewa kwa anayeanza, laha za mtindo wa css zimeundwa ili kuunda miundo mizuri na rahisi kuhariri ya kurasa za tovuti za html.

     Karatasi za mtindo wa kuteleza zilitumiwa kwanza katika miaka ya 90 ya karne iliyopita. Lakini mwanzoni hawakuwa maarufu kama walivyo sasa, kwa sababu vivinjari tofauti Kurasa za HTML zilizotumia CSS zilitambuliwa na kuonyeshwa kwa njia tofauti.

     Baada ya muda fulani, ili kurahisisha kazi ya wajenzi wa tovuti, vivinjari vilianza "kubadilishwa" kwa viwango sawa. Leo, karibu programu zote zinazotumiwa kutazama kurasa za Mtandao zinazalisha tovuti zinazotumia laha za mtindo wa CSS.

     Maoni yangu!!! Kulingana na uchunguzi wangu binafsi, vile matoleo ya hivi karibuni vivinjari kama Opera, Mazilla ForeFox, Maxthon, Google Chrome na Internet Explorer Kurasa zinazotumia laha za mtindo wa kuachia huonyeshwa karibu sawa, lakini ikiwa vivinjari havionyeshi vizazi vya mwisho, basi kurasa za tovuti zenyewe zitaonekana tofauti. Na ili tovuti yako ionekane sawa katika karibu vivinjari vyote, kuna teknolojia maalum kuweka karatasi za mtindo wa kuteleza.

     Basi hebu tuanze kuunda meza mpya mitindo na kuiunganisha kwa hati yetu.

     2. Jinsi ya kuunda karatasi ya mtindo wa css?

     Katika sehemu hii ya kifungu tutaunda na kuunganisha laha ya mtindo wa kuteleza kwenye ukurasa rahisi zaidi wa html.

     Kwa hivyo, wacha tufanye hivi:

     1. Tunaunda folda ambayo itakuwa na ukurasa wetu wa html na laha ya mtindo wa kuachia.
     Acha folda yangu iitwe "css"

     2. Tunaunda html rahisi ukurasa (index.html). Unaweza kusoma jinsi hii inafanywa.

     3. Sasa hebu tutengeneze rahisi Hati ya maandishi(sawa na kuunda html kurasa), iite tu style.css.

     Kama matokeo, unapaswa kupata hii:

     Hiyo ndiyo yote, faili ambayo itakuwa na mitindo ya css iko tayari.

     Sasa hebu tuunganishe laha ya mtindo iliyoundwa kwenye faili ya index.html.

     3. Jinsi ya kuunganisha karatasi ya mtindo wa kuteleza css?

     Kwa hivyo, ili kuunganisha laha ya mtindo kwenye ukurasa wa html, unahitaji katika faili ya index.html kwenye lebo. ongeza tagi:

     Hapa katika sifa href="style.css" njia ya faili iliyo na mitindo ya css imebainishwa. Katika kesi hii, faili ya css na index.html iko kwenye folda moja.

     Kwa mfano, ikiwa faili yetu ya index.html ilikuwa na msimbo ufuatao:

     Muhimu!!! Kwa njia, usisahau kuweka encoding kwa 1251 (ANSI-Cyrillic) wakati wa kuhifadhi faili ya index.html katika Notepad. Kwa sababu ikiwa hutafanya hivi na kuhifadhi faili katika usimbaji tofauti, kivinjari kitakuonyesha "doodles" badala ya maandiko.

     Ikiwa kila kitu kimefanywa na kuhifadhiwa kwa usahihi, basi kwenye kivinjari utaona yafuatayo:

     

     Ni hayo tu, faili ya index.html imeundwa, na laha za mtindo wa css pia zimeunganishwa kwayo.

     Sasa hebu tuangalie ufanyaji kazi wa laha za mtindo wa css.

     Kwa hiyo, hebu tuanze na jambo rahisi zaidi na kuweka lebo mtindo mpya, kufafanua usuli picha ya html kurasa, rangi ya mandharinyuma ya ukurasa (ikiwa picha zimezimwa kwenye kivinjari cha mgeni wa ukurasa), pambizo za juu na chini, fonti chaguo-msingi, saizi yake na rangi.

     Ili kuweka picha ya mandharinyuma, unahitaji kuiweka alama kwenye folda na faili zetu.

     Na ikiwa unapanga kujifunza jinsi ya kuunda maduka ya kitaaluma ya mtandaoni kwa kutumia injini ya Magento, basi hii ni rahisi kufanya kwa msaada wa kozi ya video ya mwandishi wangu.

     Karatasi za mtindo ni za nini?

     Uliunda kurasa zilizotangulia kwa sababu ziliundwa kabla ya ujio wa laha za mtindo wa kuachia au CSS (Majedwali ya Mitindo ya Kuachia).

     Shida kuu ambazo watengenezaji wa wavuti walikabili kabla ya ujio wa CSS:

     Tatizo la kuweka (mpangilio wa ukurasa). Ingawa meza zilianza kutumika kwa hili (hazikusudiwa kwa hili), hazikusuluhisha shida zote. Haiwezekani kufanya yafuatayo:
     - Haiwezi kuwekwa saizi zisizohamishika block fulani. Kwa mfano, kizuizi cha maandishi kitazunguka wakati kinapofurika (hata ikiwa iko kwenye jedwali).
     - Huwezi kuweka kuratibu zisizobadilika kwa nafasi ya kuzuia kwenye ukurasa.
     - Huwezi kuweka block moja juu ya nyingine. Kwa mfano, jaribu kuweka picha juu ya meza au picha nyingine.

     Tatizo la pili lilikuwa kwamba kila wakati nilipaswa kuweka ukubwa wa font na rangi, mali ya seli za meza, nk kwenye kurasa. Hii iliongeza sana saizi ya ukurasa, ambayo inamaanisha kuwa ilipakiwa polepole zaidi. Ikiwa ungetaka kubadilisha rangi au saizi ya fonti, itabidi uhariri kurasa zote.

     Tatizo la tatu lilikuwa kwamba vivinjari vyote vina mipangilio ya mtu binafsi. Kwa mfano, kivinjari kinaweza kupanua fonti, na kusababisha ukurasa mzima kupotoshwa.

     NA kwa kutumia CSS matatizo haya yanaweza kutatuliwa.

     Njia za kutumia CSS

     Kuna njia tatu za kutumia karatasi za mtindo:

     Karatasi za mtindo wa ndani(Majedwali ya Mtindo wa Ndani) - kwa kutumia sifa maalum, huwekwa moja kwa moja kwenye vitambulisho vya HTML.
     Mfano HTML:

     Mfano CSS:

     Kama unavyoona, msimbo wa Laha ya Mtindo wa Ndani uligeuka kuwa zaidi ya HTML. Kwa hiyo, ISS inapaswa kutumika tu ikiwa unahitaji kutoa kipengele maalum mtindo wako wa kibinafsi.
     Kwa kutumia sifa ya ziada ya mtindo, tunaweza kufafanua vigezo vya mtindo tunavyohitaji katika lebo yoyote. Hii ndiyo njia rahisi, na inafanya kazi ndani ya lebo moja tu. Lakini fikiria ni kiasi gani saizi ya faili itakua, na itakuwa ngumu kiasi gani kuirekebisha ikiwa tutataja mtindo kwa kila lebo.

     Karatasi za mtindo wa kimataifa(Laha za Mitindo ya Ulimwenguni) - fafanua mtindo wa vipengee katika hati nzima.
     Lebo hutumiwa kwa hili. Ndani ya lebo hii ya kontena, tuko huru kufafanua idadi yoyote ya sheria za CSS, zinazojumuisha kiteuzi (jina la lebo ya HTML ambayo sheria hiyo itatumika) na ufafanuzi wake (seti ya fomati moja kwa moja), iliyoambatanishwa katika viunga vilivyopinda. . Syntax ya mfano hapo juu ni:

     ... ...

     Njia hii ya kuunganisha CSS na HTML inaitwa kupachika. Inashauriwa kuitumia katika hali ambapo unaamua kuweka seti fulani ya sheria za kupangilia kwa ukurasa mmoja tu wa tovuti, na kwa mujibu wa mpango wako, kurasa nyingine zote zinapaswa kuonekana tofauti.

     Inapeana mitindo kwa kurasa kadhaa za tovuti kwa wakati mmoja

     Mbali na kuingiza na kupachika, uagizaji na kuunganisha laha ya mtindo hutumiwa kuunganisha CSS na HTML. Hizi ni, bila shaka, njia bora za kutoa mwonekano na hisia thabiti kwa kurasa nyingi (au hata zote) za tovuti moja. Katika kesi hii, karatasi nzima ya mtindo imehifadhiwa kwenye faili moja (ugani wa faili lazima uwe wa kawaida - .css).

     Huu hapa ni mfano wa yaliyomo kwenye faili kama hii (kwa mfano, my.css):

     Mwili ( font-family: "Times New Roman", serif; ukubwa wa fonti: 12pt; color: darkgreen; ) h1 ( font-family: Arial, sans-serif; ukubwa wa fonti: 16pt; rangi: kijani; uzito wa fonti : bold; ) h2 ( fonti-familia: Arial, sans-serif; ukubwa wa fonti: 14pt; rangi: manjano ya kijani; uzito wa fonti: unene; mtindo wa fonti: italiki; )

     Tafadhali kumbuka: vitambulisho hakuna laha za mtindo zinazotumika ndani ya faili - kiendelezi cha .css kinaonyesha wazi kwa kivinjari kuwa faili ni laha ya mtindo. Faili moja kama hiyo inaweza kuunganishwa na kurasa kadhaa mara moja (au kuingizwa kwenye kurasa kadhaa mara moja). Katika faili ya html ya kuunganisha unahitaji kuandika popote kati ya vitambulisho Na mstari ufuatao:

     ... ...

     Mstari huu unaonyesha kuwa faili inayounganishwa ni laha ya mtindo (rel="stylesheet"), umbizo la faili hili ni .css (aina = "text/css") na iko katika saraka sawa na faili ya html, au ina URL tofauti (href="my.css"). Ni wazi, tunaweza kuandika mstari huu katika yoyote (au yote) ya faili zetu za html. Kwa hivyo, muundo wa mtindo mmoja utaagizwa kwa kurasa kadhaa mara moja.

     Tafadhali kumbuka kuwa mitindo ya ndani (mitindo iliyobainishwa kwa vipengele vya ukurasa binafsi kwa kutumia sifa ya mtindo) na mitindo iliyopachikwa (mitindo iliyobainishwa katika<голове>kurasa ndani ya lebo ya kontena ...

     Mbali na anwani ya karatasi ya mtindo iliyoingizwa, unaweza kuandika kwenye lebo ya chombo ... ...

     Swali la mwandishi wa habari

     Jibu la mhojiwa

     ...
     
     

     Katika mfano ulio hapo juu, maswali ya mwandishi wa habari yataonyeshwa kwa fonti ya Arial ya kijivu, iliyokolea, italiki, pointi 10, iliyoingizwa ndani ya pikseli 15 kutoka kwenye ukingo wa kushoto wa ukurasa. Majibu yataonyeshwa katika fonti ya Times New Roman yenye alama 12. Ni muhimu usisahau kugawa parameta ya darasa kwa madarasa anuwai ya aya moja kwa moja kwenye nambari ya html. Unaweza kuunda idadi yoyote ya madarasa kwa vipengele vyovyote vya ukurasa.

     Kiteuzi cha kitambulisho

     Hebu tuchukue kesi nyingine. Hebu tuseme unataka kuunda baadhi ya vipengele vya kipekee kwenye ukurasa ambao unapanga kufikia katika siku zijazo kutoka kwa programu za JavaScript. Labda vipengele hivi vitarudiwa kwenye kurasa zingine na ungependa kuvipa mwonekano thabiti kwa kutumia CSS. Kwa kesi hii, laha za mtindo wa kuteleza zina uwezo wa kugawa vitambulisho (id) kwa vipengee vya kipekee. Matumizi ya kawaida ya vitambulishi ni kwa vipengele vya fomu, ambavyo katika vipimo vya HTML 4.0 vina usaidizi kamili au mdogo wa CSS (kulingana na kipengele). Hapa kuna mfano wa kugawa kitambulisho na sheria za CSS kwa vitu kama hivyo:

     ... ... ...

     Maandishi yaliyoingizwa kwenye uwanja huu yataonekana kwa kijani kibichi:

     Maandishi yaliyowekwa kwenye sehemu hii yataonekana kwa rangi nyekundu:

     ...
     
     

     Vile vile, vitambulishi vya kipekee vinaweza kupewa idadi yoyote ya vipengele vya ukurasa. Hii inaweza kuwa muhimu kwa kupata kipengele kutoka kwa programu ya JavaScript na kubadilisha mtindo wake wa kuonyesha kulingana na ingizo la mtumiaji, huku kuruhusu kuunda athari mbalimbali zinazobadilika.

     Viteuzi vya muktadha

     Wacha tuseme tumeunda laha la mtindo kulingana na ambalo vichwa vyote vya kiwango cha kwanza kwenye ukurasa vinaonyeshwa kwa rangi nyekundu kwenye mandharinyuma ya kijivu, aya zote zinaonyeshwa kwa kijani kwenye mandharinyuma ya manjano, na zote zilizoangaziwa kwa kutumia lebo. Maneno 1 ndani ya aya - kwa rangi nyeusi kwenye msingi wa fedha. Nambari ya laha ya mtindo, kama unavyoweza kukisia, inaonekana kama hii:

     H1 ( rangi: nyekundu; rangi ya asili: kijivu; ) p ( rangi: kijani; rangi ya asili: njano; ) em ( rangi: nyeusi; rangi ya asili: fedha; )

     Tuseme tunataka pia kuangazia baadhi ya maneno katika kichwa kwa kutumia lebo sawa , lakini hatufurahii kuonekana kwa maandishi nyeusi kwenye historia ya fedha kwenye kichwa. Tunataka kuonyesha maneno katika kichwa katika burgundy kwenye background ya kijivu. Kuna viteuzi vya muktadha kwa hii. Ingizo la sheria ambalo tutaongeza kwenye laha ya mtindo kwa hili litaonekana kama hii:

     H1 em ( rangi: #CC0000; rangi ya asili: kijivu; )

     Na hapa kuna mfano wa nambari ya ukurasa kwa kutumia kichaguzi hiki cha muktadha:

     ... ... ...

     Hii ni ngazi ya kwanza inayoongozwa na imeangaziwa kwa neno moja

     Na hii ni aya ya kawaida na kwa maneno yaliyoangaziwa

     ...
     
     

     Ni hayo tu kwa leo. Wakati ujao tutazungumzia kuhusu sheria za kupangilia vipengele vya ukurasa wa kuzuia, uwekaji wa vipengele, na vipengele vingine vya kuvutia na muhimu vinavyotekelezwa kwa kutumia CSS.

     
     Utumiaji wa Laha ya Mtindo kwenye Hati
     
     Kupachika Laha za Mtindo kwenye Hati
     Kuweka mtindo kwa kipande tofauti cha hati
     Kuagiza Karatasi ya Mtindo
     
     Kubainisha Sifa Nyingi Mara Moja
     Kupanga wateuzi
     Kutoa maoni juu ya Karatasi ya Mtindo
     Sifa za mtindo
     mali ya mandharinyuma
     Vipengele vya kutunga
     Orodha ya Sifa
     Sifa za maandishi
     Kupanga sifa ili kurahisisha kufafanua mtindo
     Urithi wa mali
     Kwa kutumia viteuzi vya muktadha
     Kwa nini Majedwali ya Mtindo yanaitwa Cascading
     
     

     Laha za mitindo hutolewa na mapendekezo ya W3C na ni zana ya kawaida ya kuumbiza kurasa za Wavuti, kwa kutumia mbinu za kawaida za mifumo ya uchapishaji ya eneo-kazi. Microsoft Internet Explorer 3.0 ilikuwa kivinjari cha kwanza kutumia laha za mtindo. Kivinjari cha Netscape Navigator kimetumia laha za mtindo tangu toleo la 4.0B2 (Beta 2), lililopatikana Februari 1997.

     Maelezo ya kina kuhusu mapendekezo ya W3C yanaweza kupatikana katika: h ttp://www.w3.org/pub/WWW/TR/WD-cssl.html . Kiwango cha W3C kinatumia neno "laha za mtindo wa kuachia ngazi ya 1 (CSSI").

     Kwanza, ni muhimu kufafanua nini maana ya jina "karatasi za mtindo". Wahariri wengi wa kisasa wa maandishi huruhusu mtumiaji kufafanua mtindo ambao utatumika kuunda hati. Hasa, unaweza kuchagua mtindo wa aya na moja nafasi ya mstari, katika fonti ya Courier na ukingo wa kushoto wa inchi moja. Mtindo huu wa uumbizaji unaweza kutumika kwa idadi yoyote ya aya katika hati hii na nyinginezo. Karatasi za mtindo wa NT

     M L kutenda kwa njia sawa. Ifuatayo ni orodha fupi ya sifa kuu:

     Badilisha nafasi kati ya mistari, maneno na wahusika binafsi.

     Kuweka pambizo za kushoto, kulia, juu na chini za kipengele (kizuizi cha maandishi ya chombo cha HTML).

     Kuweka ujongezaji wa kipengele.

     Badilisha ukubwa, mtindo na sifa zingine za fonti ya kipengele.

     Kuweka mpaka kuzunguka kipengele.

     Washa picha ya usuli na rangi ya mandharinyuma kwa kipengele.

     Faida kubwa ya karatasi za mtindo wa HTML ni uwezo wa kutenganisha uendeshaji wa muundo kutoka kwa maudhui ya hati. Kwanza, tambua jinsi maandishi yanapaswa kuonekana katika sehemu moja au nyingine kwenye ukurasa, na kisha ingiza maandishi yenyewe. Ikiwa baadaye utaamua, kwa mfano, kubadilisha rangi ya fonti ya vichwa kuwa bluu, unachohitaji kufanya ni kubadilisha mtindo wa vichwa hivyo. Hakuna haja ya kufanya mabadiliko kwa maandishi .

     Kuna njia nne za kutumia laha ya mtindo kwenye hati:

     Kuunganisha - unaweza kuunganisha hati ya HTML na laha ya mtindo iliyohifadhiwa katika faili tofauti.

     Kupachika - unaweza kupachika laha la mtindo kwenye hati ya HTML kwa kutumia kontena
     
     

     Lebo

     Kama ilivyoelezwa hapo awali, karatasi za mtindo huhifadhiwa ndani faili za maandishi, rahisi kwa uhariri. Sio ngumu kuunda kwa mikono, lakini kuna wahariri maalum karatasi za mtindo, kwa mfano, programu maarufu Microsoft FrontPage.

     Laha za mtindo hukuruhusu kufafanua mtindo kwa lebo moja au zaidi. Kwa mfano, unaweza kuunda karatasi ya mtindo ambayo inafafanua mitindo ya vitambulisho

     ,

     ,

     NA . Kila ufafanuzi unaitwa kanuni (utawala e). Kanuni ina kiteuzi(Lebo ya HTML) ikifuatiwa na tamko(ufafanuzi wa mtindo). Kiteuzi ni kiungo kati ya ufafanuzi na lebo. Ifuatayo ni mfano wa sheria inayobainisha mtindo kwa kila lebo ya kichwa

     :

     H1 (rangi: bluu)

     Tamko hilo limefungwa kwa braces za curly. Kila tamko lina sehemu mbili: jina la mali na thamani iliyopewa, ikitenganishwa na koloni. HTML inajumuisha sifa kadhaa (ukubwa wa fonti, mtindo wa fonti, rangi, ukingo wa kulia, n.k.), ambazo zitajadiliwa hapa chini. Kila kipengele kinaweza kuchukua thamani nyingi, moja ambayo imepewa kwa chaguo-msingi.

     Katika mfano uliopita, mali moja tu ya rangi ilielezwa. Walakini, hakuna kinachokuzuia kufafanua safu nzima ya mali kwenye tepe moja, ukizitenganisha kutoka kwa kila mmoja na semicolon:

     HI (rangi: bluu; saizi ya fonti: 12pt; mstari wa maandishi: katikati)

     Katika mfano huu, mtazamaji ataonyesha kila kichwa cha ngazi ya kwanza katika fonti ya buluu yenye pointi 12 na kupangilia katikati ya dirisha. Sifa nyingine zote zitatumia thamani zao chaguomsingi (kwa mfano, sifa ya mtindo wa fonti itawekwa kuwa ya kawaida).

     Ikiwa unahitaji kufafanua mtindo sawa kwa vitambulisho kadhaa, unaweza kuorodhesha katika orodha tofauti:

     P (ukubwa wa herufi: pt 12)
     UL (ukubwa wa herufi: pt 12)
     LI (ukubwa wa herufi: pt 12)

     HTML hukuruhusu kufanya jambo lile lile katika fomu iliyoshikana zaidi - katika mstari mmoja:

     P, UL, LI (ukubwa wa herufi: 12pt)

     koma ni kipengele kinachohitajika hapa. Ikiwa imeachwa, maana ya sheria inabadilika (tazama sehemu "" baadaye katika sura hii).

     Kadiri laha yako ya mtindo inavyozidi kuwa changamano, utahitaji kujumuisha maelezo zaidi kuhusu madhumuni ya sheria. Maoni yanaonekana kati ya herufi /* na */ na hupuuzwa na vivinjari, kwa mfano:

     MWILI (pembezoni-kushoto: lin) /* Sogeza inchi 1 */
     H1 (pembezoni-kushoto: -lin) /* Shift kushoto inchi 1 */
     H2 (pembezoni-kushoto: -lin) /* Shift kushoto inchi 1 */

     HTML hukuruhusu kufafanua anuwai ya sifa za laha ya mtindo. Majina ya mali hujumuisha neno moja, au mara nyingi zaidi maneno mawili au matatu, yakitenganishwa na kistari. Katika majina changamano, neno la kwanza kwa kawaida huwakilisha kategoria na pia ni kifupi cha jina la sifa (ona sehemu " ").

     Jedwali linatoa muhtasari wa sifa za laha za mtindo wa HTML. Safu ya Kitengo inaonyesha kama kipengele kinaweza kuunganishwa pamoja na sifa nyingine. Safu ya tatu hutoa habari kuhusu ikiwa mali imerithiwa au la na vitambulisho vya chini (kwa urithi wa mali, angalia sehemu "".

     		Urithi
     		Karatasi za mtindo wa HTML hukuruhusu kupamba usuli wa kipengele cha ukurasa na rangi au picha. Ikumbukwe kwamba baadaye tutazungumza juu ya kutumia mali sio kwa ukurasa mzima, lakini kwa kipengele cha mtu binafsi. Kwa mfano, ukifafanua usuli wa tagi , basi vitambulisho pekee vitakuwa na usuli huu ukurasa mzima: U L (picha ya usuli: URL(http://www.myserver.com/images/watermark.gif)) Mapendekezo ya W3C hutoa uwezo wa kufafanua mipaka, pambizo, na nafasi nyeupe kwa vipengele vya ukurasa. Unaweza, kwa mfano, kuambatanisha kichwa katika fremu au kubadilisha pambizo kwenye lebo ya aya<Р>ili kupanga indent kwa aya zote za maandishi. Kwa madhumuni haya, unaweza kutumia vikundi vifuatavyo vya mali: mpaka - hutumiwa kufafanua mpaka ulio upande wa kushoto, kulia, juu na chini ya kipengele. Unaweza kuweka upana, rangi na mtindo wa sura. ukingo - hutumika kufafanua pambizo ziko upande wa kushoto, kulia, juu na chini ya kipengele. Unaweza pia kuweka upana wa kando. padding - kutumika kuonyesha nafasi ya bure kati ya sura na maudhui ya kipengele. Sifa hizi hutumika kubainisha jinsi orodha zinavyoonyeshwa. Kwa msaada wao, unaweza kubadilisha nafasi ya alama (sifa ya mtindo wa orodha), mtindo au picha ya alama (aina ya mtindo-orodha na mali ya picha ya mtindo wa orodha). Orodha ya mali hurithiwa, yaani, ikiwa mali imefafanuliwa kwenye lebo , itakuwa halali kwa lebo zote Chombo cha UL. Sifa hukupa udhibiti kamili wa jinsi mtazamaji anavyoonyesha maandishi. Kwa msaada wao, unaweza kudhibiti rangi, ukubwa, font, nafasi ya mstari, nk. Tabia zote za maandishi zitaelezwa kwa undani hapa chini. Mali nyingi zilizoelezwa hapo juu zinaweza kuunganishwa kwa kila mmoja. Kwa hivyo, badala ya kanuni H1 (uzito wa fonti: ujasiri; mtindo wa fonti: kawaida; saizi ya fonti: 12pt; familia ya fonti: serif) Unaweza kuandika uundaji mafupi zaidi: H1 (fonti: serif kali ya kawaida ya 12pt) Laha za mtindo wa HTML huruhusu kupanga vikundi mali ya mpaka, usuli, fonti, orodha, ukingo na pedi. Wacha tuzingatie kila moja ya vikundi tofauti. kikundi cha mali ya mpaka Unaweza kuweka mali za mpaka kwa njia tano tofauti. Unaweza kufafanua mali kwa upande wa sura ya mtu binafsi ukitumia b kupanga-juu, mpaka-kulia, mpaka-chini NA mpaka-kushoto, au fafanua fremu nzima mara moja kwa kutumia mpaka. Kwa kila moja ya mali hizi unaweza kutaja upana, mtindo, na rangi ya mpaka, kwa mfano: b ili-juu: nyeusi yenye vitone Kikundi mali ya mandharinyuma Katika kikundi cha mali ya nyuma unaweza kutaja maadili ya rangi, picha, kurudia, kiambatisho na msimamo, kwa mfano: usuli: URL nyeupe (http://www.myserver.com/image/bg.gif) repeat-x fasta juu kushoto kikundi cha mali ya fonti Kikundi cha fonti kinaweza kupewa uzito, mtindo, saizi na maadili ya familia, kwa mfano: font: ujasiri wa kawaida mara 12pt, serif orodha ya kikundi cha mali Sifa zimewekwa katika vikundi kwa kutumia mali ya mtindo wa orodha. Inawezekana kutaja picha kwa alama, aina na nafasi ya alama, kwa mfano: mtindo wa orodha: URL ya mraba(http://www.myserver.com/images/marker.gif) ndani kikundi cha mali ya pembeni Kikundi cha pambizo kinaweza kutumika kufafanua upana kwa kila pambizo za juu, kulia, chini na kushoto, kwa mfano: pambizo: .5in 1 in .5in 1 Ikiwa thamani moja tu imebainishwa, mtazamaji atafanya sehemu zingine ziwe na upana sawa. Ikiwa hutabainisha thamani moja au mbili, sehemu zilizo na thamani isiyojulikana zitakuwa na upana sawa na sehemu tofauti. Kwa mfano, ikiwa utaacha thamani ya mwisho(kushoto), upana wa pambizo za kushoto zitakuwa sawa na upana wa pambizo za kulia, yaani inchi 1. Kikundi cha mali ya padding Katika Kikundi cha padding unaweza kutaja maadili ya juu, kulia, chini na kushoto, kwa mfano: pedi: .25in .25in .25in .25in Ikiwa thamani moja tu imebainishwa, mtazamaji ataweka thamani sawa kwa thamani zinazokosekana. Ikiwa hutabainisha thamani moja au mbili, nafasi tupu zilizo na thamani zisizojulikana zitakuwa na upana sawa na thamani zao kinyume. Kwa mfano, ukiacha thamani ya mwisho (kushoto), nafasi kati ya upande wa kushoto wa fremu na maudhui ya kipengele itakuwa sawa na nafasi iliyo upande wa kulia. Katika HTML, vitambulisho vya chini vinarithi baadhi ya sifa za lebo zao kuu. Kwa mfano, vitambulisho vyote vya chombo (< P >Na ) itakuwa na sifa fulani za lebo . Lebo sawa kabisa hurithi sifa za lebo . Zingatia nambari ifuatayo: Habari. Hii ni aya ya maandishi. Hili linasisitizwa Laha ya mtindo wa hati hii huweka rangi kwenye lebo < P > bluu, hata hivyo, ni rangi ya lebo haijafafanuliwa wazi (chaguo-msingi ni nyeusi). Hakuna cha kuwa na wasiwasi hapa kwa kuwa lebo hii iko kwenye kontena kuu Na hivyo hurithi rangi ya bluu. Wakati mwingine inakuwa muhimu kufafanua mitindo miwili (au zaidi) kwa lebo moja. Kwa mfano, unaweza kuhitaji kutaja mitindo miwili ya lebo : moja kwa kesi wakati iko chini ya lebo , na ya pili wakati iko chini ya lebo . Hii inaweza kufanywa kwa kutumia viteuzi vya muktadha. Kiteuzi cha muktadha huamua mlolongo kamili wa lebo ambazo mtindo fulani utatumiwa. Kwa maneno mengine, unaweza kutaja kwamba mtindo fulani unapaswa kutumika, kwa mfano, katika lebo ikiwa tu lebo hii ni tagi ya chini : OL LI (mtindo wa orodha-aina: desimali) Kwa tag sawa unaweza kufafanua mtindo mwingine, halali tu ikiwa umewekwa chini ya lebo : UL LI (aina ya mtindo wa orodha: mraba) Ikumbukwe kwamba orodha ya wateuzi haijatenganishwa na koma. Vinginevyo, vitambulisho vyote kwenye orodha vitapewa mtindo sawa. Mwongozo wa W3C huita laha za mtindo "laha za mtindo wa kuteleza" " kwa sababu kwa mpangilio wa ukurasa wa Wavuti unaweza kutumia sio moja, lakini meza kadhaa mara moja. Katika kesi hii, mtazamaji yenyewe huamua mlolongo wa kutumia meza na kutatua migogoro kati yao kwa kutumia kanuni ya cascading. Kwa mfano, karatasi ya mtindo kwa ukurasa inaweza kufafanuliwa sio tu na mwandishi wake, bali pia na msomaji, na kisha sheria za cascading huamua ni karatasi gani ya mtindo itachukua athari. Inafanyaje kazi? Kivinjari kinapeana kipengele cha uzani kwa kila sheria. Wakati wa kutafsiri kila lebo, programu huangalia sheria zote za lebo hii na kuzipanga kwa thamani ya mgawo wa uzani. Utawala "uzito" zaidi unashinda. Kuna miongozo ifuatayo ya jumla ya kutatua mizozo kati ya laha za mitindo: Utangulizi wa aina za karatasi za mtindo katika hati (kushuka): mpangilio wa mtindo wa sasa (inline), kupachika, kuunganisha. Unaweza pia kubadilisha uzito wa sheria kwa kutumia neno kuu muhimu. Katika mfano ufuatao, thamani ya mali nyekundu ni col Thamani ya au na sans-serif ya sifa ya fonti-familia imealamishwa kwa neno hili la kukokotoa, kwa hivyo mtazamaji hapaswi kuyabatilisha. Walakini, ikiwa sheria mbili kama hizo zitagongana, mzozo huo unatatuliwa kulingana na kanuni zilizotajwa hapo juu. H1 (rangi: nyekundu ! uzani wa fonti muhimu: font-family ya ujasiri: sans-serif ! muhimu) Darasa ni ufafanuzi wa mitindo kadhaa ya kitu kimoja, ambayo kila moja inaweza kutumika mahali pazuri kwenye ukurasa. Kwa mfano, unaweza kufafanua tofauti tatu za mtindo wa kichwa cha H1. Kufafanua tofauti ni sawa na kubainisha mtindo, ni jina la darasa la kiholela pekee ndilo linaloongezwa kwa jina la lebo, likitenganishwa na nukta: H1 bluu (rangi: bluu) H1 .nyekundu (rangi: nyekundu) H1 .nyeusi (rangi: nyeusi) Sasa, ikijumuisha lebo kwenye hati , unaweza kutaja mtindo maalum ndani yake kwa kutumia sifa ya CLASS: Kichwa Nyekundu