Vytvoření webové stránky je skvělý způsob, jak se vyjádřit. I když existuje mnoho nástrojů pro vytváření webových stránek, samotné psaní je zábavný způsob, jak se dozvědět více o tom, jak webové stránky fungují v zákulisí. Dobrým projektem pro začátečníky je vytvořit web a přidat obrázek na pozadí pomocí CSS. Tento projekt vás uvede do provozu s HTML i CSS.
Co je to CSS?
CSS znamená Cascading Style Sheet. Jedná se o programovací jazyk, který umožňuje stylovat značkovací jazyky. Jeden takový značkovací jazyk je HTML nebo Hyper-Text Markup Language. HTML se používá k vytváření webových stránek. Ačkoli můžete ovládat některé styly webových stránek pomocí HTML, CSS nabízí mnohem více možností ovládání a designu.
Vytvoření základního webu pomocí HTML
Vzhledem k tomu, že CSS je pouze stylovací jazyk, je třeba jej nejprve používat. K zahájení hraní s CSS bude stačit velmi základní web. Na naší stránce se zobrazí „Hello World“.
Ahoj světe
Pokud nejste obeznámeni s HTML, pojďme rychle projít tím, co dělají všechny prvky. Jak již bylo zmíněno, HTML je značkovací jazyk, což znamená, že používá značky k označení textu. Kdykoli uvidíte slovo obklopené
<> je to značka. Existují dva typy značek, značka označující začátek sekce pomocí <> a značka označující konec sekce pomocíV našem příkladu máme čtyři značky. The html značka označuje, které prvky jsou součástí webu. The hlava tag obsahuje informace o záhlaví, které se na stránce nezobrazují, ale jsou potřebné k vytvoření stránky. Všechny zobrazené prvky jsou mezi tělo značky. Máme pouze jeden zobrazený prvek, p štítek. Říká webovému prohlížeči, že text je odstavec.
Příbuzný: 10 jednoduchých příkladů kódu CSS, které se můžete naučit za 10 minut
Chcete vědět více o používání CSS? Vyzkoušejte nejprve tyto základní příklady kódu CSS a poté je použijte na své vlastní webové stránky.
Přidání CSS do HTML
Nyní, když máme jednoduchou stránku, můžeme styl přizpůsobit pomocí CSS. Naše stránka je teď docela jednoduchá a není toho moc, co bychom mohli udělat, ale začněme tím, že necháme vyniknout náš odstavec, abychom jej mohli odlišit od pozadí přidáním ohraničení.
Ahoj světe
Náš odstavec bude nyní obklopen černým okrajem. Přidání popisu stylu v CSS do naší značky odstavce řeklo webu, jak styl odstavce upravit. Můžeme přidat další popisy. Pojďme zvětšit prázdné místo nebo polstrování kolem našeho odstavce a vycentrovat náš text.
Ahoj světe
Náš web vypadá lépe, ale náš HTML začíná vypadat chaoticky se všemi těmito popisy ve značce odstavce. Tuto informaci můžeme přesunout do naší hlavičky. Naše záhlaví slouží pro informace, které potřebujeme ke správnému zobrazení webu.
Ahoj světe
Náš HTML je nyní čitelnější. Všimnete si, že jsme museli některé věci změnit. Značka stylu informuje o stylu webového prohlížeče, ale také o tom, co je třeba stylovat. V našem příkladu jsme použili dva různé způsoby, jak mu říct, co má stylovat. The p ve značce stylu říká webovému prohlížeči, aby použil tento styl na všechny značky odstavců. The #ourParagraph sekce říká, že pouze prvky stylu s id náš odstavec. Všimněte si toho id informace byla přidána ke značce p v našem těle.
Import souboru CSS na váš web
Přidáním informací o stylu do záhlaví je náš kód mnohem snazší číst. Pokud však chceme stylizovat mnoho různých stránek stejným způsobem, musíme tento text přidat na začátek každé stránky. To se nemusí zdát jako hodně práce, můžete ji nakonec zkopírovat a vložit, ale vytvoří to hodně práce, pokud budete chtít prvek později změnit.
Místo toho budeme uchovávat informace CSS v samostatném souboru a importovat soubor, aby stránku upravil. Zkopírujte a vložte informace mezi značkami stylu do nového souboru CSS ourCSSfile.css.
p {
zarovnání textu: na střed
}
#ourParagraph {
styl ohraničení: pevný;
polstrování: 30px;
}Poté soubor importujte do souboru HTML.
Ahoj světe
Přidání obrázku na pozadí pomocí CSS
Nyní, když máte pevnou základnu v HTML a CSS, bude přidání obrázku na pozadí hračkou. Nejprve určete, kterému prvku chcete dát obrázek na pozadí. V našem příkladu přidáme pozadí na celou stránku. To znamená, že chceme změnit styl tělo. Pamatujte, že značky těla obsahují všechny viditelné prvky.
tělo{
background-image: url ("sky.jpg");
}
p {
zarovnání textu: na střed
}
#ourParagraph {
styl ohraničení: pevný;
polstrování: 30px;
}Chcete-li změnit styl těla v CSS, použijte nejprve tělo klíčové slovo. Poté přidejte složené závorky jako předtím {}. Všechny informace o stylu pro tělo musí být mezi složenými závorkami. Atribut stylu, který chceme změnit, je obrázek na pozadí. Existuje mnoho atributů stylu. Neočekávejte, že si je zapamatujete všechny. Záložka a Vlastnosti CSS cheat-sheet s atributy, které si chcete pamatovat.
Příbuzný: 8 skvělých efektů HTML, které může každý přidat na své webové stránky
Za atributem použijte dvojtečku k označení, jak atribut změníte. Chcete-li importovat obrázek, použijte url (). znamená to, že používáte odkaz směřující na obrázek. Umístěte umístění souboru do závorek mezi uvozovky. Nakonec řádek ukončete středníkem. Přestože mezery v CSS nemají význam, použijte odsazení, aby se CSS snáze četlo.
Náš příklad vypadá takto:
Pokud se váš obrázek nezobrazuje správně z důvodu jeho velikosti, můžete jej přímo změnit. V CSS však existují atributy stylu pozadí, které můžete použít ke změně pozadí. Obrázky, které jsou menší než pozadí, se budou automaticky opakovat na pozadí. Chcete-li to vypnout, přidejte opakování pozadí: neopakovat; k tvému živlu.
Existují také dva způsoby, jak vytvořit obrázek tak, aby pokryl celé pozadí. Nejprve můžete nastavit velikost pozadí na velikost obrazovky pomocí velikost pozadí: 100% 100%;, ale tím se obraz roztáhne a může obraz příliš zkreslit. Pokud nechcete, aby se proporce obrazu změnily, můžete také nastavit velikost pozadí na Pokrýt. Cover způsobí, že obrázek na pozadí zakryje pozadí, ale obraz nezkreslí.
Změna barvy pozadí
Pojďme změnit poslední věc. Nyní, když máme pozadí, je náš odstavec těžko čitelný. Udělejme jeho pozadí bílé. Proces je podobný. Prvek, který chceme upravit, je #ourParagraph. # Označuje, že „ourParagraph“ je název ID. Dále chceme nastavit barva pozadí atribut k bílé.
tělo{
background-image: url ("sky.jpg");
}
p {
zarovnání textu: na střed
}
#ourParagraph {
barva pozadí: bílá;
styl ohraničení: pevný;
polstrování: 30px;
}Mnohem lepší.
Pokračování v navrhování vašeho webu pomocí CSS
Nyní, když víte, jak změnit styl různých prvků HTML, je obloha limit! Základní metoda pro změnu atributů stylu je stejná. Určete prvek, který chcete změnit, a popište, jak změnit atribut. Nejlepší způsob, jak se dozvědět více, je hrát si s různými atributy. Vyzvěte sebe, abyste dále změnili barvu textu.
Chcete se naučit HTML pro kódování vlastních webů a aplikací? Pomocí těchto příkladů a zdrojových kódů webových stránek se můžete naučit HTML a CSS.
- Programování
- HTML
- Webový design
- CSS
J. Seaton je autor vědy, který se specializuje na členění složitých témat. Má doktorát z univerzity v Saskatchewanu; její výzkum se zaměřil na využití herního učení ke zvýšení zapojení studentů online. Když nepracuje, najdete ji, jak čte, hraje videohry nebo pracuje na zahradě.
Přihlaste se k odběru našeho zpravodaje
Připojte se k našemu zpravodaji s technickými tipy, recenzemi, bezplatnými elektronickými knihami a exkluzivními nabídkami!
Ještě jeden krok…!
V e-mailu, který jsme vám právě poslali, potvrďte svou e-mailovou adresu.