Címke a háttér megváltoztatásához html-ben. Szövegszín és háttérszín a CSS-ben. Alapvető eszközök a weboldalak hátterének beállításához

Nagyon egyszerűen testreszabhatja blogját vagy webhelyét. Ez a cikk bemutatja, hogy milyen egyszerű a betűtípus megváltoztatása az oldal fejlécében és háttérképében.

A bloggerek és a webhelytulajdonosok általában megváltoztatják a hátteret, hogy webhelyüket vizuálisan vonzóbbá tegyék a látogatók számára. A helytelenül hozzáadott háttérkép azonban megzavarhatja a látogatót, sőt bizalmatlanságot válthat ki webhelyével vagy blogjával szemben, és nem hajlandó újra meglátogatni. A háttér megfelelő hozzáadásához fontos a megfelelő HTML-kódok használata.

Csak néhány egyszerű módja van meglévő webhelye megjelenésének megváltoztatására. Sok felhasználó nem is tudja, milyen egyszerű ez.

A betűtípus testreszabása

Először is hozzá kell adnia négy metacímkét bárhol ezután< head >. Egyszerűen másolja az alábbi szimbólumokat, és illessze be az erőforrásba, miután eltávolította a szóközöket.

A háttérszín testreszabása

Nyissa meg az oldalt blogja vagy webhelye HTML-kódjában. Amikor szerkeszt egy oldalt a Dreamweaverben, megnyithatja azt, hogy megkönnyítse a munkáját. Ha webhelye webhelykészítővel készült, bizonyos szolgáltatások lehetővé teszik a HTML-beállítások online módosítását a Tervezés oldalra lépve, és a HTML szerkesztése lappal. Akárhogy is, hozzá kell férnie blogja vagy webhelye HTML-kódjaihoz. A beállítási folyamat nagymértékben változhat attól függően, hogy milyen szolgáltatások állnak rendelkezésre az Ön számára, és milyen motort használ.

Nem érdemes más színű külön képet keresni, ha csak a háttérszínt kell megváltoztatni. Ehelyett egyszerűen szerkesztheti a HTML-kódot, és megváltoztathatja a meglévő színt arra, amit meg akar tartani.

A HTML színtáblázatot könnyen megtalálhatja a speciális kiadványokban. Minden szín hatjegyű kódként jelenik meg a jelölésben. Például egy fehér háttér #FFFFFF-ként van megjelölve.

Így keresse meg azt a színkódot, amelyet háttérszínként szeretne látni webhelyén. Jelölésben ez így nézne ki:

háttérszín:#XXXXXX; (

Miután elmentette a háttérszínt HTML-ben, látni fogja, hogy az oldal megjelenése megváltozott.

Háttérkép hozzáadása

Válassza ki a háttérképként hozzáadni kívánt képet. Sok olyan webhely van, ahol ilyen háttereket tölthet le. Ezenkívül használhat olyan képet is, amelyet már elmentett a számítógépére.

Töltse fel a képet az internetre. Sokan lehetővé teszik a képek ingyenes letöltését. Szerezzen be egy URL-t a háttérképhez. Ehhez meg kell nyitnia a képet a böngészőben, és ki kell másolnia az URL-t.

Illessze be a kódot egy kép hozzáadásához háttérként. HTML-ben így néz ki:

background-image: url(kép URL);

Hozzá kell adnia a kódot a HTML-ben, ahol az oldal törzse kezdődik. Mentse el a módosításokat a szerkesztés után, és töltse be webhelyét. Látni fogja, hogy a kép teljesen felváltotta a háttérszínt.

Ne feledje azonban, hogy a túl nagy képek betöltése nagyon sokáig tarthat, ami sok látogató számára kellemetlen lesz. Emiatt próbáljon kis képeket választani erre a célra.

Szép napot mindenkinek, aki szeretne tanulni és valami újat tanulni! Odafigyeltél már a megjelenésre, aminek a fejlesztése során az alkotók lusták voltak az oldalak hátterét díszíteni? És megfordultam. Ez rosszul néz ki. Gyakran az általunk megszokott különböző típusú információk közötti megosztás hiánya miatt összekeverednek, és egyszerűen nincs kedvünk tovább nézni egy ilyen internetes forrást.

Annak érdekében, hogy ilyen katasztrófa ne történjen meg velem, úgy döntöttem, hogy írok egy cikket a témában: "Hogyan készítsünk oldal hátteret html-ben." A kiadvány elolvasása után megtudhatja, milyen eszközökkel állíthatja be a háttér kialakítását, hogyan lehet a hátteret rögzíteni vagy megváltoztatni, és még sok minden mást, ami segít vonzóvá tenni webhelyét. És most kezdjük!

Alapvető eszközök a weboldalak hátterének beállításához

A háttérkép beállításához a webnyelv-tervezők megadták a háttér attribútumot. Elérhető , és css nyelven is.

A jelölőnyelvben ez a body címke attribútuma, a stíluslapokban pedig egy univerzális tulajdonság, amely lehetővé teszi akár 5 háttérjellemző egyidejű beállítását. A háttér egy meglehetősen rugalmas elem, amellyel beállíthatjuk a hátteret egyetlen szín, színes kép vagy akár animáció formájában.

Tehát a háttérkép beállítása a html egységen keresztül csak írja be ezt a kódot: ...

és a "fájl címe" szavak helyett írja be a kép elérési útját.

Azonban figyeld! Ha egy egyszínű vásznat szeretne látni háttérként, amelyet a színpaletta érték határozza meg, akkor ez a bgcolor attribútum használatával történik.

Például, ...

, fekete hátteret állítottunk be oldalunkhoz.

A css és a html színeit vagy egy angol szó (például red) vagy egy speciális kód határozza meg, amely a # jelből és az azt követő hat karakterből áll (például #FFDAB9).

Amikor beírja a második opciót a fejlesztőknek szánt speciális szoftvertermékekben, a paletta automatikusan megjelenik előtted. Ha most kezdte el tanulmányozni ezeket a webes nyelveket, akkor az interneten megtekintheti a színkódot.

Háttér, mint tulajdonság a lépcsőzetes stíluslapokon

Ez vagy egy külön fájlban van beállítva css stílusokkal, vagy egy elemben

Ezen a ponton összefoglalhatjuk munkánkat. Csatlakozz hűséges feliratkozóim soraihoz, kérdezz, ha valami nem világos, és ne kapj egy linket a blogomra, hanem oszd meg barátaiddal. Kellemes tanulást kívánok. Viszlát!

Üdvözlettel: Roman Chueshov

A háttérszín nagyon fontos eleme minden weboldalnak. Először is beállítja az oldal megfelelő hangulatát és általános hangulatát, másodszor pedig megkönnyíti a szöveg érzékelését.

A weboldal háttérszíne a címke bgcolor attribútuma segítségével állítható be .

1. példa: A háttérszín megváltoztatása

A szín megadható hexadecimális értékben vagy nevével.

Bár a háttérhez bármilyen színt megadhat, a legtöbb webhely túlnyomórészt fehér hátteret és fekete betűket használ a legelterjedtebb lehetőségként.

háttér kép

Háttérként bármilyen alkalmas képet használhat ehhez. A háttérnek nem szabad elrontania a szöveget, ugyanakkor jól illeszkednie kell a weboldal színsémájához, és kis méretűnek kell lennie a gyors betöltéshez. Ha a fentiek után mégis szeretne háttérképet hozzáadni az oldalhoz, akkor a címke background attribútuma használható .

2. példa: Háttérkép hozzáadása

Ha a kép kisebb, mint a monitor képernyőmérete, a rendszer vízszintesen és függőlegesen reprodukálja.

Mivel a háttérkép lassabban töltődik be, mint a háttérszín, előfordulhat, hogy a szöveg egy ideig nem lesz olvasható, amíg a képek be nem töltődnek. Ugyanez történhet a böngészőben letiltott képekkel. Ezért javasoljuk, hogy a háttérszínt mindig a háttérkép mellett állítsa be (3. példa).

3. példa: Háttérkép és háttérszín használata

rögzített háttér

Alapértelmezés szerint a görgetősáv használatakor a háttérkép a weboldal tartalmával együtt mozog. Az Internet Explorer lehetővé teszi a háttér rögzítését a címke bgproperties="fixed" attribútumával .

4. példa – Rögzített háttér beállítása

A bgproperties attribútum megadásával, ahogy a 4. példában látható, a weboldal háttérképe mozdulatlan marad, a szöveg, grafika és egyéb elemek pedig a görgetősávval együtt mozognak.

Egy teljes weboldal vagy egyes elemek háttérszínének megváltoztatásához használja a háttér vagy háttérszín általános tulajdonságot. A szín bármilyen CSS-elérhető formátumban megadható. A leggyakoribbak a következő módszerek.

Színnév szerint

A böngészők egyes színeket név szerint támogatnak. Íme néhány kulcsszó - fekete (fekete), fehér (fehér), piros (piros), zöld (zöld), kék (kék) stb.

Hexadecimális érték szerint

A színek megadására hexadecimális számokat használunk. A hexadecimális rendszer, a decimális rendszertől eltérően, ahogy a neve is sugallja, a 16-os számon alapul. A számok a következők lesznek: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. A 10 és 15 közötti számokat latin betűk helyettesítik. A hexadecimális rendszerben a 15-nél nagyobb számok két szám egyesítésével jönnek létre. Például a 255 decimális szám megfelel a hexadecimális FF számnak. A számrendszer meghatározásakor a félreértés elkerülése érdekében a hexadecimális számot a # hash szimbólum előzi meg, például #666999. A három szín – piros, zöld és kék – mindegyike 00 és FF közötti értéket vehet fel. Így a szín megjelölése három komponensre oszlik #rrggbb, ahol az első két karakter a szín piros, a két középső a zöld, az utolsó kettő pedig a kék komponenst jelöli. Megengedett egy rövidített alak használata, például az #rgb, ahol minden karaktert meg kell duplázni. Így az #fc0 bejegyzést #ffcc00-nak kell tekinteni. A kis- és nagybetűnek ebben az esetben nincs jelentősége, így a szöveg kis- és nagybetűkkel is beírható.

RGB-vel

A színt a vörös, zöld és kék tizedesjegyek használatával határozhatja meg. A három összetevő mindegyike 0 és 255 közötti számot vehet fel. Elfogadható a szín százalékos megadása is, például rgb(90%, 30%, 60%).

RGBA

Az RGBA formátum szintaxisában hasonló az RGB-hez, de tartalmaz egy alfa-csatornát, amely meghatározza az elem átlátszóságát. A 0 érték teljesen átlátszó, az 1 átlátszatlan, a közbülső érték, például a 0,5 pedig áttetsző.

Az 1. példa a háttér és a szöveg színének megváltoztatását mutatja be.

1. példa: Háttérszín

Fenntarthatóság

A Ljapunov szerinti stabilitás oszcillálja a stabil eszközt.

Ennek a példának az eredménye az ábrán látható. egy.

Rizs. 1. Színes háttér

Az RGBA formátum lehetővé teszi, hogy egy elem háttérszínét áttetszőre állítsa, így a weboldal háttere átlátszik. Feltűnőbbnek és lenyűgözőbbnek tűnik, ha van háttérképünk vagy mintánk, nem pedig egyszínű. Ekkor a kép átlátszik a háttéren, de a szöveg olvashatósága megmarad (2. ábra).

Rizs. 2. Félig átlátszó háttér

A 2. példa bemutatja az RGBA formátum használatát egy ilyen háttér létrehozására.

2. példa: RGBA formátum

Segítséggel CSS szín és háttér a weboldal szinte bármely elemét beállíthatja, szabadon szabályozhatja a háttérképet, annak ismétlődését vízszintesen és függőlegesen. Ezenkívül a CSS használatával a háttérképet pozicionálás segítségével bárhol elhelyezheti a képernyőn. Még ne szaladjunk messzire, menjünk sorban.

SZÍN tulajdonság

Ez a tulajdonság beállítja az elem színét, pontosabban az elemen belüli szöveg színét. Az érték a következő lehetséges formák egyikében van megadva:

• szín neve (ZÖLD, FEKETE, PIROS...);
• hexadecimális színkód (008000, 000000, FF0000...);
• decimális színkód RGB-ben (color:rgb (40, 175, 250));

A COLOR tulajdonság öröklődik, és ha egyik elemhez sincs beállítva érték, akkor az értéket az ősétől örökli. De előfordulhat, hogy az ősnek sincs beállítva - ekkor a böngésző stíluslapja az alapértelmezett értékeket használva kerül alkalmazásra. Az elem színe ebben az esetben valószínűleg fekete.

Mint már említettem, szinte minden elemhez beállíthatunk színt, lehet (H1... H6), (strong, em) és akár egész (p) és akár táblázatszegély is, de erről majd később.

Íme egy példa a szöveg színének beállítására CSS használatával:

h1 (szín: kék)

Ebben a példában a weboldal összes első szintű címsora kék színű lesz:

erős (szín: piros)

Ebben az esetben minden, ami az oldal szövegében van, kiemelve lesz a címkével erős, piros lesz.

Ezt így lehet írni:

h1, p, erős (szín: zöld)

Ekkor az első szint fejlécei, az összes bekezdés és minden, ami címkével van kiemelve, zöld színű lesz.

Amikor szükségessé válik a címsorok különböző színekkel való kiemelése, osztályválasztókat használnak. Egy attribútum egy osztály meghatározására szolgál a HTML-ben osztály A bármely elemre alkalmazható. A HTML kódba a következőket kell írnia:

class="blue"> Az osztály címeinek színe kék lesz

A CSS stíluslapban ebben az esetben írunk egy szabályt, ahol a H1 elem lesz a kiválasztó, és a ponton keresztül ( . ) osztály név:

h1.Kék (szín: kék)

A HTML dokumentumokban az azonosító szerinti szelektorok is használatosak, ezeket az attribútum határozza meg id. Az azonosító jelentősebb vagy prioritásosabb attribútum, mint egy osztály. Ha pedig az osztály és az azonosító is meg van adva az elem HTML kódjában, akkor az azonosító stílusa kerül alkalmazásra. Az azonosítót egy font jel jelöli ( # ). Az azonosító HTML-kódban való használatához a következőket kell írnia:

id="kék"> Az azonosító címének színe kék lesz

A stíluslapon viszont:

h1#Kék (szín: kék)

BACKGROUND-COLOR tulajdonság

Ezzel a tulajdonsággal beállíthatja a háttérszínt az oldal egészéhez, bekezdéshez, hivatkozáshoz, általában bármely HTML-elemhez. Ehhez meg kell adni a színt vagy az értéket a tulajdonság értékében. átlátszó(átlátszó). Az oldal hátterének kódja a következő:

test (háttérszín: aqua)

Ebben az esetben az oldal háttere türkiz lesz, és hogy a cím hátterét adjuk, írjuk:

h1 (háttérszín: sárga)

Az első szint címsorainak sárga hátterét kapjuk.

Szín és háttér a CSS-ben

BACKGROUND-REPEAT tulajdonság

Ezt a tulajdonságot a rendszer annak meghatározására használja, hogy vízszintesen és függőlegesen ismétlődik-e. Érvényes értékek:

• ismétlés- a kép függőlegesen és vízszintesen ismétlődik;
• ismételje meg x- a kép csak vízszintesen ismétlődik;
• ismétlés-y- a kép csak függőlegesen ismétlődik;
• nem-ismétlés- a kép nem ismétlődik.

A kód így van írva:

p(
háttérkép: url( képfájl címe) ;
háttér-ismétlés: ismétlés-x
}

Ennek a bekezdésnek a szövege a háttérkép tetején lesz, amely vízszintesen helyezkedik el.

HÁTTÉR-MELLÉKLET tulajdonság

Ez a tulajdonság arra szolgál, hogy megmondja a böngészőnek, hogy az oldal háttérképét szöveggel ( tekercs) vagy maradj mozdulatlanul ( rögzített).

test (
háttérkép: url( képfájl címe) ;
background-repeat : ismétlés-x ;
background-attachment : fix
}

Ebben az esetben a háttérkép rögzített marad.

BACKGROUND-POSITION tulajdonság

Ez a tulajdonság a kép viszonyítására szolgál. Az értékek százalékban (%), hosszegységben (cm, px) vannak megadva, kulcsszavakkal:

• Függőlegesen:
• tetejére- a kép teteje az oldal vagy blokk felső széléhez igazodik;
• központ
• alsó- a kép alja az oldal vagy blokk alsó széléhez igazodik.
• Vízszintesen:
• bal- a kép bal széle az oldal vagy blokk bal széléhez igazodik;
• központ- a kép közepe az oldal vagy blokk közepéhez igazodik;
• jobb- a kép jobb széle az oldal vagy blokk jobb széléhez igazodik.

Írunk egy kódpéldát százalékban, hosszegységben és kulcsszavakban:

test (
háttérkép: url( képfájl címe) ;
háttérpozíció: 0% 0%
}

Test(
háttérkép: url( képfájl címe) ;
háttérpozíció: 10px 25cm
}

Test(
háttérkép: url( képfájl címe) ;
háttér-pozíció: felül középen
}