Kako postaviti pozadinsku sliku u CSS -u

Kako postaviti pozadinsku sliku u CSS -u

Izrada web stranice odličan je način da se izrazite. Iako postoji mnogo alata za izradu web stranica, vlastito pisanje zabavan je način da saznate više o tome kako web stranice rade iza kulisa. Dobar projekt za početnike je stvaranje web stranice i dodavanje pozadinske slike pomoću CSS -a. Ovaj će vas projekt pokrenuti s HTML -om i CSS -om.





Što je CSS?

CSS je kratica za Cascading Style Sheet. To je programski jezik koji vam omogućuje stiliziranje označnih jezika. Jedan od takvih jezika za označavanje je HTML ili jezik za označavanje hiperteksta. HTML se koristi za izradu web stranica. Iako nekim stilom web stranice možete kontrolirati 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 stilni jezik, da bismo ga koristili, prvo nam treba nešto za stiliziranje. Vrlo osnovna web stranica bit će nam dovoljna da se počnemo igrati sa CSS -om. Naša će stranica prikazati 'Hello World'.









Hello World



U slučaju da niste upoznati s HTML -om, prijeđimo brzo na to što svi elementi rade. Kao što je spomenuto, HTML je jezik za označavanje, što znači da koristi oznake za označavanje teksta. Kad god vidite riječ okruženu to je oznaka. Postoje dvije vrste oznaka, oznaka koja označava početak odjeljka pomoću i jedna koja označava kraj odjeljka pomoću. Tekst unutar odjeljka također ima namjeru olakšati uočavanje ove razlike.



U našem primjeru imamo četiri oznake. The html oznaka označava koji su elementi dio web stranice. The glava oznaka sadrži podatke zaglavlja koji se ne prikazuju na stranici, ali su potrebni za izradu stranice. Svi prikazani elementi nalaze se između tijelo oznake. Imamo samo jedan prikazani element, str označiti. On govori web pregledniku da je tekst odlomak.

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



Dodavanje CSS -a u HTML

Sada kada imamo jednostavnu stranicu, možemo prilagoditi stil pomoću CSS -a. Naša je stranica trenutačno prilično jednostavna i ne možemo puno učiniti, ali počnimo istaknuti naš odlomak kako bismo ga razlikovali od pozadine dodavanjem obruba.





Hello World






Sada će naš odlomak biti okružen crnom granicom. Dodavanjem opisa stila u CSS -u našoj oznaci odlomka web stranici je rečeno kako stilizirati odlomak. Možemo dodati još opisa. Povećajmo razmake ili podstavke oko odlomka i centrirajmo tekst.





Hello World




Naša web stranica izgleda bolje, ali naš HTML počinje izgledati neuredno sa svim tim opisima u oznaci odlomka. Te podatke možemo premjestiti u zaglavlje. Naš zaglavlje služi za informacije koje su nam potrebne za pravilno prikazivanje web stranice.




p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}



Hello World



Sada je naš HTML lakši za čitanje. Primijetit ćete da smo neke stvari morali promijeniti. Oznaka stila govori o stilu stila web preglednika, ali i o tome što treba stilizirati. U našem primjeru koristili smo dva različita načina da mu kažemo što da stilizira. The str u oznaci stila govori web pregledniku da primijeni taj stil na sve oznake odlomaka. The #naš paragraf odjeljak govori samo elementima stila s id -om naš paragraf . Primijeti da iskaznica informacije su dodane oznaci p u našem tijelu.

kako pronaći moj Minecraft poslužitelj ip

Uvoz CSS datoteke na vašu web stranicu

Dodavanje podataka o stilu u zaglavlje čini naš kôd mnogo lakšim za čitanje. Međutim, ako želimo oblikovati mnogo različitih stranica na isti način, moramo dodati taj tekst na vrh svake stranice. To se možda ne čini kao veliki posao, ipak ga možete kopirati i zaobići, ali stvara mnogo posla ako kasnije želite promijeniti element.

Umjesto toga, zadržat ćemo CSS podatke u zasebnoj datoteci i uvesti datoteku za oblikovanje stranice. Kopirajte i zalijepite podatke između oznaka stila u novu CSS datoteku ourCSSfile.css .

p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}

Zatim uvezite datoteku u HTML datoteku.






Hello World



Dodavanje pozadinske slike pomoću CSS -a

Sada kada imate solidnu bazu u HTML -u i CSS -u, dodavanje pozadinske slike bit će dio kolača. Prvo odredite kojem elementu želite dati pozadinsku sliku. U našem primjeru, cijeloj stranici ćemo dodati pozadinu. To znači da želimo promijeniti stil tijelo . Upamtite, oznake tijela sadrže sve vidljive elemente.

body{
background-image: url('sky.jpg');
}
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}

Za promjenu stila karoserije u CSS -u prvo upotrijebite tijelo ključna riječ. Zatim dodajte kovrčave zagrade kao i prije {}. Svi stilski podaci za tijelo moraju se nalaziti između kovrčavih zagrada. Atribut stila koji želimo promijeniti je pozadinska slika . Postoji mnogo atributa stila. Ne očekujte da ćete ih sve zapamtiti. Označite tablicu s podacima o svojstvima CSS-a s atributima koje želite zapamtiti.

Povezano: 8 kul HTML efekata koje svatko može dodati na svoju web stranicu

kako prikazati zaslon telefona na računalu

Nakon atributa, dvotočkom označite kako ćete promijeniti atribut. Za uvoz slike upotrijebite url () . označava da koristite vezu za pokazivanje slike. Mjesto datoteke stavite u zagrade između navodnika. Konačno, redak završava točkom -zarezom. Iako bijeli prostor nema značenje u CSS -u, upotrijebite uvlačenje kako biste CSS učinili lakšim za čitanje.

Naš primjer izgleda ovako:

Ako se vaša slika ne prikazuje ispravno zbog veličine slike, možete izravno promijeniti sliku. Međutim, u CSS -u postoje atributi stila pozadine koje možete koristiti za promjenu pozadine. Slike koje su manje od pozadine automatski će se ponoviti u pozadini. Da biste to isključili, dodajte pozadina-ponavljanje:bez ponavljanja; na vaš element.

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

Promjena boje pozadine

Promijenimo još jednu stvar. Sada kada imamo pozadinu, naš odlomak je teško čitati. Učinimo njegovu pozadinu bijelom. Postupak je sličan. Element koji želimo izmijeniti je #ourParagraph. # Označava da je 'ourParagraph' naziv ID -a. Zatim želimo postaviti boja pozadine atribut bijelom.

body{
background-image: url('sky.jpg');
}
p {
text-align: center
}
#ourParagraph {
background-color: white;
border-style: solid;
padding: 30px;
}

Puno bolje.

Nastavak dizajna vaše web stranice s CSS -om

Sada kada znate promijeniti stil različitih HTML elemenata, nebo je granica! Osnovna metoda za promjenu atributa stila je ista. Identificirajte element koji želite promijeniti i opišite kako promijeniti atribut. Najbolji način da naučite više je igrati se s različitim atributima. Izazovite sebe da promijenite boju svog teksta.

Udio Udio Cvrkut E -pošta 8 najboljih web mjesta za primjere kvalitetnog HTML kodiranja

Želite naučiti HTML za kodiranje vlastitih web stranica i aplikacija? Pomoću ovih primjera web stranica i izvornog koda naučite HTML i CSS.

Pročitajte Dalje Povezane teme
  • Programiranje
  • HTML
  • Web dizajn
  • CSS
O autoru Jennifer Seaton(Objavljen 21 članak)

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 zasnovanog na igrama za povećanje angažmana učenika na internetu. Kad ne radi, zateći ćete je kako čita, igra video igrice ili radi u vrtu.

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!

Kliknite ovdje za pretplatu