Vytvorte šablónu štýlov CSS
Rovnakým spôsobom sme vytvorili samostatný textový súbor pre server HTML, vytvoríte textový súbor pre CSS. Ak potrebujete pre tento proces vizuálne prvky, pozrite si prvý návod. Tu sú kroky na vytvorenie šablóny štýlov CSS v poznámkovom bloku:
- Vyberte si Súbor> Nové v programe Poznámkový blok, aby ste získali prázdne okno
- Uložte súbor ako CSS kliknutím Súbor
- Prejdite do priečinka my_website na pevnom disku
- Zmeniť "Uložiť ako typ: „do“Všetky súbory"
- Pomenujte súborštýly.css„(úvodzovky vynechajte) a kliknite na ikonu Uložiť
Prepojte šablónu štýlov CSS s kódom HTML
Akonáhle máš štýl pre svoju webovú stránku ju budete musieť priradiť k samotnej webovej stránke. Použijete na to značku odkazu. Nasledujúcu značku odkazu umiestnite kdekoľvek v rámci domény.
Opravte okraje stránky
Keď píšeš XHTML pre rôzne prehliadače sa dozviete jednu vec, že sa zdá, že všetky majú odlišné okraje a pravidlá pre spôsob zobrazovania vecí. Najlepším spôsobom, ako sa ubezpečiť, že váš web vyzerá vo väčšine prehliadačov rovnako, je nepovoliť predvolené nastavenie okrajov, napríklad výber okrajov.
Radšej začneme stránky v ľavom hornom rohu, bez toho, aby boli okolo textu nejaké ďalšie polstrovanie alebo okraj. Aj keby sme obsah obsahovali, nastavili sme okraje na nulu, aby sme začínali s rovnakou prázdnou tabuľou. Ak to chcete urobiť, do dokumentu styles.css pridajte toto:
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 prvá vec, ktorú budete chcieť na webovej stránke zmeniť. Predvolená hodnota písmo na webovej stránke môže byť škaredý a je v skutočnosti na samotnom webovom prehliadači, takže ak neurčíte písmo, naozaj neviete, ako bude vaša stránka vyzerať.
Spravidla by ste zmenili písmo v odsekoch alebo niekedy v celom dokumente samotnom. Pre tento web definujeme písmo na úrovni hlavičiek a odsekov. Do dokumentu styles.css pridajte toto:
p, li {
písmo: 1em Arial, Helvetica, sans-serif;
}
h1 {
písmo: 2em Arial, Helvetica, sans-serif;
}
h2 {
písmo: 1.5em Arial, Helvetica, sans-serif;
}
h3 {
písmo: 1.25em Arial, Helvetica, sans-serif;
}
Začali sme s 1em ako základnou veľkosťou odsekov a položiek zoznamu a potom sme to použili na nastavenie veľkosti mojich nadpisov. Neočakávame, že použijeme nadpis hlbší ako h4, ale ak to plánujete, budete si ho chcieť tiež upraviť.
Zvyšovanie zaujímavosti vašich odkazov
Predvolené farby odkazov sú modrá a fialová pre nenavštívené a navštívené odkazy. Aj keď je to štandard, nemusí sa hodiť k farebnej schéme vašich stránok, tak to zmeňme. Do svojho súboru styles.css pridajte toto:
odkaz {
rodina fontov: Arial, Helvetica, sans-serif;
farba: # FF9900;
dekorácia textu: podčiarknutie;
}
a: navštívil {
farba: # FFCC66;
}
a: hover {
pozadie: #FFFFCC;
váha písma: tučné;
}
Nastavili sme tri štýly odkazov, a: odkaz ako predvolený, a: navštívený, keď už bol navštívený, zmeníme farbu a a: hover. Pomocou: hover máme odkaz, ktorý získa farbu pozadia a zvýrazní tučným písmom, aby zdôraznil, že ide o odkaz, na ktorý treba kliknúť.
Styling navigačnej sekcie
Pretože sme sekciu navigácie (id = "nav") vložili ako prvú do kódu HTML, upravme ju najskôr. Musíme naznačiť, aký široký by mal byť, a položiť väčší okraj na pravú stranu, aby sa hlavný text oň nenarazil. tiež okolo toho dáme hranicu.
Pridajte do svojho CSS dokumentu nasledujúci CSS:
#nav {
šírka: 225px;
pravý okraj: 15 pixelov;
orámovanie: stredne plné # 000000;
}
#nav li {
štýl zoznamu: žiadny;
}
.footer {
veľkosť písma: 0,75 em;
jasné: oboje;
šírka: 100%;
zarovnanie textu: na stred;
}
Vlastnosť štýlu zoznamu nastavuje zoznam vo vnútri sekcie navigácie tak, aby neobsahoval odrážky ani čísla, a štýl päty sekciu s autorskými právami zmenšuje a sústreďuje na stred sekcie.
Umiestnenie hlavnej časti
Umiestnením hlavnej časti do absolútnej polohy si môžete byť istí, že na vašej webovej stránke zostane presne tam, kam chcete. Nastavili sme šírku 800 pixelov väčšie monitory, ale ak máte menší monitor, možno ho budete chcieť zúžiť.
Do dokumentu styles.css vložte toto:
#hlavný {
šírka: 800px;
hore: 0px;
pozícia: absolútna;
vľavo: 250 pixelov;
}
Úprava odsekov
Keďže som už nastavil vyššie odsekové písmo, chcel som každému odseku dať trochu „nakopnutia“, aby lepšie vynikol. Urobil som to tak, že som na hornú časť umiestnil okraj, ktorý zvýraznil odsek, nielen samotný obrázok.
Do dokumentu styles.css vložte toto:
.topline {
horný okraj: hrubý pevný materiál # FFCC00;
}
Rozhodli sme sa to urobiť ako triedu zvanú „topline“, a nie iba definovať všetky odseky týmto spôsobom. Týmto spôsobom, ak sa rozhodneme, že chceme mať odsek bez hornej žltej čiary, môžeme v značke odseku jednoducho vynechať class = "topline" a nebude mať hornú hranicu.
Styling obrázkov
Obrázky majú zvyčajne orámovanie, ktoré nie je vždy viditeľné, pokiaľ nie je obrázkom odkaz, ale my by sme chceli mať v rámci triedy Šablóna štýlov CSS, ktorá automaticky vypne okraj. Pre túto šablónu štýlov sme vytvorili 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. Chceli sme, aby boli súčasťou odseku, v ktorom sa nachádzali, bez použitia tabuliek na ich zarovnanie. Najjednoduchší spôsob, ako to urobiť, je použitie vlastnosti float CSS.
Do dokumentu styles.css vložte toto:
#main img {
plavák: vľavo;
pravý okraj: 5 pixelov;
spodný okraj: 15px;
}
.noborder {
orámovanie: 0px žiadne;
}
Ako vidíte, na obrázkoch sú nastavené aj vlastnosti okrajov, aby ste sa uistili, že nie sú rozbité o pohyblivý text, ktorý je vedľa nich v odsekoch.
Teraz sa pozrite na svoju dokončenú stránku
Po uložení CSS môžete stránku pet.htm znova načítať vo webovom prehliadači. Vaša stránka by mala vyzerať podobne ako tá na tomto obrázku, obrázky by mali byť zarovnané a navigácia umiestnená správne na ľavej strane stránky.
Rovnakým spôsobom postupujte pri všetkých svojich interných stránkach pre tento web. Chcete mať jednu stránku pre každú stránku v navigácii.