SPEAKER: Det viser sig, at HTML er ikke det eneste sprog du kan bruge inde af en webside. Du kan bruge noget, der hedder CSS, eller Cascading Style Sheets, så godt. CSS giver dig mulighed for at specificere meget mere netop æstetik af en web- side, herunder layout og størrelser, og farver og skrifttyper og meget mere. For eksempel, lad os oprette en webside her kaldet css0, der repræsenterer en startsiden for, siger, John Harvard. 

På denne side vil vi have John Harvards navn, under hvilket vil være en dejlig besked til sine besøgende, under som vil være en sidefod med sige, nogle oplysninger om ophavsret. For at gøre dette, lad os definere tre divisioner til siden ved hjælp af et tag kaldet div. Åbneparentes div, John Harvard tæt beslag div, en anden åbneparentes div, og nu vil vi angiver noget ligesom, velkommen til min startside! Og lad os lukke denne div, så godt. 

Og nu er en tredje og sidste div ophavsret. Bare for at være fancy, så lad mig bruge nu en HTML enhed, et symbol, der repræsenterer et tegn, som du ellers ikke ville kunne skriver på tastaturet. I særdeleshed vil jeg gøre ampersand, pund, 169, semikolon. Slår ud det er den numeriske kode for copyright-symbolet. Så lad os specificere John Harvard her i bunden. Lad os lukke div og gemme filen. 

Nu, hvad er det div-tag? Div tag blot definerer en division på den side, som er hovedsagelig en rektangulært område. Så på dette tidspunkt, jeg har tre rektangulære områder, den ene oven på den anden. Så for nu, effekten er næsten lige så selvom jeg havde tre stykker. Men vi vil ikke se helt så meget hvid plads i mellem dem. 

Lad os gemme denne fil, ændre dens tilladelser, og tag et kig for en øjeblik i Chrome. Chmod a + r CSS0.html. Lad os nu åbne Chrome og besøg http://localhost.CSS0.html. Faktisk, her er et hjem side efter John Harvard. Lad os nu stilisere det lidt mere præcist ved hjælp af nogle CSS. 

Tilbage i gedit, lad os gå ind i denne første div tag og tilføje en stil attribut specificerer, at jeg gerne vil have en skriftstørrelse på fx 36 pixels, eller px. Og jeg vil gerne vægt denne skrifttype til at være modige snarere end standard hvilket er normalt. For det andet div, lad os præcisere anden stil attribut, der har en skriftstørrelse 24 pixels, så en lille smule mindre. Luk citater efter semikolon. 

Endelig i denne tredje div, så lad os gøre stil er lig med citat, skriftstørrelse og lad os sige 12 pixels denne gang. Luk citat efter semikolon. Bemærk da, at jeg synes at have specificeret en smule stilisering for hver af disse tre divs bruger, det viser sig, CSS. Faktisk den syntaks, du ser i mellem disse anførselstegn er CSS, specifikt CSS egenskaber med værdier. Og for det første mærke, hvor jeg havde to sådanne egenskaber, skriftstørrelse og font vægt, jeg simpelthen adskilt dem med et semikolon. 

Nu, bare for stil skyld, jeg også inkluderet semikoloner på enden af ​​hver linje. Men de er ikke strengt nødvendigt, især når du kun har en ejendom defineret. Lad os nu gemme filen og genindlæse i Chrome, og se, hvad nettovirkningen er. Tilbage i Chrome her, lad os klikker Reload. 

Nu har vi en lidt mere interessant hjem side for John Harvard, hvorved den første linje med hans navn, som er inde i denne første div, er 36 pixels høj, og også fed, hvorved den anden linje, der er i denne anden div er 24 pixels høj, men ikke fed skrift. Og hvor den tredje linje i det pågældende tredjeland div er 12 pixels høj, og også ikke fed skrift. Men formoder nu vil jeg gerne flytte alt dette tekst over sådan, at det er centreret. 

Jeg kunne tilpasse hver af de enkelte divs som værende centreret. Men lettere, kunne jeg pakke dem tre divs inde i en fjerde div, en forælder div, så at sige, og angiv at denne div og alle dens efterkommere bør være tekst justeret center? Lad os tage et kig. 

Inde i gedit, lad os gå tilbage til min krop og tilføje en ny div up top med div, stil lig citat citat slut tekst align centrum, tæt citere efter semikolon. Og nu, lad os gå videre og led alle af disse linjer, som vi indtastet før. Og under det tredje div, lad os Luk dette nye div. 

Med andre ord, for de tre originale divs er nu børn, så at tale, af en ny forælder div og jeg har angivet, at jeg gerne vil tilpasse Teksten i denne forælder div i midten på siden, vil denne ejendom være arvet af alle disse børn. Faktisk, lad os gemme filen og tage et kig i en browser. Lad os opdateres om Chrome. Og der har vi det, en endnu pænere hjem side for John Harvard.