>> 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.