Postavljanje boje pozadine i/ili slike za stranicu ili pojedinačni element je prilično 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.

Za postavljanje pozadine u HTML-u koristite srednji DOCTYPE

I počeću sa činjenicom da HTML5 ne postoji način da se podesi. Odlučeno je da se ova funkcija prenese u CSS. Stoga, ako planirate da koristite sledeće i želite da dobijete važeći (tačan) kod, morate se zaustaviti na prelaznom tipu dokumenta. Da biste to učinili, vaša web stranica mora početi sljedećim redom:

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

Sada kada smo to pokrili, pređimo na razumijevanje kako se stvara pozadina. I prva stvar koju ovdje treba primijetiti je razlika između boja pozadine i pozadinska slika. Na početku ide boja pozadine, koji ispunjava cijeli raspoloživi prostor stranice ili njenog elementa. Preko nje je postavljeno ponavljanje pozadinska slika. Vizuelno, ovo se može prikazati na sljedeći način:

Pozadina HTML dokumenta i njegovih elemenata

Druga stvar koju trebate znati je razlika između tijelo dokumenta i element dokumenta. Tijelo dokumenta označen u HTML kodu web stranice oznakom BODY, koja uključuje sav sadržaj web stranice. Očigledno, pozadina tijela dokumenta ne može biti transparentna. Ako pozadina tijela dokumenta nije postavljena, koristi se zadana vrijednost postavljena u postavkama pretraživača.

Elementi stranice nalaze se unutar oznake BODY. Važno je napomenuti da nije moguće postaviti boju i/ili sliku pozadine koristeći HTML za sve elemente dokumenta. Na primjer, pozadinska slika se može odrediti samo za tabele. Podrazumevano, obično imaju prozirnu pozadinu.

Atribut bgcolor za kreiranje boje pozadine

Da biste postavili boja pozadine dokument ili njegovi elementi koriste atribut bgcolor, na primjer:

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

Važno je napomenuti da se boja pozadine u tabeli može specificirati i za redove u TR oznaci i za njihove ćelije u TD oznaci.

Kako pronaći kod boje?

Vjerovatno ste već primijetili da je boja u HTML-u određena posebnim kod, na primjer: #ec008c . Da biste saznali kod boje koja vam je potrebna, možete koristiti jedan od grafičkih uređivača. Na primjer, u Photoshopu možete koristiti " Alat za kapi za oči» (Pipeta) da dobijete boju iz tačke na slici. Zatim morate kliknuti na rezultirajuću boju na alatnoj traci iu prozoru koji se otvara " birač boja» (Odaberite boju) kopirajte kod boje.

Skrećem vam pažnju da će ovaj kod biti bez znaka funte (#) na početku, ovaj znak će biti potrebno dodati ručno.

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

• itd.

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

Atribut pozadine za kreiranje pozadinske slike

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

U ovom slučaju postavljamo pozadinu 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 primetan prelaz između slika. Stoga se često koriste posebne slike, gdje se ovaj trenutak uzima u obzir.

A evo i primjera kako postaviti pozadinsku sliku za tabelu, u oznaci TABLE:

Važno je napomenuti da se pozadinska slika može postaviti samo za tabelu u cjelini i/ili njenu pojedinačnu ćeliju. Neće raditi za niz.

Apsolutna i relativna putanja do pozadinske slike

Posebnu pažnju treba posvetiti adresa pozadinske slike. U ovom slučaju se koristi relativna putanja do slike, tj. adresa je relativna u odnosu na lokaciju datoteke slike i datoteke web stranice. Ova opcija se ne može nazvati posebno uspješnom. Najbolje je koristiti apsolutni put do slike, tj. njegov puni URL, Na primjer:

U ovom slučaju nećete imati nikakvih povezanih problema. Možete pročitati više o tome.

Sažimanje

Upotreba atributa bgcolor i background je zastarjela, tako da ćete morati koristiti prijelazni DOCTYPE da bi vaš HTML kod bio validan. Za postavljanje boje pozadine u HTML-u, koristi posebne kodove koje možete pronaći u grafičkom uređivaču ili korištenjem posebnih online usluga. Pozadinska slika se duplira unutar područja koje joj je dodijeljeno i leži na vrhu boje pozadine. Da biste naveli sliku u pozadini, bolje je koristiti njen puni URL. To je sve za mene. Hvala vam na pažnji. Sretno!

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

Izrada nove pozadine za web stranice

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

• 1. Pozadina u jednoj boji
• 2. Pozadina s teksturom
• 3. Pozadina sa gradijentom
• 4. Pozadina sa velikom slikom

Napravite pozadinu sa jednom bojom

Da biste kreirali ili promijenili pozadinu stranice, koja se sastoji od jedne boje, trebate otići na datoteku style.css, u kojem se nalazi vrijednost - tijelo (odgovorno je za glavno tijelo stranice). Sada morate napisati funkciju background-color ako je nije bilo i odrediti kod boje. U slučaju kada trebate kreirati bijelu pozadinu za stranicu, morat ćete napisati sljedeći kod:

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

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

Kreiranje pozadine sa teksturom

Ova metoda je posebno popularna u posljednje vrijeme, jer vam omogućava da napravite prekrasnu pozadinu za stranicu. Teksture mogu biti jednostavne, ali vrlo lijepe, zbog čega se često koriste. Da biste povezali bilo koju teksturu, ona mora biti učitana 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(images/pattern.png);

U ovom kodu postoji poznati parametar za održavanje boje (zelena je) i element koji je odgovoran za povezivanje zelene teksture.

Pravljenje pozadine sa gradijentom

Svaka slika koja je povezana pomoću css funkcija može se ponoviti i vodoravno i okomito (duž osi X i Y). Ova funkcija nam omogućava da kreiramo bilo koju jednostavnu pozadinu za web lokaciju vlastitim rukama. Da biste to učinili, trebate kreirati gradijent širine 1 megapiksela (pogledajte sliku ispod), sačuvati ga kao sliku i postaviti na hosting. Nakon toga možete napisati neophodan kod, i to:

boja pozadine: #83C5E9;

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

background-repeat: repeat-x;

U ovom setu, po redu prioriteta, nalazi se funkcija odgovorna za boju pozadine koju koristimo za reosiguranje. Nakon toga, parametar koji je odgovoran za povezivanje gradijenta, i na kraju, funkcija koja je odgovorna za ponavljanje gradijenta duž X ose.

Upotreba velike slike za pozadinu stranice

Ova metoda je druga po popularnosti, jer vam omogućava da koristite različite slike za stvaranje pozadine. Da biste implementirali ovu metodu, trebate samo učitati veliku sliku u mapu slika web-mjesta i napisati sljedeći kod:

boja pozadine: #000000;

background-image: url(images/image title.jpg);

pozadinski položaj: centar vrh;

background-repeat: bez ponavljanja;

Ako je sve jasno sa prva dva parametra, onda posljednja dva moraju biti istaknuta. Treća funkcija vam omogućava da fiksirate sliku u centru stranice, a posljednji parametar blokira njeno ponavljanje kroz strukturu stranice.

Promjena pozadine na ucoz web stranicama

Te metode kreiranja pozadine za sajt mogu se koristiti na različitim sistemima za upravljanje sadržajem, ali ne i na sajtovima - ucoz. Da biste promijenili pozadinu za ucoz stranicu, potrebno je da odete na kontrolnu tablu stranice, idite na "Upravljanje dizajnom", a zatim unutra "Uređivanje predložaka".

Sada morate da otvorite listu stilova (CSS), pronađite liniju tijelo i parametar pozadini. Nakon toga, potrebno je da kopirate link, zalijepite ga u internet pretraživač i dobićete pristup slici koja je bila pozadina.

Da biste koristili novu pozadinu, potrebno je samo da je otpremite u File Manager. Istovremeno, uvjerite se da je naziv nove slike za pozadinu isti kao prije promjene. Sačuvajte svoj rad i idite na stranicu da vidite obavljeni posao.

Promijenite pozadinu stranice u HTML

Ako želite da napravite pozadinu na html stranici pomoću slike, jednostavno unesite red u kod:

A ako želite napraviti pozadinu stranice koristeći boju, tada bi linija trebala izgledati ovako:

Ovim je naša priča završena. Sada znate kako napraviti pozadinu za web stranicu. Uspješni projekti!

Svaka soba će izgledati mnogo bolje sa skupim perzijskim tepihom na podu. Dakle, šta nije u redu sa vašom web lokacijom? Možda je došlo vrijeme da svoj pod “pokrijete” skupim elegantnim ručno rađenim tepihom. Pogledajmo bliže kako napraviti pozadinu za web lokaciju:

Pozadina stranice

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

Ali mijenjanje cjelokupnog dizajna resursa na svoju ruku je nezahvalna stvar. I nemaju svi svoje ruke kako treba "naoštriti" za ovaj posao. Stoga je najlakše osvježiti stari predložak promjenom boje pozadine ili pozadinske slike resursa.

Postoji nekoliko načina da promijenite pozadinu na web stranici. Za to se koriste mogućnosti CSS-a ili html-a. Ali mnoga svojstva pozadine imaju isto ime i upotrebu u ovim web tehnologijama.

Osnove HTML pozadine

Nekoliko elemenata se može koristiti kao pozadina:

• boja;
• pozadinska slika;
• Slika teksture.

Pogledajmo upotrebu svakog od njih detaljnije.

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

Pozadina web stranice #55D52B

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

Pozadina web stranice rgb(23,113,44)

Pozadina web stranice zelena

Postavljanje boje pozadine pomoću ključnih riječi ima niz ograničenja u poređenju 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 ostalo.

Stoga, da biste postavili pozadinu za html stranicu, bolje je koristiti hex ili RGB.

Osim odabira boje, dostupne su i druge mogućnosti prilagođavanja. Postavljanje svojstva background-color na transparentno čini pozadinu stranice prozirnom. Ova vrijednost je po defaultu dodijeljena ovom svojstvu.

Pogledajmo sada mogućnosti jezika hiperteksta za postavljanje pozadinske slike za stranicu. Ovo se može uraditi sa svojstvom background-image.

Kao što možete vidjeti iz koda, slika je vezana putem url putanje date u zagradama. Ali ne ispadaju sve slike tako velike da svojom veličinom ispunjavaju čitavu površinu ekrana. Da vidimo kako će se prikazati manja slika.

Pretpostavimo da razvijamo sajt o poeziji, a želimo da koristimo sliku Pegaza kao pozadinu. Krilati konj će personificirati slobodu pjesnikove stvaralačke misli!

Želimo da se slika jednom prikaže na sredini ekrana. Ali, nažalost, pretraživač ne razumije naše uzvišene želje. I prikazuje manju sliku za pozadinu stranice onoliko puta koliko površina ekrana može stati:

Vjerovatno će četiri nasmijana konja s krilima biti previše za pjesnike za inspiraciju. Stoga zabranjujemo kloniranje našeg Pegaza. Ovo radimo sa svojstvom background-repeat. Moguće vrijednosti:

• repeat-x - ponavljanje pozadinske slike horizontalno;
• repeat-y - okomito;
• ponoviti - na obje ose;
• no-repeat - ponavljanje je zabranjeno.

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

Ali, naravno, bolje je da se naš letak nalazi na sredini ekrana. Svojstvo background-position služi samo za pozicioniranje pozadinske slike na stranici. Koordinate lokacije možete postaviti na nekoliko načina:

• ključna riječ ( gore, dolje, centar, lijevo, desno);
• Procenat - odbrojavanje počinje od gornjeg lijevog ugla;
• U mjernim jedinicama (pikseli).

Koristimo najjednostavniju opciju za centriranje:

Dešava se da morate popraviti poziciju slike prilikom pomicanja. Stoga, prije nego što sliku napravite kao pozadinu stranice, koristite posebno svojstvo background-attachment. Vrijednosti koje prihvata su:

• svitak;


• fiksno.

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

Tekstura pozadine web stranice

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

Takav volumen ne utječe na brzinu učitavanja stranice od strane pretraživača s internetskom vezom velike brzine. Ali što je s mobilnim internetom, pri korištenju kojeg će trebati dosta vremena za preuzimanje nekoliko "metara"?

Svi ovi problemi rješavaju se uz pomoć teksturirane pozadine. Koristi malu sliku kao uzorak teksture. Čak i ako se ponavlja mnogo puta, crtež se učitava samo jednom.

Da biste kreirali tamnu pozadinu za web lokaciju, idite na Photoshop, kreirajte sliku u obliku trake dužine 1200 piksela i širine 15 piksela. Zatim primjenjujemo jednostavan crno-bijeli gradijent i povezujemo rezultirajuću teksturu sa stranicom stranice:

CSS alati

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

Mnogi početnici dizajneri izgleda, koji tek prodiru u suštinu kreiranja web stranica, često se pitaju kako napraviti pozadinsku sliku u html-u. A ako neki ljudi mogu shvatiti ovaj zadatak, onda i dalje postoje problemi pri rastezanju slike na punu širinu monitora. U isto vrijeme, želio bih da se stranica prikazuje na isti način na svim pretraživačima, tako da se mora ispuniti zahtjev kompatibilnosti među pretraživačima. Pozadinu možete postaviti na dva načina: korištenjem i CSS stilom. Svako bira najbolju opciju za sebe. Naravno, CSS stil je mnogo praktičniji, jer je njegov kod pohranjen u zasebnoj datoteci i ne zauzima dodatne stupce u glavnim oznakama web-mjesta, ali prvo pogledajmo jednostavnu metodu postavljanja slike na pozadinu stranice.

Osnovne HTML oznake za kreiranje pozadine

Dakle, pređimo na problem, pozadina u html-u je cijeli ekran. Da bi stranica izgledala lijepo, morate razumjeti jedan prilično važan detalj: dovoljno je jednostavno napraviti gradijent pozadinu ili je obojiti jednobojnom bojom, ali ako trebate umetnuti sliku u pozadinu, to neće rastegnuti na cijelu širinu monitora. U početku morate odabrati sliku ili sami napraviti dizajn s takvim proširenjem u kojem ćete prikazati stranicu stranice. Tek nakon što je pozadinska slika spremna, prenosimo je u mapu pod nazivom "Slike". U njemu ćemo pohraniti sve korištene slike, animacije i druge grafičke datoteke. Ovaj folder bi trebao biti u korijenskom direktoriju sa svim vašim html datotekama. Sada možemo prijeći na kod. Postoji nekoliko opcija za pisanje koda koji će promijeniti pozadinu u sliku.

1. Napišite oznaku atributa.
2. Kroz CSS stil u HTML kodu.
3. Napišite CSS stil u posebnu datoteku.

Na vama je da odlučite kako pozadinu napraviti sliku u HTML-u, ali bih želio reći nekoliko riječi o tome kako bi to bilo najoptimalnije. Prvi metod, pisanjem kroz atribut oznake, odavno je zastario. Druga opcija se koristi u vrlo rijetkim slučajevima, samo zato što ima puno istog koda. A treća opcija je najčešća i najefikasnija. Evo primjera HTML oznaka:

1. Prvi način za pisanje je preko atributa oznake (tijelo) u datoteci index.htm. Piše se ovako: (pozadina tijela= "ime_fascikle/ime_slike.extension")(/tijelo). Odnosno, ako imamo sliku sa nazivom "Slika" i ekstenzijom JPG, a imenik smo nazvali kao "Slike", onda će unos HTML koda izgledati ovako: (body background="Images/Picture.jpg" )… (/tijelo) .
2. Druga metoda pisanja utiče na CSS stil, ali je napisana u istoj datoteci koja se zove index.htm. (body style="background: url("../Images/Picture.jpg")").
3. I treći način snimanja je napravljen u dva fajla. U dokumentu koji se zove index.htm, sljedeći red je napisan u: (head)(link rel="stylesheet" type="text/css" href="Path_to CSS_file")(/head). A u datoteci stila pod nazivom style.css već pišemo: tijelo (pozadina: url (Slike/Slika.jpg")).

Kako napraviti pozadinu sliku u HTML-u, mi smo demontirali. Sada morate da shvatite kako da rastegnete sliku preko celog ekrana.

Načini rastezanja pozadinske slike na širinu prozora

Predstavimo naš ekran kao procenat. Ispostavilo se da će cijela širina i dužina ekrana biti 100% x 100%. Moramo da rastegnemo sliku na ovu širinu. Dodajmo liniju unosu slike u datoteci style.css, koja će sliku rastegnuti na punu širinu i dužinu monitora. Kako je ovo napisano u CSS stilu? Sve je jednostavno!

pozadina: url(Slike/Slika.jpg")

veličina pozadine: 100% /* ovaj unos će raditi za većinu modernih pretraživača */

Tako smo shvatili kako sliku napraviti pozadinom u html-u na cijelom ekranu. Postoji još jedan način za pisanje u index.htm datoteku. Iako je ova metoda zastarjela, neophodno je da je početnici znaju i razumiju. U (head)(style) div ( background-size: cover; ) (/style) (/head) tag, ovaj unos znači da biramo poseban blok za pozadinu, koji će biti pozicioniran po cijeloj širini prozor. Razmotrili smo 2 načina da pozadinu stranice učinimo html slikom tako da se slika proteže cijelom širinom ekrana u bilo kojem od modernih pretraživača.

Kako napraviti fiksnu pozadinu

Ako odlučite koristiti sliku kao pozadinu budućeg web resursa, onda samo trebate saznati kako je učiniti nepomičnom kako se ne bi protezala po dužini i pokvarila estetski izgled. Dovoljno je samo uz pomoć propisati ovaj mali dodatak. Morate dodati jednu frazu u datoteku style.css nakon što je pozadina: url(Slike/Slika.jpg") fiksna; ili umjesto toga dodati poseban red nakon tačke zarez - position: fixed. Tako će vaša pozadinska slika postati fiksna. skrolujući kroz sadržaj na sajtu, videćete da se linije teksta pomeraju, ali pozadina ostaje na svom mestu. Tako ste naučili kako da pozadinu napravite sliku u html-u, na nekoliko načina.

Rad sa tabelom u HTML-u

Mnogi neiskusni web programeri, kada se suoče sa tabelama i blokovima, često ne razumiju kako napraviti sliku pozadinom tablice u html-u. Kao i sve i CSS stil, i ovaj web programski jezik je prilično jednostavan. A rješenje za ovaj problem će biti pisanje nekoliko linija koda. Već treba da znate da je pisanje redova i kolona tabele označeno oznakama (tr) i (td), respektivno. Da bi pozadina tabele izgledala kao slika, dodajte jednostavnu frazu oznaci (tabela), (tr) ili (td) sa vezom do slike: pozadina = URL slike. Radi jasnoće dajemo nekoliko primjera.

Tabele sa slikom umjesto pozadine: HTML primjeri

Nacrtajmo tabelu 2x3 i napravimo je pozadinom slike sačuvane u folderu “Slike”: (pozadina tabele = “Slike/Slika.jpg”) (tr) (td)1(/td) (td)2(/ td) (td) 3)(/td)(/tr) (tr)(td)4(/td) (td)5(/td) (td)6(/td)(/tr) (/table) . Tako će naš sto biti oslikan u pozadini slike.

Sada nacrtajmo istu tabelu dimenzija 2x3, ali sliku ubacimo u kolone pod brojem 1, 4, 5 i 6. (tabela)(tr)(td background = “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 background = “Slike/Slika.jpg”)6(/td) (/tr) (/table). Nakon pregleda vidimo da se pozadina pojavljuje samo u onim ćelijama u kojima smo se registrovali, a ne u cijeloj tabeli.

Stranica sa više pretraživača

Postoji i takva stvar kao što je web resurs za više pregledača. To znači da će stranice stranice biti jednako ispravno prikazane u različitim tipovima i verzijama pretraživača. U tom slučaju morate prilagoditi HTML kod i CSS stil za potrebne pretraživače. Osim toga, u modernoj eri razvoja pametnih telefona, mnogi web programeri pokušavaju kreirati stranice koje su prilagođene i mobilnoj verziji i pregledu na računaru.

Uz pomoć CSS boja i pozadina možete postaviti gotovo svaki element web stranice, slobodno kontrolirati pozadinsku sliku, njeno ponavljanje horizontalno i okomito. Osim toga, koristeći CSS, možete postaviti pozadinsku sliku bilo gdje na ekranu koristeći pozicioniranje. Hajde da još ne bežimo daleko, idemo redom.

COLOR property

Ovo svojstvo postavlja boju elementa, preciznije, boju teksta unutar elementa. Vrijednost je data 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 postavljena ni za jedan element, vrijednost će biti naslijeđena od svog pretka. Ali može se dogoditi da nije postavljen ni za pretka - tada će se stilski list pretraživača primijeniti koristeći zadane vrijednosti. Boja elementa u ovom slučaju će vjerovatno biti crna.

Kao što sam već spomenuo, možete postaviti boju za skoro 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.

Evo primjera postavljanja boje teksta pomoću CSS-a:

h1 (boja: plava)

U ovom primjeru, svi naslovi prvog nivoa web stranice bit će plavi:

jaka (boja: crvena)

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

Može se napisati ovako:

h1, p, jak (boja: zelena)

Tada će naslovi prvog nivoa, svi paragrafi i sve što je označeno oznakom biti zeleno.

Kada je potrebno istaknuti naslove različitim bojama, koriste se selektori klasa. Atribut se koristi za definiranje klase u HTML-u klasa A koji se može primijeniti na bilo koji element. U HTML kodu ćete morati napisati:

class="blue"> Boja naslova ovog razreda bit će plava

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

h1.Plava (boja: plava)

U HTML dokumentima se također koriste selektori po identifikatoru, oni su definirani atributom id. Identifikator je značajniji ili prioritetniji atribut 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 funte ( # ). Da biste koristili identifikator u HTML kodu, morat ćete napisati:

id="blue"> Boja naslova ovog identifikatora bit će plava

U tablici stilova zauzvrat:

h1#Plava (boja: plava)

Pozadina-BOJA svojstvo

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

tijelo (boja pozadine: aqua)

U ovom slučaju, pozadina stranice će biti tirkizna, a da bismo dali pozadinu naslovu, pišemo:

h1 (boja pozadine: žuta)

Dobijamo žutu pozadinu naslova prvog nivoa.

Boja i pozadina u CSS-u

Svojstvo BACKGROUND-REPEAT

Ovo svojstvo se koristi kada je postavljeno da odredi hoće li se ponavljati vodoravno i okomito. Važeće vrijednosti:

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

Kod je napisan ovako:

p(
pozadinska slika: url( adresa slikovne datoteke) ;
background-repeat : repeat-x
}

Tekst ovog pasusa bit će na vrhu pozadinske slike, koja će biti postavljena horizontalno.

POZADINA-PRILOG nekretnine

Ovo svojstvo se koristi da kaže pregledniku da li pozadinska slika stranice treba da se kreće s tekstom ( skrolujte) ili ostani miran ( fiksno).

tijelo (
pozadinska slika: url( adresa slikovne datoteke) ;
background-repeat : repeat-x ;
pozadinski prilog: fiksno
}

U tom slučaju, pozadinska slika će ostati fiksna.

Pozadina-POZICIJA svojstvo

Ovo svojstvo se koristi za pozicioniranje slike u odnosu na . Vrijednosti se postavljaju u procentima (%), u jedinicama dužine (cm, px), sa ključnim riječima:

• okomito:
• top- vrh slike je poravnat sa gornjom ivicom stranice ili bloka;
• centar
• dnu- dno slike je poravnato sa donjim rubom stranice ili bloka.
• Horizontalno:
• lijevo- lijevi rub slike je poravnat sa lijevom ivicom stranice ili bloka;
• centar- centar slike je poravnat sa sredinom stranice ili bloka;
• u pravu- desna ivica slike je poravnata sa desnom ivicom stranice ili bloka.

Pišemo primjer koda u procentima, jedinicama dužine i ključnim riječima:

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

tijelo (
pozadinska slika: url( adresa slikovne datoteke) ;
background-position : 10px 25cm
}

tijelo (
pozadinska slika: url( adresa slikovne datoteke) ;
background-position : gornji centar
}