Ustvarjanje spletne strani je odličen način, da se izrazite. Čeprav obstaja veliko orodij za izdelavo spletnih strani, je pisanje le-tega zabaven način, kako izvedeti več o tem, kako spletna mesta delujejo v zakulisju. Dober začetniški projekt je ustvariti spletno stran in dodati sliko v ozadju s CSS. Ta projekt vas bo pripeljal do HTML in CSS.

Kaj je CSS?

CSS pomeni Cascading Style Sheet. To je programski jezik, ki vam omogoča oblikovanje označevalnih jezikov. Takšen označevalni jezik je označevalni jezik HTML ali hiperbesedilo. HTML se uporablja za ustvarjanje spletnih strani. Čeprav lahko s slogom HTML nadzirate nekatere sloge spletnega mesta, CSS ponuja veliko več možnosti nadzora in oblikovanja.

Ustvarjanje osnovnega spletnega mesta z HTML-jem

Ker je CSS le slog jezika, ga moramo najprej uporabiti, da ga uporabimo. Zelo osnovno spletno mesto bo dovolj, da se začnemo igrati s CSS. Na naši strani bo prikazano "Hello World." 





Pozdravljen, svet

Če ne poznate HTML-ja, pojdimo na hitro, kaj vse naredijo vsi elementi. Kot smo že omenili, je HTML označevalni jezik, kar pomeni, da z oznakami označuje, kaj je besedilo. Kadarkoli zagledate besedo, obdano z

<> to je oznaka. Obstajata dve vrsti oznak, oznaka, ki označuje začetek odseka z <> in ena, ki označuje konec odseka z uporabo

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

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

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

Bi radi izvedeli več o uporabi CSS? Za začetek poskusite s temi osnovnimi primeri kode CSS, nato jih uporabite na svojih spletnih straneh.

Dodajanje CSS v HTML

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





Pozdravljen, svet


Zdaj bo naš odstavek obdan s črno obrobo. Dodajanje opisa sloga v CSS naši oznaki odstavka je spletnemu mestu reklo, kako oblikovati odstavek. Lahko dodamo več opisov. Povečajmo presledek ali odmik okoli našega odstavka in centriramo besedilo. 





Pozdravljen, svet


Naše spletno mesto je videti boljše, toda naš HTML je videti neurejen z vsemi opisi v oznaki odstavka. Te podatke lahko premaknemo v glavo. Naša glava je namenjena informacijam, da moramo spletno mesto pravilno prikazati. 







Pozdravljen, svet

Zdaj je naš HTML lažje brati. Opazili boste, da smo morali nekatere stvari spremeniti. Oznaka sloga sporoča informacije o slogu spletnega brskalnika, pa tudi, kaj tudi oblikovati. V našem primeru smo na dva različna načina povedali, kaj naj oblikujemo. The str v oznaki sloga spletnemu brskalniku sporoča, naj ta slog uporabi za vse oznake odstavkov. The #ourParagraph Odsek mu sporoča, da je treba uporabiti samo elemente sloga z id naš odstavek. Opazite to id informacije so bile dodane na oznako p v našem telesu.

Uvoz datoteke CSS na vaše spletno mesto

Če v glavo dodate informacije o slogu, je naša koda veliko lažje berljiva. Če pa želimo veliko različnih strani oblikovati na enak način, moramo to besedilo dodati na vrh vsake strani. To se morda ne zdi veliko dela, navsezadnje ga lahko kopirate in prenesete, vendar ustvari 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 {
poravnava besedila: sredina
}
#ourParagraph {
mejni slog: trden; 
oblazinjenje: 30 slikovnih pik;
}

Nato datoteko uvozite v datoteko HTML. 






Pozdravljen, svet

Dodajanje slike v ozadju s CSS

Zdaj, ko imate trdno podlago v HTML in CSS, bo dodajanje slike za ozadje kos. Najprej določite, kateremu elementu želite dati sliko v ozadju. 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. 

telo {
slika ozadja: url ("sky.jpg");
}
p {
poravnava besedila: sredina
}
#ourParagraph {
mejni slog: trden; 
oblazinjenje: 30 slikovnih pik;
}

Če želite spremeniti slog telesa v CSS, najprej uporabite telo ključna beseda. Nato dodajte skodrane oklepaje, kot smo to storili prej {}. Vse informacije o slogu telesa morajo biti med skodranimi oklepaji. Atribut sloga, ki ga želimo spremeniti, je slika ozadja. Atributov sloga je veliko. Ne pričakujte, da si jih boste zapomnili vse. Zaznamek a CSS lastnosti cheat-sheet z atributi, ki si jih želite zapomniti.

Sorodno: 8 odličnih HTML učinkov, ki jih lahko vsakdo doda na svojo spletno stran

Po atributu s dvopičjem označite, kako boste spremenili atribut. Za uvoz slike uporabite url (). pomeni, da uporabljate povezavo za usmerjanje na sliko. Mesto datoteke v oklepajih postavite med narekovaje. Na koncu vrstico zaključite s podpičjem. Čeprav presledek v CSS nima pomena, uporabite vdolbino za lažje branje CSS.

Naš primer je videti tako:

Če se slika zaradi velikosti slike ne prikazuje pravilno, jo lahko neposredno spremenite. Vendar v CSS obstajajo atributi sloga ozadja, s katerimi lahko spremenite ozadje. Slike, ki so manjše od ozadja, se v ozadju samodejno ponovijo. Če želite to izklopiti, dodajte ozadje-ponovitev: brez ponovitve; vašemu elementu.

Obstajata tudi dva načina, da sliko pokrijete celotno ozadje. Najprej lahko velikost ozadja nastavite na velikost zaslona z velikost ozadja: 100% 100%;, vendar bo to sliko raztegnilo in jo lahko preveč popačilo. Če ne želite, da se razmerja slike spremenijo, lahko nastavite tudi velikost ozadja pokrov. Pokrov bo sliko za ozadje pokril ozadje, vendar slike ne bo izkrivil.

Spreminjanje barve ozadja

Spremenimo še zadnjo stvar. Zdaj, ko imamo ozadje, je naš odstavek težko prebrati. Naj bo njegovo ozadje belo. Postopek je podoben. Element, ki ga želimo spremeniti, je #ourParagraph. # Označuje, da je "ourParagraph" ime ID. Nato želimo nastaviti Barva ozadja pripisati beli. 

telo {
slika ozadja: url ("sky.jpg");
}
p {
poravnava besedila: sredina
}
#ourParagraph {
barva ozadja: bela;
mejni slog: trden; 
oblazinjenje: 30 slikovnih pik;
}

Precej bolje.

Nadaljevanje oblikovanja vašega spletnega mesta s CSS

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

E-naslov
8 najboljših primerov za kakovostno HTML kodiranje

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

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

J. Seaton je znanstveni pisatelj, ki je specializiran za razčlenitev zapletenih tem. Doktorirala je na univerzi v Saskatchewanu; njena raziskava se je osredotočila na uporabo iger temelječega učenja za povečanje vključenosti študentov v splet. Ko ne dela, jo boste našli ob branju, igranju video igric ali vrtnarjenju.

Več od Jennifer Seaton

Naročite se na naše novice

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

Še en korak…!

Potrdite svoj e-poštni naslov v e-poštnem sporočilu, ki smo vam ga pravkar poslali.

.