Siku njema kwa wote.
Kwa hivyo, katika moja ya nakala zilizopita tulifahamiana.
Lakini hatujaangalia moja sana swali muhimu. Yaani - jinsi ya kufunga mitindo ya CSS kwa msimbo wa HTML kurasa za tovuti yetu.
Swali hili kwa kweli ni muhimu sana. Baada ya yote ikiwa tutafunga mitindo ya css kimakosa kwa kurasa za tovuti yetu, basi hatutaweza kutumia mitindo hii. Kivinjari kitawapuuza tu na hatutaona matokeo ambayo matumizi ya mitindo fulani hutoa.
Unaweza kufunga mitindo ya CSS kwa msimbo wa ukurasa njia tofauti na leo tutajaribu kuyazingatia yote.
Tuanze.
Kwa asili ya kuunganisha meza za kuteleza Mitindo ya CSS kwa hati ya HTML kuna karatasi za mtindo wa nje na wa ndani.
1. Karatasi za mtindo wa ndani wa CSS.
Laha za mtindo wa ndani ziko ndani ya ukurasa wetu wa wavuti. Ndiyo, ndiyo... Ndani ya msimbo wa HTML wa kila ukurasa binafsi.
Hii, kwa kweli, ni ngumu kidogo, lakini bado uwezekano kama huo upo na siwezi kusaidia lakini kusema juu yake.
Kwa hivyo, njia ya kwanza ya kuunganisha mitindo ya CSS kwenye msimbo wa ukurasa ni kutumia lebo, tumia kwa maudhui yote ya hati ya HTML. Kunaweza kuwa nyingi upendavyo, hata mitindo yote ya tovuti nzima. Lakini hii ni makosa kidogo. Nitazungumza juu ya hili baadaye kidogo ninapoangalia karatasi za mtindo wa nje.
Wakati mwingine ni lazima andika mitindo ya CSS ndani ya msimbo wa HTML.
Kwa mfano, unapochapisha kitu bendera ya matangazo kwenye tovuti yako - unaingiza msimbo wa bango hili kwenye msimbo wa ukurasa.
Ili bendera hii ionyeshwe kwa usahihi (isipite zaidi ya mipaka iliyotengwa kwake, labda inahitaji sura, nk), wakati mwingine unahitaji kushikamana na maagizo kadhaa ya CSS.
Lakini hakuna maana katika kufanya mabadiliko kwenye karatasi ya mtindo wa jumla. Bango ni jambo la muda. Leo moja, kesho nyingine. Kwa hiyo, ni rahisi kuandika mitindo kwa ajili yake moja kwa moja ndani ya kanuni ya bendera hii.
Hiyo ni, tunahitaji kuunganisha mitindo ya CSS tu kwa kipengele maalum cha ukurasa. Hii inafanywa kwa urahisi sana - kwa kutumia sifa ya mtindo.
Mitindo iliyoandikwa kwa njia hii huathiri tu kipengee ambacho kimewekwa ndani yake. KATIKA kwa kesi hii, kwa aya hii pekee (tag
) Na hakuna mwingine!
2. Karatasi za mtindo wa nje.
Inaitwa nje Jedwali la CSS mitindo inamaanisha kuwa imeandikwa sio kwenye mwili wa hati ya HTML, lakini kwa tofauti faili maalum. Faili hizi zina kiendelezi .css
Kwa hivyo, kama ilivyoahidiwa, nitakuambia kwa nini ni bora kutumia karatasi za mtindo wa nje.
Ukweli ni kwamba hii inaruhusu kurasa za tovuti yako kupakia kwa kasi kidogo. Labda kwa sehemu ya sekunde, lakini kwa kasi zaidi. Hii inapunguza mzigo kwenye tovuti yako na rahisi zaidi kwa wageni wako - wanapaswa kusubiri kidogo ili kurasa zipakie.
Kwa nini hii inatokea.
Ikiwa mitindo ya CSS ya tovuti yako iko katika faili tofauti, basi kivinjari cha mtumiaji hakihitaji kupakia mitindo hii kila wakati kinapopakia. ukurasa mpya. Alizipakua mara moja, akaziweka kwenye kashe (sehemu ya kumbukumbu kwenye kompyuta ya mgeni) na wakati wa kupakua. ukurasa unaofuata inachukua mitindo kutoka hapo.
Kuna njia mbili za kuambatisha faili za laha ya mtindo wa CSS kwenye ukurasa wa wavuti.
Njia ya kwanza, ya kawaida, ni kutumia lebo yenye sifa: rel = "stylesheet" type = "text/css" href = "style file.css" ndani ya msimbo wa kichwa cha ukurasa (lebo
).Kwa mfano:
| 1 2 3 4 | <kichwa > ..... <link rel = "stylesheet" type = "text/css" href = "style.css" > </kichwa> |
Data ya mfano imeambatanishwa Ukurasa wa CSS mitindo iliyoandikwa katika faili ya style.css. Ni halali katika hati nzima.
Kuna njia nyingine ambatisha laha za mtindo wa nje kwa HTML hati. Hii ni kutumia maagizo ya @import. Inakuruhusu kuleta maudhui ya faili ya CSS kwenye laha ya mtindo wa sasa.
Unaweza kuitumia kuongeza laha za mtindo kwa zingine, na kuambatisha faili ya laha ya mtindo kwenye hati ya HTML. Ili kufanya hivyo, unahitaji kuandika ndani ya lebo . Katika mazoezi inaonekana kama hii:
Huu hapa ni mfano: kuonyesha mitindo ya CSS katika hati ya HTML
Tafadhali kumbuka kuwa ndani ya lebo pia tunaandika nambari kulingana na Sheria za CSS kutumia braces. Katika makala zinazofuata nitazungumza kwa undani zaidi juu ya sheria za syntax katika CSS.
Kuunganisha faili nyingi za CSS kwenye hati moja ya HTML.
Sheria za HTML huruhusu faili nyingi za CSS kujumuishwa mara moja. Wasimamizi wengi wa wavuti hutumia hii: kuunda tofauti faili za CSS kwa maandishi na kwa picha. Au tenga faili za kichwa, kijachini na sehemu kuu ya ukurasa. Wacha tujue jinsi ya kutekeleza hii.
Tunaunda faili kadhaa za mtindo wa CSS. Acha majina yao yawe ya mtindo-1.css na mtindo-2.css. Tunaiweka, kama katika njia ya kwanza, kwenye folda moja na faili ya HTML.
Huu hapa ni mfano: kuonyesha mitindo ya CSS katika hati ya HTML
Kila kitu ni sawa na njia ya kwanza, tu katika kesi hii tunaonyesha viungo kwa faili mbili mara moja.
Unganisha kwa faili ya CSS iliyo ndani kwa faili ya aina sawa.
Mbali na njia zote zilizo hapo juu, kuna njia inayokuruhusu kuweka viungo kwa wengine wengi ndani ya faili moja ya CSS!
Hii inatekelezwa kama ifuatavyo:
Kwanza, tunahitaji kuunganisha angalau faili moja ya CSS kwenye msimbo wako kwa njia sawa.
Pili, ingiza nambari ifuatayo kwenye faili iliyounganishwa tayari:
@import url("style-2.css");
Mstari huu unaunganishwa na faili yetu faili ya ziada CSS. Ikiwa una matatizo yoyote ya kuunganisha CSS, unaweza kuwauliza kwenye maoni.
Kama tulivyojifunza kutoka kwa masomo mawili yaliyopita, teknolojia ya CSS ni chombo chenye nguvu zaidi, ambayo kila msimamizi wa wavuti anapaswa kujua! Ili kuboresha uigaji wa nyenzo, niliamua kuongeza video ya mafunzo + mtihani mwishoni mwa kila somo ili kuunganisha habari iliyopokelewa.
Mtihani wa kurekebisha nyenzo:
Tunahitaji kujumuisha faili ya CSS kwa kuweka kiungo kwayo katika faili ya HTML. Ni ipi kati ya njia zifuatazo ni sahihi?
Chaguo la 1:
Chaguo la 2:
Chaguo la 3:
Chaguo 4:
Je, tunaweza kuweka cascades za CSS moja kwa moja kwenye faili ya HTML?
Sasa ni vigumu kufikiria mabadiliko katika kuonekana na umbizo la HTML hati bila kutumia karatasi za mtindo wa CSS, kwa kuwa HTML imekoma kwa muda mrefu kuwa lugha ya kubuni ya kujitegemea na kuanza kufanya kazi zake za awali za kuunda na kuashiria hati za wavuti. Katika makala haya, tutaeleza kwa undani njia tofauti unazoweza kujumuisha CSS kwenye hati ya HTML.
Kwa kifupi kuhusu CSS na HTML
Hapo awali, muundo wa ukurasa wa wavuti ulifanyika peke yake kwa kutumia HTML. Siku hizi njia hii haifanyiki, na kwa stylization hutumiwa Zana za CSS ambazo zina sana fursa nyingi ili kuunda miundo ya kushangaza.
Ili muundo wa tovuti uonyeshwe kwa usahihi, unahitaji kuunganisha CSS kwa hati ya HTML; zana hizi hufanya kazi kwa usawa kutoka kwa kila mmoja - HTML huunda muundo, na karatasi za mtindo zinawajibika kwa kuonekana.
Kuna njia kadhaa za kimsingi ambazo unaweza kubinafsisha maonyesho ya mitindo katika msimbo wako wa HTML, kila moja ikiwa na faida na hasara zake.
Kuunganisha faili ya CSS
Hii ndio njia kuu ambayo inachukuliwa na watengenezaji kama inayofaa zaidi na inayofaa.
Kutumia njia hii, unaweza kubadilisha haraka muundo wa ukurasa wa wavuti ikiwa kuna Muundo wa HTML hati - kwa mfano, kwa tovuti hiyo hiyo unaweza kuandika chaguzi kadhaa za kubuni na kuziunganisha kulingana na hitaji linalofanana.
Ili kujumuisha faili iliyo na mitindo, lazima kwanza usanidi muundo wa faili- hii imefanywa ili njia sahihi ya hati inayohitajika moja kwa moja kwenye kanuni.
Unda saraka ambapo hati kuu ya HTML itapatikana, kwenye folda hiyo hiyo unda mhariri wa maandishi faili inayoitwa mtindo na uihifadhi katika azimio la .css. Itakuwa na msimbo wa CSS na sheria zote maalum za uundaji wa hati.
Muunganisho wa CSS unafanywa kwa kutumia Lebo ya HTML na sifa ya href. Inaonekana kama hii:
Hapa nambari iko katika kile kinachochukuliwa kuwa bora, lakini haihitajiki. Inaweza kupatikana mahali popote kwenye hati.
Njia hii ni rahisi kwa sababu mabadiliko yote kwenye karatasi ya mtindo hufanywa kwa faili tofauti, ambayo inafanya msimbo kuwa rahisi kuelewa na kusoma na kufanya hati kuwa safi.
Ukifanya mabadiliko kwa style.css na kufungua index.html katika kivinjari, utaweza kuona mabadiliko yote ambayo yameingizwa.
Kwa njia hiyo hiyo, unaweza kuweka sio tu njia ya faili katika muundo wa tovuti, lakini pia kiungo kwenye ukurasa na mtindo ulio kwenye mtandao. Katika kesi hii, inafaa pia katika alama za nukuu baada ya sifa ya href.
Njia ya kujumuisha karatasi ya mtindo kutoka kwa faili tofauti inaboresha utendaji wa tovuti, kwani inaruhusu kivinjari kupakia data kutoka kwa kache, kama matokeo ya ambayo kurasa hupakia haraka.
Laha za mtindo ndani ya hati ya HTML
Wakati mwingine thamani ya parameta ya mtindo imewekwa moja kwa moja kwenye mwili wa hati ya HTML kwa kutumia sifa ya mtindo.
Sintaksia:
Maandishi katika aya hii ni nyekundu
Kikwazo dhahiri ni ukosefu wa ulimwengu wote; itabidi ueleze thamani kwa kila lebo.
Pia, kuunganisha kwa kutumia karatasi za mtindo wa ndani hairuhusu kivinjari kuhifadhi habari, tofauti na njia ya awali.
Mtindo wa kimataifa
Ikiwa unahitaji kuweka kipengee maalum katika hati ya HTML, tumia lebo
Mtindo uliobainishwa utatumika kwenye lebo
, mara tu inaposajiliwa kwenye ukurasa.
Ikiwa ni pamoja na CSS kwa njia hii itasomwa kwa kipaumbele cha juu na kivinjari kuliko meza ya nje mitindo.
Jinsi ya kuongeza fonti kwenye tovuti
Fonti ni moja wapo ya vitu kuu vya muundo wa ukurasa wowote wa wavuti. Maoni ambayo tovuti hufanya kwa mtumiaji moja kwa moja inategemea font inayotumiwa. Kwa bahati nzuri, sio lazima ujiwekee kikomo kwa vifaa vya sauti vya kawaida; unaweza kuunganisha wengine wowote - tutakuambia jinsi hii inafanywa.
Kupitia Muunganisho wa CSS fonti hutolewa kama ifuatavyo:
- Tafuta na upakue vifaa vya sauti vinavyofaa.
- Fungua faili ya CSS na uandike nambari ifuatayo ndani yake:
Kwanza, jina la font limetajwa, kisha njia yake, na hatimaye vigezo. Makini na katika mfano huu faili ya fonti iko kwenye folda ya fonti, ambayo, kwa upande wake, iko kwenye saraka ya mizizi. Kwa urahisi, ni bora kuunda folda tofauti Kwa faili mbalimbali na vipengele (picha, maandishi, karatasi za mtindo, nk).
Kwa hiyo, katika folda ya fonts tuna faili inayoitwa OpenSans.ttf, na vigezo vya kawaida. Sasa itaonyeshwa kwenye kivinjari.
Kuunganisha fonti kupitia Fonti za Google
Mojawapo ya njia za kawaida za kuunganisha fonti katika CSS na HTML ni huduma Fonti za Google.
Interface ni angavu - unahitaji kupata fonti inayofaa kwa jina au vigezo vilivyotolewa, bofya kitufe cha Chagua font hii, na huduma huzalisha mara moja msimbo ambao umeingizwa kwenye uwanja wa lebo.
Hati ya HTML, pamoja na faili inayolingana ya CSS yenye mitindo.Jinsi inapaswa kuonekana katika HTML:
Na katika Faili ya CSS na mitindo:
Font-familia: "Open Sans", sans-serif;
Njia hii ni rahisi kwa sababu inakuwezesha kupata haraka fonti inayotaka kutoka kwa hifadhidata kubwa sana na huokoa muda mwingi, na pia huondoa shida zinazotokea kwa sababu ya onyesho lisilo sahihi la fonti kwenye vivinjari vingine.
Hebu tujumuishe
Kwa hivyo, tumeangalia njia kuu za kuunganisha mitindo ya CSS kwa Nyaraka za HTML. Kulingana na kazi zilizowekwa kwa msanidi programu katika kila kesi maalum, unaweza kuchagua chaguo la kipaumbele cha juu zaidi.
Ubunifu wa ukurasa wa wavuti ni mchakato wa ubunifu, ambayo, hata hivyo, inahitaji mbinu makini. Tumia fursa ya uwezo wa kutoa maoni kwenye msimbo na usisahau kuhusu uboreshaji wa tovuti.
Siku njema kwa wote. Alexey Gulynin anawasiliana. Katika nakala hii ya kwanza juu ya CSS, ningependa kuzungumza juu ya CSS kwa ujumla, na jinsi . CSS ni Laha za Mtindo wa Kuachia(au inaweza kuitwa mitindo), ambayo inawajibika kwa jinsi ya kuonyesha vipengee kwenye ukurasa wako wa html. Ikiwa unaongeza tu vipengele kwenye ukurasa wa HTML bila sifa, basi zote zitawekwa kutoka juu hadi chini na zitapangwa kwa upande wa kushoto wa kivinjari. Ni boring na monotonous.
Vipengele vya HTML ni mfumo wa ukurasa wetu, i.e. html inawajibika kwa NINI cha kuonyesha kwenye ukurasa. CSS, kwa upande wake, hujibu JINSI ya kuonyesha vipengele hivi vyote. Unaweza kuunda ukurasa sawa wa HTML na kuja na maelfu ya chaguzi za muundo wake. Na hii yote itaonekana kama tovuti tofauti. Unaweza kuvinjari mtandao na kuona ni tovuti ngapi nzuri kwenye eneo lake.
Washa wakati huu, unapaswa kutambua kwamba ikiwa unataka kuunda Ubunifu mzuri, basi bila ufahamu wa CSS, hautaweza kufanya hivi. Kwa hivyo, endelea kufahamu sayansi hii iitwayo CSS.
Hebu tuunganishe faili ya mtindo wa CSS kwenye ukurasa wa html. Hii inafanywa katika kichwa cha hati, kati ya vitambulisho
.. :
Hebu tujue tulichoandika hapa. Faili za mtindo zimeunganishwa kwa kutumia lebo ya kiungo. Sifa ya href, ambayo tayari tunaifahamu, inaelekeza kwenye njia ya faili ya mitindo. Hapa unaweza kutaja wote kabisa na njia za jamaa. Katika kesi hii, inachukuliwa kuwa faili yetu ya style.css iko katika saraka sawa na faili ambayo tunajumuisha mitindo. Sifa ya aina = "aina/css" inaonyesha kuwa aina ya hati ni css, sifa ya rel="stylesheet" huambia kivinjari kuwa tunajumuisha mitindo (rel kutoka kwa Kiingereza "relationship" - relationships).
Unaweza pia kuunda vipengele kwa njia nyingine. Hebu tuunde ukurasa wa html na maudhui yafuatayo:
Aya ya kwanza
Aya ya kwanza
Aya ya kwanza
Aya ya kwanza
Mbali na kuunda faili ya mtindo, tunaweza kuandika mitindo katika kichwa cha hati kwa kutumia lebo
Aya ya kwanza
Kifungu cha pili
Kifungu cha tatu
Kifungu cha nne