>> SPEAKER: Så det er faktisk ikke den beste designe å blander CSS med HTML.
Snarere er det best å faktor ut CSS, sette den et sted sentralt, og
liksom bruke den til kodene i din nettside.
For å oppnå dette, kan vi faktisk stoppe bruker Stil attributtet og i stedet
bruke en stil tag, som hører til i leder av en nettside sammen, for
eksempel tittelen din.
>> La oss gi dette en sjanse og re-implementere en startside for John Harvard
bruker Stil tag.
Jeg har allerede fått oss i gang her med tre divs for
John Harvard sin hjemmeside.
Men la oss først nå går opp til dette første div og legge til en ny attributt,
nemlig ID, og ​​angir at en unik identifikator for denne spesielle div
skal være, for eksempel, sitat unquote "Top", et vilkårlig navn, men
beskrivende i at dette div er faktisk øverst på siden min.
>> For neste div, la oss gi det en annen ID sitat unquote
"Midten", og la oss gi den tredje div en ID sitat unquote "bunnen". Vi
nå har tre unike identifikator som vi kan bruke noen CSS
egenskaper, men først, la oss retur til hodet på denne siden.
Like over tittelen her, vil jeg gå videre og definere stilen
og deretter tett stil.
>> Innsiden av dette nå, jeg kommer til å definere noen CSS egenskaper, nemlig
samme som jeg tidligere hadde i stil attributter, men her vil de være
sentralt definert.
For å gjøre dette, kommer jeg til å oppgi pundet symbol etterfulgt av toppen, og dermed
spesifiserer at følgende CSS eiendommer bør gjelde uansett
HTML-element har den unike identifikator av toppen.
Jeg deretter kommer til å ha noen åpne og lukkede klammeparentes, og jeg kommer til å
spesifisere, si, skal skriftstørrelsen være 36 piksler, skal skrift vekt være fet.
>> For å holde ting rent, jeg setter hver av disse eiendommene nå på egen hånd
linje, men det er bare en stilistiske konvensjonen.
Under dette, la oss nå definere en annen velgeren, så å si.
Dette en for HTML-kode som har unik identifikator for midten.
Og her, la oss angi en skriftstørrelse av 24 piksler, under den annen
velger for bunnen, og inne av det, la oss angi en
skriftstørrelse 12 piksler.
>> La oss nå lagre, endre tillatelsene på, og laste inn denne siden i en nettleser,
chmod et pluss r css-1.html.
La oss åpne opp Chrome og besøk http://localhost/css-1.html.
Ikke dårlig.
Akkurat som jeg har planlagt, men jeg vil gjerne ta ting et skritt videre nå og
senter John Harvards tekst.
Nå for å gjøre det, kan jeg pakke inn hel side i en div som jeg
gjorde et tidligere eksempel.
Eller jeg kan være mer smart og innse at alle disse divs er innvendig
siden min kropp, så hvorfor ikke bare gjelde en eller flere CSS-egenskaper til legemet
tagge seg selv?
>> For å gjøre dette, la oss gjøre dette.
La oss gå tilbake til gedit her.
La oss bla tilbake til stilen tag, og la oss angi en velger bare
bruker koden navn, Body.
Under det, la oss sette våre klammeparentes etterfulgt av text-align center.
La oss nå lagre siden og laste det inne i den nettleseren.
Reload i Chrome, og voila.
Vi har nå John Harvard side sentrert som vi hadde tenkt.