Vytvorenie webovej stránky je vynikajúci spôsob, ako sa vyjadriť. Aj keď existuje veľa nástrojov na tvorbu webových stránok, samotné napísanie je zábavný spôsob, ako sa dozvedieť viac o tom, ako webové stránky fungujú v zákulisí. Dobrým projektom pre začiatočníkov je vytvoriť webovú stránku a pridať obrázok na pozadí pomocou CSS. Tento projekt vás uvedie do prevádzky s HTML aj CSS.
Čo je to CSS?
CSS je skratka pre kaskádové štýly. Je to programovací jazyk, ktorý vám umožňuje upravovať značkovacie jazyky. Jedným z takýchto značkovacích jazykov je HTML alebo Hyper-Text Markup Language. HTML sa používa na tvorbu webových stránok. Aj keď niektoré štýly webových stránok môžete ovládať pomocou kódu HTML, CSS ponúka oveľa viac možností kontroly a návrhu.
Vytvorenie základnej webovej stránky pomocou HTML
Pretože CSS je iba štýlový jazyk, na jeho použitie je potrebné najskôr niečo upravovať. Na to, aby sme sa začali hrať s CSS, bude stačiť veľmi základný web. Na našej stránke sa zobrazí „Hello World“.
Ahoj svet
Ak nie ste oboznámení s HTML, poďme rýchlo na to, čo robia všetky prvky. Ako už bolo spomenuté, HTML je značkovací jazyk, čo znamená, že na označovanie textu používa značky. Kedykoľvek uvidíte slovo obklopené <> je to značka. Existujú dva typy značiek: značka, ktorá označuje začiatok sekcie pomocou <> a tá, ktorá označuje koniec sekcie pomocou
V našom príklade máme štyri značky. The html značka označuje, ktoré prvky sú súčasťou webovej stránky. The hlava Značka obsahuje informácie o hlavičke, ktoré sa na stránke nezobrazujú, ale sú potrebné na vytvorenie stránky. Všetky zobrazené prvky sú medzi telo značky. Máme iba jeden zobrazený prvok, p značka. Webovému prehliadaču povie, že text je odsek.
Súvisiace: 10 jednoduchých príkladov kódu CSS, ktoré sa môžete naučiť za 10 minút
Chcete sa dozvedieť viac o používaní CSS? Na začiatok vyskúšajte tieto základné príklady kódu CSS, ktoré potom môžete použiť na svoje vlastné webové stránky.
Pridávanie CSS do HTML
Teraz, keď máme jednoduchú stránku, môžeme štýl prispôsobiť pomocou CSS. Naša stránka je momentálne dosť jednoduchá a nie je toho veľa, čo by sme mohli urobiť, ale začnime tým, že necháme vyniknúť náš odsek, aby sme ho odlíšili od pozadia pridaním orámovania.
Ahoj svet
Náš odsek bude teraz obklopený čiernym okrajom. Pridaním popisu štýlu do CSS k našej značke odseku sme povedali webu, ako má odsek štýlovať. Môžeme pridať viac popisov. Poďme zväčšiť prázdne miesto alebo polstrovanie okolo nášho odseku a vycentrovať náš text.
Ahoj svet
Náš web vyzerá lepšie, ale náš kód HTML začína byť nepríjemný so všetkými týmito popismi v značke odseku. Tieto informácie môžeme presunúť do našej hlavičky. Naša hlavička slúži na informáciu, ktorú potrebujeme na správne zobrazenie webovej stránky.
Ahoj svet
Náš HTML je teraz ľahšie čitateľný. Všimnete si, že sme museli niektoré veci zmeniť. Značka štýlu informuje o štýle webového prehľadávača, ale aj o tom, čo má štýl. V našom príklade sme použili dva rôzne spôsoby, ako povedať, čo má štýl. The p v značke štýlu hovorí webovému prehliadaču, aby použil tento štýl na všetky značky odsekov. The #ourParagraph v časti hovorí iba štýlom prvkov s id náš odsek. Všimni si id k značke p v našom tele boli pridané informácie.
Import súboru CSS na vaše webové stránky
Vďaka pridaniu informácií o štýle do hlavičky je náš kód oveľa ľahšie čitateľný. Ak však chceme štýlovať veľa rôznych stránok rovnakým spôsobom, musíme tento text pridať na začiatok každej stránky. To sa nemusí zdať veľa práce, koniec koncov to môžete skopírovať a prilepiť, ale vytvorí to veľa práce, ak chcete prvok neskôr zmeniť.
Namiesto toho si ponecháme informácie o CSS v samostatnom súbore a súbor naimportujeme tak, aby upravoval štýl stránky. Skopírujte a prilepte informácie medzi značkami štýlov do nového súboru CSS ourCSSfile.css.
p {
zarovnanie textu: na stred
}
#ourParagraph {
hraničný štýl: pevný;
výplň: 30px;
}Potom súbor importujte do súboru HTML.
Ahoj svet
Pridanie obrázka na pozadí pomocou CSS
Teraz, keď máte solídny základ v HTML a CSS, bude pridanie obrázka na pozadí hračkou. Najskôr identifikujte, ktorému prvku chcete dať obrázok na pozadí. V našom príklade pridáme pozadie na celú stránku. To znamená, že chceme zmeniť štýl telo. Pamätajte, že značky tela obsahujú všetky viditeľné prvky.
telo {
background-image: url ("sky.jpg");
}
p {
zarovnanie textu: na stred
}
#ourParagraph {
hraničný štýl: pevný;
výplň: 30px;
}Ak chcete zmeniť štýl tela v CSS, najskôr použite telo kľúčové slovo. Potom pridajte zložené zátvorky ako predtým {}. Všetky informácie o štýle pre telo musia byť medzi zloženými zátvorkami. Atribút štýlu, ktorý chceme zmeniť, je obrázok na pozadí. Existuje veľa atribútov štýlu. Nečakajte, že si ich všetky zapamätáte. Záložka a Vlastnosti CSS cheat-sheet s atribútmi, ktoré si chcete zapamätať.
Súvisiace: 8 skvelých efektov HTML, ktoré môže každý pridať na svoje webové stránky
Za atribútom označte dvojbodkou, ako zmeníte atribút. Ak chcete importovať obrázok, použite url (). znamená to, že na odkazovanie na obrázok používate odkaz. Umiestnite súbor do zátvoriek medzi úvodzovky. Nakoniec riadok ukončíme bodkočiarkou. Aj keď medzery v CSS nemajú význam, pomocou odsadenia uľahčite čítanie CSS.
Náš príklad vyzerá takto:
Ak sa váš obrázok nezobrazuje správne z dôvodu jeho veľkosti, môžete ho priamo zmeniť. V CSS však existujú atribúty štýlu pozadia, ktoré môžete použiť na zmenu pozadia. Obrázky, ktoré sú menšie ako pozadie, sa budú na pozadí automaticky opakovať. Ak to chcete vypnúť, pridajte opakovanie pozadia: neopakovať; k vášmu živlu.
Existujú tiež dva spôsoby, ako vytvoriť obrázok tak, aby pokryl celé pozadie. Najprv môžete nastaviť veľkosť pozadia na veľkosť obrazovky pomocou veľkosť pozadia: 100% 100%;, ale toto roztiahne obrázok a môže ho príliš zdeformovať. Ak nechcete, aby sa zmenili proporcie obrázka, môžete tiež nastaviť veľkosť pozadia na kryt. Cover spôsobí, že obrázok na pozadí pokryje pozadie, ale neskreslí ho.
Zmena farby pozadia
Zmeňme poslednú vec. Teraz, keď máme pozadie, je náš odsek ťažko čitateľný. Urobme jeho pozadie biele. Postup je obdobný. Prvok, ktorý chceme upraviť, je #ourParagraph. # Označuje, že „ourParagraph“ je identifikačné meno. Ďalej chceme nastaviť farba pozadia atribút bielej.
telo {
background-image: url ("sky.jpg");
}
p {
zarovnanie textu: na stred
}
#ourParagraph {
farba pozadia: biela;
hraničný štýl: pevný;
výplň: 30px;
}Oveľa lepšie.
Pokračovanie v navrhovaní vášho webu pomocou CSS
Teraz, keď viete, ako zmeniť štýl rôznych prvkov HTML, je obloha limitom! Základná metóda zmeny atribútov štýlu je rovnaká. Identifikujte prvok, ktorý chcete zmeniť, a popíšte, ako zmeniť atribút. Najlepším spôsobom, ako sa dozvedieť viac, je hrať sa s rôznymi atribútmi. Vyzvite seba, aby ste ďalej zmenili farbu svojho textu.
Chcete sa naučiť HTML na kódovanie vlastných webových stránok a aplikácií? Pomocou týchto príkladov a zdrojových kódov webových stránok sa môžete naučiť HTML a CSS.
- Programovanie
- HTML
- Vzhľad stránky
- CSS
J. Seaton je autor prírodných vied, ktorý sa špecializuje na búranie zložitých tém. Má doktorát na univerzite v Saskatchewane; jej výskum sa zameral na využitie herného učenia na zvýšenie zapojenia študentov online. Keď nepracuje, nájdete ju pri čítaní, hraní videohier alebo záhradníctve.
Prihlásiť sa ku odberu noviniek
Pripojte sa k nášmu bulletinu s technickými tipmi, recenziami, bezplatnými elektronickými knihami a exkluzívnymi ponukami!
Ešte jeden krok…!
V e-maile, ktorý sme vám práve poslali, potvrďte svoju e-mailovú adresu.
