Oznaka za promjenu pozadine u html-u. Boja teksta i boja pozadine u CSS-u. Osnovni alati za postavljanje pozadine web stranica

Vrlo jednostavno možete potpuno prilagoditi svoj blog ili web stranicu. Ovaj članak pokazuje koliko je lako promijeniti font u zaglavlju i pozadinu stranice.

Blogeri i vlasnici stranica obično mijenjaju pozadinu kako bi svoju web stranicu učinili vizualno privlačnijom posjetiteljima. Međutim, pogrešno dodana pozadinska slika može zbuniti posjetitelja, pa čak i uzrokovati nepovjerenje prema vašoj web-lokaciji ili blogu i nespremnost da ih ponovo posjeti. Da biste ispravno dodali pozadinu, važno je koristiti prave HTML kodove.

Postoji samo nekoliko jednostavnih načina da promijenite izgled vaše postojeće stranice. Mnogi korisnici ni ne shvaćaju koliko je to lako.

Kako prilagoditi font

Prije svega, morat ćete dodati četiri meta oznake bilo gdje nakon toga< head >. Možete jednostavno kopirati donje simbole i zalijepiti ih u svoj resurs, nakon što uklonite razmake.

Kako prilagoditi boju pozadine

Otvorite stranicu u HTML-u vašeg bloga ili web stranice. Kada uređujete stranicu u Dreamweaveru, možete je otvoriti da biste olakšali svoj rad. Ako je vaša web lokacija napravljena pomoću alata za izradu web stranica, neke usluge vam omogućavaju da promijenite HTML postavke na mreži tako što ćete otići na stranicu Dizajn i odabrati karticu Uredi HTML. U svakom slučaju, trebali biste moći pristupiti HTML kodovima za svoj blog ili web stranicu. Proces postavljanja može uvelike varirati ovisno o tome koje su vam usluge dostupne i koji motor koristite.

Ne vrijedi pokušavati tražiti zasebnu sliku s drugom bojom ako sve što trebate učiniti je promijeniti boju pozadine. Umjesto toga, možete jednostavno urediti HTML i promijeniti postojeću boju u koju želite da zadržite.

Lako možete pronaći HTML grafikon boja u specijalizovanim publikacijama. Svaka boja je prikazana u oznaci kao šestocifreni kod. Na primjer, bijela pozadina je označena kao #FFFFFF.

Stoga pronađite kod boje koji želite da vidite na svojoj web lokaciji kao boju pozadine. U markupu bi to izgledalo ovako:

boja pozadine:#XXXXXX; (

Nakon što sačuvate boju pozadine u HTML-u, vidjet ćete da se izgled vaše stranice promijenio.

Dodavanje pozadinske slike

Odaberite sliku koju želite dodati kao pozadinu. Postoje mnoge stranice koje vam omogućavaju preuzimanje takvih pozadina. Osim toga, možete koristiti sliku koja je već sačuvana na vašem računaru.

Otpremite sliku na Internet. Mnogi vam omogućavaju besplatno preuzimanje slika. Nabavite URL vaše pozadinske slike. Da biste to učinili, morate otvoriti sliku u svom pretraživaču i kopirati URL.

Zalijepite kod da dodate sliku kao pozadinu. U HTML-u to izgleda ovako:

background-image: url(URL slike);

Morate dodati kod gdje počinje tijelo stranice u HTML-u. Sačuvajte promjene nakon uređivanja i učitajte svoju stranicu. Moći ćete vidjeti da je slika u potpunosti zamijenila boju pozadine.

Međutim, zapamtite da slike koje su prevelike mogu potrajati jako dugo da se učitaju, što će biti neugodno za mnoge posjetitelje. Iz tog razloga pokušajte odabrati male slike za ovu svrhu.

Dobar dan svima koji žele da nauče i nauče nešto novo! Da li ste ikada obratili pažnju na izgled, tokom čijeg razvoja su kreatori bili previše lijeni da ukrase pozadinu stranica? I okrenuo sam se. Ovo izgleda loše. Često, zbog nedostatka podjela između različitih vrsta informacija na koje smo navikli, one se miješaju i jednostavno nema želje da se dalje traži takav web resurs.

Da mi se takva katastrofa ne dogodi, odlučio sam napisati članak na temu: "Kako napraviti pozadinu stranice u html-u." Nakon što pročitate publikaciju, naučit ćete koje alate možete koristiti za postavljanje dizajna pozadine, kako popraviti ili promijeniti pozadinu i još mnogo toga što će pomoći da vaša web stranica bude privlačna. A sada počnimo!

Osnovni alati za postavljanje pozadine web stranica

Da bi postavili pozadinsku sliku, dizajneri web jezika su dali atribut pozadine. Dostupan je u css i .

U markup jeziku, ovo je atribut oznake tijela, au stilskim listovima, to je univerzalno svojstvo koje vam omogućava da postavite do 5 pozadinskih karakteristika u isto vrijeme. Pozadina je prilično fleksibilan element koji se može koristiti za postavljanje pozadine u obliku jedne boje, slike u boji ili čak animacije.

Dakle, da postavite pozadinu preko html jedinice samo napišite ovaj kod: ...

i umjesto riječi "adresa datoteke" ubacite putanju do slike.

Međutim, primijetite! Ako želite da vidite jednobojno platno kao pozadinu, određeno vrijednošću iz palete boja, onda se to radi pomoću atributa bgcolor.

Na primjer, ...

, postavili smo crnu pozadinu za našu stranicu.

Boje u css i html-u određene su ili engleskom riječi (na primjer, crvena) ili posebnim kodom koji se sastoji od znaka # i šest znakova iza njega (na primjer, #FFDAB9).

Kada kucate drugu opciju u specijalizovanim softverskim proizvodima za programere, paleta će se automatski pojaviti ispred vas. Ako ste tek počeli da proučavate ove web jezike, onda možete pogledati kod boja na internetu.

Pozadina kao svojstvo u kaskadnim stilovima

Postavlja se ili u zasebnom fajlu sa css stilovima, ili u elementu

S tim u vezi, možemo sumirati naš rad. Pridružite se redovima mojih vjernih pretplatnika, postavljajte pitanja ako vam nešto nije jasno i nemojte biti pohlepni za linkom do mog bloga, već ga podijelite sa svojim prijateljima. Želim vam ugodno učenje. Ćao ćao!

S poštovanjem, Roman Chueshov

Boja pozadine je vrlo važan element svake web stranice. Prvo, postavlja pravo raspoloženje i općenito raspoloženje stranice, a drugo, olakšava percepciju teksta.

Boja pozadine web stranice se postavlja pomoću atributa bgcolor oznake .

Primjer 1: Promjena boje pozadine

Boja se može specificirati u heksadecimalnoj vrijednosti ili po imenu.

Iako možete odrediti bilo koju boju za pozadinu, većina web lokacija koristi pretežno bijelu pozadinu i crna slova kao najprihvaćeniju opciju.

pozadinska slika

Kao pozadinu, možete koristiti bilo koju odgovarajuću sliku za to. Pozadina ne bi trebala umanjiti tekst, dok bi se trebala dobro uklopiti u shemu boja web stranice i biti male veličine za brzo učitavanje. Ako, nakon gore navedenog, i dalje želite dodati pozadinsku sliku na stranicu, trebali biste koristiti pozadinski atribut oznake .

Primjer 2: Dodavanje pozadinske slike

Ako je slika manja od veličine ekrana monitora, ona će se reproducirati horizontalno i okomito.

Budući da se pozadinska slika učitava sporije od boje pozadine, može se dogoditi da tekst neće biti čitljiv neko vrijeme dok se slike ne učitaju. Ista stvar se može desiti sa slikama onemogućenim u pretraživaču. Stoga se preporučuje da uvijek postavite boju pozadine zajedno sa slikom pozadine (primjer 3).

Primjer 3: Korištenje pozadinske slike i boje pozadine

fiksna pozadina

Prema zadanim postavkama, kada se koristi traka za pomicanje, pozadinska slika se pomiče zajedno sa sadržajem web stranice. Internet Explorer vam omogućava da popravite pozadinu pomoću atributa bgproperties="fixed" oznake .

Primjer 4 - Postavljanje fiksne pozadine

Specificiranjem atributa bgproperties, kao što je prikazano u primjeru 4, pozadinska slika na web stranici će ostati nepomična, a tekst, grafika i drugi elementi će se pomicati pomoću trake za pomicanje.

Da biste promijenili boju pozadine cijele web stranice ili pojedinačnih elemenata, koristite generičko svojstvo pozadine ili boje pozadine. Boja se može specificirati u bilo kojem CSS-pristupačnom formatu. Najčešće su sljedeće metode.

Po nazivu boje

Pretraživači podržavaju neke boje po imenu. Evo nekoliko ključnih riječi - crna (crna), bijela (bijela), crvena (crvena), zelena (zelena), plava (plava) itd.

Po heksadecimalnoj vrijednosti

Heksadecimalni brojevi se koriste za određivanje boja. Heksadecimalni sistem je, za razliku od decimalnog, zasnovan, kao što mu ime govori, na broju 16. Brojevi će biti sledeći: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Brojevi od 10 do 15 zamjenjuju se latiničnim slovima. Brojevi veći od 15 u heksadecimalnom sistemu formiraju se kombinovanjem dva broja u jedan. Na primjer, broj 255 u decimalnom obliku odgovara broju FF u heksadecimalnom. Da bi se izbjegla zabuna u definiciji brojevnog sistema, heksadecimalnom broju prethodi heš simbol #, na primjer #666999. Svaka od tri boje - crvena, zelena i plava - može imati vrijednosti od 00 do FF. Tako je oznaka boje podijeljena na tri komponente #rrggbb, gdje prva dva znaka označavaju crvenu komponentu boje, dva srednja označavaju zelenu komponentu, a posljednja dva plavu komponentu. Dozvoljeno je koristiti skraćeni oblik kao što je #rgb, gdje svaki znak treba udvostručiti. Dakle, unos #fc0 treba smatrati #ffcc00. Velika i mala slova u ovom slučaju nisu bitna, tako da se tekst može kucati i velikim i malim slovima.

Sa RGB

Možete definirati boju koristeći crvene, zelene i plave vrijednosti u decimalnim terminima. Svaka od tri komponente može imati broj od 0 do 255. Također je prihvatljivo postaviti boju kao postotak, na primjer rgb(90%, 30%, 60%).

RGBA

RGBA format je po sintaksi sličan RGB-u, ali uključuje alfa kanal koji određuje transparentnost elementa. Vrijednost 0 je potpuno transparentna, 1 je neprozirna, a srednja vrijednost poput 0,5 je prozirna.

Primjer 1 pokazuje promjenu boje pozadine i teksta.

Primjer 1: Boja pozadine

Održivost

Stabilnost prema Ljapunovu oscilira stabilan uređaj.

Rezultat ovog primjera prikazan je na sl. 1.

Rice. 1. Pozadina u boji

RGBA format vam omogućava da postavite boju pozadine elementa na prozirnu tako da će se pozadina web stranice vidjeti. Izgleda uočljivije i impresivnije kada imamo pozadinu ili uzorak, a ne jednobojnu. Tada će se slika prikazati kroz pozadinu, ali će čitljivost teksta ostati (slika 2).

Rice. 2. Polu-transparentna pozadina

Primjer 2 pokazuje korištenje RGBA formata za kreiranje takve pozadine.

Primjer 2: RGBA format

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. Nemojmo još daleko bježati, 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, može biti (H1...H6), (jako, em) pa čak i cijele (p) pa čak i ivice tabele, 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 istaknuto 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)

BACKGROUND-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 datoteke slike) ;
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 datoteke slike) ;
background-repeat : repeat-x ;
background-attachment : fiksno
}

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

POZICIJA-POZICIJA Nekretnina

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 datoteke slike) ;
pozadinski položaj : 0% 0%
}

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

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