SPEAKER: Rezultas, ke HTML ne estas la sola lingvo povas uzi interne de retpaÄo. Vi povas uzi iun nomita CSS, aÅ Kaskadan Style Sheets, tiel. CSS permesas precizigi multe pli precize la estetiko de la retejo paÄo, inkludante aranÄo kaj grandecoj kaj koloroj kaj tiparoj kaj multe pli. Ekzemple, ni kreos retpaÄon tie nomata CSS0 kiuj reprezentas hejmpaÄo por, ni diru, John Harvard.
Sur Äi tiu paÄo, ni devos John Harvard enoficigi, sub kiuj estos agrabla mesaÄo por siaj vizitantoj, malsupre de kiu estos piedlinio, kun diri, kelkaj kopirajta informo. Por fari tion, ni difini tri dividoj cxar la paÄon uzante etikedon vokis div. Malferma krampo div, John Harvard, fermo krampo div, alia malferma krampo div, kaj nun ni devos specifi ion kiel, bonvenon al mia hejmpaÄo! Kaj ni fermu div, tiel.
Kaj nun la tria kaj fina div aÅtorrajtoj. Nur esti imago, permesu al mi uzi nun HTML ento, simbolo kiu reprezentas karaktero, ke vi ne povis alie tajpi sur via klavaro. Specife, mi iras fari ampersand, funto, 169, punktokomo. Rezultas, ke estas la nombra kodo cxar la kopirajta simbolo. Do ni specifi John Harvard tie Äe la malsupro. Ni fermas la div kaj savu la dosieron.
Nun, kio estas Äi div etikedon? La div tag simple difinas divido de la paÄo, kiu estas esence rektangula regiono. Do, je tiu momento en tempo, mi havas tri rektangula regionoj, unu sur supro de la alia. Do nuntempe, la efiko estas preskaÅ tiel kvankam mi havis tri alineojn. Sed ni ne volas vidi tiom multe blanka spaco inter ili.
Ni savu tiu dosiero, ÅanÄi sian permesojn, kaj prenu serÄi momento en Chrome. Chmod a + r CSS0.html. Ni nun malfermi Chrome kaj vizito http://localhost.CSS0.html. Ja, jen hejmpaÄo John Harvard. Ni nun stylize Äin iom pli Äuste uzante kelkaj CSS.
Reen en gedit, ni iros al tiu unua div etikedon kaj aldonu stilon atribui specifante kiujn mi Åatus tiparo de, ekzemple, 36 rastrumeroj, aÅ px. Kaj mi Åatus la pezon de tiu tiparo kuragxi anstataÅ la defaÅlta, kio estas normala. Por la dua div, ni specifi alia stilo atributo kiu havas tiparo grandeco de 24 rastrumeroj, tiel iomete pli malgranda. Fermu citiloj post la punktokomo.
Fine, en Äi tiu tria div, ni faru stilo egalas citaĵo, tiparo, kaj diru 12 rastrumeroj tiu tempo. Fermu citaĵo post la punktokomo. Rimarku do, ke mi Åajnis havi specifita iom de estilización por Äiu el tiuj tri divs uzanta, rezultas, CSS. Fakte, la sintakson, kiun vi vidas en inter tiuj citiloj estas CSS, specife CSS propraĵoj per valoroj. Kaj por tiu unua etikedo, kie mi havis du tiaj propraĵoj, tiparo kaj tiparo pezo, mi simple apartigis ilin per punktokomo.
Nun, simple por stilo, kalkaj, mi ankaÅ inkludita punktokomojn Äe la fino de Äiu linio. Sed ili ne estas rigore necesa, aparte kiam vi havas nur unu propraĵo difinita. Ni nun savu la dosieron kaj reÅarÄi en Chrome, kaj vidi kion la pura efekto estas. Reen en Chrome Äi tie, ni klaku ReÅarÄi.
Nun ni havas iomete pli interesa hejmpaÄo por John Harvard, per kiu la unuan linion kun lia nomo, kiu estas interne de tiu unua div, estas 36 rastrumeroj grandkreska kaj ankaÅ grasa tiparfasono, per la dua linio, kio estas en tiu dua div, estas 24 rastrumeroj alta, sed ne grasa tiparfasono. Kaj per la tria linio en tiu tria div estas 12 rastrumeroj grandkreska kaj same Ne grasa tiparfasono. Sed supozu nun mi Åatus ÅanÄi Äio Äi teksto super tia, ke Äi estas centrita.
Mi povus vicigi Äiu de la individuo divs kiel esti centrita. Sed pli facile, mi povus kovri tiujn tri divs ene de kvara div, a patro div, por tiel diri, kaj specifi ke tio div kaj Äiuj ties posteuloj estu teksto vicigitaj centro? Ni rigardu.
Interne de gedit, ni reiru al mia korpo kaj aldoni novajn div supren supro kun div, stilo egalas citaĵo unquote teksto align centro, proksime quote post la punktokomo. Kaj nun, ni iru antaÅen kaj indent Äiuj de tiuj linioj kiuj ni tajpis antaÅe. Kaj sub tiu tria div, ni fermi tiun novan div.
En aliaj vortoj, Äar tiuj tri originalaj divs nun estas infanoj, tiel paroli, de nova patro div kaj mi specifis ke mi Åatus vicigi la teksto de tiu patro div en la centro de la paÄo, por ke posedaĵo estos heredita de Äiuj el tiuj infanoj. Ja, ni savu la dosieron kaj rigardu en retumilo. Ni freÅigi en Chrome. Kaj tie ni havas Äin, eÄ pli agrabla hejmpaÄo por John Harvard.