17.10.2015

még nem

Üdv mindenkinek!
Továbbra is tanulmányozzuk a HTML alapjait.
Ebben a leckében elmondom és megmutatom a példákat, hogyan készítsünk hátteret Szín vagy képek a HTML oldalon.
Minden nagyon egyszerű!
Kezdjük el a színt!
Azt hiszem, nem hagyott ki, ahol elmondtam, hogyan kell megváltoztatni a szöveg színét, és a cikk végén különböző színű és árnyalatú kódokat adott. Miért emlékeztem erre a leckére? Igen, mert készen állt színes kódokkal ellátott asztal, azonnal vigye őket és gyakorolja a leckét.
Szóval, hogyan lehet színes háttér a HTML ...

Színes háttér a HTML-ben

A háttér színe az alapértelmezett HTML dokumentumban. Hogyan lehet megkérdezni a színt, ha szükséges?
Ez segít nekünk a "BGColor" attribútumban. A hátteret festeni, írja be ezt az attribútumot a "test" címkéhez:

Vagy úgy:

Itt van a teljes HTML kód:

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

Az eredmény ez lesz:

Ha azt szeretnénk, hogy a kép a képen, akkor a "test" címke, regisztráljuk a "Bacground" attribútumot:

Töltsön be olyan képet, ahol a weboldal fekszik (a példában, az oldalt ".gif" kiterjesztéssel "Fon" -nak nevezik):

Itt van a teljes HTML kód:

Az eredmény ez lesz:

Ha a háttérkép a képek mappában vagy más mappában kerül közzétételre, akkor így fog kinézni:

Itt van a teljes HTML kód:

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

Ma ez minden! Azt hiszem, a lecke nem volt bonyolult, és mindannyian megértették. Ha kérdése van, írjon a megjegyzésekben.
Várakozás az alábbi órákra.

Előző poszt
Következő hozzászólás

Jó nap mindenkinek, hogy tanuljon és tanuljon valami újdonságot! Voltál már valaha is megjelenés Amikor az alkotók lustaak voltak az oldalak hátterének kiadásához? És megfordultam. Úgy néz ki, vágás. Gyakran a szokásos elválasztások hiánya miatt különböző fajok Az információ vegyes és egyszerűen eltűnik a vágy, hogy tovább nézzen egy ilyen webes erőforrás.

Annak érdekében, hogy ilyen baj ne történt, úgy döntöttem, hogy egy cikket írok a témáról: "Hogyan készítsünk hátteret a HTML-ben". Miután elolvasta a kiadvány, megtudhatja, milyen eszközökkel lehet beállítani a háttér kialakítása, hogy hogyan lehet a háttérben rögzített vagy változó és még sok más, ami segít, hogy a webhely vonzó. Most kezdjük el!

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

A háttérkép beállításához a webes nyelvi fejlesztők egy attribútumot biztosítottak. Mind a CSS-ben, mind CS-ben érhető el.

A Markup nyelven - ez a testcímke attribútuma, valamint a stílusú asztalok - univerzális tulajdonságamely lehetővé teszi, hogy egyszerre a hátsó terv legfeljebb 5 jellemzőjét állítsa be. A háttér meglehetősen rugalmas elem, amely a háttér színét, színes képet vagy akár animációt végezhet.

Tehát, hogy a háttérképet egy HTML egységen keresztül telepítse Elég ahhoz, hogy ezt a kódot írja: ...

És a "fájlcím" szavak helyett helyezze be a kép elérési útját.

Értesítés azonban! Ha a háttér formájában szeretne látni egy Monochon vászonot a színpalettából, akkor ez a BGColor attribútum használatával történik.

Például, ...

Megkérdeztük a fekete hátteret webhelyünknek.

A CSS és HTML színeket egy angol szó (például piros), vagy egy speciális kódot tartalmaz, amely egy jel # és hat karakterből áll (például, # FFDAB9).

Amikor a második opciót szakosodott szoftvertermékek A fejlesztők számára a paletta automatikusan megjelenik előtted. Ha csak elkezdte tanulni ezeket a webes nyelveket, akkor a színkódot az interneten lehet eldobni.

Háttér, mint az ingatlan a lépcsőzetes stílustáblákban

Van beállítva vagy be van állítva külön fájl A CSS stílusokkal vagy az elemben

Ezen a megjegyzésben összefoglalja munkánkat. Csatlakozzon a hűséges előfizetők soraihoz, kérdezd meg kérdéseket, ha valami érthetetlen, és ne rágja meg a linket a blogomhoz, és ossza meg barátaival. Kellemes tanulást kívánok neked. Viszlát!

Tisztelettel, Roman Chuechev

A webhely konfigurálásakor a funkcionalitás mellett a terv nagyon fontos. Ez az, ami megkérdezi a saját stílusát és tervezését egy vállalat vagy személy, amelyre a webhely létrehozása. A háttérszín testreszabása és a képe nem lesz munkaerő, az e cikk utasításai szerint.

Nyissa meg HTML fájl. a jegyzettömb vagy bármely más szöveg szerkesztőAmelyhez megszokta. Például készítsen egy primitív oldalt a webhelyről minimálisan szöveggel. A fájlt bármilyen böngésző segítségével megnyithatja.

Kezdjük, változtassa meg a háttér színét, mivel a lassú internetkapcsolatokkal rendelkező emberek nem fognak azonnal látni a webhely háttérképét. Néhány idő, amíg a kép be van töltve, csak a webhely színét láthatják.
Adja meg a címkét A BGColor \u003d "*****" paraméter, ahol ***** színpapír. Megtanulhatja a HTML színeket bármelyikben grafikus szerkesztőA "Web" opció kiválasztásával vagy a https://colorscheme.ru/color-names webhelyen

Van elég, hogy válasszon egy színt a kör palettájában, és hozzárendelje intenzitását a téren belül. A jobb oldalon két kódot fog látni a HTML számára. Másolja őket, és helyezze be őket a notebookba.

A színes színnel és a kódba helyezve, nézze meg, hogy mindent jobbra tette, tekintve a beérkezett weboldalt a böngészőből.

Most folytathatja a háttérkép beillesztését. Helyezze a kívánt képet a Kód mappába a nagyobb kényelem érdekében. Kérdezze meg a latin betűk nevét.

Most keresse meg a fájl helyét a jobb egérgombbal kattintva, ha kiválasztja a "Open használat" karakterláncot, és kattintson a számítógépen telepített bármely böngészőre.

Másolja a címet a böngésző keresési sávjáról.

Most a címkén Adja meg a karakterláncot:

• stílus \u003d "Háttérkép: URL (" fájl: // c: / ussers / pow_file.jpg ")"

Mentse el a fájlt.

Ellenőrizze weboldalát. Látni fogja, hogy a háttér a szöveg alatt van.

Kérjük, vegye figyelembe, hogy a nagyobb felbontású felhasználók, a képed lefelé és jobbra lesz. Nem fog jól nézni, ha a kép nem monofonikus. A paraméter kijavításához különleges parancsok vannak.

• háttér-ismétlés: "Érték". Az Ön értékének beállításai lehetnek: "ismétlés-x" - megismétli a háttérképet és vízszintesen, és függőlegesen. "REPEAT-Y" - csak függőlegesen ismételje meg. "No-Repeat" - A kép fagyasztott a helyszínen, és nem ismétlődik. "Space" - A teljes oldal kitöltése lesz maximális szám A kép másolatai, a szélsőséges lesz. "Kerek" - ugyanaz a lehetőség, de a kép szélén szépen skálázódik;
• háttérképzés: "Érték". Ha helyettesíti a "Görgetés" szövegcímke helyett, akkor a kép görgetni fog a webhelyen. "Fix" - Amikor a háttér görgetése változatlan marad;
• háttér méret: Érték Value2. Itt az értékeknek pixelben kell tartaniuk. Például: 100px 200px. A képpontokon kívül az értékek százalékban elfogadhatók. Ez a kép töltési paramétere. A számok mellett két paramétert adhat meg: "Tartalmaz" - kitölti az oldalt a képen a hosszú oldal és a "borító" mellett - töltse ki az oldalt a kép szélességével.

A HTML-ben lévő oldal hátterének alapjainak ismerete készen áll az első webhely létrehozására.

A HTML-ben a webhely háttere nem adja meg, a CSS-stílusokon keresztül íródott, de csak elméleti formalitás. És most tudjuk meg, hogyan definiáljuk ezt a hátteret.

Háttér a helyszínre vagy a külön blokkra

Mivel végrehajtani ezt a célt kell egy CSS fájlt, akkor létre kell hozni, és csatlakozni a HTML. Ez ebben a cikkben van írva. Ezután folytathatja a munkát. Először el kell döntenie, hogy mit szeretne beállítani a háttérben. Ha az egész oldal általában, akkor ezt megteheti:

Test (
Háttérszín: fehér;
}

Ez az, hogy felkérjük a testcímkét, amely az egész oldalt képviseli. A háttérszín a háttérszín meghatározására szolgál. De mi van, ha háttérként kell beállítania a rajzot, és nem egy szilárd színt? Akkor érdemes így írni:

Test (
Háttérkép: URL (Útvonal a képhez. Kép \u200b\u200ba rajzról)
}

Az egyértelműség érdekében azt javaslom, hogy mindent részletesen megfontolom a példában. Ehhez ezt a képet fogok használni:

Például, háttérkép: URL (comp.png). Ebben a példában megkérdeztük a háttérképet a COMM névvel (pontosan ezt hívtam) png formátumamely ugyanabban a mappában van, mint a CSS fájl.
HTML-ben hozzon létre egy tetszőleges blokkot specifikus dimenziókkal, hogy bemutassa a CSS tulajdonságainak munkáját.

És itt van a stílusok számára:

#CT (
Háttérkép: URL (comp.png);
Szélesség: 600px;
Magasság: 400px;
}

Ez az, amit tettünk:

Miért van az, hogy? Az a tény, hogy az alapértelmezés szerint a böngésző többször megismétli a képet, hogy teljesen kitöltse a blokkot. Néha szükséges, például a zökkenőmentes díszek használatakor, de ügyünkben egy képnek kell lennie. Szerencsére ez nagyon könnyen kezelhető.

Ismétlődő háttér

Ha háttérként van kép, akkor az alapértelmezés szerint vízszintesen és függőlegesen megismétlődik az oldal teljes területének kitöltéséhez. A távolításhoz a háttér-ismétlődő tulajdonságot használják, és nincs ismétlődő értéke (nem ismétlődő). Vannak értékek is:

• Ismételje meg az X-et - csak vízszintesen ismételje meg
• Ismétlődő - csak függőlegesen

Hozzáadom a grafikai háttérünk tulajdonságait:

Háttér ismétlés: nincs ismétlés;

Pozíció

A háttér-pozíció tulajdonság határozza meg azt a helyet, ahol a kép lesz. Itt van két érték - vízszintesen és függőleges. Példák: Background-position: Jobbra lent - helyzet a jobb alsó sarokban, Top-Left - az alsó felső (és ezért az alapértelmezett), 250px 500px - tolva a bal felső sarok Jobbra 250 képpontra és lefelé 500-ig.

Nézzünk jobban a példákban:

Háttérhelyzet: jobb felső;

A kép a jobb felső szélre mozog. Azt is kaptam egy sárga hátteret, hogy látható legyen a széleihez.

háttérhelyzet: 50% 50%;

A kép pontosan megjelent a blokkjában. Igen, ez a pozíció százalékos arányának köszönhetően is lehetséges.

háttérhelyzet: 70% 20%;

A hátteret vízszintesen 70% -kal mozgatja, és 20 függőlegesen.

A pixelben is megengedett, hogy negatív értéket állítsa be a pozícióban. Megengedett, hogy például egy nagy kép-sprite-t használ, és a sprite kívánt részét fel kell tenned.

Háttér rögzítése

Még mindig nagyon szeretem a háttér-csatolást. Csak két értéke van, és az első az alapértelmezett (görgetés). Ez azt jelenti, hogy az oldal görgetésénél a háttér szintén görget, és ha ismétlések nélküli képet használ, akkor a végén véget ér, majd csak egy szilárd színű.

Annak érdekében, hogy ez ne történjen, a háttérképesség: rögzített, és most a hátterünk megbízhatóan rögzítve van. Ezzel összehasonlíthatók azzal, hogy a blokk meghatározza a rögzített pozícionálást, és nem fog eltűnni az oldalról, amikor görgetés közben.

Mindezen jó rövidített felvétel

Sok olyan tulajdonságot szétszereltünk, amelyek lehetővé teszik, hogy hátteret készítsen, de ha mindent használnak, akkor egy nehéz rekordot ad ki. Van egy nagyon elegáns megoldás. A háttér tulajdonsága lehetővé teszi, hogy írjon a terek szükségletekre van szükség Ebben a sorrendben:
Háttér: színes kép ismétlés rögzítési helyzet;
És most mindent meg lehet írni:

Háttér: sárga URL (comp.png) Nem ismétlődő 20% 100px;

Ha valamilyen tulajdonság nem szükséges meghatározni, akkor egyszerűen leengedhető (a mi esetünkben nem rögzítettük a háttérképet.

Sok hátteret

És mi van, ha szüksége van néhány háttérképre? Ez megtörténik. Ma a CSS támogatja az ilyen lehetőséget. Próbáljuk meg. Vegyünk egy ilyen ikont

Felhívtam a laptopját.

És itt van a kód egy multiphone beillesztéséhez:

Háttér: URL (comp.png) Nem ismétlődő 20% 100px,
URL (laptop.png) nem ismétlődő 50% 50%;
Háttérszín: sárga;

Amint láthatja, csak tegye a vesszőt az első kép után, és írja be a beállításokat a másodikra. A szilárd szín ebben az esetben jobb, ha külön beállítható.

Ugyanígy rögzíthet több képet, de ne túlzottan overdo - túl sok grafika nem túl jó.

Ezt akartam befejezni ezt a cikket. A háttérrel sokkal érdekesebb dolgot tehetsz, megpróbálok róluk írni őket a jövőben (és valami már írt - például,). Sikeres, hogy tanulmányozza ezt a tulajdonságot.

Állítsa be a háttérszínt és / vagy egy oldalra lévő képet, vagy egy külön elem egyszerű legyen. A legfontosabb dolog az, hogy tudd meg, hol és hogyan lehet megtenni, és hogy legyen színes kód és / vagy háttérkép. Lehetséges, hogy ebből a cikkből sok új dolgot fog tanulni, de kifejezetten kezdőknek jöttem létre. Ezért minden a lehető legrövidebb lesz, és részletesen részletesen. A legfontosabb dolog az, hogy nem csak Általános nézet És kész példák, de megértik, hogyan készítsünk háttérben HTML-ben.

A HTML háttérének beállításához használja a közbenső doktípust

És elkezdem azzal a ténnyel, hogy HTML5. Nincs lehetőség kérni. Ezt a funkciót úgy döntöttek, hogy elviselik a CSS-t. Ezért, ha az alábbiakban kívánja használni, és érvényes (helyes) kódot szeretne kapni, akkor az átmeneti típusú dokumentum típusnál kell maradnia. Ehhez a weblapnak a következő sorral kell kezdődnie:

Átmeneti// en "http://www.w3.org/tr/html4/loose.dtd"\u003e\u003e

Ha kitaláltad, menjünk meg, hogy megértsük, hogyan jön létre a háttér. És az első dolog itt meg kell jegyezni - ez a különbség háttérszín és háttérkép. Az elején megy háttérszínamely az összes elérhető oldalt vagy annak elemét árítja. Az ismételten háttérkép. Vizuálisan ez a következőképpen ábrázolható:

HTML dokumentum és elemei háttere

A második dolog, amit tudnod kell, a különbség a különbség a dokumentum teste és a dokumentum eleme. A dokumentum teste A testcímke weblapjának HTML-kódjában szerepel, amely magában foglalja a weboldal összes tartalmát. Nyilvánvaló, hogy a dokumentum dokumentumának háttere nem lehet átlátható. Ha a dokumentum testének háttere nincs megadva, a böngészőbeállításokban megadott alapértelmezett értéket használjuk.

Oldalelemek a testcímkén belül vannak. Érdemes megjegyezni, hogy beállíthatja a színes és / vagy a háttérképet a HTML segítségével a dokumentum minden eleméhez. Például a háttérkép csak táblázatokra adható meg. Alapértelmezés szerint általában átlátszó háttérrel rendelkeznek.

A BGColor attribútuma a háttérszín létrehozásához

Annak érdekében, hogy megkérdezzük háttérszín A dokumentumot vagy annak elemeit a BGColor attribútum használja, például:

Ebben az esetben beállítottuk a háttérszínt az oldal egészére. De egy példa arra, hogyan kell beállítani a háttérszínt az asztalhoz, a táblázatban:

Szöveg háttérrel

Érdemes megjegyezni, hogy a táblázat háttérszíne is megadható a TR tagok soraihoz és a TD-címkéjükhez.

Hogyan lehet megtalálni a színkódot?

Valószínűleg már észrevette, hogy a html színe különleges kódPéldául: # EC008C. Annak érdekében, hogy megtudja a kódot, szüksége van a színre, használhatja az egyik grafikus szerkesztőt. Például, a Photoshop használatával " Eyedropper eszköz."(Pipetta), hogy színt kapjon a képen lévő ponttól. Ezután kattintson az eszköztárra és a megnyíló ablakra " Színválasztó"(Válasszon színt) Másolási színes kód.

Felhívom a figyelmet arra a tényre, hogy ez a kód az elején lattice jel (#) nélkül lesz, ezt a jelet manuálisan kell hozzáadni.

Számos felhasználhatsz online szolgáltatások, például:

• stb.

A munka elvét még könnyebben kattintson a kívánt színre, és kapja meg a kódot.

Attribútum háttér létrehozásához háttérkép

Valamint a háttérszín és a háttérképKülönleges attribútumot kell használnia, nevezetesen a háttérben, például:

Ebben az esetben kérjük a háttérképet az oldal egészére. Érdemes megjegyezni, hogy a kép méretének korlátozása miatt megismétlődik, például:

Ahogy látod, amikor ismétlés, a képek közötti átmenet észrevehető. Ezért gyakran használják a különleges képeket, ahol ez a pillanat figyelembe veszik.

De egy példa arra, hogyan kell beállítani a háttérkép egy asztalra, a táblázat címke:

Szöveg háttérrel

Érdemes megjegyezni, hogy a háttérkép csak az asztalhoz és / vagy a különálló cellájához állítható. Egy karakterlánchoz nem fog működni.

Abszolút és relatív út a háttérképhez

Külön érdemes figyelmet fordítani cím háttérkép. Ebben az esetben a kép relatív elérési útját használják, vagyis A cím a képfájl helyén szerepel a weboldal fájlba. Ezt az opciót nem lehet különösen sikeresnek hívni. A legjobb az abszolút útvonal használata a képhez, azaz teljes URL-je, például:

Ebben az esetben nem lesz egyidejűleg problémák. Többet tudsz olvasni.

Összefoglaljuk

Az attribútumok használata A BGColor és a háttér morálisan elavult, mert a HTML-kód érvényessége az átmeneti doctype-t kell használnia. A HTML háttérszínének beállításához speciális kódokat használ, amelyeket egy grafikus szerkesztőben vagy speciális online szolgáltatások használatával találhat meg. A háttérkép megismétlődik a fedett terület farkain, és a háttérszín tetején fekszik. A háttérkép megadásához jobb a teljes URL-címét használni. Mindentem van. Kösz a figyelmet. Sok szerencsét!

22: 37-kor

Üzenet szerkesztése