>> Speak: Det visar sig att HTML är inte det enda språk som du kan använda i
på en webbsida.
Du kan använda något som kallas CSS, eller Cascading Style Sheets, liksom.
CSS kan du ange mer just estetik av en webbsida
sida, inklusive layout och storlekar och färger och typsnitt och mycket mer.
Till exempel, låt oss skapa en webbsida här kallat css0 som representerar en
hemsidan för, säg, John Harvard.
>> På denna sida kommer vi att ha John Harvards namn, under vilket kommer att vara
ett fint budskap till sina besökare, under som kommer att vara en sidfot, med
säga, en del copyrightinformation.
För att göra detta, låt oss definiera tre divisioner till sidan med en tagg
kallas div.
Öppet fäste div, John Harvard, nära fäste div, en annan öppen fäste div,
och nu ska vi ange något liknande, välkommen till min hemsida!
Och låt oss avsluta denna div, liksom.
>> Och nu en tredje och sista div, upphovsrätt.
Bara för att vara snygga, låt mig använda nu en HTML enhet, en symbol som representerar
ett tecken på att du inte kunde något annat skriver på tangentbordet.
Framför allt kommer jag att göra et-tecken, pund, 169, semikolon.
Det visade sig att det är den numeriska koden för copyrightsymbol.
Sedan ska specificera John Harvard här nedtill.
Låt oss stänga div och spara filen.
>> Nu, vad är detta div-taggen?
Div-taggen definierar helt enkelt en division på sidan, som huvudsakligen är en
rektangulära området.
Så vid denna tidpunkt, jag har tre rektangulära regioner, en ovanpå
för det andra.
Så för nu, är effekten nästan lika om jag hade tre stycken.
Men vi ser inte riktigt lika mycket tomt utrymme mellan dem.
>> Låt oss spara den här filen, ändra behörigheter, och ta en titt för en
ögonblick i Chrome.
Chmod a + r CSS0.html.
Låt oss nu öppna Chrome och besök http://localhost.CSS0.html.
I själva verket, här är en hemsida för John Harvard.
Låt oss nu stilisera det lite mer exakt med hjälp av några CSS.
>> Tillbaka i gedit, vi går in i detta första div-taggen och lägga till en stil
attribut som anger att jag vill ha en teckenstorlek på, säg, 36 bildpunkter, eller px.
Och jag skulle vilja vikten av detta teckensnitt att vara djärv snarare än standard,
vilket är normalt.
För den andra div, låt oss ange en annan stil attribut som har en
teckenstorlek på 24 pixlar, så lite mindre.
Stäng citat efter semikolonet.
>> Slutligen, i denna tredje div, låt oss göra stil är lika citat, teckenstorlek, och
låt oss säga 12 bildpunkter den här gången.
Stäng citat efter semikolon.
Observera då att jag verkar ha specificerat lite av stilisering för
var och en av dessa tre divs använder, visar det sig, CSS.
I själva verket, den syntax som du ser i mellan dessa dubbla citationstecken är CSS,
specifikt CSS-egenskaper med värden.
Och för det första taggen, där jag hade två sådana egenskaper, teckenstorlek och
typsnitt vikt, jag bara separerade dem med ett semikolon.
>> Nu, bara för stilens skull, jag också ingår semikolon på
i slutet av varje linje.
Men de är inte absolut nödvändigt, speciellt när du bara har en
egendom definieras.
Låt oss nu spara filen och ladda om i Chrome, och se vad
nettoeffekten är.
Tillbaka i Chrome här, låt oss klicka på Uppdatera.
>> Nu har vi en något mer intressant hemsidan för John
Harvard, varigenom den första raden med hans namn, som är inne i det
första div, är 36 pixlar hög och även fetstil, varvid den andra raden,
som är i den andra div, är 24 pixlar hög, men inte fet.
Och varigenom den tredje raden i den tredje div är 12 pixlar hög och även
inte fet stil.
Men anta nu jag skulle vilja flytta all denna text över
sådan att den är centrerad.
>> Jag skulle kunna rikta in var och en av de enskilda DIV som är centrerad.
Men lättare, skulle jag slå in dem tre divar insidan av en fjärde div, en
ordnade div, så att säga, och ange att denna div och alla dess
ättlingar bör vara text linje centrum?
Låt oss ta en titt.
>> Inne i gedit, låt oss gå tillbaka till min kropp och lägga till en ny div upp topp med
div, lika stil citat unquote text align center, nära
citera efter semikolon.
Och nu, låt oss gå vidare och strecksatsen alla av de linjer som vi skrivit tidigare.
Och under det tredje div, låt oss stänga denna nya div.
>> Med andra ord, eftersom de tre ursprungliga divar är nu barn, så att
tala, för en ny förälder div och jag har anges att jag skulle vilja rikta in
Texten i den föräldern div i mitten på sidan, kommer denna egenskap att vara
ärvs av alla dessa barn.
Ja, låt oss spara filen och ta en titt i en webbläsare.
Låt oss ladda om i Chrome.
Och där har vi det, en ännu trevligare hemsidan för John Harvard.