Az előző fejezetekben összeállítottunk egy alapsablont a HTML dokumentumokhoz, meghatároztuk, mik azok a HTML címkék, megtanultuk, hogyan kell menteni és szerkeszteni HTML fájlokat, é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 lehetőségek 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. 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 egy szín csak egy szóból állhat, például „piros”, de ha „zöld-piros”-t ír, a böngésző nem fogja megérteni, és egyszerűen figyelmen kívül hagyja.
2) text="#000000"- RBG színséma (piros zöld kék). "#" ez a szimbólum azt jelzi, hogy ez egy színszám, az első két szimbólum (példámban nullák) jelzi, hogy hány „piros” színt vettünk, a második zöld, az utolsó kettő pedig kék.
Minden szín 00-tól FF-ig (0-1-2-3-4-5-6-7-8-9-A-B-C-D-E-F) van megadva, 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ó. Ki kell csomagolnia az archívumot, és futtatnia kell a fájlt color.html, majd a nagy mezőre helyezzük az egérmutatót a kívánt színre, ami egy kis ablakban fog megjelenni, és ha ekkor kattintunk az egérrel, akkor a jobb oldali kis ablakban megjelenik a színkód.

Most térjünk vissza az aktánkhoz index.htmlés mentse el másként tsvet.html, most lássuk mi történt. Milyen volt és milyen maradt? És teljesen igazad van, mert a fehér a háttér, 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!!! Mentsük el és nézzük meg (új lapon nyílik meg)

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

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

A HTML-webhelyek háttere mindkét címkeattribútum használatával módosítható test, és a címkére is alkalmazott CSS-stílusok használatával test. Tekintsük mindkét lehetőséget a webhely hátterének elkészítésére.

A háttérszín megváltoztatása HTML használatával

Címke test, mint szinte minden HTML címkének, saját attribútumai vannak. Attribútumok címkézéséhez test viszonyul:

• bgcolor- meghatározza az oldal háttérszínét;
• háttér- lehetővé teszi, hogy képet állítson be egy weboldal háttereként (ezt a kérdést a cikk részletesen tárgyalja:);
• tekercs- vezérli a görgetősáv megjelenítését az oldalon;
• szöveg- beállítja a weboldalon megjelenő szöveg alapszínét;
• bgproperties- jelzi, hogy a háttér gördül-e az oldallal együtt;
• link- szabályozza az oldalon található hivatkozások alapértelmezett színét;
• egy link- beállítja az aktív hivatkozás színét;
• vlink- meghatározza a meglátogatott hivatkozás színét az oldalon;
• bal margó/jobb margó- beállítja a tartalom behúzását a böngészőablak bal vagy jobb szélétől;
• topmargin/bottommargin- beállítja a tartalom behúzását a böngészőablak felső vagy alsó szélétől;

A háttérszín HTML használatával történő megváltoztatásához az attribútumot használjuk bgcolor:

Ez egy példa a body címke text attribútumával megadott fehér szövegre.

Jegyzet: Javasoljuk az oldal háttérszínének megadását, még akkor is, ha a háttér fehér. Ennek az az oka, hogy egyes felhasználók nem szabványos háttérszínt használnak a böngészőjükben, és emiatt a webhely szövege olvashatatlanná válhat.

Az oldal háttérszínének megváltoztatása CSS segítségével

Ez egy példa a fehér szöveg háttér-CSS használatával. Az oldal hátterét is CSS segítségével állítjuk be.

A Nubex webhelykészítőben bármely webhelyhez kiválaszthat egy kész hátteret egy nagy képtárból, vagy hozzáadhat sajátot.

A szerzőtől:Üdvözöljük a webformyself oldalán, és ma szeretném elmondani, hogyan változtathatod meg a webhely hátterét. A háttér színe vagy kép a háttérben óriási szerepet játszhat a webhely megjelenésében, ezért tudnia kell, hogyan kell beállítani.

Hogyan változtassuk meg a hátteret a wordpressben

Ismétlem, ha WordPress motorral rendelkezik, akkor az oldal általános hátterének megváltoztatása nem lesz nehéz. Csak rá kell kattintania a „Testreszabás” gombra a „Megjelenés” lapon. Itt kell kiválasztania a „Színek” lehetőséget. A választott sablontól függően előfordulhat, hogy különböző elemekhez választhat színeket. De az oldal színét minden esetben kiválaszthatja - egy kényelmes színes panel nyílik meg előtted.

A beállítások száma itt attól függ, hogy milyen sablonnal rendelkezik. Mindenesetre mindenképpen a teljes oldal színének beállítására van lehetőség, a különböző sablonokban a címsorok, linkek stb. hátterét és színét is beállíthatjuk.

Valójában ez minden, amit tudnod kell. Ha háttérképet kell letöltenie, válassza ki a megfelelő elemet, és keresse meg a kívánt fájlt a számítógépén.

JavaScript. Gyors kezdés

Jó értelemben a kép ne legyen túl nehéz, mert ez nagyban befolyásolja az oldal betöltési sebességét. Ideális az úgynevezett varrat nélküli háttérképek használata, amelyek vízszintesen és függőlegesen ismétlődnek, és így kitöltik a teljes teret.

A kép betöltése után néhány hasznos beállítást kell megadnia. A WordPress kényelme, hogy azonnal látja a változásokat, attól függően, hogy milyen beállításokat választ.

Először meg kell választania az ismétlési módszert. Már 4 lehetőség van: ismételje meg csak vízszintesen, csak függőlegesen, mindkét oldalon, és ne ismételje meg. A használt képtől függően választania kell.

Az ismétlés lehetővé teszi, hogy jelentősen megtakarítsa a kép méretét, ha az kicsi, és megismételhető, így nem láthatók az ismétlések közötti éles átmenetek. Így több tíz kilobájtot takaríthat meg ahhoz a módszerhez képest, amikor egy nagy méretű, teljes méretű képet töltenek be.

Pozíció. Itt nincs mit magyarázni, csak nézd meg, hogyan változik az oldal megjelenése a különböző háttérpozíciókkal. Válassza ki azt a lehetőséget, amelyik a legjobban tetszik.

Kötés. Ez egy nagyon érdekes beállítás, lehetővé teszi, hogy kiválaszthassa, hogy a háttérképet a tartalommal együtt görgeti, vagy egy helyen rögzíti. Én személy szerint mindig a fix opciót szeretem választani, mert ha lefelé görgetsz, csak a tartalomblokkok mozognak.

Például, ha a háttérkép 1000 pixel magas, és nem ismétli meg vagy rögzíti, akkor ha lefelé görget, egyszerűen eltűnik a nézetből. A háttér rögzítése lehetővé teszi, hogy a kép mindig látható maradjon. Néha ez nagyon hatékony megoldás.

JavaScript. Gyors kezdés

Tanulja meg a JavaScript alapjait a webalkalmazások létrehozásának gyakorlati példáján keresztül.

Valójában ez minden a WordPress hátterének megváltoztatásához szükséges. Amint látja, minden a lehető legegyszerűbb.

Hogyan lehet megváltoztatni egy webhely hátterét html-ben

Oké, megnéztünk egy tisztán vizuális verziót, amelyben nem kell belemenni a kódba, és nem kell oda írni semmit. Most nézzük meg, hogyan változtathatjuk meg a hátteret html és css segítségével. Milyen előnyökkel jár ez? Nem csak általában az oldalhoz állíthat be háttérképeket, hanem minden elemhez külön-külön is. Például valamilyen widgethez, menühöz, fejléchez stb. Ez sokkal több lehetőséget ad a weboldal tervezésben és a dizájn megváltoztatásában.

Ahhoz, hogy hozzáférjen ehhez a stílushoz, meg kell találnia a sablon fő stíluslapját. Általában a gyökérben vagy a css mappában található, style.css vagy main.css néven.

Ebben látni fogja azt a kódot, amely a webhely különböző elemeit tervezi. Ha globálisan szeretnénk beállítani a hátteret, akkor ezt úgy tudjuk megtenni, hogy hátteret rendelünk a törzsválasztóhoz, vagyis az oldal törzséhez.

Hogyan van beállítva a háttér?

Ne feledje - a háttértulajdonság. Ma jobb ennek a tulajdonságnak a rövidített változatát használni. Például:

body( háttér: #ccc url(bg.png) no-repeat 50% 50% fix; )

Mit jelent mindez? Az első paraméter általában egyszínű. Tegyük fel, hogy szürkére állítottuk. Előfordulhat, hogy a szín nem adható meg, ha háttérkép van megadva. Amint látható, a kép az url (fájl elérési út) konstrukcióval van megadva. Ennek megfelelően helyesen kell felírnia a fájl elérési útját, és feltétlenül jeleznie kell a kiterjesztését is.

Az összes paraméter, amit ezek után felírtam, nem kötelező, és tetszés szerint megadható. Tehát megadtam, hogy a háttérkép ne ismétlődjön, vízszintesen és függőlegesen is középre kerüljön, és egy helyen rögzítve legyen, hogy görgetés közben ne tűnjön el.

Amint láthatja, itt ugyanazok a paraméterek vannak, amelyeket vizuálisan konfigurált, de itt a háttértulajdon értékeiként vannak regisztrálva.

Ebben a példában egy rövidített tulajdonságjelölést használtam, ez csak kényelmesebb, de valójában minden egyes paraméternek megvan a saját tulajdonsága: háttérszín a színhez, háttér-kép a képhez, háttér-pozíció a pozíció beállításához.

Természetesen, hogy folyékonyan ismerje ezeket a tulajdonságokat, azt tanácsolom, hogy először végezze el tanfolyamunkat, és ha haladó css nyelvet szeretne használni, akkor azt. Itt megtanulhatja, hogyan állíthat be egyszerre több hátteret, hogyan állíthatja be azok ismétlését, hogyan használhat színátmeneteket stb. Az információ nagyon érdekes és hasznos a webhely-készítők számára.

Nos, elmondtam a háttérrel való munka alapjait. Iratkozzon fel portálunkra, hogy híreket kapjon, és többet megtudjon a weboldalkészítésről.

JavaScript. Gyors kezdés

Tanulja meg a JavaScript alapjait a webalkalmazások létrehozásának gyakorlati példáján keresztül.

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

A bloggerek és a webhelytulajdonosok általában megváltoztatják a hátteret, hogy webhelyüket látványosabbá 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 az Ön webhelyével vagy blogjával, és nem akarja újra felkeresni. A háttér megfelelő hozzáadásához fontos a megfelelő HTML kódok használata.

Csak néhány egyszerű módszer van a meglévő webhely 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 lemásolhatja az alábbi szimbólumokat, és beillesztheti őket az erőforrásba, először eltávolítva a szóközöket.

A háttérszín testreszabása

Nyissa meg blogja vagy webhelye HTML-oldalát. Amikor egy oldalt szerkeszt, megnyithatja a Dreamweaverben, hogy megkönnyítse a munkáját. Ha webhelyét webhelykészítővel hozták létre, 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" fülre kattintva. 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.

Nincs értelme más színű külön képet keresni, ha csak a háttérszínt kell megváltoztatnia. Ehelyett egyszerűen szerkesztheti a HTML-kódot, és módosíthatja a meglévő színt a megtartani kívánt színre.

A HTML-színtáblázatokat 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 a fehér háttér #FFFFFF jelzéssel jelenik meg.

Tehát keresse meg azt a színkódot, amelyet háttérszínként szeretne megjeleníteni webhelyén. A jelölésben ez így fog kinézni:

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. Alternatív megoldásként használhat olyan képet, amelyet már elmentett a számítógépére.

Töltsd fel a képet az internetre. Sokan lehetővé teszik a képek ingyenes feltöltését. Szerezze meg a háttérkép URL-címét. 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 egy kódot, ahol az oldal törzse a HTML-ben 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 kiválasztani erre a célra.

Segítséggel CSS szín és háttér A weboldal szinte bármely eleméhez hozzárendelheti, szabadon szabályozhatja a háttérképet és annak ismétlődését vízszintesen és függőlegesen. Ezen túlmenően a CSS használatával pozicionálással bárhol elhelyezhet háttérképet a képernyőn. Egyelőre ne menjünk előre, haladjunk sorban.

SZÍN tulajdonság

Ez a tulajdonság az elem színét adja meg, 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 nincs érték beállítva egyik elemhez sem, akkor az érték az ősétől öröklődik. 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 nagy valószínűséggel fekete lesz.

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

Nézzünk egy példát a szöveg színének CSS használatával történő beállítására:

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.

Így írhatod:

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

Ekkor az első szintű címsorok, az összes bekezdés és minden, ami címkével van kiemelve, zöld 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 osztály HTML-ben történő meghatározásához az attribútumot használják osztály, amely bármilyen elemre alkalmazható. A HTML kódba a következőket kell írnia:

class="Kék" > Ennek az osztálynak a fejléc színe kék lesz

A CSS stíluslapba ebben az esetben írunk egy szabályt, ahol a kiválasztó a H1 elem lesz, é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 egy osztály és egy azonosító is meg van adva egy elemhez a HTML kódban, akkor az azonosító stílus kerül alkalmazásra. Az azonosítót hash jel jelzi ( # ). Az azonosító HTML-kódban való használatához a következőket kell írnia:

id="Kék" > Ennek az azonosítónak a fejléc 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, egy bekezdéshez, egy hivatkozáshoz vagy általában bármely HTML-elemhez. Ehhez a tulajdonság értéke színt vagy értéket ad meg á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 a fejléc hátterének megadásához írjuk:

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

Az első szintű címsorokhoz sárga hátteret kapunk.

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étlés-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 jelezze a böngészőnek, hogy az oldal háttérképét szöveggel ( tekercs) vagy mozdulatlan marad ( 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 mozdulatlan 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.

Példakódot írunk 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
}