Izrada web stranice izvrstan je način da se izrazite. Iako postoji mnogo alata za izradu web stranica, sami ih napišite zabavan način da saznate više o tome kako web stranice rade iza kulisa. Dobar početnički projekt je stvaranje web stranice i dodavanje pozadinske slike s CSS-om. Ovaj će vas projekt pokrenuti s HTML-om i CSS-om.

Što je CSS?

CSS je skraćenica od Cascading Style Sheet. To je programski jezik koji vam omogućuje oblikovanje označnih jezika. Jedan od takvih označnih jezika je HTML ili Hyper-Text Markup Language. HTML se koristi za izradu web stranica. Iako nekim stilom web stranice možete upravljati pomoću HTML-a, CSS nudi mnogo više mogućnosti kontrole i dizajna.

Izrada osnovne web stranice s HTML-om

Budući da je CSS samo jezik stila, da bismo ga koristili, prvo nam treba nešto za oblikovanje. Vrlo osnovna web stranica bit će nam dovoljna da se počnemo igrati sa CSS-om. Na našoj će se stranici prikazati "Hello World." 





Pozdrav svijete

U slučaju da niste upoznati s HTML-om, brzo pređimo na to što rade svi elementi. Kao što je spomenuto, HTML je označni jezik, što znači da koristi oznake za označavanje teksta. Kad god vidite riječ okruženu s

instagram viewer
<> to je oznaka. Postoje dvije vrste oznaka, oznaka koja označava početak odjeljka pomoću <> i ona koja označava kraj odjeljka pomoću

U našem primjeru imamo četiri oznake. The html Oznaka označava koji su elementi web stranice. The glava Oznaka sadrži informacije o zaglavlju koje se ne prikazuju na stranici, ali su potrebne za stvaranje stranice. Svi prikazani elementi nalaze se između tijelo oznake. Imamo samo jedan prikazani element, str označiti. Internet pregledniku govori da je tekst odlomak.

Povezano: 10 jednostavnih primjera CSS koda koje možete naučiti u 10 minuta

10 jednostavnih primjera CSS koda koje možete naučiti u 10 minuta

Želite li znati više o korištenju CSS-a? Isprobajte ove osnovne primjere CSS koda za početak, a zatim ih primijenite na vlastitim web stranicama.

Dodavanje CSS-a u HTML

Sad kad imamo jednostavnu stranicu, stil možemo prilagoditi CSS-om. Naša je stranica trenutno prilično jednostavna i ne možemo puno učiniti, ali krenimo od toga da istaknemo naš odlomak kako bismo ga mogli razlikovati od pozadine dodavanjem obruba. 





Pozdrav svijete


Sada će naš odlomak biti okružen crnim obrubom. Dodavanjem opisa stila u CSS-u našoj oznaci odlomka web mjestu je rečeno kako se oblikuje odlomak. Možemo dodati još opisa. Povećajmo razmak ili dodavanje prostora oko našeg odlomka i centrirajte naš tekst. 





Pozdrav svijete


Naše web mjesto izgleda bolje, ali naš HTML počinje izgledati neuredno sa svim onim opisima u oznaci odlomka. Te podatke možemo premjestiti u naše zaglavlje. Naše zaglavlje je za informacije koje nam trebaju za pravilno prikazivanje web stranice. 







Pozdrav svijete

Sada je naš HTML lakše čitati. Primijetit ćete da smo neke stvari morali promijeniti. Oznaka stila govori informacije o stilu web preglednika, ali i ono što također treba oblikovati. U našem primjeru koristili smo dva različita načina kako bismo mu rekli što treba oblikovati. The str u stilskoj oznaci poručuje web pregledniku da primijeni taj stil na sve oznake odlomaka. The #ourParagraph odjeljak mu govori samo za elemente stila s id-om našParagraf. Primijeti da iskaznica informacije su dodane na p oznaku u našem tijelu.

Uvoz CSS datoteke na vaše web mjesto

Dodavanje podataka o stilu u zaglavlje čini naš kod mnogo lakšim za čitanje. Međutim, ako želimo oblikovati više različitih stranica na isti način, taj tekst moramo dodati na vrh svake stranice. To se možda ne čini puno posla, ipak možete kopirati i prošiti, ali to stvara puno posla ako želite kasnije promijeniti element.

Umjesto toga, zadržat ćemo CSS podatke u zasebnoj datoteci i uvesti ih kako bismo oblikovali stranicu. Kopirajte i zalijepite podatke između oznaka stila u novu CSS datoteku ourCSSfile.css. 

p {
poravnanje teksta: središte
}
#ourParagraph {
obrub: čvrst; 
popunjavanje: 30 piksela;
}

Zatim uvezite datoteku u HTML datoteku. 






Pozdrav svijete

Dodavanje pozadinske slike pomoću CSS-a

Sad kad imate solidnu osnovu u HTML-u i CSS-u, dodavanje pozadinske slike bit će komad torte. Prvo odredite kojem elementu želite dati pozadinsku sliku. U našem ćemo primjeru dodati pozadinu cijeloj stranici. To znači da želimo promijeniti stil tijelo. Zapamtite, oznake tijela sadrže sve vidljive elemente. 

tijelo{
pozadinska slika: url ("sky.jpg");
}
p {
poravnanje teksta: središte
}
#ourParagraph {
obrub: čvrst; 
popunjavanje: 30 piksela;
}

Da biste promijenili stil tijela u CSS-u, prvo upotrijebite tijelo ključna riječ. Zatim dodajte kovrčave zagrade kao što smo to činili prije {}. Svi podaci o stilu tijela moraju biti između kovrčavih zagrada. Atribut stila koji želimo promijeniti je pozadinska slika. Mnogo je atributa stila. Ne očekujte da ćete ih sve zapamtiti. Označi a CSS svojstva varalica s atributima koje želite zapamtiti.

Povezano: 8 sjajnih HTML efekata koje svatko može dodati na svoje web mjesto

Nakon atributa, dvotočkom označite kako ćete promijeniti atribut. Za uvoz slike upotrijebite url (). to znači da koristite vezu za usmjeravanje na sliku. Postavite mjesto datoteke u zagrade između navodnika. Na kraju redak završite zarezom. Iako razmak u CSS-u nema značenje, upotrijebite uvlačenje kako biste CSS olakšali čitanje.

Naš primjer izgleda ovako:

Ako se vaša slika ne prikazuje ispravno zbog veličine slike, možete je izravno izmijeniti. Međutim, u CSS-u postoje atributi stila pozadine pomoću kojih možete promijeniti pozadinu. Slike manje od pozadine automatski će se ponoviti u pozadini. Da biste to isključili, dodajte pozadina-ponavljanje: bez ponavljanja; vašem elementu.

Postoje i dva načina da slika pokrije cijelu pozadinu. Prvo možete veličinu pozadine postaviti na veličinu zaslona pomoću veličina pozadine: 100% 100%;, ali ovo će rastezati sliku i može je previše iskriviti. Ako ne želite da se proporcije slike promijene, također možete postaviti veličinu pozadine na pokriti. Cover će pozadinsku sliku prekriti pozadinu, ali neće iskriviti sliku.

Promjena boje pozadine

Promijenimo posljednju stvar. Sad kad imamo pozadinu, naš je odlomak teško pročitati. Učinimo njegovu pozadinu bijelom. Proces je sličan. Element koji želimo izmijeniti je #ourParagraph. Oznaka # označava da je "ourParagraph" ime identiteta. Dalje, želimo postaviti boja pozadine atribut bijelom. 

tijelo{
pozadinska slika: url ("sky.jpg");
}
p {
poravnanje teksta: središte
}
#ourParagraph {
boja pozadine: bijela;
obrub: čvrst; 
popunjavanje: 30 piksela;
}

Puno bolje.

Nastavak dizajniranja vaše web stranice s CSS-om

Sad kad znate kako promijeniti stil različitih HTML elemenata, nebo je granica! Osnovna metoda za promjenu atributa stila je ista. Prepoznajte element koji želite promijeniti i opišite kako promijeniti atribut. Najbolji način da naučite više je poigravanje različitim atributima. Izazovite se da sljedeće promijenite boju teksta.

E-mail
8 najboljih web mjesta za primjere kvalitetnog HTML kodiranja

Želite naučiti HTML za kodiranje vlastitih web stranica i aplikacija? Koristite ove primjere web stranica i izvorni kod da biste se naučili HTML-u i CSS-u.

Povezane teme
  • Programiranje
  • HTML
  • Web dizajn
  • CSS
O autoru
Jennifer Seaton (Objavljeno 20 članaka)

J. Seaton je znanstveni pisac specijaliziran za razbijanje složenih tema. Doktorirala je na Sveučilištu Saskatchewan; njezino se istraživanje usredotočilo na korištenje učenja temeljenog na igrama za povećanje angažmana učenika na mreži. Kad ne radi, naći ćete je dok čita, igra videoigre ili vrtlari.

Više od Jennifer Seaton

Pretplatite se na naše obavijesti

Pridružite se našem biltenu za tehničke savjete, recenzije, besplatne e-knjige i ekskluzivne ponude!

Još jedan korak…!

Molimo potvrdite svoju e-adresu u e-pošti koju smo vam upravo poslali.

.