Tip:
Highlight text to annotate it
X
>> Speak: Så det är faktiskt inte det bästa utforma att blandas CSS med HTML.
Snarare är det bäst att faktor ut din CSS, lägga den någonstans centralt, och
på något sätt tillämpa den på taggar i din webbsida.
För att uppnå detta kan vi faktiskt sluta hjälp av Style-attributet och istället
använda en stil tagg, som hör hemma i chef för en webbsida vid sidan av, för
exempel, din titel.
>> Låt oss ge det ett försök och åter genomföra en hemsida för John Harvard
med hjälp av Style-taggen.
Jag har redan fått oss började här med tre divar för
John Harvards hemsida.
Men låt oss först nu gå upp till denna första div och lägga till ett nytt attribut,
nämligen ID, och ange att en unik identifierare för denna div
ska vara, till exempel, citat unquote "Top", ett godtyckligt namn, men
beskrivande i att denna div är faktiskt högst upp på min sida.
>> För nästa div, låt oss ge det en annat ID citat unquote
"Mitten" och låt oss ge det tredje div ett ID för citat unquote "botten." Vi
Nu har tre unika identifierare till vilken vi kan tillämpa vissa CSS
egenskaper, men först, låt oss återvända till chefen för den här sidan.
Precis ovanför titeln här, jag gå vidare och definiera stil
och stäng sedan stil.
>> Inne i detta nu, kommer jag att definiera några CSS-egenskaper, nämligen
Samma som jag tidigare hade i Style attribut, men här de ska vara
centralt definierade.
För att göra detta, kommer jag att ange pundet symbolen följt av toppen, och därmed
som anger att följande CSS egenskaper bör gälla oavsett
HTML-element har den unika identifierare av toppen.
Jag sedan kommer att ha några öppna och slutna klamrar, och jag ska
specificera, säg, skall teckenstorleken vara 36 bildpunkter, ska typsnitt vikt vara djärv.
>> För att hålla rent, jag sätter varje av dessa egenskaper nu på egen hand
linje, men det är bara en stilistisk konvention.
Under detta, låt oss nu definiera en annan väljare, så att säga.
Detta för HTML-tagg som har unik identifierare i mitten.
Och här ska vi ange en teckenstorlek av 24 bildpunkter, lägre än den som en annan
väljare för botten, och inuti av det, låt oss ange ett
teckenstorlek på 12 pixlar.
>> Låt oss nu spara, ändra behörighet på, och ladda den här sidan i en webbläsare,
chmod ett plus r css-1.html.
Vi öppnar upp Chrome och besök http://localhost/css-1.html.
Inte illa.
Exakt som jag tänkt, men jag skulle vilja ta saker ett steg längre nu och
center John Harvards text.
Nu för att göra det, kan jag linda hela sidan i en div som jag
gjorde ett tidigare exempel.
Eller jag kan vara mer smart och inser att alla dessa divs är inne i
min sida kropp, så varför inte bara gälla en eller flera CSS-egenskaper för kroppen
tagga sig själv?
>> För att göra detta, låt oss göra detta.
Låt oss gå tillbaka till gedit här.
Låt oss bläddra tillbaka upp till Style-taggen, och låt oss ange en väljare bara
använder den taggen namn, Body.
Därunder, låt oss sätta våra klammerparenteser följt av text-align center.
Låt oss nu spara sidan och ladda om det inne i den webbläsaren.
Ladda om den i Chrome, och voila.
Vi har nu John Harvards sida centrerad som vi tänkt.