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ű van, amellyel megváltoztathatja megjelenés meglévő webhelyét. 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, egyes 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.

Könnyen megtalálhatja a diagramot HTML színek szakkiadvá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.

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. Itt van néhány kulcsszavakat- 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 hüvelykes szám decimális rendszer az FF számnak felel meg hexadecimálisan. 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 összetevőt 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.

Eredmény ezt a példátá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 a 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ármelyikhez HTML elem. 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 ;
háttér-csatolás : 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
}

Az előző fejezetekben összeállítottuk a HTML dokumentumok fő sablonját, eldöntöttük, mik azok a HTML címkék, megtanultuk a html fájlok mentését és szerkesztését, és ebben a fejezetben Ismerkedjünk meg a címke attribútumokkalés módosítsa az oldal szövegének és hátterének színét.

Nyissuk ki a mi index.html, szerkesztéshez: Sikerült!!! És változtassunk egy kicsit, adjunk hozzá attribútumokat: text="#000000" bgcolor="#ffffff"> Megcsináltam!!! Tulajdonság egy címkeparaméter, amely "párként" (paraméternév + paraméterérték) kerül a címkébe.
A címke attribútumértékei beillesztésre kerülnek:
1) text=#000000 idézőjelek nélkül;
2) text="#000000" szimpla idézőjelben;
3) "#000000" szöveg idézőjelben.
Ezen opciók bármelyike ​​helyes, de ha érdekel a kód etikája, jobb idézőjeleket használni, mint a fenti példámban.

Tulajdonság "szöveg" szabályozza a szöveg színét a teljes oldalon, és "bgcolor" szabályozza az oldal háttérszínét.

Most azt javaslom, hogy beszéljünk a HTML dokumentumok színeiről. A szín beállítva:
1) text="arany"- szavak angolul, például: arany (arany), vörös (piros), zöld (zöld) és így tovább ...
De a szín csak egy szóból állhat, például "piros", de ha azt írja, hogy "zöld-piros", akkor a böngésző ezt nem fogja megérteni, és egyszerűen figyelmen kívül hagyja.
2) text="#000000"- RBG (red green blue) színséma. "#" ez a karakter azt mondja, hogy ez egy színszám, az első két karakter (a példámban nulla) jelzi, hogy mennyit vettünk a "piros" színből, a második zöld és az utolsó kettő kék.
Mindegyik szín 00-tól FF-ig (0-1-2-3-4-5-6-7-8-9-A-B-C-D-E-F) van beállítva, például #000000-fekete, #ffffff-white, #ff0000-red, # 00ff00- zöld #0000ff-kék

Az oldal bónuszaként javaslom, hogy töltsd le a színpalettát (2kB), ami a fenti képen látható. A fájl futtatásához ki kell csomagolnia az archívumot color.html, majd egy nagy mezőn helyezzük az egérmutatót a kívánt színre, ami egy kis ablakban jelenik meg, és ha ilyenkor rákattintunk az egérrel, akkor a színkód megjelenik egy kis ablakban a jobb oldalon.

Most térjünk vissza a fájlunkhoz index.htmlés mentse el másként tsvet.html, most lássuk mi történt. Milyen volt és milyen? És teljesen igazad van, hiszen a fehér a háttér színe, a fekete pedig a szöveg alapszíne. A különbség észrevételéhez változtassuk meg az attribútumértékeket:

text=gold" bgcolor="#0900b8"> Megcsináltam!!! Mentés és megtekintés (új lapon nyílik meg)

Vannak más módok is a szöveg beállítására a html fájlokban, de ez a kettő tekinthető a főbbnek.

A következő fejezetben megtanuljuk, hogyan lehet szöveget kezelni BR címkékkel, hogyan lehet szöveget tördelni egy másik sorba.

17.10.2015

Még nem

Sziasztok!
Továbbra is tanuljuk a HTML alapjait.
Ebben a leckében elmondom és példákkal mutatom be hogyan készítsünk hátteret egy HTML-oldalon lévő színből vagy képből.
Minden nagyon egyszerű!
Kezdjük a színekkel!
Azt hiszem, nem hagytad ki, ahol a szöveg színének megváltoztatásáról beszéltem, és a cikk végén megadtam a különböző színek és árnyalatok kódjait. Miért emlékeztettelek erre a leckére? Igen, mert van egy táblázat kész színkódokkal, vedd elő őket és gyakorolj azonnal ezen a leckén.
Szóval, hogyan készítsünk színes hátteret HTML-ben...

Színes háttér HTML-ben

A HTML-dokumentum háttérszíne alapértelmezés szerint fehér. Hogyan állítsuk be a kívánt színt?
A "bgcolor" attribútum ebben segít nekünk. A háttér átfestéséhez írja be ezt az attribútumot a " body» címkébe:

Akár így:

Íme a teljes HTML kód:

Az oldal szövege zöld, a háttér pedig fekete lesz.

Az eredmény a következő lesz:

Ha hátteret szeretne készíteni egy képből, adja hozzá a „background” attribútumot a „body” címkéhez:

Töltsön ki bármilyen képet, ahol az Ön weboldala található (például az oldalam "fon" névvel rendelkezik ".gif" kiterjesztéssel):

Íme a teljes HTML kód:

Az eredmény a következő lesz:

Ha a háttérkép a képek mappában vagy más mappában található, a következőképpen fog kinézni:

Íme a teljes HTML kód:

Az oldal szövege egy gyönyörű háttéren.

Ez minden mára! Azt hiszem, a lecke nem volt nehéz, és mindent megértett. Ha bármilyen kérdése van, írja meg a megjegyzésekben.
Várom, hogy találkozzunk a következő leckéken.

Előző poszt
Következő bejegyzés