SPEAKER: IzrÄdÄs, ka HTML nav vienÄ«gÄ valoda, ko var izmantot iekÅ¡pusÄ no tÄ«mekļa lapas. JÅ«s varat izmantot kaut ko sauc par CSS, vai Cascading Style Sheets, kÄ arÄ«. CSS ļauj norÄdÄ«t daudz vairÄk precÄ«zi estÄtika web lapas, ieskaitot izkÄrtojumu un izmÄriem, un krÄsas un fontus, un daudz ko citu. PiemÄram, pieÅemsim izveidot mÄjas lapu Å¡eit sauc CSS0, kas apzÄ«mÄ mÄjas lapa, piemÄram, John Harvard.
Å ajÄ lapÄ, mums bÅ«s John Harvard s nosaukums, zem kura bÅ«s jauka ziÅa par saviem apmeklÄtÄjiem, zem kas bÅ«s kÄjene, ar saka, daži autortiesÄ«bu informÄciju. Lai to izdarÄ«tu, pieÅemsim definÄt trÄ«s nodaļas par lapu, izmantojot tagu sauc div. AtvÄrt kronÅ¡teins div, John Harvard, close kronÅ¡teins div, vÄl viens atklÄtÄ kronÅ¡teins div, un tagad mÄs norÄdÄ«t kaut ko piemÄram, welcome uz manu mÄjas lapÄ! Un pieÅemsim slÄgt Å¡o div, kÄ labi.
Un tagad treÅ¡ais un pÄdÄjais div, autortiesÄ«bas. Tikai, lai bÅ«tu iedomÄtÄ, ļaujiet man izmantot tagad HTML persona, simbols, kas apzÄ«mÄ raksturu, kas jÅ«s varÄtu citÄdi rakstÄ«t uz tastatÅ«ras. Jo Ä«paÅ¡i, es esmu gatavojas darÄ«t Ampersand, mÄrciÅa, 169, semikols. IzrÄdÄs, ka ir ciparu kods par autortiesÄ«bu simbolu. Tad pieÅemsim precizÄt John Harvard Å¡eit apakÅ¡Ä. PieÅemsim aizveriet div un saglabÄjiet failu.
Tagad, kas ir Å¡Ä« div tagu? Div tag vienkÄrÅ¡i nosaka sadalÄ«jumu lapas, kas ir pÄc bÅ«tÄ«bas taisnstÅ«rveida apgabals. TÄtad Å¡ajÄ brÄ«dÄ«, man ir trÄ«s taisnstÅ«ra reÄ£ioniem, vienu uz augÅ¡u no otras puses. TÄtad tagad, efekts ir gandrÄ«z tikpat lai gan man bija trÄ«s punktus. Bet mÄs neredzam tik daudz atstarpe starp tÄm.
PieÅemsim saglabÄjiet Å¡o failu, mainÄ«t tÄs atļaujas, un to apskatÄ«t brÄ«dis Chrome. Chmod + r CSS0.html. PieÅemsim tagad atvÄrt Chrome un apmeklÄjumu http://localhost.CSS0.html. PatieÅ¡Äm, Å¡eit ir mÄjas lapa John Harvard. PieÅemsim tagad Stylize to nedaudz vairÄk TieÅ¡i izmantojot dažus CSS.
Atpakaļ gedit, iesim uz to Pirmais div tagu un pievienot stilu atribÅ«tu norÄdot, ka es gribÄtu fonta lielumu, teiksim, 36 pikseļi vai px. Un es gribÄtu svaru Å¡o fontu jÄbÅ«t drosmÄ«gai, nevis noklusÄjuma, kas ir normÄli. AttiecÄ«bÄ uz otro div, pieÅemsim precizÄt cita stila atribÅ«tu, kas ir fonta izmÄrs 24 pikseļi, tÄpÄc nedaudz mazÄks. AizvÄrt citÄ pÄc semikolu.
Visbeidzot, Å¡ajÄ treÅ¡ajÄ div, pieÅemsim do stils vienÄds quote, fonta lielumu, un teiksim 12 pikseļi Å¡oreiz. AizvÄrt quote pÄc semikolu. IevÄrojiet, tad man Å¡Ä·iet, ir norÄdÄ«ts mazliet stilizÄcijas par KatrÄ no Å¡iem trim divs lieto, izrÄdÄs, CSS. PatiesÄ«bÄ, sintakse, ka jÅ«s redzat starp Å¡Ä«m pÄdiÅas ir CSS, Ä«paÅ¡i CSS Ä«paÅ¡Ä«bas ar vÄrtÄ«bÄm. Un Å¡Ä« pirmÄ tag, kur man bija divas Å¡Ädas Ä«paÅ¡Ä«bas, fonta izmÄrs un fontu svaru, es vienkÄrÅ¡i atdalÄ«tas tos ar semikolu.
Tagad, tikai par stilu dÄļ, es iekļauti arÄ« semikoliem at gals katrÄ rindÄ. Bet viÅi nav absolÅ«ti nepiecieÅ¡ams, jo Ä«paÅ¡i, ja jums ir tikai viens Ä«paÅ¡ums definÄts. PieÅemsim tagad saglabÄjiet failu un pÄrlÄdÄt Chrome, un redzÄt, kas neto ietekme ir. Atpakaļ Chrome Å¡eit pieÅemsim noklikÅ¡Ä·iniet pÄrlÄdÄtu.
Tagad mums ir nedaudz vairÄk interesanti mÄjas lapa John Harvard, kur pirmajÄ rindÄ ar viÅa vÄrds, kas ir iekÅ¡pusÄ, kas Pirmais div, ir 36 pikseļi garÅ¡, un arÄ« trekniem, kurÄ otrÄ rinda, , kas ir minÄtajÄ otrajÄ div, ir 24 pikseļu garÅ¡, bet ne treknrakstu. Un kuru treÅ¡ajÄ rindÄ Å¡ajÄ treÅ¡daÄ¼Ä div ir 12 pikseļi garÅ¡, un arÄ« nav treknrakstÄ. Bet pieÅemsim, ka tagad es gribÄtu, lai pÄrslÄgtos visu Å¡o tekstu vairÄk tÄ, ka tas ir centrÄts.
Es varÄtu saskaÅot katra indivÄ«da divs kÄ ir centrÄts. Bet vieglÄk, es varÄtu wrap tos trÄ«s divs iekÅ¡pusÄ ceturto div, vecÄkiem div, tÄ sakot, un norÄdÄ«t ka Å¡is div un visas tÄs pÄcnÄcÄji bÅ«tu Teksts saskaÅots centru? PieÅemsim to apskatÄ«t.
IekÅ¡pusÄ gedit, iesim atpakaļ uz manu Ä·ermeÅa un pievienot jaunu div lÄ«dz augÅ¡Äjai div, stils ir vienÄds quote likt pÄdiÅas beigÄs teksta saskaÅot centrÄ, netÄlu quote pÄc semikolu. Un tagad, iesim uz priekÅ¡u un ievilkums visu Å o lÄ«niju, ko mÄs drukÄti pirms tam. Un zem Å¡Ä«s treÅ¡Äs div, pieÅemsim aizvÄrt Å¡o jauno div.
Citiem vÄrdiem, jo ââtie trÄ«s sÄkotnÄjie divs tagad bÄrni, tÄpÄc, lai runÄ, par jaunÄ mÄtes div, un es esmu norÄdÄ«ts, ka es gribÄtu, lai saskaÅotu tekstu Å¡Ä mÄtesuzÅÄmuma div centrÄ lapas, ka Ä«paÅ¡ums tiks mantoja visus Å¡os bÄrnus. TieÅ¡Äm, pieÅemsim saglabÄjiet failu un ieskatieties pÄrlÅ«kprogrammÄ. PieÅemsim pÄrlÄdÄt Chrome. Un tur mums ir tÄ, vÄl jaukÄk mÄjas lapa John Harvard.