01 z 10
Vytvořte styl stylu CSS
Stejným způsobem, jak jsme vytvořili samostatný textový soubor pro HTML, vytvoříme textový soubor pro CSS. Pokud potřebujete vizuální informace o tomto procesu, podívejte se na první tutoriál. Zde jsou kroky pro vytvoření listu stylů CSS v programu Poznámkový blok:
- Zvolte Soubor> Nový v programu Poznámkový blok, abyste získali prázdné okno
- Uložte soubor jako CSS klepnutím na Soubor
- Přejděte do složky my_website na pevném disku
- Změňte typ "Uložit jako:" na "Všechny soubory"
- Název souboru "styles.css" (ponechte uvozovky) a klikněte na tlačítko Uložit
02 z 10
Propojte styl stylu CSS s HTML
Jakmile máte pro svoji webovou stránku styly, budete ji 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 značky
vašeho souboru pets.htm:03 z 10
Opravte okraje stránky
Když píšete XHTML pro různé prohlížeče, jednou se dozvíte, že se zdá, že všichni mají odlišné okraje a pravidla pro to, jak zobrazují věci. Nejlepší způsob, jak se ujistit, že vaše stránky vypadají ve většině prohlížečů to samé, je nepovolit výchozí možnosti prohlížečů jako okraje.
Dávám přednost tomu, abych začal své stránky v levém horním rohu bez dalšího polstrování nebo okraje textu. Dokonce i když se chystám vložit obsah, nastavil jsem okraje na nulu, takže začínám stejnou prázdnou tabulí. Chcete-li to provést, přidejte následující do dokumentu styles.css:
html, body {
margin: 0px;
polstrování: 0px;
hranice: 0px;
vlevo: 0px;
horní: 0px;
}}
04 z 10
Změna písma na stránce
Písmo je často první věc, kterou budete chtít změnit na webové stránce. Výchozí písmo na webové stránce může být ošklivé a je vlastně samotný webový prohlížeč, takže pokud neurčíte písmo, nebudete vědět, jak bude vypadat vaše stránka.
Typicky byste změnili písmo na odstavce nebo někdy i na celý dokument sám. Pro tuto stránku budeme definovat písmo na úrovni hlavičky a odstavce. Do dokumentu styles.css přidejte následující:
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 jsem s 1em jako základní rozměry pro odstavce a položky seznamu a pak jsem ho použil k nastavení velikosti titulků. Neočekávám, že použiji hlubší titul nad h4, ale pokud budete chtít, budete chtít také stylovat.
05 z 10
Tvorba vašich odkazů je zajímavější
Výchozí barvy pro odkazy jsou modré a fialové pro nevisované a navštívené odkazy. I když je to standardní, může se stát, že nebude vyhovovat barevnému schématu vašich stránek, takže to změneme. Do souboru styles.css přidejte následující:
odkaz {
font-family: Arial, Helvetica, sans-serif;
barva: # FF9900;
textová výzdoba: podtržení;
}}
a: navštívil {
barva: # FFCC66;
}}
a: hover {
pozadí: #FFFFCC;
font-weight: tučné;
}}
Nastavil jsem tři styly stylu, a: odkaz jako výchozí, a: navštívil, když byl navštívil, změnil barvu a a: vznášet se. S: Hover mám odkaz dostat barvu pozadí a jít tučně, aby zdůraznil, že je odkaz, na který se má kliknout.
06 z 10
Styling navigační části
Vzhledem k tomu, že nejprve vložíme navigační (id = "nav") do HTML, nejdřív si to napište. Potřebujeme uvést, jak široká by měla být, a uvést na pravé straně větší rozpětí, aby se hlavní text proti ní nezačal. Taky jsem si dal kolem něj hranice.
Do dokumentu styles.css přidejte následující CSS:
#nav {
šířka: 225px;
margin-right: 15px;
hranice: střední pevná # 000000;
}}
#nav li {
styl stylu: žádný;
}}
.zápatí {
velikost písma: .75em;
jasné: obě;
šířka: 100%;
text-align: center;
}}
Vlastnost ve stylu seznamu nastavuje seznam uvnitř navigačního oddílu tak, aby neobsahoval žádné odrážky nebo čísla, a styly .foteru se stane, že část autorských práv bude menší a upřednostňovaná v sekci.
07 z 10
Umístění hlavní sekce
Umístěním hlavní sekce do polohy absolutní můžete si být jisti, že zůstane přesně tam, kde chcete zůstat na vaší webové stránce. Dělal jsem můj široký 800 pixelů, abych mohl ubytovat větší monitory, ale pokud máte menší monitor, můžete to udělat užší.
Umístěte následující do dokumentu styles.css:
#hlavní {
šířka: 800px;
horní: 0px;
poloha: absolutní;
vlevo: 250px;
}}
08 z 10
Styling vaše odstavce
Vzhledem k tomu, že jsem již nastavil výše uvedené písmeno odstavce, chtěl bych dát každému odstavci trochu více "kopu", aby se vyléčil lépe. Udělal jsem to tím, že položím hranici na vrchol, která zvýraznila odstavec více než samotný obrázek.
Umístěte následující do dokumentu styles.css:
.horní linie {
horní hranice: hustá pevná látka # FFCC00;
}}
Rozhodl jsem se, že to udělám jako třídu nazvanou "horní linka", spíše než jen definovat všechny odstavce tímto způsobem. Tímto způsobem, pokud se rozhodnu, že chci mít odstavec bez horní žluté čáry, mohu jednoduše zanechat třídu = "horní linie" v tagu odstavce a nebude mít horní okraj.
09 z 10
Stylování obrázků
Obrázky mají obvykle kolem sebe ohraničený okraj, není to vždy viditelné, pokud není obrázek odkazem, ale ráda mám třídu v mém stylu stylů CSS, který automaticky vypíná okraj. Pro tento styl stylu jsem vytvořil třídu "noborder" a většina obrázků v dokumentu je součástí této třídy.
Další zvláštní část těchto obrázků je jejich umístění na stránce. Chtěla jsem, aby byly součástí odstavce, ve kterém byly, aniž by použily tabulky, aby je srovnaly. Nejjednodušší způsob, jak to udělat, je použít vlastnost CSS float.
Umístěte následující do dokumentu styles.css:
#main img {
plavat vlevo;
margin-right: 5px;
margin-bottom: 15px;
}}
.žádná hranice {
hranice: 0px žádné;
}}
Jak vidíte, na snímcích jsou také nastaveny vlastnosti okrajů, aby se zajistilo, že nebudou rozbité proti plovoucímu textu, který je vedle nich v odstavcích.
10 z 10
Nyní se podívejte na dokončenou stránku
Po uložení vašeho CSS můžete znovu načíst stránku pets.htm ve webovém prohlížeči. Vaše stránka by měla vypadat podobně jako na obrázku, se zarovnanými obrázky a správnou navigací umístěnou na levé straně stránky.
Postupujte podle stejných kroků pro všechny vaše interní stránky pro tyto stránky. Chcete mít jednu stránku pro každou stránku v navigaci.