SPEAKER: Det viser seg at HTML er ikke det eneste språket du kan bruke inne av en web-side. Du kan bruke noe som kalles CSS, eller Cascading Style Sheets, så vel. CSS lar deg spesifisere mye mer nettopp estetikken i en web side, inkludert layout og størrelser og farger og fonter og mye mer. For eksempel, la oss lage en web-side her kalt css0 som representerer en hjemmesiden for, sier John Harvard. 

På denne siden vil vi ha John Harvards navn, under som vil være en hyggelig melding for sine besøkende, under som vil være en bunntekst, med si, noen informasjon om opphavsrett. For å gjøre dette, la oss definere tre divisjoner for siden å bruke en tag kalt div. Åpen brakett div, John Harvard, nær brakett div, annen åpen brakett div, og nå vil vi spesifisere noe lignende, velkommen til min hjemmeside! Og la oss lukke denne div, så vel. 

Og nå er en tredje og siste div, copyright. Bare for å være fancy, la meg bruke nå en HTML enhet, et symbol som representerer et tegn på at du ikke kunne ellers skriver på tastaturet. Spesielt kommer jeg til å gjøre -tegn, pund, 169, semikolon. Det viser seg at det er tallkode for opphavsretten symbol. Så la oss spesifisere John Harvard her nederst. La oss lukke div og lagre filen. 

Nå, hva er dette div tag? Div tag bare definerer en divisjon av den siden som er i hovedsak en rektangulært område. Så i dette øyeblikk i tid, har jeg tre rektangulære regioner, en på toppen for det annet. Så for nå, er effekten nesten like selv om jeg hadde tre avsnitt. Men vi vil ikke se ganske så mye tomrom i mellom dem. 

La oss lagre denne filen, endre sin tillatelser, og ta en titt for en øyeblikk i Chrome. Chmod a + r CSS0.html. La oss nå åpne opp Chrome og besøk http://localhost.CSS0.html. Faktisk, her er en hjemmeside for John Harvard. La oss nå stilisere det litt mer nettopp ved hjelp av noen CSS. 

Tilbake i gedit, la oss gå inn i dette første div tag og legge til en stil attributt som angir at jeg vil gjerne ha en skriftstørrelse på, si, 36 piksler, eller px. Og jeg vil gjerne vekten av denne fonten å være dristig i stedet for standard som er vanlig. For det andre div, la oss spesifisere en annen stil attributt som har en skriftstørrelse 24 piksler, så litt mindre. Lukk sitater etter semikolon. 

Til slutt, i dette tredje div, la oss gjøre stil lik sitat, skriftstørrelse og la oss si 12 piksler denne gangen. Lukk sitat etter semikolon. Legg merke til da at jeg synes å ha spesifisert en bit av stilisering for hver av disse tre divs bruker, det viser seg, CSS. Faktisk, syntaksen som du ser i mellom de doble anførselstegn er CSS, spesielt CSS egenskaper med verdier. Og for det første tag, der jeg hadde to slike eiendommer, skriftstørrelse og font vekt, jeg rett og slett skilt dem med et semikolon. 

Nå, bare for stilens skyld, jeg også inkludert semikolon på slutten av hver linje. Men de er ikke strengt nødvendig, spesielt når du bare har én Eiendommen definert. La oss nå lagre filen, og legg i Chrome, og se hva nettoeffekten er. Tilbake i Chrome her, la oss klikke Reload. 

Nå har vi en litt mer interessant hjemmesiden for John Harvard, der den første linjen med hans navn, som er inne i det første div, er 36 piksler høy og også fet skrift, der den andre linjen, som ligger i den andre div, er 24 piksler høyt, men ikke fet skrift. Og hvorved den tredje linjen i den tredje div er 12 piksler høy og også ikke fet skrift. Men sett nå vil jeg gjerne skifte alt dette tekst over slik at det er sentrert. 

Jeg kunne justere hver av de enkelte divs som blir sentrert. Men lettere, kunne jeg pakke inn de tre divs innsiden av en fjerde div, et forelder div, så å si, og angi at den div og alle dens etterkommere skal være tekst justert sentrum? La oss ta en titt. 

Innsiden av gedit, la oss gå tilbake til min kroppen og legge til en ny div opp toppen med div, tilsvarer quote unquote stil Juster teksten sentrum, nær sitere etter semikolon. Og nå, la oss gå videre og innrykk alle av de linjene som vi skrevet før. Og under det tredje div, la oss lukke denne nye div. 

Med andre ord, fordi de tre originale divs er nå barn, så å snakke, av en ny forelder div og jeg har spesifisert at jeg har lyst til å justere Teksten til at foreldre div i sentrum på siden, vil denne egenskapen være arvet av alle disse barna. Ja, la oss lagre filen og ta en titt i en nettleser. La oss lesse i Chrome. Og der har vi det, en enda bedre hjemmesiden for John Harvard.