CSS (Laha za Mtindo wa Kuachia), au laha za mtindo wa kuachia, hutumika kuelezea mwonekano hati iliyoandikwa kwa lugha ya alama. Kwa kawaida, mitindo ya CSS hutumiwa kuunda na kubadilisha mtindo wa vipengele vya ukurasa wa wavuti na violesura vya mtumiaji iliyoandikwa ndani Lugha za HTML na XHTML, lakini pia inaweza kutumika kwa aina yoyote ya hati ya XML, ikiwa ni pamoja na XML, SVG na XUL.
Karatasi za mtindo wa kuteleza huelezea sheria za uumbizaji wa vipengee kwa kutumia mali na maadili yanayokubalika mali hizi. Kwa kila kipengele, unaweza kutumia seti ndogo ya mali; mali nyingine hazitakuwa na athari yoyote juu yake.
Tamko la mtindo lina sehemu mbili: kipengele cha ukurasa wa wavuti - kiteuzi, na amri za umbizo - kizuizi cha tangazo. Kiteuzi huambia kivinjari ni kipengee gani cha muundo, na kizuizi cha tamko (msimbo katika braces ya curly) huorodhesha amri za uumbizaji - mali na maadili yao.
Mchele. 1. Muundo wa tamko la mtindo wa CSS Aina za karatasi za mtindo wa kuteleza na maelezo yao maalum
1. Aina za karatasi za mtindo
1.1. Karatasi ya mtindo wa nje
Karatasi ya mtindo wa nje inawakilisha faili ya maandishi na kiendelezi cha .css, ambacho kina seti ya mitindo ya CSS kwa vipengele. Faili imeundwa katika kihariri cha msimbo, kama ukurasa wa HTML. Faili inaweza kuwa na mitindo pekee, bila alama za HTML. Laha ya mtindo wa nje imeunganishwa kwenye ukurasa wa wavuti kwa kutumia lebo , iliyoko ndani ya sehemu hiyo
. Mitindo hii inafanya kazi kwa kurasa zote za tovuti.Unaweza kuambatisha laha nyingi za mitindo kwa kila ukurasa wa wavuti kwa kuongeza lebo nyingi kwa mfuatano , ikionyesha madhumuni ya laha hii ya mtindo katika sifa ya lebo ya media. rel="stylesheet" inabainisha aina ya kiungo (kiungo cha laha la mtindo).
Sifa ya aina="text/css" haitakiwi na kiwango cha HTML5, kwa hivyo inaweza kuachwa. Ikiwa sifa haipo, thamani chaguomsingi ni type="text/css" .
1.2. Mitindo ya ndani
Mitindo ya ndani iliyopachikwa katika sehemu
Hati ya HTML na hufafanuliwa ndani ya lebo. Mitindo ya ndani huchukua nafasi ya kwanza kuliko ya nje, lakini ni duni kwa mitindo ya ndani (iliyobainishwa kupitia sifa ya mtindo)....
1.3. Mitindo iliyojengwa
Tunapoandika mitindo ya ndani, tunaandika nambari ya CSS kwenye faili ya HTML, moja kwa moja ndani ya tepe ya kipengee kwa kutumia sifa ya mtindo:
Makini na maandishi haya.
Mitindo hiyo huathiri tu kipengele ambacho kimewekwa.
1.4. @kuagiza sheria
@kuagiza sheria Inakuruhusu kupakia laha za mtindo wa nje. Ili agizo la @import lifanye kazi, lazima lionekane kwenye laha ya mtindo (ya nje au ya ndani) kabla ya sheria zingine zote:
Sheria ya @import pia inatumika kujumuisha fonti za wavuti:
@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);
2. Aina za wateuzi
Wateuzi kuwakilisha muundo wa ukurasa wa wavuti. Wanasaidia kuunda sheria za kupangilia vipengele vya ukurasa wa wavuti. Wateuzi wanaweza kuwa vipengele, madarasa yao na vitambulisho, pamoja na madarasa ya uwongo na vipengele vya uwongo.
2.1. Kiteuzi cha Universal
Inalingana na kipengele chochote cha HTML. Kwa mfano, * (pembezoni: 0;) itaweka upya pambizo kwa vipengele vyote vya tovuti. Kiteuzi pia kinaweza kutumika pamoja na kipengele cha uwongo cha darasa au pseudo: *:after (mitindo ya CSS) , *:checked (mitindo ya CSS) .
2.2. Kiteuzi cha kipengele
Viteuzi vya kipengele hukuruhusu kuumbiza vipengele vyote wa aina hii kwenye kurasa zote za tovuti. Kwa mfano, h1 (font-family: Lobster, cursive;) itaweka mtindo wa jumla wa uumbizaji wa vichwa vyote vya h1.
2.3. Kiteuzi cha darasa
Viteuzi vya darasa hukuruhusu kuweka mtindo wa kipengee kimoja au zaidi ukitumia jina la darasa sawa lililowekwa maeneo mbalimbali kurasa au kwenye kurasa tofauti tovuti. Kwa mfano, ili kuunda kichwa na darasa la kichwa, unahitaji kuongeza sifa ya darasa yenye kichwa cha thamani kwenye lebo inayofungua
na weka mtindo kwa darasa maalum. Mitindo iliyoundwa kwa kutumia darasa inaweza kutumika kwa vipengele vingine, si lazima vya aina hiyo.
Maagizo ya matumizi kompyuta binafsi
.kichwa cha habari ( badilisha-maandishi: herufi kubwa; rangi: samawati nyepesi; )2.4. Kiteuzi cha kitambulisho
Kiteuzi cha kitambulisho hukuruhusu kufomati moja kipengele maalum. Kitambulisho lazima kiwe cha kipekee na kinaweza kuonekana mara moja tu kwenye ukurasa mmoja.
#upau wa kando ( upana: 300px; kuelea: kushoto; )
2.5. Kiteuzi cha ukoo
Wateuzi wa uzao hutumia mitindo kwa vipengele ndani ya kipengele cha chombo. Kwa mfano, ul li (text-transform: herufi kubwa;) - itachagua vipengele vyote vya li ambavyo ni watoto wa vipengele vyote vya ul.
Ikiwa unataka kuunda vizazi vya kitu fulani, unahitaji kukipa kipengee hicho darasa la mtindo:
p.first a (rangi: kijani;) - mtindo huu utatumika kwa viungo vyote wazao wa aya na darasa la kwanza;
p .first a (rangi: kijani;) - ukiongeza nafasi, viungo vilivyomo ndani ya lebo yoyote ya .first class ambayo ni mtoto wa kipengele itawekwa mtindo.
Kwanza a (rangi: kijani;) - mtindo huu utatumika kwa kiungo chochote kilicho ndani ya kipengele kingine, kilichoteuliwa na class.first .
2.6. Kiteuzi cha watoto
Kipengele cha mtoto ni mtoto wa moja kwa moja wa kipengele chake kilicho na. Kipengele kimoja kinaweza kuwa na kadhaa vipengele vya mtoto, na kila kipengele kinaweza kuwa na mzazi mmoja tu. Kiteuzi cha watoto inakuwezesha kutumia mitindo tu ikiwa kipengele cha mtoto kinakuja mara moja baada ya kipengele cha mzazi na hakuna vipengele vingine kati yao, yaani, kipengele cha mtoto hakijawekwa ndani ya kitu kingine chochote.
Kwa mfano, p > kali itachagua vipengele vyote vikali ambavyo ni watoto wa kipengele cha p.
2.7. Kiteuzi dada
Udada hutokea kati ya vipengele vinavyoshiriki mzazi wa kawaida. Wateuzi vipengele vya dada hukuruhusu kuchagua vitu kutoka kwa kikundi cha vitu vya kiwango sawa.
h1 + p - itachagua aya zote za kwanza mara moja kufuatia lebo yoyote
bila kuathiri aya zilizobaki;
h1 ~ p - itachagua aya zote ambazo ni dada kwa kichwa chochote cha h1 na mara baada yake.
2.8. Kiteuzi cha sifa
Wateuzi wa sifa huchagua vipengee kulingana na jina la sifa au thamani ya sifa:
[sifa] - vipengele vyote vilivyo na sifa maalum - vipengele vyote ambavyo sifa ya alt imetajwa;
selector[attribute] - vipengele vya aina hii vyenye sifa maalum, img - picha tu ambazo sifa ya alt imetajwa;
selector[attribute="value"] - vipengele vya aina hii vyenye sifa maalum yenye thamani maalum, img - picha zote ambazo kichwa chake kina neno maua;
selector[attribute~="value"] - vipengele vyenye sehemu thamani iliyopewa, kwa mfano, ikiwa madarasa kadhaa yamebainishwa kwa kipengele kilichotenganishwa na nafasi, p - aya ambazo jina la darasa lina kipengele ;
selector[attribute|="value"] - vipengele ambavyo orodha ya maadili ya sifa huanza na neno maalum, p - aya ambazo jina la darasa ni kipengele au huanza na kipengele;
selector[attribute^="value"] - vipengele ambavyo thamani ya sifa huanza na thamani iliyobainishwa, a - viungo vyote vinavyoanza na http:// ;
selector[attribute$="value"] - vipengele ambavyo thamani ya sifa inaisha thamani iliyobainishwa, img - picha zote katika muundo wa png;
selector[attribute*="value"] - vipengele ambavyo thamani ya sifa ina neno lililobainishwa popote, a - viungo vyote ambavyo jina lake lina book .
2.9. Kiteuzi cha darasa la uwongo
Madarasa ya uwongo ni madarasa ambayo hayajaambatishwa kwa lebo za HTML. Zinakuruhusu kutumia sheria za CSS kwa vipengee tukio linapotokea au linatii sheria mahususi. Madarasa ya uwongo yana sifa ya vitu vilivyo na sifa zifuatazo:
:hover - kipengele chochote ambacho mshale wa panya huwekwa juu yake;
:focus - kipengele cha maingiliano ambacho kilielekezwa kwa kutumia kibodi au kuamilishwa kwa kutumia kipanya;
:active - kipengele ambacho kilianzishwa na mtumiaji;
:halali - fomu za mashamba ambazo maudhui yake yameangaliwa katika kivinjari kwa kufuata aina maalum ya data;
:batili - sehemu za fomu ambazo maudhui yake hayalingani na aina maalum ya data;
:imewezeshwa - yote nyanja zinazotumika fomu;
:walemavu - mashamba ya fomu iliyozuiwa, yaani, katika hali isiyofanya kazi;
:katika safu - sehemu za fomu ambazo thamani zake ziko katika safu maalum;
:nje ya anuwai - sehemu za fomu ambazo thamani zake haziko ndani ya safu maalum;
:lang() - vipengele vilivyo na maandishi katika lugha maalum;
:not(selector) - vipengele ambavyo havina kiteuzi maalum - darasa, kitambulisho, jina au aina ya uga wa fomu - :not() ;
:target ni kipengele chenye alama # ambacho kinarejelewa katika hati;
:imeangaliwa - vipengele vya fomu vilivyochaguliwa (vilivyochaguliwa na mtumiaji).
2.10. Kiteuzi cha darasa bandia cha muundo
Madarasa ya uwongo ya muundo huchagua vitu vya watoto kulingana na kigezo kilichoainishwa kwenye mabano:
:nth-mtoto (isiyo ya kawaida) - mambo ya mtoto isiyo ya kawaida;
:nth-mtoto (hata) - hata vipengele vya mtoto;
:nth-child(3n) - kila kipengele cha tatu kati ya watoto;
:nth-child(3n+2) - huchagua kila kipengele cha tatu, kuanzia na mtoto wa pili (+2) ;
:nth-child(n+2) - huchagua vipengele vyote kuanzia pili;
:nth-child(3) - huchagua kipengele cha mtoto wa tatu;
:nth-last-child() - katika orodha ya vipengele vya mtoto, huchagua kipengele na eneo lililobainishwa, sawa na:nth-child() , lakini kuanzia ya mwisho, katika mwelekeo tofauti;
:mtoto wa kwanza - hukuruhusu kuunda tu kipengele cha kwanza cha mtoto cha lebo;
:mtoto wa mwisho - hukuruhusu kuunda kipengee cha mwisho cha lebo;
:mtoto wa pekee - huchagua kipengele ambacho ni kipengele cha mtoto pekee;
:tupu - huchagua vipengele ambavyo havina watoto;
:root - huchagua kipengee ambacho ni mzizi kwenye hati - kipengele cha html.
2.11. Kiteuzi cha aina ya uwongo cha aina ya muundo
Elekeza kwa aina maalum lebo ya mtoto:
:nth-of-type() - huchagua vipengele sawa na :nth-child() , lakini huzingatia tu aina ya kipengele;
:ya kwanza ya aina - huchagua mtoto wa kwanza wa aina fulani;
:mwisho-wa-aina - huchagua kipengele cha mwisho cha aina hii;
:nth-last-of-type() - huchagua kipengele cha aina iliyotolewa katika orodha ya vipengele kulingana na eneo maalum, kuanzia mwisho;
:only-of-type - huchagua kipengele pekee cha aina maalum kati ya vipengele vyake vya mtoto kipengele cha mzazi.
2.12. Kiteuzi cha kipengee cha uwongo
Vipengele vya uwongo hutumiwa kuongeza yaliyomo, ambayo hutolewa kwa kutumia sifa ya yaliyomo:
:barua ya kwanza - huchagua barua ya kwanza ya kila aya, inatumika tu kwa vipengele vya kuzuia;
:mstari wa kwanza - huchagua mstari wa kwanza wa maandishi ya kipengele, inatumika tu kwa vipengele vya kuzuia;
:kabla - huingiza yaliyomo kabla ya kipengee;
:after - inaongeza yaliyomo baada ya kipengee.
3. Mchanganyiko wa kiteuzi
Ili kuchagua kwa usahihi vipengee vya umbizo, unaweza kutumia mchanganyiko wa viteuzi:
img:nth-of-type(even) - itachagua picha zote zilizohesabiwa ambazo maandishi yake mbadala yana neno css.
4. Kupanga wateuzi
Mtindo huo unaweza kutumika kwa vipengele vingi kwa wakati mmoja. Ili kufanya hivyo, unahitaji kuorodhesha wateule wanaohitajika upande wa kushoto wa tamko, wakitenganishwa na koma:
H1, h2, p, span ( rangi: nyanya; usuli: nyeupe; )
5. Urithi na kuteleza
Urithi na mteremko ni dhana mbili za msingi katika CSS ambazo zinahusiana kwa karibu. Urithi ni pale vitu vinaporithi mali kutoka kwa mzazi wao (kipengele kilicho navyo). Cascade inajidhihirisha kwa jinsi gani aina tofauti laha za mtindo hutumika kwa hati, na jinsi sheria zinazokinzana zinavyoshindana.
5.1. Urithi
Urithi ni utaratibu ambao mali fulani hupitishwa kutoka kwa babu hadi kwa vizazi vyake. Vipimo vya CSS huruhusu urithi wa sifa zinazohusiana na maudhui ya maandishi ya ukurasa, kama vile rangi, fonti, nafasi ya herufi, urefu wa mstari, mtindo wa orodha, upatanishi wa maandishi, ujongezaji maandishi, kubadilisha maandishi, mwonekano, nyeupe. -nafasi na nafasi kati ya maneno. Mara nyingi, hii ni rahisi kwa sababu sio lazima uweke ukubwa wa fonti na familia ya fonti kwa kila kipengele kwenye ukurasa wa wavuti.
Sifa zinazohusiana na umbizo la kuzuia hazirithiwi. Hizi ni mandharinyuma , mpaka , onyesho , kuelea na uwazi , urefu na upana , ukingo , min- max-urefu na -upana , muhtasari , kufurika , padding , nafasi , upambaji wa maandishi , vertical-align na z-index .
Urithi wa kulazimishwa
Kwa kutumia neno kuu inherit inaweza kulazimisha kipengele kurithi thamani yoyote ya mali ya kipengele kikuu chake. Hii inafanya kazi hata kwa mali ambazo hazirithiwi kwa chaguo-msingi.
Jinsi mitindo ya CSS imewekwa na kufanya kazi
1) Mitindo inaweza kurithiwa kutoka kwa kipengele cha mzazi (mali ya kurithi au kutumia thamani ya kurithi);
2) Mitindo iliyo kwenye karatasi ya mtindo chini ya mitindo ya kupuuza iliyo kwenye jedwali hapo juu;
3) Mitindo kutoka kwa kipengele kimoja inaweza kutumika vyanzo mbalimbali. Unaweza kuangalia ni mitindo ipi inatumika katika hali ya msanidi wa kivinjari. Ili kufanya hivyo, bofya kipengele bonyeza kulia panya na uchague "Angalia nambari" (au kitu sawa). Safu wima ya kulia itaorodhesha sifa zote ambazo zimewekwa kwenye kipengele hiki au kurithiwa kutoka kwa kipengele kikuu, pamoja na faili za mtindo ambamo zimebainishwa, na nambari ya serial mistari ya kanuni.
Mchele. 2. Hali ya Msanidi programu Kivinjari cha Google Chrome 4) Wakati wa kufafanua mtindo, unaweza kutumia mchanganyiko wowote wa wateule - kiteuzi cha kipengee, kipengee cha darasa la uwongo, darasa au kitambulisho cha kipengee.
div (mpaka: 1px imara #eee;) #kunja (upana: 500px;).kisanduku (elea: kushoto;).wazi (wazi: zote mbili;)
5.2. Cascade
Kuporomoka ni utaratibu unaodhibiti matokeo ya mwisho katika hali ambapo sheria tofauti za CSS zinatumika kwa kipengele kimoja. Kuna vigezo vitatu vinavyobainisha mpangilio wa sifa zinazotumiwa—kanuni! muhimu, umaalum, na mpangilio ambao laha za mitindo zinajumuishwa.
Kanuni!muhimu
Uzito wa sheria unaweza kubainishwa kwa kutumia!neno kuu muhimu, ambalo huongezwa mara tu baada ya thamani ya mali, kwa mfano, urefu (font-weight: bold!muhimu;) . Sheria lazima iwekwe mwishoni mwa tamko kabla ya bracket ya kufunga, bila nafasi. Tangazo kama hilo litachukua nafasi ya kwanza kuliko sheria zingine zote. Sheria hii inakuwezesha kufuta thamani ya mali na kuweka mpya kwa kipengele kutoka kwa kikundi cha vipengele katika kesi ambapo hakuna upatikanaji wa moja kwa moja kwenye faili ya mtindo.
Umaalumu
Kwa kila sheria, kivinjari huhesabu maalum ya kiteuzi, na ikiwa kipengele kina matamko ya mali yanayokinzana, sheria ambayo ina maalum zaidi inazingatiwa. Thamani maalum ina sehemu nne: 0, 0, 0, 0. Umaalumu wa kichaguzi hufafanuliwa kama ifuatavyo:
kwa kitambulisho, 0, 1, 0, 0 imeongezwa;
kwa darasa 0, 0, 1, 0 imeongezwa;
kwa kila kipengele na pseudo-kipengele, 0, 0, 0, 1 huongezwa;
kwa mtindo wa ndani ulioongezwa moja kwa moja kwenye kipengele - 1, 0, 0, 0;
Kiteuzi cha wote hakina maalum.
H1 (rangi: lightblue;) /*maalum 0, 0, 0, 1*/ em (rangi: fedha;) /*maalum 0, 0, 0, 1*/ h1 em (rangi: dhahabu;) /*maalum: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about (rangi: bluu;) /*maalum: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .upau wa kando (rangi: kijivu;) /*maalum 0, 0, 1, 0 */ #upau wa kando (rangi: machungwa;) /*maalum 0, 1, 0, 0*/ li#upau kando (rangi: aqua;) /*maalum: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/
Matokeo yake, sheria hizo ambazo ni maalum zaidi zitatumika kwa kipengele. Kwa mfano, ikiwa kipengele kina sifa mbili zilizo na maadili 0, 0, 0, 2 na 0, 1, 0, 1, basi sheria ya pili itashinda.
Agizo la meza zilizounganishwa
Unaweza kuunda kadhaa meza za nje mitindo na uunganishe kwenye ukurasa mmoja wa wavuti. Ikiwa zinatokea kwenye meza tofauti maana tofauti mali ya kipengele kimoja, basi kwa sababu hiyo sheria katika karatasi ya mtindo iliyoorodheshwa hapa chini itatumika kwa kipengele.
1. Je, Laha za Sinema za CSS Cascading ni nini?
Kwa hiyo, karatasi 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 ya kurasa za tovuti ya html nzuri na rahisi kuhariri.
Karatasi za mtindo wa kuteleza zilitumiwa kwanza katika miaka ya 90 ya karne iliyopita. Lakini mwanzoni hazikuwa maarufu kama zilivyo sasa, kwa sababu vivinjari tofauti vilitambua na kuonyesha kurasa za html ambazo zilitumia css 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 huonyesha kurasa zinazotumia laha za mtindo wa kuachia karibu kufanana, lakini ikiwa vivinjari havifanyi hivyo vizazi vya mwisho, basi kurasa za tovuti zenyewe zitaonekana tofauti. Na ili tovuti yako ionekane sawa katika karibu vivinjari vyote, kuna teknolojia maalum za kubainisha karatasi za mtindo wa cascading.
Kwa hivyo, tuanze kuunda laha la mtindo mpya na tuambatanishe na hati yetu.
2. Jinsi ya kuunda karatasi ya mtindo wa css?
Katika sehemu hii ya kifungu tutaunda na kuunganisha karatasi 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 ukurasa rahisi wa html (index.html). Unaweza kusoma jinsi hii inafanywa hapa.
3. Sasa tunaunda hati rahisi 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, ambayo inafafanua picha ya mandharinyuma ya ukurasa wa html, rangi ya mandharinyuma ya ukurasa (ikiwa picha zimezimwa kwenye kivinjari cha mgeni wa ukurasa), kando ya juu na chini, fonti chaguo-msingi, saizi yake na rangi.Ili kuweka picha ya mandharinyuma, unahitaji kuiweka alama kwenye folda na faili zetu.
Pakua kumbukumbu ya bg.zip, ifungue na uweke faili ya bg.jpg kwenye folda css. Unapaswa kuwa nayo kama hii:
Sasa kuweka mtindo wa lebo
html, kwenye karatasi ya mtindo unahitaji kuandika yafuatayo:|
mwili ( picha ya usuli: url(bg.jpg); rangi ya usuli:#f6f6f6; ukingo-juu:0px; ukingo-chini:0px; familia ya fonti:Verdana; saizi ya fonti:12px; rangi:#000066; ) |
mwili (...) - kuweka mitindo ya css kwa lebo
picha ya usuli:url(bg.jpg); - picha ya usuli, ambapo parameta ya url(...jpg) inabainisha njia kamili kwa picha ambayo itakuwa mandharinyuma
rangi ya mandharinyuma:#f6f6f6; - mandharinyuma ya mwili wa hati (tag ) Sifa hii imewezeshwa ikiwa kivinjari cha mgeni kimezimwa picha
ukingo-juu:0px; - umbali kutoka kwa mwili wa hati hadi juu ya kivinjari. Katika hali hii, Laha za Mtindo wa Kuachia css huweka nafasi hadi 0 px.
ukingo-chini:0px; - umbali kutoka kwa mwili wa hati hadi chini ya kivinjari. Katika kesi hii, laha za mtindo wa css zinaweka nafasi kwa 0px
font-familia:Verdana; - kuweka fonti chaguo-msingi kwa hati
ukubwa wa fonti:12px; - saizi ya fonti ya hati 12 saizi
rangi: #000000; - rangi ya maandishi. Katika kesi hii, laha za mtindo wa css huweka rangi ya fonti kuwa bluu iliyokolea.
Baada ya kuhifadhi faili ya style.css, utaona yafuatayo kwenye kivinjari chako:
|
Kuhusu teknolojia ya CSS. Mitindo ya CSS |
|
Utangulizi wa CSS. Mitindo Njia za kutumia mitindo: Mitindo ya ndani Mitindo ya kimataifa Mitindo inayohusiana/ya nje Umeanza kujifunza kuhusu Laha za Mitindo ya Kuachia CSS. Kwa hivyo tayari unaifahamu lugha ya alama ya hypertext HTML, kwani hakuna maana ya kuanza CSS bila kujua HTML. CSS ( Laha za Mtindo wa Kuachia - karatasi za mtindo wa kuteleza) ni teknolojia inayotumika kutengeneza kurasa za wavuti kwa kutumia mitindo. Wazo kuu la CSS ni kutenganisha muundo na yaliyomo kwenye kurasa za wavuti kutoka kwa muundo wao: C kwa kutumia HTML ukurasa umeundwa - sura yake, na maudhui yake yameingizwa. - Na kwa kutumia CSS muundo umeundwa - muundo umewekwa kwa vipengele vya ukurasa. Mitindo- hii ni seti sheria za uumbizaji, kutumika kwa vipengele vya ukurasa ili kubadilisha mali zao na vigezo vya uwasilishaji kwenye ukurasa: hii inahusu hasa kuonekana na nafasi zao. Mitindo inawakilishwa na sifa za CSS. Kila mali ina ushawishi wake juu ya muundo wa kipengele fulani cha ukurasa. Baadhi ya sifa hazitumiki kwa baadhi ya vipengele. Vipengele vya ukurasa ni vitambulisho vya HTML au yaliyomo. Kuna njia tatu za kutumia mitindo kwa vipengele vya ukurasa: Njia ya I - Mitindo ya ndani Styling imewekwa kwa kutumia parameter mtindo, ambayo inaweza kuongezwa kwa lebo yoyote ya HTML, na kuathiri mwonekano wa lebo hiyo tu na maudhui yake. Kijisehemu cha msimbo Kutumia parameter ya mtindo, mtindo wa maandishi ya aya hii umeelezwa, ukubwa wake na rangi huwekwa. Matokeo: Kutumia parameter ya mtindo, mtindo wa maandishi ya aya hii umewekwa: ukubwa wake na rangi huwekwa. Njia hii ya kubuni vipengele vya ukurasa haitumiwi sana. Baada ya yote, lazima ukubali kwamba kuweka muundo sawa, sema, kwa kila mmoja ukurasa wa aya, kwanza, ni kazi kubwa, na, pili, sio vitendo, kwani kwa ongezeko la kiasi. msimbo wa chanzo, wakati wa upakiaji wa ukurasa pia utaongezeka. Njia ya II - Mitindo ya kimataifa Mtindo umewekwa kwa kutumia lebo Kichwa cha waraka kina muundo wa mtindo mmoja kwa aya zote za ukurasa wa sasa! Na kwa aya hii kubuni imewekwa mmoja mmoja! Ubunifu wa sare. Matokeo: Kichwa cha waraka kina muundo wa mtindo mmoja kwa aya zote za ukurasa wa sasa! Na kwa aya hii kubuni imewekwa mmoja mmoja! Ubunifu wa sare. Njia hii ya kuunda kurasa hutumiwa katika hali ambapo hakuna wengi wao, au wakati kuna haja ya kutoa muundo wa awali kwa ukurasa wowote wa tovuti kutoka kwa kurasa zake nyingi za aina moja. III njia - Kuhusiana au mitindo ya nje Mitindo imeelezewa katika faili tofauti na ugani .css, ambayo inaweza kuhusishwa na faili moja au kadhaa za html, na hivyo kuathiri muundo wao. Ikiwa bado haujafahamu kihariri cha kuona cha HTML Dreamweaver, kisha kuunda faili ya css unaweza kutumia hariri ya maandishi rahisi, ambayo ni sehemu ya Windows OS - Notepad. Kwa mfano, tuna hati ya html - faili index.html, kwa muundo ambao lazima utumie mitindo iliyoelezewa kwenye faili mtindo.css. Kwa madhumuni haya faili index.html Na mtindo.css inahitaji kufungwa. Mawasiliano hufanywa kwa kutumia lebo , ambayo iko kwenye kichwa cha hati index.html(kati ya vitambulisho Na ), na ambamo lazima uandike yafuatayo: "laha la mtindo"aina="maandishi/css"href="style.css">. Mstari huu unaonyesha kuwa sheria za muundo wa faili index.html imechukuliwa kutoka kwa faili ya mtindo mtindo.css. Kutumia sifa href tagi kiunga kinatengenezwa kwa faili iliyo na mitindo ( kabisa au njia ya jamaa faili (maelezo zaidi hapa...) ). Kwa hivyo, unaweza kutumia mitindo kutoka kwa faili iliyo kwenye tovuti nyingine hadi hati yoyote ya HTML. Kijisehemu cha msimbo:
Kwa aya na vichwa vya ngazi ya pili Mtindo umewekwa.
.Kijisehemu cha msimbo kutoka kwa faili ya mtindo: p (mpaka: #FF0000 imara 2px; rangi: #33CC99; pedi: 5px} h2 (mpaka: #33CC99 imara 2px; rangi ya asili: #FF0066; rangi: #FFFF; pedi: 5px} Matokeo: Kwa aya na vichwa vya ngazi ya pili Mtindo umewekwa. Mitindo imeelezewa katika faili ya style.css, ambayo inahusishwa na faili hii kwa kutumia tag . Kutumia njia hii hukuruhusu kuunganisha faili na mitindo mtindo.css na idadi yoyote ya faili za html na ufanyie kazi muundo wao, ukihariri tu msimbo wa css wa faili moja. Ambayo ni rahisi sana! |
Laha za Mtindo wa Kuachia, au CSS kwa Wanaoanza (warsha juu ya HTML "sahihi")
Sehemu ya Kirusi ya Mtandao inakua siku baada ya siku. Katika mwaka mmoja au miwili iliyopita, jumla ya kurasa za lugha ya Kirusi zimeongezeka zaidi ya mara mbili. Leo nchini Urusi hutashangaa mtu yeyote na maneno<домашняя страничка>au neno la Kiingereza
Tutazungumza hapa kuhusu<правильном>HTML kwa wanaoanza, yaani, kuhusu baadhi ya vipengele vya ziada vilivyoidhinishwa rasmi na Muungano wa Mtandao (http://www.w3.org/). Hasa, kuhusu baadhi ya uwezo unaotolewa na HTML yenye nguvu (DHTML). Na hata kwa usahihi zaidi - kuhusu jinsi ya kutumia CSS (shuka za mtindo wa kuteleza, au karatasi za mtindo wa kuteleza) kutengeneza ukurasa ambao utaonekana bora kuliko kurasa zilizoundwa kwa kutumia.<классического>HTML, huku ikichukua nafasi kidogo na, ipasavyo, inapakia haraka.
Watu wachache wanaoamua kuunda uwepo wao kwenye wavuti kwa mara ya kwanza hujizatiti kwa Notepad au kihariri kingine cha maandishi kama HomeSite. Kwa kawaida anayeanza huwaza hivi:<Все свои привычные документы я создаю посредством программ WYSIWYG (<что вижу, то и получаю>) - Ninaunda maandishi katika MS Word, mawasilisho katika MS PowerPoint, kwa hivyo nitachukua programu kama hiyo ili kuunda ukurasa wa wavuti - MS FrontPage...> Baada ya kufanya uamuzi kama huo, mchongaji mpya wa wavuti alijiibia mara mbili.
Mara ya kwanza - kwa maana ya matumizi ya busara ya nafasi ya mtandao. Ukweli ni kwamba wahariri wote wanaoonekana wa kurasa za wavuti, ambazo ni pamoja na MS FrontPage iliyotajwa, ingiza ndani kurasa zilizoundwa <отсебятину>- vitambulisho vingi vya ziada visivyo vya lazima. Isipokuwa, labda, ni Macromedia Dreamweaver (ambayo imepata umaarufu unaostahili kati ya Kompyuta na wataalamu). Lakini hata yeye sio bora katika suala hili - anapenda takataka maandishi asilia quotes (katika hali nyingi sio lazima kabisa), pamoja na kuingiza wahusika wa nafasi zisizo za kuvunja katika maeneo yasiyofaa zaidi. Kwa haki, inafaa kuzingatia kwamba wahariri wote wa kuona humpa mtumiaji fursa ya kufanya kazi na msimbo wa chanzo wa ukurasa unaoundwa, lakini FrontPage, inayopendwa sana na wengi, itafanya tena kila kitu kwa njia yake mwenyewe, mara tu rudi kwenye hali ya kuona.
Inafuata kutoka kwa hii kwamba kwa mara ya pili mwanzilishi anajiibia kwa usahihi katika suala la kubadilika na udhibiti kamili juu ya yaliyomo kwenye ukurasa - wahariri wa kuona hawatoi uhuru sawa wa ubunifu ambao kufanya kazi moja kwa moja na nambari ya chanzo ya ukurasa unaoundwa itakuwa. kukupa.
Kweli, sasa wacha tuende moja kwa moja kwenye uhakika - kuunda kurasa nzuri na ndogo za wavuti kwa kutumia laha za mtindo wa kuteleza (in maandishi zaidi Nitatumia jina lao lililofupishwa - CSS). Inafikiriwa kuwa ninyi, wasomaji wapendwa, baada ya kusoma utangulizi, kukubaliana nami, kuacha wahariri wa kuona, kupata kitabu kwenye HTML, kusoma angalau idadi ndogo ya vitambulisho na sifa za msingi na una hamu ya kujua CSS ni nini na ni nini. inatumika na.
Uumbizaji wa kimantiki na kimwili
Toleo la kawaida la HTML la 3.2, linalojulikana zaidi kwenye wakati huu kwenye Wavuti, hutupatia njia ya muundo wa hati, ambayo kuna vitambulisho maalum (kwa mfano, vitambulisho. , , ) na sifa nyingi tofauti (ukubwa, rangi, urefu, upana, nk). Vipengele vya uundaji wa wavuti hutulazimisha kuandika vitambulisho na sifa hizi tena na tena kwa kila aya mpya, ambayo, bila shaka, huongeza sana ukubwa wa msimbo wa ukurasa. Kwa kuongezea, na njia hii ya umbizo, katika kesi ya kuchambua muundo wa hati, bado haijulikani kwa nini neno hili limeangaziwa kwa herufi - kwa uzuri tu au kuvutia umakini. Tahadhari maalum mtumiaji wa mwisho? Ikiwa mtu aliye hai bado ana uwezo wa angalau kuelewa ujenzi wa kimantiki wa kurasa katika HTML ya kawaida, basi hii haiwezi kusema kuhusu injini za utafutaji au, kwa mfano, vivinjari vya sauti. Watoe nje na uweke mantiki safi katika muundo wa ukurasa. Ni kwa sababu ya hii haswa<неподвластности>Kwa uchanganuzi wa kimantiki, mbinu hii ya uumbizaji iliitwa umbizo la kimwili. Tofauti, wakati wa kuunda specifikationer mpya HTML 4.0 ililenga uumbizaji wa kimantiki, yaani, umbizo ambalo muundo na muundo wa hati ungetenganishwa waziwazi. Njia hii ya umbizo inapendekezwa kwa matumizi ya muungano wa mtandao, kwani inatoa uwezo uliopanuliwa wa kutafuta habari kwenye mtandao, hukuruhusu kuunda kwa usahihi zaidi na kuchambua habari kwa kutumia injini za utaftaji, na pia hupunguza kwa kiasi kikubwa saizi ya kurasa na wakati wanaochukua. kupakia kikamilifu. Mgawanyo wa muundo wa hati na muundo unafanywa kwa kutumia CSS.
Inastahili kuzingatia ukweli kwamba mwanzo wa uundaji wa kimantiki pia ulikuwepo katika vitambulisho vya HTML vya kawaida
, ,
, bila shaka, ilichangia mgawanyiko wa nyaraka katika baadhi ya vitalu vya mantiki. Lakini waandishi wengi wa kurasa walitumia, na hadi leo wanaendelea kutumia, vitambulisho hivi kwa madhumuni mengine: kutokana na uhaba wa rasilimali kwa ajili ya kubuni ukurasa, vitambulisho vya kichwa, kwa mfano, vilitumiwa kuonyesha vipengele kwenye ukurasa ambavyo havikuwa vichwa vya kweli. CSS, kwa upande mwingine, hutoa zana za kutosha za kupiga maridadi ili kukuruhusu kufuata kwa karibu zaidi sheria za uumbizaji wa kimantiki na kutenganisha kikweli muundo wa ukurasa kutoka kwa uwasilishaji wake wa kuona.Inagawa mitindo kwa vipengele vya ukurasa binafsi
CSS hukuruhusu kugawa mtindo wako wa kuona kwa lebo yoyote ya HTML, ikijumuisha
. Ikiwa mtindo umewekwa kwa lebo , inarithiwa na vipengele vyote (aya, vichwa, n.k.) vilivyowekwa ndani ya lebo ya chombo hiki, ikiwa hakuna mitindo maalum ya vipengele hivi. Kwa hivyo, hatuhitaji tena kuandika vitambulisho na rangi ya sifa, saizi, n.k. kwa kila aya kwenye ukurasa - weka tu mtindo fulani wa lebo , na aya zote kwenye ukurasa zitaonyeshwa kulingana na mtindo huu. Jinsi ya kufanya hili?Hebu tuseme tunataka aya zote zionyeshwe katika fonti ya Times New Roman yenye alama 12 katika rangi ya kijani kibichi. Ili kufanya hivyo, unahitaji kutaja sifa ya mtindo wa lebo
, akiipa thamani inayofaa. Sintaksia ni:pt 12; rangi: kijani kibichi;">
Kwa hivyo, aya zote kwenye ukurasa zinaonyeshwa jinsi tulivyotaka, na msimbo haujafungwa na vitambulisho na sifa zao. Hebu fikiria uhifadhi wa saizi ya faili ikiwa ukurasa wako una maandishi mengi!
Tafadhali kumbuka kuwa tulipobainisha mtindo wa fonti, baada ya jina Times New Roman tulibainisha mtindo wa serif, unaomaanisha fonti yoyote iliyo na serif. Ikiwa mashine ya mtumiaji wa mwisho haina fonti ya Times New Roman iliyosakinishwa, kivinjari kitabadilisha fonti zozote zinazopatikana za serif, na onyesho la ukurasa litakuwa karibu iwezekanavyo na ulichokusudia. Kwa kuongezea, mfano uliopewa utaeleweka kwa IE (4.0 na zaidi) na NN (4.0 na zaidi). Ingawa ni lazima tuhifadhi mara moja kwamba Netscape Navigator haitumii vipengele vyote vilivyotolewa na CSS na DHTML, na hii, bila shaka, haiongezi idadi ya mashabiki wake.
Mfano hapo juu unatumia kupachika mtindo moja kwa moja kwenye lebo ya hati - kinachojulikana kama mtindo wa ndani. Njia hii ya kuunganisha CSS na faili ya HTML inapendekezwa katika kesi pekee - ikiwa mtindo huu umepangwa kutumika kwa kipengele kimoja tu kwenye ukurasa mmoja wa tovuti. Ikiwa mtindo lazima utumike kwa vipengele kadhaa kwenye ukurasa huo huo au kwa kurasa kadhaa mara moja, mbinu nyingine za kuunganisha CSS na HTML zinapendekezwa, ambazo tutazungumzia ijayo.
Kugawa mitindo kwa vipengele vingi kwenye ukurasa mmoja - kuunda laha ya mtindo iliyopachikwa
Kufikia sasa tumekuwa tukizungumza juu ya kuweka mtindo mmoja tu kwa kipengele kimoja. Sasa tutajifunza jinsi ya kuunda karatasi za mtindo.
Wacha tuseme tunataka aya zote kwenye ukurasa zifanane na mfano uliotangulia, zenye vichwa vyote vya ngazi ya kwanza katika kijani kibichi Arial yenye alama 16, na vichwa vyote vya ngazi ya pili katika herufi 14 ya Helvetica iliyokoza italiki ya manjano-kijani. . Ili kufanya hivyo, tunahitaji kuunda ndani<голове>kurasa (mahali popote kati ya vitambulisho
Na) karatasi ya mtindo iliyoingia ambayo tutaandika sheria kadhaa mara moja. Ili kufanya hivyo, tengeneza lebo ya kontena ya karatasi ya mtindo kuanzia na lebo inayofungua. 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 za moja kwa moja), iliyoambatanishwa katika viunga vilivyopinda. . Syntax ya mfano hapo juu ni:saizi ya herufi: 12pt;
rangi: kijani kibichi;
saizi ya herufi: 16pt;
font-uzito: ujasiri;
font-familia: Arial, sans-serif;
saizi ya herufi: 14pt;
rangi: kijani njano;
font-uzito: ujasiri;
mtindo wa fonti: italiki;
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):
font-family: "Times New Roman", serif;
saizi ya herufi: 12pt;
rangi: kijani kibichi;
font-familia: Arial, sans-serif;
saizi ya herufi: 16pt;
font-uzito: ujasiri;
font-familia: Arial, sans-serif;
saizi ya herufi: 14pt;
rangi: kijani njano;
font-uzito: ujasiri;
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
, bila shaka, ilichangia mgawanyiko wa nyaraka katika baadhi ya vitalu vya mantiki. Lakini waandishi wengi wa kurasa walitumia, na hadi leo wanaendelea kutumia, vitambulisho hivi kwa madhumuni mengine: kutokana na uhaba wa rasilimali kwa ajili ya kubuni ukurasa, vitambulisho vya kichwa, kwa mfano, vilitumiwa kuonyesha vipengele kwenye ukurasa ambavyo havikuwa vichwa vya kweli. CSS, kwa upande mwingine, hutoa zana za kutosha za kupiga maridadi ili kukuruhusu kufuata kwa karibu zaidi sheria za uumbizaji wa kimantiki na kutenganisha kikweli muundo wa ukurasa kutoka kwa uwasilishaji wake wa kuona.Inagawa mitindo kwa vipengele vya ukurasa binafsi
CSS hukuruhusu kugawa mtindo wako wa kuona kwa lebo yoyote ya HTML, ikijumuisha
. Ikiwa mtindo umewekwa kwa lebo , inarithiwa na vipengele vyote (aya, vichwa, n.k.) vilivyowekwa ndani ya lebo ya chombo hiki, ikiwa hakuna mitindo maalum ya vipengele hivi. Kwa hivyo, hatuhitaji tena kuandika vitambulisho na rangi ya sifa, saizi, n.k. kwa kila aya kwenye ukurasa - weka tu mtindo fulani wa lebo , na aya zote kwenye ukurasa zitaonyeshwa kulingana na mtindo huu. Jinsi ya kufanya hili?Hebu tuseme tunataka aya zote zionyeshwe katika fonti ya Times New Roman yenye alama 12 katika rangi ya kijani kibichi. Ili kufanya hivyo, unahitaji kutaja sifa ya mtindo wa lebo
, akiipa thamani inayofaa. Sintaksia ni:pt 12; rangi: kijani kibichi;">
Kwa hivyo, aya zote kwenye ukurasa zinaonyeshwa jinsi tulivyotaka, na msimbo haujafungwa na vitambulisho na sifa zao. Hebu fikiria uhifadhi wa saizi ya faili ikiwa ukurasa wako una maandishi mengi!
Tafadhali kumbuka kuwa tulipobainisha mtindo wa fonti, baada ya jina Times New Roman tulibainisha mtindo wa serif, unaomaanisha fonti yoyote iliyo na serif. Ikiwa mashine ya mtumiaji wa mwisho haina fonti ya Times New Roman iliyosakinishwa, kivinjari kitabadilisha fonti zozote zinazopatikana za serif, na onyesho la ukurasa litakuwa karibu iwezekanavyo na ulichokusudia. Kwa kuongezea, mfano uliopewa utaeleweka kwa IE (4.0 na zaidi) na NN (4.0 na zaidi). Ingawa ni lazima tuhifadhi mara moja kwamba Netscape Navigator haitumii vipengele vyote vilivyotolewa na CSS na DHTML, na hii, bila shaka, haiongezi idadi ya mashabiki wake.
Mfano hapo juu unatumia kupachika mtindo moja kwa moja kwenye lebo ya hati - kinachojulikana kama mtindo wa ndani. Njia hii ya kuunganisha CSS na faili ya HTML inapendekezwa katika kesi pekee - ikiwa mtindo huu umepangwa kutumika kwa kipengele kimoja tu kwenye ukurasa mmoja wa tovuti. Ikiwa mtindo lazima utumike kwa vipengele kadhaa kwenye ukurasa huo huo au kwa kurasa kadhaa mara moja, mbinu nyingine za kuunganisha CSS na HTML zinapendekezwa, ambazo tutazungumzia ijayo.
Kugawa mitindo kwa vipengele vingi kwenye ukurasa mmoja - kuunda laha ya mtindo iliyopachikwa
Kufikia sasa tumekuwa tukizungumza juu ya kuweka mtindo mmoja tu kwa kipengele kimoja. Sasa tutajifunza jinsi ya kuunda karatasi za mtindo.
Wacha tuseme tunataka aya zote kwenye ukurasa zifanane na mfano uliotangulia, zenye vichwa vyote vya ngazi ya kwanza katika kijani kibichi Arial yenye alama 16, na vichwa vyote vya ngazi ya pili katika herufi 14 ya Helvetica iliyokoza italiki ya manjano-kijani. . Ili kufanya hivyo, tunahitaji kuunda ndani<голове>kurasa (mahali popote kati ya vitambulisho
Na) karatasi ya mtindo iliyoingia ambayo tutaandika sheria kadhaa mara moja. Ili kufanya hivyo, tengeneza lebo ya kontena ya karatasi ya mtindo kuanzia na lebo inayofungua. 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 za moja kwa moja), iliyoambatanishwa katika viunga vilivyopinda. . Syntax ya mfano hapo juu ni:saizi ya herufi: 12pt;
rangi: kijani kibichi;
saizi ya herufi: 16pt;
font-uzito: ujasiri;
font-familia: Arial, sans-serif;
saizi ya herufi: 14pt;
rangi: kijani njano;
font-uzito: ujasiri;
mtindo wa fonti: italiki;
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):
font-family: "Times New Roman", serif;
saizi ya herufi: 12pt;
rangi: kijani kibichi;
font-familia: Arial, sans-serif;
saizi ya herufi: 16pt;
font-uzito: ujasiri;
font-familia: Arial, sans-serif;
saizi ya herufi: 14pt;
rangi: kijani njano;
font-uzito: ujasiri;
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