Úprava štýlu webovej stránky vytvorenej v programe Poznámkový blok pomocou CSS

Prepojte šablónu so štýlmi CSS so svojím kódom HTML

​

Akonáhle budete mať a štýlový list pre vašu webovú stránku, budete ju musieť priradiť k samotnej webovej stránke. Ak to chcete urobiť, použite značku odkazu. Umiestnite nasledujúcu značku odkazu kdekoľvek v rámci

Opravte okraje stránky

Keď píšeš XHTML pre rôzne prehliadače sa naučíte jednu vec, a to, že sa zdá, že všetky majú rôzne okraje a pravidlá pre spôsob zobrazovania vecí. Najlepším spôsobom, ako sa uistiť, že váš web vyzerá vo väčšine prehliadačov rovnako, je nepovoliť veci, ako sú okraje, ako predvolené nastavenia prehliadača.

Uprednostňujeme začínanie stránok v ľavom hornom rohu bez dodatočného odsadenia alebo okrajov okolo textu. Aj keď ideme vyplniť obsah, okraje nastavíme na nulu, takže začíname s rovnakým prázdnym listom. Ak to chcete urobiť, pridajte do dokumentu styles.css nasledovné:

html,body { 
okraj: 0px; 
výplň: 0px; 
orámovanie: 0px; 
vľavo: 0px; 
hore: 0px; 
}

Zmena písma na stránke

Písmo je často prvou vecou, ​​ktorú budete chcieť na webovej stránke zmeniť. Predvolená hodnota písmo na webovej stránke môže byť škaredé a je to vlastne na samotnom webovom prehliadači, takže ak si nedefinujete písmo, naozaj neviete, ako bude vaša stránka vyzerať.

Typicky by ste zmenili písmo odsekov alebo niekedy aj celého dokumentu. Pre tento web definujeme písmo na úrovni hlavičky a odseku. Do svojho dokumentu styles.css pridajte nasledovné:

p, takže { 
písmo: 1em Arial, Helvetica, bezpätkové; 
} 
h1 { 
písmo: 2em Arial, Helvetica, bezpätkové; 
} 
h2 { 
písmo: 1,5em Arial, Helvetica, bezpätkové; 
} 
h3 { 
písmo: 1.25em Arial, Helvetica, bezpätkové; 
}

Začali sme s 1 em ako základnou veľkosťou pre odseky a položky zoznamu a potom sme to použili na nastavenie veľkosti pre moje nadpisy. Neočakávame, že použijeme nadpis hlbší ako h4, ale ak to plánujete, budete ho chcieť tiež upraviť.

Urobte svoje odkazy zaujímavejšie

Predvolené farby pre odkazy sú modrá a fialová pre nenavštívené a navštívené odkazy. Aj keď je to štandard, nemusí sa hodiť do farebnej schémy vašich stránok, takže to poďme zmeniť. Do súboru styles.css pridajte nasledujúce:

odkaz { 
rodina písiem: Arial, Helvetica, bezpätkové; 
farba: #FF9900; 
text-dekorácia: podčiarknutie; 
} 
a:navštívené { 
farba: #FFCC66; 
} 
a:hover { 
pozadie: #FFFFCC; 
font-weight: bold; 
}

Nastavili sme tri štýly odkazu, a:link ako predvolený, a:navštívený, keď bol navštívený, zmeníme farbu a a:hover. Pomocou a:hover získame farbu pozadia a tučným písmom zdôrazníme, že ide o odkaz, na ktorý treba kliknúť.

Úprava štýlu navigačnej časti

Keďže v HTML sme na prvé miesto umiestnili sekciu navigácie (id='nav'), najskôr ju upravme. Musíme naznačiť, aký široký má byť, a na pravú stranu umiestniť širší okraj, aby naň nenarážal hlavný text. tiež okolo toho umiestnime hranicu.

Pridajte nasledujúci CSS do svojho dokumentu styles.css:

#niesu { 
šírka: 225px; 
pravý okraj: 15px; 
ohraničenie: stredne pevné #000000; 
} 
#name in { 
štýl zoznamu: žiadny; 
} 
.footer { 
font-size: .75em; 
jasné: oboje; 
šírka: 100 %; 
text-align: center; 
}

Vlastnosť list-style nastaví zoznam vo vnútri navigačnej sekcie tak, aby nemal žiadne odrážky ani čísla, a .footer nastaví sekciu o autorských právach tak, aby bola menšia a vycentrovaná v rámci sekcie.

Umiestnenie hlavnej časti

Umiestnením hlavnej sekcie s absolútnym umiestnením si môžete byť istí, že zostane presne tam, kde chcete, aby zostala na vašej webovej stránke. Urobili sme to na šírku 800 pixelov, aby sa zmestili väčšie monitory , ale ak máte menší monitor, možno ho budete chcieť zúžiť.

Do dokumentu styles.css vložte nasledovné:

#hlavné { 
šírka: 800px; 
hore: 0px; 
pozícia: absolútna; 
vľavo: 250px; 
}

Štýl vašich odsekov

Keďže písmo odseku som už nastavil vyššie, chcel som každému odseku dodať trochu „nakopnutia“, aby lepšie vynikol. Urobil som to tak, že som na vrch dal orámovanie, ktoré zvýraznilo odsek viac ako len samotný obrázok.

Do dokumentu styles.css vložte nasledovné:

.heat { 
border-top: hrubá plná #FFCC00; 
}

Rozhodli sme sa to urobiť ako triedu s názvom 'horný riadok' namiesto toho, aby sme týmto spôsobom definovali všetky odseky. Týmto spôsobom, ak sa rozhodneme, že chceme mať odsek bez horného žltého riadku, môžeme jednoducho vynechať class='horný riadok' v značke odseku a nebude mať horný okraj.

Úprava štýlu obrázkov

Obrázky majú zvyčajne okolo seba orámovanie, ktoré nie je vždy viditeľné, pokiaľ obrázok nie je odkazom, ale radi by sme mali triedu v rámci Šablóna štýlov CSS, ktorá automaticky vypne orámovanie . Pre túto šablónu so štýlmi sme vytvorili triedu 'noborder' a väčšina obrázkov v dokumente je súčasťou tejto triedy.

Ďalšou špeciálnou časťou týchto obrázkov je ich umiestnenie na stránke. Chceli sme, aby boli súčasťou odseku, v ktorom boli, bez použitia tabuliek na ich zarovnanie. Najjednoduchší spôsob, ako to urobiť, je použiť vlastnosť float CSS.

Do dokumentu styles.css vložte nasledovné:

#main img { 
plavák: vľavo; 
pravý okraj: 5px; 
margin-bottom: 15px; 
} 
.noborder { 
ohraničenie: 0px žiadne; 
}

Ako vidíte, na obrázkoch sú nastavené aj vlastnosti okrajov, aby ste sa uistili, že sa nerozbijú o plávajúci text, ktorý je vedľa nich v odsekoch.

Teraz sa pozrite na svoju dokončenú stránku

Po uložení CSS môžete znova načítať stránku pets.htm vo svojom webovom prehliadači. Vaša stránka by mala vyzerať podobne ako na tomto obrázku, pričom obrázky by mali byť zarovnané a navigácia umiestnená správne na ľavej strane stránky.

Postupujte podľa rovnakých krokov pre všetky vaše interné stránky pre túto lokalitu. Chcete mať jednu stránku pre každú stránku vo svojej navigácii.