Home-theater-designers
Vytvorenie webovej stránky je úžasný spôsob, ako sa vyjadriť. Napriek tomu, že existuje mnoho nástrojov na vytváranie webových stránok, je ich písanie zábavným spôsobom, ako sa dozvedieť viac o tom, ako webové stránky fungujú v zákulisí. Dobrý začiatočnícky projekt je vytvoriť webovú stránku a pridať obrázok na pozadí pomocou CSS. Tento projekt vás zavedie do HTML aj CSS.
Čo je to CSS?
CSS znamená Cascading Style Sheet. Je to programovací jazyk, ktorý vám umožňuje štylizovať značkovacie jazyky. Jeden taký značkovací jazyk je HTML alebo Hyper-Text Markup Language. HTML sa používa na vytváranie webových stránok. Napriek tomu, že niektoré štýly webových stránok môžete ovládať pomocou HTML, CSS ponúka oveľa viac možností ovládania a dizajnu.
Vytvorenie základnej webovej stránky pomocou HTML
Pretože CSS je len štýlový jazyk, na jeho použitie potrebujeme najskôr niečo na úpravu. Na to, aby sme si mohli hrať s CSS, bude stačiť úplne základná webová stránka. Na našej stránke sa zobrazí „Hello World“.
Hello World
V prípade, že nie ste oboznámení s HTML, poďme sa rýchlo pozrieť na to, čo všetky prvky robia. Ako už bolo spomenuté, HTML je značkovací jazyk, čo znamená, že pomocou značiek označuje text. Kedykoľvek uvidíte slovo obklopené je to značka. Existujú dva typy značiek, tag, ktorý označuje začiatok sekcie pomocou a jeden, ktorý označuje koniec sekcie pomocou. Text v sekcii má tiež uľahčiť pochopenie tohto rozlíšenia.
V našom prípade máme štyri značky. The html značka označuje, ktoré prvky sú súčasťou webovej stránky. The hlava tag 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 tagy. Máme iba jeden zobrazený prvok, p tag. Informuje webový prehliadač, že text je odsek.
Súvisiace: 10 jednoduchých príkladov kódu CSS, ktoré sa môžete naučiť za 10 minút
Pridanie CSS do HTML
Teraz, keď máme jednoduchú stránku, môžeme štýl prispôsobiť pomocou CSS. Naša stránka je v súčasnosti veľmi jednoduchá a nemôžeme toho veľa urobiť, ale začnime tým, že vynikne náš odsek, aby sme ho odlíšili od pozadia pridaním okraja.
Hello World
Náš odsek bude teraz obklopený čiernym okrajom. Pridanie popisu štýlu do CSS k značke odseku uviedlo na webovú stránku, ako odsek štylizovať. Môžeme pridať ďalšie popisy. Zvýšme prázdny priestor alebo odsadenie okolo nášho odseku a text vystredíme.
Hello World
Náš web vyzerá lepšie, ale náš HTML kód začína byť pri všetkých týchto popisoch v značke odseku neporiadny. Tieto informácie môžeme presunúť do našej hlavičky. Našou hlavičkou sú informácie, ktoré potrebujeme na správne zobrazenie webovej stránky.
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}
Hello World
Teraz je náš HTML čitateľnejší. Všimnete si, že niektoré veci sme museli zmeniť. Štýlová značka informuje o štýle webového prehliadača, ale aj o tom, čo je potrebné štylizovať. V našom prípade sme použili dva rôzne spôsoby, ako mu povedať, čo sa má štylizovať. 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 časť hovorí, že má štýl iba s id náš odsek . Všimni si id informácie boli pridané k tagu p v našom tele.
ako vymeniť router za nový
Import súboru CSS na váš web
Pridanie informácií o štýle do hlavičky výrazne zjednodušuje čítanie nášho kódu. Ak však chceme štylizovať mnoho 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 ho môžete skopírovať a vložiť do minulosti, ale ak budete chcieť prvok neskôr zmeniť, bude to veľa práce.
Namiesto toho ponecháme informácie CSS v samostatnom súbore a súbor importujeme, aby bola stránka upravená. Skopírujte a prilepte informácie medzi značky štýlu do nového súboru CSS ourCSSfile.css .
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}Potom importujte súbor do súboru HTML.
Hello World
Pridanie obrázku na pozadí pomocou CSS
Teraz, keď máte solídny základ v HTML a CSS, bude pridanie obrázku na pozadí hračkou. Najprv identifikujte, ktorému prvku chcete dať obrázok na pozadí. V našom prípade pridáme pozadie na celú stránku. To znamená, že chceme zmeniť štýl súboru telo . Štítky na tele obsahujú všetky viditeľné prvky.
body{
background-image: url('sky.jpg');
}
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}Ak chcete zmeniť štýl tela v CSS, najskôr použite telo kľúčové slovo. Potom pridajte zložené zátvorky tak, ako sme to urobili predtým {}. Všetky informácie o štýle tela musia byť medzi zloženými zátvorkami. Atribút štýlu, ktorý chceme zmeniť, je obrázok na pozadí . Existuje mnoho atribútov štýlu. Nečakajte, že si ich všetky zapamätáte. Cheat-list vlastností CSS si uložte do záložiek s atribútmi, ktoré si chcete zapamätať.
Súvisiace: 8 skvelých efektov HTML, ktoré môže ktokoľvek pridať na svoj web
môžete miešať 4 GB a 8 GB RAM
Za atribútom označte dvojbodkou, ako zmeníte atribút. Na importovanie obrázku použite url () . znamená to, že na odkaz na obrázok používate odkaz. Umiestnenie súboru umiestnite do zátvoriek medzi úvodzovky. Nakoniec riadok ukončite bodkočiarkou. Aj keď prázdny priestor v CSS nemá význam, na uľahčenie čítania CSS použite odsadenie.
Náš príklad vyzerá takto:
Ak sa váš obrázok kvôli veľkosti obrázka nezobrazuje správne, 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ú automaticky opakovať na pozadí. Ak to chcete vypnúť, pridajte pozadie-opakovanie:neopakovať; k svojmu živlu.
Existujú tiež dva spôsoby, ako nechať obrázok pokryť celé pozadie. Najprv môžete pomocou tlačidla nastaviť veľkosť pozadia na veľkosť obrazovky veľkosť pozadia: 100% 100%; , ale obrázok sa tým roztiahne a môže príliš skresliť. Ak nechcete, aby sa zmenili proporcie obrázku, môžete tiež nastaviť veľkosť pozadia na kryt . Cover spôsobí, že obrázok na pozadí bude pokrývať pozadie, ale nebude deformovať obrázok.
Zmena farby pozadia
Zmeňme ešte poslednú vec. Teraz, keď máme pozadie, je náš odsek ťažko čitateľný. Urobme jeho pozadie biele. Postup je podobný. Prvok, ktorý chceme upraviť, je #ourParagraph. Číslo # označuje, že „ourParagraph“ je názov ID. Ďalej chceme nastaviť farba pozadia prívlastok biely.
body{
background-image: url('sky.jpg');
}
p {
text-align: center
}
#ourParagraph {
background-color: white;
border-style: solid;
padding: 30px;
}Oveľa lepšie.
Pokračovanie v navrhovaní vašich webových stránok 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. Ďalej sa vyzvite, aby ste zmenili farbu textu.
zdieľam zdieľam Tweet E -mail 8 najlepších stránok pre kvalitné príklady kódovania HTMLChcete sa naučiť HTML kódovať vlastné webové stránky a aplikácie? Pomocou týchto príkladov webových stránok a zdrojového kódu sa naučíte HTML a CSS.
Čítajte ďalej Súvisiace témy- Programovanie
- HTML
- Vzhľad stránky
- CSS
J. Seaton je vedecký spisovateľ, ktorý sa špecializuje na delenie zložitých tém. Má doktorát z University of Saskatchewan; jej výskum sa zameral na využitie učenia založeného na hrách na zvýšenie zapojenia študentov online. Keď nepracuje, nájdete ju pri jej čítaní, hraní videohier alebo záhradníctve.
Viac od Jennifer Seatonprihlásiť sa ku odberu noviniek
Pripojte sa k nášmu bulletinu a získajte technické tipy, recenzie, bezplatné elektronické knihy a exkluzívne ponuky!
Kliknutím sem sa prihlásite na odber