Vytvořte šablonu stylů CSS
Stejným způsobem jsme vytvořili samostatný textový soubor pro HTML, vytvoříte textový soubor pro CSS. Pokud pro tento proces potřebujete vizuály, přečtěte si první výukový program. Tady jsou kroky k vytvoření šablony stylů CSS v poznámkovém bloku:
- Vybrat Soubor> Nový v Poznámkovém bloku získáte prázdné okno
- Uložte soubor jako CSS kliknutím Soubor
- Přejděte do složky my_website na pevném disku
- Změň "Uložit jako typ: „do“Všechny soubory"
- Pojmenujte souborstyles.css"(vynechat uvozovky) a kliknout Uložit
Propojte šablonu stylů CSS s vaším HTML
Jakmile máte styl pro váš web, budete jej muset přiřadit k samotné webové stránce. K tomu použijete značku odkazu. Umístěte následující značku odkazu kdekoli v rámci.
Opravte okraje stránky
Když píšete XHTML u různých prohlížečů se naučíte jednu věc, protože se zdá, že všechny mají různé okraje a pravidla pro zobrazování věcí. Nejlepší způsob, jak se ujistit, že váš web vypadá ve většině prohlížečů stejně, je neumožnit výchozí nastavení prohlížeče jako okraje.
Raději začneme stránky v levém horním rohu, bez dalšího polstrování nebo okraje kolem textu. Dokonce i když budeme vyplňovat obsah, nastavili jsme okraje na nulu, takže začneme se stejnou prázdnou břidlicí. Chcete-li to provést, přidejte do dokumentu styles.css následující:
html, tělo {
okraj: 0px;
výplň: 0px;
ohraničení: 0px;
vlevo: 0px;
nahoře: 0px;
}
Změna písma na stránce
Písmo je často první věc, kterou budete chtít na webové stránce změnit. Výchozí písmo na webové stránce může být ošklivá a je ve skutečnosti na samotném webovém prohlížeči, takže pokud nedefinujete písmo, opravdu nevíte, jak bude vaše stránka vypadat.
Typicky byste změnili písmo v odstavcích nebo někdy v celém samotném dokumentu. U tohoto webu definujeme písmo na úrovni záhlaví a odstavce. Přidejte do dokumentu styles.css následující:
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 jsme s 1em jako základní velikostí odstavců a položek seznamu a poté jsme to použili k nastavení velikosti mých nadpisů. Neočekáváme, že použijeme nadpis hlubší než h4, ale pokud máte v plánu, budete jej chtít také stylovat.
Zajímavější odkazy
Výchozí barvy odkazů jsou modrá a fialová pro nenavštívené a navštívené odkazy. I když je to standardní, nemusí odpovídat barevnému schématu vašich stránek, tak to změňme. Do souboru styles.css přidejte následující:
odkaz {
rodina fontů: Arial, Helvetica, sans-serif;
barva: # FF9900;
výzdoba textu: podtržení;
}
a: navštíveno {
barva: # FFCC66;
}
a: hover {
pozadí: #FFFFCC;
váha písma: tučné;
}
Nastavili jsme tři styly odkazů, a: odkaz jako výchozí, a: navštívený, když byl navštíven, změníme barvu a a: hover. S: hover máme odkaz získat barvu pozadí a jít tučně zdůraznit, že je to odkaz, na který chcete kliknout.
Styling navigační sekce
Jelikož jsme do HTML vložili nejprve navigační (id = "nav") sekci, pojďme ji nejdříve upravit. Musíme naznačit, jak široká by měla být, a dát větší okraj na pravou stranu, aby se hlavní text nenarazil proti němu. také kolem toho ohraničíme.
Přidejte do svého CSS dokumentu následující CSS:
#nav {
šířka: 225px;
pravý okraj: 15px;
ohraničení: středně pevné # 000000;
}
#nav li {
styl seznamu: žádný;
}
.zápatí {
velikost písma: 0,75 em;
jasné: oba;
šířka: 100%;
zarovnání textu: na střed;
}
Vlastnost list-style nastaví seznam uvnitř navigační sekce tak, aby neobsahoval žádné odrážky ani čísla, a styl .footer upravuje sekci autorských práv tak, aby byla menší a vycentrovaná v sekci.
Umístění hlavní sekce
Umístěním hlavní sekce s absolutním umístěním si můžete být jisti, že na vaší webové stránce zůstane přesně tam, kam chcete. Udělali jsme to 800px široký, aby se přizpůsobil větší monitory, ale pokud máte menší monitor, můžete jej zúžit.
Do dokumentu styles.css vložte následující:
#hlavní {
šířka: 800px;
nahoře: 0px;
pozice: absolutní;
vlevo: 250 pixelů;
}
Stylizace odstavců
Jelikož jsem již nastavil písmo odstavce výše, chtěl jsem dát každému odstavci trochu „nakopnout“, aby lépe vynikl. Udělal jsem to tak, že jsem na horní část umístil ohraničení, které zvýrazňovalo odstavec více než jen samotný obrázek.
Do dokumentu styles.css vložte následující:
.horní linie {
border-top: thick solid # FFCC00;
}
Rozhodli jsme se, že to uděláme jako třídu nazvanou „topline“, místo abychom definovali všechny odstavce tímto způsobem. Tímto způsobem, pokud se rozhodneme, že chceme mít odstavec bez horní žluté čáry, můžeme ve značce odstavce jednoduše vynechat class = "topline" a nebude mít horní ohraničení.
Styling obrázků
Obrázky mají obvykle kolem sebe ohraničení, to není vždy viditelné, pokud obrázek není odkaz, ale rádi bychom měli třídu uvnitř Šablona stylů CSS, která automaticky vypne okraj. Pro tuto šablonu stylů jsme vytvořili třídu „noborder“ a většina obrázků v dokumentu je součástí této třídy.
Druhou speciální částí těchto obrázků je jejich umístění na stránce. Chtěli jsme, aby byli součástí odstavce, ve kterém byli, aniž by k jejich zarovnání používali tabulky. Nejjednodušší způsob, jak to udělat, je použít vlastnost float CSS.
Do dokumentu styles.css vložte následující:
#main img {
plavat vlevo;
pravý okraj: 5px;
spodní okraj: 15px;
}
.žádná hranice {
ohraničení: 0px žádný;
}
Jak vidíte, na obrázcích jsou také nastaveny vlastnosti okrajů, aby se zajistilo, že nebudou rozbity proti plovoucímu textu, který je vedle nich v odstavcích.
Nyní se podívejte na svou dokončenou stránku
Jakmile uložíte svůj CSS, můžete stránku pet.htm znovu načíst ve webovém prohlížeči. Vaše stránka by měla vypadat podobně jako na tomto obrázku, obrázky by měly být zarovnány a navigace umístěna správně na levé straně stránky.
Stejným způsobem postupujte u všech svých interních stránek pro tento web. Chcete mít jednu stránku pro každou stránku v navigaci.