Postavljanje boje pozadine i/ili slike za stranicu ili njezin pojedinačni element prilično je jednostavno. Glavna stvar je znati gdje i kako se to može učiniti, kao i imati kod u boji i / ili pozadinsku sliku. Moguće je da ćete puno naučiti iz ovog članka, ali ja sam ga napravio posebno za početnike. Stoga će sve biti što kraće i detaljnije u isto vrijeme. Glavna stvar je da ćete dobiti ne samo opću ideju i gotove primjere, već i razumijevanje kako napraviti pozadinu u HTML-u.

Da biste postavili pozadinu u HTML-u, koristite srednji DOCTYPE

A počet ću s činjenicom da u HTML5 nema načina da se pita. Odlučeno je premjestiti ovu značajku u CSS. Stoga, ako planirate koristiti dolje navedeno, i želite dobiti valjani (ispravan) kod, morate se zaustaviti na prijelaznoj vrsti dokumenta. Da biste to učinili, vaša web stranica mora započeti sljedećim redkom:

Prijelazni// EN "" http://www.w3.org/TR/html4/loose.dtd ">

Sada kada smo ovo shvatili, prijeđimo na razumijevanje kako se stvara pozadina. I prva stvar koju ovdje treba primijetiti je razlika između boja pozadine i pozadinska slika... U početku ide boja pozadine, koji ispunjava sav raspoloživi prostor stranice ili njenog elementa. Na vrhu je prekriveno ponavljanje pozadinska slika... Vizualno se to može prikazati na sljedeći način:

Pozadina HTML dokumenta i njegovih elemenata

Druga stvar koju trebate znati je razlika između tijelo dokument i element dokumenta. Tijelo dokumenta označeno u HTML kodu web stranice oznakom BODY, koja uključuje cjelokupni sadržaj web stranice. Očito, pozadina tijela dokumenta ne može biti prozirna. Ako pozadina tijela dokumenta nije navedena, koristi se zadana vrijednost postavljena u postavkama preglednika.

Elementi stranice nalaze se unutar oznake BODY. Važno je napomenuti da nije moguće postaviti boju i/ili pozadinu pomoću HTML-a za sve elemente dokumenta. Na primjer, pozadinska slika može se odrediti samo za tablice. Prema zadanim postavkama, obično imaju prozirnu pozadinu.

Atribut Bgcolor za stvaranje boje pozadine

Pitati boja pozadine dokument ili njegovi elementi koriste atribut bgcolor, na primjer:

U ovom slučaju postavljamo boju pozadine za stranicu kao cjelinu. Evo primjera kako postaviti boju pozadine za tablicu, u oznaci TABLE:

Važno je napomenuti da se boja pozadine u tablici može odrediti za oba retka u TR oznaci i za njihove ćelije u oznaci TD.

Kako mogu saznati kod boje?

Vjerojatno ste već primijetili da je boja u HTML-u postavljena na posebnu boju. kodirati, na primjer: # ec008c. Da biste saznali kod željene boje, možete koristiti jedan od grafičkih uređivača. Na primjer, u Photoshopu možete koristiti “ Alat za kapaljku»(Kapaljka) za dobivanje boje iz točke na slici. Zatim morate kliknuti rezultirajuću boju na alatnoj traci iu otvorenom prozoru " Birač boja»(Odabir boje) kopirajte kod boje.

Skrećem vam pozornost na činjenicu da će ovaj kod na početku biti bez znaka funte (#), ovaj znak će se morati dodati ručno.

Također možete koristiti brojne online usluge, na primjer:

• itd.

Njihov princip rada je još jednostavniji - kliknete na željenu boju i dobijete njen kod.

Atribut pozadine za stvaranje pozadinske slike

Kao u slučaju boje pozadine, tako iu slučaju pozadinska slika Morate koristiti poseban atribut, odnosno pozadinu, na primjer:

U ovom slučaju postavljamo pozadinsku sliku za stranicu kao cjelinu. Važno je napomenuti da će se zbog ograničenja veličine slike ponoviti, na primjer:

Kao što vidite, pri ponavljanju je vidljiv prijelaz između slika. Stoga se često koriste posebne slike, gdje se ovaj trenutak uzima u obzir.

Evo primjera kako postaviti pozadinsku sliku za tablicu, u oznaci TABLE:

Važno je napomenuti da se pozadinska slika može postaviti samo za tablicu u cjelini i / ili njezinu pojedinačnu ćeliju. Ovo neće raditi za niz.

Apsolutni i relativni put do pozadinske slike

Vrijedi obratiti posebnu pozornost adresa pozadinske slike... U ovom slučaju se koristi relativni put do slike, t.j. adresa je navedena u odnosu na mjesto slikovne datoteke u datoteci web stranice. Ova se opcija ne može nazvati posebno uspješnom. Najbolje je koristiti apsolutni put do slike, t.j. njegov puni URL, Na primjer:

U tom slučaju nećete imati nikakvih popratnih problema. Više o tome možete pročitati.

Da sumiramo

Upotreba atributa bgcolor i background je zastarjela, tako da morate koristiti prolazni DOCTYPE da bi HTML kod bio valjan. Za postavljanje boje pozadine u HTML-u koristi posebne kodove koje možete saznati u grafičkom uređivaču ili pomoću posebnih online usluga. Pozadinska slika je duplicirana u prolazima područja koje joj je dodijeljeno i prekriva boju pozadine. Bolje je koristiti njegov puni URL za određivanje pozadinske slike. To je sve za mene. Hvala na pažnji. Sretno!

Gotovo svaka popularna stranica ima lijep izgled i dojam. U dizajnu web stranica važan dio je pozadina, koja se naziva i pozadina, koju svatko od nas može kreirati ili mijenjati. U ovom članku ću vam reći kako staviti pozadinu na web mjesto.

Izrada nove pozadine za web stranice

Da biste izvršili zadatak, možete koristiti jednu od 4 metode:

• 1. Pozadina s jednom bojom
• 2. Pozadina s teksturom
• 3. Pozadina s gradijentom
• 4. Pozadina s velike slike

Kako napraviti pozadinu s jednom bojom

Da biste stvorili ili promijenili pozadinu stranice, koja se sastoji od jedne boje, morate otići do datoteke style.css, u kojem se nalazi vrijednost - tijelo (odgovorno je za glavno tijelo stranice). Sada morate registrirati funkciju boje pozadine ako nije postojala i odrediti kod boje. U slučaju da trebate napraviti bijelu pozadinu za web stranicu, morat ćete napisati sljedeći kod:

boja pozadine: # 83C5E9; (plava pozadina, kao u primjeru)

Kompletan popis boja možete pronaći na web stranici - (STM). Da biste promijenili boju, samo promijenite vrijednost nakon dvotočke i uživajte u svom poslu.

Stvaranje pozadine s teksturom

Ova je metoda posebno popularna u posljednje vrijeme, jer vam omogućuje stvaranje lijepe pozadine za web mjesto. Teksture mogu biti jednostavne, ali vrlo lijepe, zbog čega se često koriste. Kako biste povezali bilo koju teksturu, morate je prenijeti u mapu sa slikama na hostingu gdje je vaša stranica instalirana. Nakon toga, trebali biste napisati sljedeći kod:

boja pozadine: # 537759;

background-image: url (slike / pattern.png);

Ovaj kod sadrži poznati parametar za održavanje boje (zelena je) i element koji je odgovoran za povezivanje zelene teksture.

Kako napraviti pozadinu pomoću gradijenta

Svaka slika koja je povezana pomoću css funkcija može se ponoviti, i vodoravno i okomito (duž osi x i Y). Ova nam prilika omogućuje stvaranje bilo koje jednostavne pozadine za web mjesto vlastitim rukama. Da biste to učinili, trebate stvoriti gradijent od 1 megapiksela (pogledajte sliku ispod), spremiti ga kao sliku i prenijeti na hosting. Nakon toga možete napisati potreban kod, i to:

boja pozadine: # 83C5E9;

background-image: url (slike / gradient.jpg);

pozadina-ponavljanje: ponavljanje-x;

U ovom skupu, pak, postoji funkcija koja je odgovorna za boju pozadine koju koristimo za sigurnost. Nakon toga, parametar koji je odgovoran za povezivanje gradijenta, i na kraju, funkcija koja je odgovorna za ponavljanje gradijenta duž X osi.

Upotreba velike slike za pozadinu stranice

Ova metoda je druga najpopularnija, jer vam omogućuje korištenje različitih slika za stvaranje pozadine. Da biste implementirali ovu metodu, samo trebate prenijeti veliku sliku u mapu sa slikama stranice i napisati sljedeći kod:

boja pozadine: # 000000;

background-image: url (slike / naziv slike.jpg);

pozadinski položaj: središnji vrh;

background-repeat: ne-ponavljanje;

Ako je sve jasno s prva dva parametra, onda je potrebno istaknuti posljednja dva. Treća funkcija omogućuje vam da prikvačite sliku u središte web-mjesta, a posljednji parametar blokira njezino ponavljanje kroz strukturu stranice.

Promijenite pozadinu na ucoz stranicama

Te metode izrade pozadine za stranicu mogu se koristiti na različitim sustavima za upravljanje stranicama, ali ne i na stranicama - ucoz. Da biste promijenili pozadinu za ucoz stranicu, morate otići na upravljačku ploču stranice, idite na "Upravljanje dizajnom" a zatim unutra "Uređivanje predložaka".

Sada morate otvoriti Style Sheet (CSS), pronaći liniju "Tijelo" i parametar "Pozadina"... Nakon toga trebate kopirati link, zalijepiti ga u internet preglednik i dobit ćete pristup slici koja je bila u pozadini.

Da biste koristili novu pozadinu, samo je trebate učitati u File Manager. Istodobno, pazite da naziv nove slike za pozadinu bude isti kao prije promjene. Spremite svoj rad i idite na stranicu da vidite obavljeni posao.

Promijenite pozadinu stranice u HTML

Ako želite napraviti pozadinu na html stranici pomoću slike, samo unesite redak u kodu:

A ako želite napraviti pozadinu stranice pomoću boje, tada bi linija trebala izgledati ovako:

Time je naša priča završena. Sada znate kako napraviti pozadinu za web stranicu. Sretni projekti!

Svaka će soba izgledati puno bolje ako je prekrivena skupim perzijskim tepihom. Pa zašto je vaša stranica gora? Možda je vrijeme da svoj pod “pokrijete” skupocjenim elegantnim ručno rađenim tepihom. Pogledajmo pobliže kako napraviti pozadinu za web stranicu:

Pozadina stranice

Događa se da je stari dizajn stranice već dosadan. I želim nešto novo i ukusno. I novi dizajn će biti takav ako ga sami skuhate.

Ali sama promjena cjelokupnog dizajna resursa je nezahvalna stvar. I nemaju svi svoje ruke kako treba "naoštriti" za ovaj slučaj. Stoga je najlakši način za osvježavanje starog predloška promijeniti boju pozadine sredstva ili njegove pozadinske slike.

Postoji nekoliko načina za promjenu pozadine na web mjestu. Za to se koriste mogućnosti CSS-a ili html-a. No mnoga svojstva za rad s pozadinom imaju isti naziv i način primjene u tim web tehnologijama.

Osnove pozadine u html-u

Nekoliko elemenata može se koristiti kao pozadina:

• Boja;
• Pozadinska slika;
• Slika teksture.

Pogledajmo detaljnije kako koristiti svaki od njih.

Da biste postavili boju pozadine za web-mjesto, upotrijebite svojstvo background-color atributa style. To jest, da biste postavili glavnu boju za web stranicu, morate je napisati unutar oznake ... Na primjer:

Pozadina stranice # 55D52B

Osim heksadecimalnog koda boje, podržana je ključna riječ ili RGB vrijednost. primjeri:

Pozadina web stranice rgb (23,113,44)

Pozadina stranice zelena

Postavljanje boje pozadine pomoću ključnih riječi ima niz ograničenja u usporedbi s druge dvije metode.

U html-u je podržano samo 16 ključnih riječi u boji. Evo nekoliko njih: bijela, crvena, plava, crna, žuta drugo.

Stoga je za postavljanje pozadine za html stranicu bolje koristiti heksadecimalni format ili RGB.

Osim odabira boje, dostupne su i druge mogućnosti prilagodbe. Postavljanje svojstva background-color na transparentno čini pozadinu stranice prozirnom. Ovo je zadana vrijednost za ovo svojstvo.

Sada razmotrimo mogućnosti jezika hiperteksta za postavljanje pozadinske slike za web mjesto. To se može učiniti pomoću svojstva background-image.

Kao što možete vidjeti iz koda, slika je vezana putem url puta navedene u zagradama. Ali nisu sve slike dovoljno velike da popune cijelo područje zaslona. Pogledajmo kako će se prikazati manja slika.

Recimo da radimo web stranicu o poeziji, a kao pozadinu želimo upotrijebiti sliku Pegaza. Krilati konj će personificirati slobodu pjesnikove stvaralačke misli!

Želimo da se slika jednom pojavi na sredini ekrana. Ali, nažalost, preglednik ne razumije naše uzvišene želje. I prikazuje manju sliku za pozadinu stranice onoliko puta koliko površina zaslona može primiti:

Vjerojatno će četiri nasmijana konja s krilima za pjesnike biti previše za inspiraciju. Stoga zabranjujemo kloniranje našeg Pegaza. To radimo pomoću svojstva background-repeat. Moguće vrijednosti:

• repeat-x - ponovite pozadinsku sliku vodoravno;
• repeat-y - okomito;
• ponoviti - na obje osi;
• no-repeat - ponavljanje je zabranjeno.

Među navedenim opcijama zanima nas posljednja. Prije promjene pozadine stranice, koristimo je u našem kodu:

Ali, naravno, bilo bi bolje da se naš letak nalazi na sredini ekrana. Svojstvo background-position dizajnirano je za postavljanje pozadinske slike na stranici. Postoji nekoliko načina za postavljanje koordinata lokacije:

• Ključna riječ ( gore, dolje, središte, lijevo, desno);
• Postotak - računajući od gornjeg lijevog kuta;
• U mjernim jedinicama (pikseli).

Koristimo najjednostavniju opciju centriranja:

Događa se da morate popraviti položaj slike tijekom pomicanja. Stoga, prije nego što sliku napravite kao pozadinu stranice, upotrijebite posebno svojstvo background-attachment. Vrijednosti koje prihvaća:

• svitak;


• fiksno.

Trebamo posljednju vrijednost. Sada će naš primjer koda izgledati ovako:

Tekstura pozadine web stranice

U prvom primjeru za pozadinu smo koristili veliki i lijepi pustinjski krajolik. Ali za takvu ljepotu morate platiti u cijelosti. Težina slike napravljene u visokoj kvaliteti može doseći nekoliko megabajta.

Ovaj volumen ni na koji način ne utječe na brzinu učitavanja stranice preglednikom s internetskom vezom velike brzine. Ali što je s mobilnim internetom, pri korištenju kojeg će trebati puno vremena za preuzimanje nekoliko "metara"?

Svi ovi problemi riješeni su korištenjem teksturirane pozadine. Koristi malu sliku kao uzorak teksture. Čak i ako se ponavlja mnogo puta, crtež se učitava samo jednom.

Da biste stvorili tamnu pozadinu za web-mjesto, idite na Photoshop, stvorite sliku u obliku trake duljine 1200 piksela i širine 15 piksela. Zatim primijenite jednostavan crno-bijeli gradijent i dodajte rezultirajuću teksturu na stranicu web stranice:

CSS alati

Sva gore opisana svojstva također se primjenjuju na kaskadne tablice stilova. Stvorimo pozadinu css stranice prepisivanjem jednog od naših prethodnih primjera.

Mnogi početnici dizajneri izgleda koji tek ulaze u bit izrade web stranica često se pitaju kako napraviti pozadinsku sliku u html-u. A ako neki mogu shvatiti ovaj zadatak, onda se svi isti problemi javljaju tijekom rastezanja slike na punu širinu monitora. Istodobno, želio bih da se stranica jednako prikazuje na svim preglednicima, tako da se mora ispuniti zahtjev za više preglednika. Pozadinu možete postaviti na dva načina: korištenjem i CSS stiliziranjem. Svatko bira najbolju opciju za sebe. Naravno, CSS stil je mnogo prikladniji, jer je njegov kod pohranjen u zasebnoj datoteci i ne zauzima dodatne stupce u glavnim oznakama web-mjesta, ali prvo razmotrimo jednostavnu metodu postavljanja slike na pozadinu stranice.

Osnovne HTML oznake za stvaranje pozadine

Dakle, prijeđimo na pitanje, pozadina u html-u je cijeli ekran. Kako bi stranica izgledala lijepo, morate razumjeti jedan prilično važan detalj: samo trebate napraviti gradijentnu pozadinu ili je obojiti jednobojnom bojom, ali ako trebate umetnuti sliku u pozadinu, neće se rastegnuti po cijeloj širini monitora. U početku morate odabrati sliku ili sami izraditi dizajn s takvim proširenjem u kojem ćete prikazati stranicu web-mjesta. Tek nakon što je pozadinska slika spremna, premjestite je u mapu pod nazivom "Slike". U njega ćemo pohraniti sve korištene slike, animacije i druge grafičke datoteke. Ova mapa bi trebala biti u korijenskom direktoriju sa svim vašim html datotekama. Sada možete ići na kod. Postoji nekoliko opcija za pisanje koda s kojim će se pozadina promijeniti u sliku.

1. Napišite oznaku atributa.
2. Kroz CSS stil u HTML kodu.
3. Napišite CSS stil u zasebnoj datoteci.

Na vama je kako napraviti pozadinu kao sliku u HTML-u, ali bih želio reći nekoliko riječi o tome kako bi to bilo najoptimalnije. Prva metoda upisivanjem kroz atribut oznake odavno je zastarjela. Druga opcija se koristi u vrlo rijetkim slučajevima, samo zato što se dobiva puno istog koda. A treća opcija je najčešća i najučinkovitija. Evo HTML primjera oznaka:

1. Prvi način za pisanje je putem atributa oznake (body) u datoteci index.htm. Piše se na sljedeći način: (pozadina tijela = "Naziv_mape / Naziv_slike.extension") (/ tijelo). Odnosno, ako imamo sliku s nazivom "Slika" i ekstenzijom JPG, a mapu smo nazvali kao "Slike", tada će HTML kod izgledati ovako: (pozadina tijela = "Slike / Slika.jpg") ... (/ tijelo) ...
2. Drugi način pisanja utječe na CSS stil, ali je napisan u istoj datoteci koja se zove index.htm. (stil tijela = "pozadina: url (" ../ Slike / Slika.jpg ")").
3. I treći način snimanja radi se u dvije datoteke. U dokumentu pod nazivom index.htm, napisan je sljedeći redak: (glava) (link rel = "stylesheet" type = "text / css" href = "CSS_file_path") (/head). A u datoteci stila pod nazivom style.css već pišemo: tijelo (pozadina: url (Slike / Slika.jpg ")).

Shvatili smo kako napraviti pozadinu slikom u HTML-u. Sada morate shvatiti kako rastegnuti sliku na širinu cijelog zaslona.

Načini rastezanja pozadinske slike na širinu prozora

Zamislimo naš ekran kao postotak. Ispada da će cijela širina i duljina zaslona biti 100% x 100%. Moramo rastegnuti sliku na ovu širinu. Dodajte redak unosu slike u datoteci style.css, koji će sliku rastegnuti na punu širinu i duljinu monitora. Kako je ovo napisano u CSS stilu? To je tako jednostavno!

pozadina: url (Slike / Slika.jpg ")

veličina pozadine: 100%; / * ovo će raditi za većinu modernih preglednika * /

Tako smo shvatili kako napraviti pozadinu slike u html-u na cijeli zaslon. Postoji i način za pisanje u datoteku index.htm. Iako je ova metoda zastarjela, potrebno je da je početnici poznaju i razumiju. U (head) (style) div (background-size: cover;) (/ style) (/ head) tag, ovaj unos znači da odabiremo poseban blok za pozadinu, koji će biti postavljen po cijeloj širini prozor. Razmotrili smo 2 načina kako napraviti pozadinu web stranice kao html sliku, tako da se slika proteže na punu širinu zaslona u bilo kojem od modernih preglednika.

Kako napraviti fiksnu pozadinu

Ako odlučite koristiti sliku kao pozadinu budućeg web-resursa, onda samo trebate naučiti kako je učiniti nepomičnom kako se ne bi protezala i pokvarila estetski izgled. Dovoljno je jednostavno uz pomoć propisati ovaj mali dodatak. Morate dodati jednu frazu u datoteci style.css nakon pozadine: url (Slike / Picture.jpg ") fiksno; ili umjesto toga dodati zaseban redak nakon točke zarez - position: fixed. Tako će vaša pozadinska slika postati fiksna. pomicanje kroz sadržaj na stranici vidjet ćete da se redovi teksta pomiču, ali pozadina ostaje na svom mjestu. Tako ste naučili kako pozadinu napraviti sliku u html-u na nekoliko načina.

Rad s tablicom u HTML-u

Mnogi neiskusni web programeri, kada se suoče s tablicama i blokovima, često ne razumiju kako napraviti sliku u pozadini tablice u html-u. Kao i sve i CSS stil, ovaj web programski jezik je prilično jednostavan. A rješenje ovog problema bilo bi pisanje nekoliko redaka koda. Već biste trebali znati da je pravopis redaka i stupca tablice označen kao oznake (tr) i (td). Da biste napravili pozadinu tablice u obliku slike, trebate dodati jednostavnu frazu u oznaku (tablica), (tr) ili (td) s vezom na sliku: pozadina = URL slike. Radi jasnoće, evo nekoliko primjera.

Tablice sa slikom umjesto pozadine: HTML primjeri

Nacrtajmo tablicu 2x3 i učinimo je pozadinskom slikom spremljenom u mapi “Slike”: (pozadina tablice = “Slike / Picture.jpg”) (tr) (td) 1 (/ td) (td) 2 (/ td) (td) 3) (/ td) (/ tr) (tr) (td) 4 (/ td) (td) 5 (/ td) (td) 6 (/ td) (/ tr) (/ stol). Ovo će ispuniti našu tablicu pozadinom slike.

Sada nacrtajmo istu ploču 2x3, ali umetnimo sliku u stupce s brojevima 1, 4, 5 i 6. (tablica) (tr) (td pozadina = “Slike / Slika.jpg”) 1 (/ td) (td) 2 (/ td) (td) 3 (/ td) (/ tr) (tr) (td pozadina = “Slike / Slika.jpg”) 4 (/ td) (td pozadina = “Slike / Slika.jpg”) 5 ( / td) (td pozadina = “Slike / Slika.jpg”) 6 (/ td) (/ tr) (/ tablica). Nakon pregleda vidimo da se pozadina pojavljuje samo u onim ćelijama u koje smo se registrirali, a ne u cijeloj tablici.

Stranica s više preglednika

Postoji i takva stvar kao što je web resurs za više preglednika. To znači da će stranice stranice biti jednako ispravno prikazane u različitim vrstama i verzijama preglednika. Istodobno, trebate prilagoditi HTML kod i CSS stil za potrebne preglednike. Osim toga, u modernoj eri razvoja pametnih telefona, mnogi web programeri pokušavaju stvoriti stranice koje su prilagođene i za mobilne verzije i za računalni prikaz.

Uz pomoć CSS boja i pozadina možete postaviti gotovo svaki element web stranice, slobodno kontrolirati pozadinsku sliku, njezino ponavljanje vodoravno i okomito. Osim toga, pomoću CSS-a možete postaviti pozadinsku sliku bilo gdje na zaslonu pomoću pozicioniranja. Nemojmo još bježati predaleko, idemo redom.

svojstvo BOJE

Ovo svojstvo postavlja boju elementa, točnije, boju teksta unutar elementa. Vrijednost je navedena u jednom od mogućih oblika:

• naziv boje (ZELENA, CRNA, CRVENA ...);
• heksadecimalni kod boja (008000, 000000, FF0000 ...);
• decimalni kod boja u RGB (boja: rgb (40, 175, 250));

Svojstvo COLOR se nasljeđuje, a ako vrijednost nije navedena za bilo koji element, vrijednost će biti naslijeđena od svog pretka. Ali može se pokazati da nije navedeno ni za pretka - tada će se tablica stilova preglednika primijeniti pomoću zadanih vrijednosti. Boja elementa u ovom slučaju će najvjerojatnije biti crna.

Kao što sam već spomenuo, možete postaviti boju za gotovo sve elemente, to može biti (H1 ... H6), (jako, em) pa čak i cijeli brojevi (p), pa čak i granice tablice, ali o tome kasnije.

Pogledajmo primjer postavljanja boje teksta pomoću CSS-a:

h1 (boja: plava)

U ovom primjeru, sva zaglavlja prve razine web stranice bit će plava:

jaka (boja: crvena)

U tom slučaju, sve što se nalazi u tekstu stranice bit će označeno oznakom jaka, pocrvenjet će.

Može se napisati ovako:

h1, p, jaka (boja: zelena)

Tada će naslovi prve razine, svi odlomci i sve što je označeno oznakom biti zeleno.

Kada je potrebno istaknuti naslove različitim bojama, tada se koriste selektori klasa. Za definiranje klase u HTML-u koristite atribut razreda koji se može primijeniti na bilo koji element. U HTML kodu morat ćete napisati:

klasa = "Plava"> Boja zaglavlja ove klase bit će plava

U CSS stilskoj tablici, u ovom slučaju, pišemo pravilo gdje će selektor biti element H1, a kroz točku ( . ) naziv klase:

h1.Plava (boja: plava)

U HTML dokumentima se također koriste selektori identifikatora, oni su određeni atributom iskaznica... Identifikator je značajniji ili ima veći prioritet od klase. A ako su i klasa i identifikator navedeni u HTML kodu za element, tada će se primijeniti stil identifikatora. Identifikator je označen znakom hash ( # ). Da biste koristili identifikator u HTML kodu, morat ćete napisati:

id = "Plava"> Boja zaglavlja ovog ID-a bit će plava

U tablici stilova, zauzvrat:

h1 # Plava (boja: plava)

POZADINA-BOJA Svojstvo

Ovo svojstvo omogućuje vam da postavite boju pozadine za stranicu kao cjelinu, paragraf, vezu, općenito, za bilo koji HTML element. Da biste to učinili, boja ili vrijednost navedena je u vrijednosti svojstva. transparentan(transparentan). Kôd za pozadinu stranice je napisan:

tijelo (boja pozadine: aqua)

U ovom slučaju, pozadina stranice bit će tirkizna, a da biste dali pozadinu naslovu, napišite:

h1 (boja pozadine: žuta)

Dobivamo žutu pozadinu naslova prve razine.

CSS boja i pozadina

BACKGROUND-REPEAT Svojstvo

Ovo svojstvo se koristi kada se zada da se odredi ponavlja li se vodoravno i okomito. Važeće vrijednosti:

• ponoviti- slika se ponavlja okomito i vodoravno;
• ponovi-x- slika se ponavlja samo vodoravno;
• ponovi-y- slika se ponavlja samo okomito;
• bez ponavljanja- slika se ne ponavlja.

Kod je napisan ovako:

p (
pozadinska slika: url ( adresa slikovne datoteke) ;
pozadina-ponavljanje: ponavljanje-x
}

Tekst za ovaj odlomak bit će na vrhu pozadinske slike, koja će biti postavljena vodoravno.

POZADINA-PRILOG Nekretnina

Ovo svojstvo se koristi da kaže pregledniku treba li se pozadinska slika stranice pomicati s tekstom ( svitak) ili ostati nepomičan ( fiksno).

tijelo (
pozadinska slika: url ( adresa slikovne datoteke) ;
pozadina-ponavljanje: ponavljanje-x;
pozadinski prilog: fiksni
}

U tom će slučaju pozadinska slika ostati nepomična.

POZICIJA-POZICIJA Vlasništvo

Ovo svojstvo se koristi za pozicioniranje slike u odnosu na. Vrijednosti su navedene u postocima (%), u jedinicama duljine (cm, px), po ključnim riječima:

• okomito:
• vrh- vrh slike je poravnat s gornjim rubom stranice ili bloka;
• centar
• dno- dno slike je poravnato s donjim rubom stranice ili bloka.
• vodoravno:
• lijevo- lijevi rub slike je poravnat s lijevim rubom stranice ili bloka;
• centar- središte slike je poravnato sa središtem stranice ili bloka;
• pravo- desni rub slike je poravnat s desnim rubom stranice ili bloka.

Pišemo primjer koda u postocima, jedinicama duljine i ključnim riječima:

tijelo (
pozadinska slika: url ( adresa slikovne datoteke) ;
pozadinski položaj: 0% 0%
}

Tijelo (
pozadinska slika: url ( adresa slikovne datoteke) ;
pozadinski položaj: 10px 25cm
}

Tijelo (
pozadinska slika: url ( adresa slikovne datoteke) ;
pozadinski položaj: gornji centar
}