SPEAKER: Si scopre che HTML non è l'unica lingua che è possibile utilizzare all'interno di una pagina web. È possibile utilizzare qualcosa chiamato CSS, o Cascading Style Sheets, pure. CSS consente di specificare più precisamente l'estetica di un web pagina, incluso il layout e dimensioni e colori e caratteri e molto altro. Per esempio, creiamo una pagina web qui chiamato CSS0 che rappresenta un home page per, diciamo, John Harvard. 

In questa pagina, avremo di John Harvard nome, sotto il quale sarà un bel messaggio per i suoi visitatori, al di sotto che sarà un piè di pagina, con dire, alcune informazioni sul copyright. Per fare questo, definiamo tre divisioni per la pagina utilizzando un tag chiamato div. Aperto staffa div, John Harvard, vicino Staffa div, un altro div parentesi aperta, e ora ci specificheremo qualcosa come, benvenuti a casa mia pagina! E chiudiamo questo div, pure. 

E ora una terza ed ultima div, diritto d'autore. Basta essere di fantasia, lasciatemi usare ora un HTML entità, un simbolo che rappresenta un personaggio che non si poteva altrimenti digitare sulla tastiera. In particolare, ho intenzione di fare commerciale, libbra, 169, punto e virgola. Scopre che è il codice numerico per il simbolo di copyright. Allora cerchiamo di specificare John Harvard qui nella parte inferiore. Chiudiamo il div e salvare il file. 

Ora, che cosa è questo tag div? Il tag div definisce semplicemente una divisione della pagina, che è essenzialmente un regione rettangolare. Quindi, in questo momento, ho tre regioni rettangolari, uno sopra dall'altra. Quindi per ora, l'effetto è quasi come se ho avuto tre paragrafi. Ma non vedremo abbastanza tanto spazio vuoto tra di loro. 

Salviamo questo file, cambiare la sua autorizzazioni e dare un'occhiata per un momento in Chrome. Chmod a + r CSS0.html. Diamo ora aprire Chrome e visita http://localhost.CSS0.html. Infatti, ecco una home page per John Harvard. Vediamo ora stilizzare un po 'più Proprio utilizzando alcuni CSS. 

Torna in gedit, andiamo in questa primo tag div e aggiungere uno stile Attribuisco precisando che mi piacerebbe un dimensione del carattere, per esempio, 36 pixel o px. E mi piacerebbe che il peso di questo font di essere audaci piuttosto che il predefinito, che è normale. Per il secondo div, cerchiamo di specificare altro attributo style che ha un dimensione carattere di 24 pixel, quindi un po 'più piccolo. Chiudere quotazioni dopo la virgola. 

Infine, in questa terza div, facciamolo stile uguale dimensione citazione, font, e diciamo 12 pixel questa volta. Chiudi citazione dopo il punto e virgola. Si noti poi che mi sembra di avere specificato un po 'di stilizzazione per ciascuno di questi tre div utilizzando, si scopre, CSS. In effetti, la sintassi che si vede in tra queste virgolette sono i CSS, CSS particolare proprietà con valori. E per questo primo tag, dove ho avuto due tali proprietà, dimensione del carattere e spessore del carattere, ho separato semplicemente li con una virgola. 

Ora, solo per amor di stile, virgola inclusi anche a Alla fine di ogni riga. Ma non sono strettamente necessari, soprattutto quando si ha un solo struttura definita. Passiamo ora salvare il file e ricaricare in Chrome, e vedere che cosa l'effetto netto è. Torna in Chrome qui, cerchiamo di fare clic su Ricarica. 

Ora abbiamo un po 'più interessante home page per John Harvard, per cui la prima riga con suo nome, che si trova all'interno di tale prima div, è di 36 pixel di altezza e anche grassetto, per cui la seconda linea, che è in quel secondo div, è di 24 pixel di altezza, ma non in grassetto. E in cui la terza linea in questa terza div è di 12 pixel di altezza e anche non grassetto. Ma suppongo che ora mi piacerebbe spostare tutto questo testo sopra tale che sia centrato. 

Ho potuto allineare ciascuno dei singoli div ad essere centrato. Ma più facilmente, potrei avvolgere quelle tre div all'interno di una quarta div, un div genitore, per così dire, e specificare che tale div e tutti i suoi discendenti dovrebbero essere testo allineato centro? Diamo uno sguardo. 

All'interno di gedit, torniamo alla mia corpo e aggiungere un nuovo rabbocco div con div, lo stile è uguale tra virgolette centro del testo align, vicino rispondere solo dopo il punto e virgola. E ora, andiamo avanti e trattino tutti di quelle linee che abbiamo scritto prima. E sotto quel terzo div, cerchiamo di chiudere questo nuovo div. 

In altre parole, perché quei tre div originali sono ora i bambini, in modo da Parlo, di un nuovo div genitore e ho specificato che mi piacerebbe allineare il testo che div genitore nel centro della pagina, che la proprietà sarà ereditata da tutti quei bambini. Infatti, salviamo il file e date un'occhiata in un browser. Facciamo ricaricare in Chrome. E non l'abbiamo, un ancora più bello home page per John Harvard.