Tip:
Highlight text to annotate it
X
>> SPEAKER: Dus het is eigenlijk niet de beste ontwerpen om CSS vermengen met HTML.
Integendeel, het is het beste om factor uit uw CSS, zet het ergens centraal, en
een of andere manier toe te passen op de tags in uw webpagina.
Om dit te bereiken, kunnen we eigenlijk stoppen met behulp van het attribuut Style en in plaats daarvan
gebruik maken van een Style-tag, die behoort bij de hoofd van een webpagina naast, voor
Bijvoorbeeld, je titel.
>> Laten we dit eens te proberen en opnieuw te implementeren een homepage voor John Harvard
het gebruik van de Style-tag.
Heb ik al leren ons begonnen hier met drie divs voor
John Harvard's homepage.
Maar laten we eerst nu gaan tot deze eerste div en voeg een nieuw attribuut,
namelijk ID, en geef die een unieke identifier voor deze specifieke div
is, bijvoorbeeld, citaat unquote "Top" een willekeurige naam, maar
beschrijvend dat deze div is inderdaad aan de bovenkant van mijn pagina.
>> Voor de volgende div, laten we het een verschillende ID citaat unquote
"Midden" en laten we de derde div een ID van citaat unquote "bottom." Wij
hebben nu drie unieke identificatiecode waaraan kunnen we een aantal CSS toepassen
eigenschappen, maar laten we eerst eens terugkeer aan het hoofd van deze pagina.
Net boven de titel hier, ik zal ga je gang en definiëren stijl
en sluit stijl.
>> Binnenkant van deze nu, ga ik definiëren sommige CSS-eigenschappen, namelijk de
dezelfde die ik eerder had in Stijl attributen, maar hier zullen ze
centraal gedefinieerd.
Om dit te doen, ik ga naar het asiel te geven symbool gevolgd door de top, waardoor
bepaald dat de volgende CSS eigenschappen moeten gelden voor wat
HTML element heeft de unieke identifier van de top.
Ik ben vervolgens naar een aantal open te hebben en gesloten accolades, en ik ga
specificeren, zeg, zal lettergrootte zijn 36 pixels, zal gewicht lettertype vet.
>> Om dingen schoon, ik zet elke van deze eigenschappen nu op zijn eigen
lijn, maar dat is slechts een stilistische conventie.
Onder deze, laten we nu een ander definiëren selector, om zo te zeggen.
Deze is voor de HTML-tag die heeft unieke identificatie van het midden.
En hier, laten we geef een lettergrootte van 24 pixels, het andere gedeelte
selector voor de bodem, en de binnenkant van die, laten we geef een
lettergrootte van 12 pixels.
>> Laten we het nu redden, dat de machtigingen op, en laad deze pagina in een browser,
chmod een plus r css-1.html.
Laten we openen Chrome en bezoek http://localhost/css-1.html.
Niet slecht.
Precies zoals ik van plan, maar ik wil graag dingen nu een stap verder en
tekst centrum John Harvard.
Nu om dit te doen, kon ik wikkel de hele pagina in een div als ik
deed een eerder voorbeeld.
Of ik kan slimmer worden en beseffen dat al deze divs zijn binnenin
mijn pagina's lichaam, dus waarom niet gewoon van toepassing een of meer CSS-eigenschappen voor het lichaam
zelf taggen?
>> Om dit te doen, laten we dit doen.
Laten we teruggaan naar gedit gaan hier.
Laten scroll terug naar de Style-tag, en laten we geef een selector net
gebruik van die tag naam, Body.
Onder dat, laten we onze accolades gevolgd door text-align center.
Laten we nu de pagina opslaan en herladen het binnen van die browser.
Herladen in Chrome, en voila.
We hebben nu pagina John Harvard gecentreerd zoals de bedoeling.