01 z 10
Vytvorte štýl štýlu CSS
Rovnakým spôsobom, ako sme vytvorili samostatný textový súbor pre HTML, vytvoríte textový súbor pre CSS. Ak potrebujete vizuálne informácie o tomto procese, pozrite si prvý tutoriál. Tu sú kroky na vytvorenie hárku štýlov CSS v programe Poznámkový blok:
- Zvoľte Súbor> Nový v programe Poznámkový blok pre získanie prázdneho okna
- Uložte súbor ako CSS kliknutím na položku Súbor
- Prejdite do priečinka my_website na pevnom disku
- Zmeňte "Uložiť ako typ:" na "Všetky súbory"
- Zadajte názov súboru "styles.css" (nechajte z úvodzoviek) a kliknite na tlačidlo Uložiť
02 z 10
Prepojte štýl šablóny CSS s vaším kódom HTML
Po získaní štýlu pre vaše webové stránky budete musieť priradiť ju k samotnej webovej stránke. K tomu použite značku odkazu. Umiestnite nasledujúcu značku odkazu kdekoľvek vo vnútri značiek
svojho dokumentu pets.htm:03 z 10
Opravte okraje stránky
Keď píšete XHTML pre rôzne prehliadače, jedna vec, ktorú sa naučíte je, že všetci majú odlišné okraje a pravidlá pre to, ako zobrazujú veci. Najlepším spôsobom, ako sa uistite, že vaše stránky vyzerajú rovnako vo väčšine prehliadačov, je nepovoliť veciam, ako sú okraje, ako predvolené výberu prehliadača.
Rád by som začal svoje stránky v ľavom hornom rohu, bez ďalšieho polstrovania alebo okrajov okolo textu. Aj keď sa chystám vložiť obsah, nastavím okraje na nulu, takže začínam s rovnakou prázdnou tabuľkou. Ak to chcete urobiť, pridajte do svojho dokumentu styles.css nasledovné:
html, body {
okraj: 0px;
polstrovanie: 0px;
okraj: 0px;
vľavo: 0px;
vrchol: 0px;
}
04 z 10
Zmena písma na stránke
Písmo je často prvá vec, ktorú budete chcieť zmeniť na webovej stránke. Predvolené písmo na webovej stránke môže byť ošklivé a je vlastne samotný webový prehliadač, takže ak neurčíte písmo, naozaj nebudete vedieť, ako bude vaša stránka vyzerať.
Zvyčajne by ste zmenili písmo na odseky alebo niekedy aj na celý dokument. Pre túto lokalitu definujeme písmo na úrovni hlavičky a odseku. Pridajte do svojho dokumentu styles.css nasledovné:
p, li {
písmo: 1em Arial, Helvetica, sans-serif;
}
h1 {
písmo: 2em Arial, Helvetica, sans-serif;
}
h2 {
písmo: 1.5m Arial, Helvetica, sans-serif;
}
h3 {
písmo: 1.25em Arial, Helvetica, sans-serif;
}
Začal som s 1em ako základná veľkosť pre odseky a položky zoznamu a potom som ich použil na nastavenie veľkosti pre moje titulky. Neočakávam, že používam nadpis hlbšie ako h4, ale ak máte v pláne, že budete chcieť aj štýl.
05 z 10
Zlepšenie vašich odkazov
Predvolené farby pre odkazy sú modré a fialové pre neviditeľné a navštívené odkazy. Aj keď je to štandardné, nemusí to vyhovovať farebnej schéme vašich stránok, a preto ju zmeniť. Do svojho súboru styles.css pridajte nasledovné:
odkaz {
font-family: Arial, Helvetica, sans-serif;
farba: # FF9900;
textová dekorácia: podčiarknutie;
}
a: navštívil {
farba: # FFCC66;
}
a: vznášať sa {
pozadie: #FFFFCC;
font-weight: tučné;
}
Nastavil som tri štýly odkazov, odkaz ako: predvolený, a: navštívil, keď bol navštívený, zmením farbu a: vznášať sa. S: Hover Mám odkaz dostať farbu pozadia a ísť tučne zdôrazniť, že je to odkaz, na ktorý sa má kliknúť.
06 z 10
Styling navigačnej časti
Keďže v sekcii HTML najprv umiestnime sekciu navigácie (id = "nav"), najprv ju napíšeme. Musíme uviesť, aký by mal byť rozsah a mal by sa dať väčší priestor na pravej strane, aby sa hlavný text nestal proti nemu. Takisto som dal hranicu okolo neho.
Pridajte nasledujúci CSS do dokumentu styles.css:
#nav {
šírka: 225px;
margin-right: 15px;
hranica: stredne tuhá # 000000;
}
#nav li {
štýl zoznamu: žiadne;
}
.footer {
veľkosť písma: .75em;
jasné: obe;
šírka: 100%;
text-align: center;
}
Vlastnosť v štýle zoznamu nastavuje zoznam v navigačnej sekcii tak, aby neobsahoval žiadne odrážky alebo čísla, a štýl .foter strieda sekciu s autorskými právami, aby bola menšia a vystredená v sekcii.
07 z 10
Umiestnenie hlavnej časti
Umiestnením hlavnej časti s absolútnou polohou si môžete byť istí, že zostane presne tam, kde chcete zostať na vašej webovej stránke. Robil som si moju šírku 800 pixelov, aby som mohol umiestniť väčšie monitory, ale ak máte menší monitor, možno by ste to chceli užšie.
Umiestnite do svojho dokumentu styles.css nasledovné:
#Hlavná {
šírka: 800 pixlov;
vrchol: 0px;
poloha: absolútna;
vľavo: 250px;
}
08 z 10
Styling vaše odseky
Vzhľadom na to, že som už nastavil vyššie uvedené písmeno odseku, chcel by som každému odseku poskytnúť trochu viac "kopu", aby bolo lepšie. Urobil som to tým, že som umiestnil hranicu na vrchu, ktorý zvýraznil tento bod viac ako samotný obrázok.
Umiestnite do svojho dokumentu styles.css nasledovné:
.topline {
horná hranica: silná tuhá látka # FFCC00;
}
Rozhodol som sa, že to urobím ako triedu nazvanú "horná línia", a nie len definovať všetky odseky týmto spôsobom. Týmto spôsobom, ak sa rozhodnem, že chcem mať odsek bez hornej žltej čiarky, môžem v tagu odstrániť triedu = "horná línia" a nebude mať hornú hranicu.
09 z 10
Stylovanie obrázkov
Obrázky majú zvyčajne okraj okolo nich, nie je to vždy viditeľné, pokiaľ obrázok nie je odkaz, ale rád by som mal mať triedu v mojom štýle CSS, ktorý automaticky vypne hranicu. Pre túto šablónu štýlov som vytvoril triedu "noborder" a väčšina obrázkov v dokumente je súčasťou tejto triedy.
Druhou špeciálnou časťou týchto obrázkov je ich umiestnenie na stránke. Chcela som, aby boli súčasťou odseku, v ktorom sa nachádzali, bez použitia tabuliek na zosúladenie. Najjednoduchší spôsob, ako to urobiť, je použiť vlastnosť float CSS.
Umiestnite do svojho dokumentu styles.css nasledovné:
#main img {
plavák: vľavo;
margin-right: 5px;
margin-bottom: 15px;
}
.noborder {
hranica: 0px žiadne;
}
Ako vidíte, na obrázkoch sú nastavené aj okrajové vlastnosti, aby ste sa uistili, že nie sú rozbité proti plovoucom textom, ktorý je vedľa nich v odsekoch.
10 z 10
Teraz sa pozrite na Vašu dokončenú stránku
Po uložení vášho CSS môžete znovu načítať stránku pets.htm vo vašom webovom prehliadači. Vaša stránka by mala vyzerať podobne ako na obrázku, pričom snímky sú vyrovnané a navigácia je správne umiestnená na ľavej strane stránky.
Postupujte podľa rovnakých krokov pre všetky vaše interné stránky pre tieto stránky. Chcete mať jednu stránku pre každú stránku vo vašej navigácii.