SPEAKER: Se pare cÄ HTML nu este singura limba pe care o puteÈi folosi în interiorul a unei pagini web. PuteÈi folosi ceva numit CSS, sau Cascading Style Sheets, precum Èi. CSS vÄ permite sÄ specificaÈi mai mult tocmai estetica unui web paginÄ, inclusiv aspectul Èi dimensiunile Èi culori Èi fonturi Èi mult mai mult. De exemplu, sÄ creeze o paginÄ web aici numit CSS0 care reprezintÄ o de start, initiala pentru, sÄ zicem, John Harvard.
Pe aceastÄ paginÄ, vom avea John Harvard nume, sub care va fi un mesaj frumos pentru vizitatorii sÄi, sub care va fi un subsol, cu spune, unele informaÈii de copyright. Pentru a face acest lucru, haideÈi sÄ definim trei divizii pentru pagina folosind un tag numit div. Deschis div suport, John Harvard, aproape div suport, un alt div suport deschis, iar acum vom specifica ceva cum ar fi, bun venit la pagina mea de acasÄ! Èi sÄ Ã®nchideÈi acest div, de asemenea.
Èi acum un al treilea Èi ultim div, drepturi de autor. Doar pentru a fi de lux, permiteÈi-mi sÄ folosesc acum un HTML entitate, un simbol care reprezintÄ un personaj care nu ar putea altfel tip de pe tastaturÄ. Ãn special, am de gând sÄ fac ampersand, lira, 169, punct Èi virgulÄ. Se pare cÄ este codul numeric pentru simbolul dreptului de autor. Atunci sÄ specificaÈi John Harvard aici în partea de jos. SÄ Ã®nchidem div Èi salvaÈi fiÈierul.
Acum, ceea ce este aceastÄ etichetÄ div? Tag-ul div pur Èi simplu defineste o divizie a paginii, care este în esenÈÄ o regiune dreptunghiularÄ. Deci, în acest moment, am trei regiuni dreptunghiulare, una în partea de sus pe de altÄ parte. Deci, de acum, efectul este aproape la fel de dacÄ am avut trei paragrafe. Dar nu vom vedea la fel de mult spaÈiu alb între ele.
SÄ salvÄm acest fiÈier, schimba sale permisiuni, Èi sÄ ia o privire pentru o clipÄ Ã®n Chrome. Chmod o + r CSS0.html. SÄ deschidem acum Chrome Èi vizita http://localhost.CSS0.html. Ãntr-adevÄr, aici este o pagina de start pentru John Harvard. Hai acum stiliza un pic mai mult tocmai utilizarea unor CSS.
Ãnapoi la gedit, sÄ mergem în aceastÄ tag-ul div prima Èi a adÄuga un stil atribut precizând cÄ aÈ vrea un dimensiunea fontului de, sÄ zicem, 36 de pixeli, sau px. Èi aÈ vrea greutatea de acest font sÄ fie îndrÄzneÈ, mai degrabÄ decât implicit, ceea ce este normal. Pentru al doilea div, sÄ specificaÈi un alt atribut de stil, care are o dimensiunea de 24 pixeli, aÈa un pic mai mic. CotaÈii apropiate dupÄ virgulÄ.
Ãn cele din urmÄ, în acest al treilea div, sÄ facem Stilul este egal cu dimensiunea citat, font, Èi sÄ spunem de 12 de pixeli de data asta. Aproape citat dupÄ virgulÄ. ObservaÈi cÄ atunci am par a avea specificat un pic de stilizare pentru fiecare dintre aceste trei divs folosind, se pare, CSS. De fapt, sintaxa pe care le vedeÈi în între aceste ghilimele duble este CSS, CSS special proprietÄÈi cu valori. Èi pentru cÄ Ã®n primul rând tag-ul, unde am avut douÄ astfel de proprietÄÈi, dimensiunea fontului Èi greutate font, eu pur Èi simplu separat le cu punct Èi virgulÄ.
Acum, doar de dragul de stil, I punct Èi virgulÄ, de asemenea, incluse la sfârÈitul fiecÄrui rând. Dar ei nu sunt strict necesare, mai ales atunci când aveÈi un singur proprietate definit. SÄ salvÄm acum fiÈierul Èi reîncÄrcaÈi în Chrome, Èi sÄ vedem ce efectul net este. Ãnapoi în Chrome aici, sÄ faceÈi clic pe Reload.
Acum avem un pic mai interesant de start, initiala pentru John Harvard, prin care prima linie cu numele lui, care este în interiorul de care în primul rând div, este de 36 pixeli înÄlÈime Èi, de asemenea, aldine, prin care a doua linie, care este în acest al doilea div, este de 24 pixeli înalt, dar nu aldine. Èi în care linia a treia în a treia div este de 12 pixeli înÄlÈime Èi, de asemenea, nu ingrosate. Dar sÄ presupunem cÄ acum aÈ vrea sÄ schimbe toate acest text peste astfel încât este centrat.
AÈ putea alinia fiecare a individului divs ca fiind centrate. Dar mai uÈor, aÈ putea încheia cele trei divs în interiorul celei de a patra div, un div pÄrinte, ca sÄ spunem aÈa, Èi specificaÈi cÄ div Èi toate sale descendenÈii trebuie sÄ fie textul aliniat centru? SÄ aruncÄm o privire.
In interiorul gedit, sÄ mergem înapoi la mea corp Èi se adaugÄ un nou div pânÄ sus cu div, stil este egal cu, citez, centru de aliniere a textului, aproape cita dupÄ virgulÄ. Èi acum, hai sÄ mergem mai departe Èi liniuÈÄ toate de acele linii pe care le tastat înainte. Èi de mai jos cÄ a treia div, sÄ Ã®nchide acest nou div.
Cu alte cuvinte, pentru cÄ cele trei divs originale sunt acum copii, astfel încât sÄ vorbesc, de un nou div pÄrinte Èi am a specificat cÄ aÈ vrea sÄ alinieze textul care div pÄrinte în centrul a paginii, cÄ proprietatea va fi moÈtenit de toate aceste copii. Ãntr-adevÄr, sÄ salvaÈi fiÈierul Èi aruncÄm o privire într-un browser. Hai sÄ reîncÄrcaÈi în Chrome. Èi acolo l-am, o mai frumos au de start, initiala pentru John Harvard.