Kako nastaviti sliko ozadja v CSS

Kako nastaviti sliko ozadja v CSS

Ustvarjanje spletnega mesta je odličen način, da se izrazite. Čeprav obstaja veliko orodij za izdelavo spletnih mest, je samostojno pisanje zabaven način, da izveste več o tem, kako spletna mesta delujejo v ozadju. Dober projekt za začetnike je ustvariti spletno mesto in dodati sliko ozadja s CSS. Ta projekt vas bo pričel izvajati s HTML in CSS.





Kaj je CSS?

CSS pomeni Cascading Style Sheet. To je programski jezik, ki vam omogoča oblikovanje označevalnih jezikov. Eden takih označevalnih jezikov je HTML ali jezik za označevanje hiperbesedila. HTML se uporablja za ustvarjanje spletnih mest. Čeprav lahko nekatere sloge spletnega mesta nadzirate z uporabo HTML, CSS ponuja veliko več možnosti nadzora in oblikovanja.



Ustvarjanje osnovnega spletnega mesta s HTML

Ker je CSS le stilni jezik, moramo za njegovo uporabo najprej nekaj oblikovati. Zelo osnovno spletno mesto bo dovolj, da se začnemo igrati s CSS. Na naši strani bo prikazano 'Hello World'.









Hello World



Če ne poznate HTML -ja, pojdimo na hitro, kaj počnejo vsi elementi. Kot smo že omenili, je HTML označevalni jezik, kar pomeni, da z oznakami označuje besedilo. Kadarkoli vidite besedo, obdano z to je oznaka. Obstajata dve vrsti oznak, oznaka, ki označuje začetek odseka z uporabo, in oznaka, ki označuje konec razdelka z uporabo. Besedilo v razdelku naj bi tudi olajšalo razliko.



V našem primeru imamo štiri oznake. The html tag označuje, kateri elementi so del spletnega mesta. The glavo tag vsebuje podatke o glavi, ki niso prikazani na strani, vendar so potrebni za ustvarjanje strani. Vsi prikazani elementi so med telo oznake. Imamo samo en prikazan element, str oznaka. Spletnemu brskalniku sporoča, da je besedilo odstavek.

Povezano: 10 preprostih primerov kode CSS, ki se jih lahko naučite v 10 minutah



Dodajanje CSS v HTML

Zdaj, ko imamo preprosto stran, lahko slog prilagodimo s CSS. Naša stran je trenutno precej preprosta in ne moremo storiti veliko, a začnimo tako, da naš odstavek izstopa, da ga lahko ločimo od ozadja z dodajanjem obrobe.





Hello World






Zdaj bo naš odstavek obdan s črno obrobo. Dodajanje opisa sloga v CSS naši oznaki odstavka je spletnemu mestu povedalo, kako naj odstavek oblikuje. Dodamo lahko več opisov. Povečajmo presledek ali oblazinjenje okoli odstavka in besedilo postavimo na sredino.





Hello World




Naše spletno mesto izgleda bolje, vendar je naš HTML z vsemi temi opisi v oznaki odstavka videti zmešan. Te podatke lahko premaknemo v glavo. Naš naslov je za informacije, ki jih potrebujemo za pravilno prikazovanje spletnega mesta.




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



Hello World



Zdaj je naš HTML lažje berljiv. Opazili boste, da smo morali nekaj spremeniti. Stilna oznaka pove podatke o slogu spletnega brskalnika, pa tudi, kaj naj oblikuje. V našem primeru smo na dva različna načina povedali, kaj naj oblikuje. The str v slogu oznaka pove spletnemu brskalniku, naj ta slog uporabi za vse oznake odstavkov. The #ourParagraph odsek pove, da samo elementi sloga z ID -jem naš odstavek . Opazite to id podatki so bili dodani oznaki p v našem telesu.

kako ustvariti novo e -poštno sporočilo

Uvoz datoteke CSS na vaše spletno mesto

Če v glavo dodate informacije o slogu, je našo kodo veliko lažje brati. Če pa želimo oblikovati veliko različnih strani na enak način, moramo to besedilo dodati na vrh vsake strani. Morda se to ne zdi veliko dela, navsezadnje ga lahko kopirate in mimo, vendar ustvarja veliko dela, če želite pozneje spremeniti element.

Namesto tega bomo podatke CSS hranili v ločeni datoteki in datoteko uvozili za oblikovanje strani. Kopirajte in prilepite podatke med oznakami sloga v novo datoteko CSS ourCSSfile.css .

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

Nato uvozite datoteko v datoteko HTML.






Hello World



Dodajanje slike ozadja s CSS

Zdaj, ko imate trdno podlago v HTML in CSS, bo dodajanje slike ozadja kos torte. Najprej določite, kateremu elementu želite podariti sliko ozadja. V našem primeru bomo celotni strani dodali ozadje. To pomeni, da želimo spremeniti slog telo . Ne pozabite, da oznake telesa vsebujejo vse vidne elemente.

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

Če želite spremeniti slog telesa v CSS, najprej uporabite telo ključna beseda. Nato dodajte kodraste oklepaje, kot smo to počeli prej {}. Vse informacije o slogu za telo morajo biti med zavitimi oklepaji. Atribut sloga, ki ga želimo spremeniti, je slika ozadja . Stilnih lastnosti je veliko. Ne pričakujte, da si jih boste zapomnili vse. Označite listo listov lastnosti CSS z atributi, ki si jih želite zapomniti.

Povezano: 8 kul učinkov HTML, ki jih lahko vsak doda na svojo spletno stran

zakaj je windows 7 boljši od 10

Po atributu z dvopičjem označite, kako boste atribut spremenili. Za uvoz slike uporabite url () . označuje, da uporabljate povezavo, ki kaže na sliko. Mesto datoteke v oklepaju postavite med narekovaje. Končno vrstico zaključite s podpičjem. Čeprav prazen prostor nima pomena v CSS, uporabite zamik za lažje branje CSS.

Naš primer izgleda takole:

Če se vaša slika ne prikazuje pravilno zaradi velikosti slike, jo lahko neposredno spremenite. Vendar pa v CSS obstajajo atributi sloga ozadja, ki jih lahko uporabite za spreminjanje ozadja. Slike, ki so manjše od ozadja, se bodo samodejno ponovile v ozadju. Če želite to izklopiti, dodajte ozadje-ponovitev:brez ponovitve; na vaš element.

Obstajata tudi dva načina, da slika pokrije celotno ozadje. Najprej lahko nastavite velikost ozadja na velikost zaslona z velikost ozadja: 100% 100%; , vendar bo to raztegnilo sliko in jo lahko preveč popači. Če ne želite, da se razmerja slike spremenijo, lahko nastavite tudi velikost ozadja na ovitek . Cover bo slika ozadja pokrila ozadje, ne bo pa izkrivila slike.

Spreminjanje barve ozadja

Naj spremeniva še zadnjo stvar. Zdaj, ko imamo ozadje, je naš odstavek težko brati. Naredimo belo ozadje. Postopek je podoben. Element, ki ga želimo spremeniti, je #ourParagraph. # Označuje, da je 'ourParagraph' ime ID. Nato želimo nastaviti Barva ozadja atribut bele barve.

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

Precej bolje.

Nadaljevanje oblikovanja vaše spletne strani s CSS

Zdaj, ko veste, kako spremeniti slog različnih elementov HTML, je nebo meja! Osnovna metoda za spreminjanje atributov sloga je enaka. Opredelite element, ki ga želite spremeniti, in opišite, kako spremenite atribut. Najboljši način, da se naučite več, je, da se igrate z različnimi lastnostmi. Naslednjič poskusite spremeniti barvo besedila.

Deliti Deliti Cvrkutati E-naslov 8 najboljših spletnih mest za kakovostne primere kodiranja HTML

Se želite naučiti HTML za kodiranje lastnih spletnih mest in aplikacij? Uporabite te primere spletnih strani in izvorno kodo, da se naučite HTML in CSS.

Preberite Naprej Sorodne teme
  • Programiranje
  • HTML
  • Oblikovanje spletnih strani
  • CSS
O avtorju Jennifer Seaton(21 objavljenih člankov)

J. Seaton je znanstveni pisatelj, specializiran za razčlenjevanje kompleksnih tem. Je doktorica znanosti na Univerzi v Saskatchewanu; njena raziskava se je osredotočila na uporabo učenja na podlagi iger za povečanje vključenosti študentov na spletu. Ko ne dela, jo boste našli z branjem, igranjem video iger ali vrtnarjenjem.

Več od Jennifer Seaton

Naročite se na naše novice

Pridružite se našemu glasilu za tehnične nasvete, ocene, brezplačne e -knjige in ekskluzivne ponudbe!

Kliknite tukaj, da se naročite