Kuinka tehdä normaali taustaväri html:ssä. Tekstin ja taustavärin muuttaminen

Avaa HTML-sivutiedostosi muokkausta varten käyttämässäsi editorissa. Voit tehdä tämän napsauttamalla asiakirjaa hiiren kakkospainikkeella ja valitsemalla "Avaa sovelluksella" -osion.

HTML-tiedoston rakenne on sarja eri tasoisia ja eri käyttötarkoituksia olevia kuvaajia. Sivun koodi alkaa yleensä tunnisteella . Tämän jälkeen on yleensä jakso , joka määrittää sivun otsikon ja CSS-koodin. Kun kahva on suljettu, sivun runko alkaa . Sivun taustakuvan asettamisen attribuutti on asetettu muotoon lisäparametri tausta tälle tunnisteelle. Koodi sivun taustan luomiseksi näyttää tältä:

Tässä tapauksessa kuvan polku voi olla URL-osoite (alkaa http://). Sijainti voidaan asettaa juurihakemistosta (/root/folder/background.jpg) tai suhteessa muokattavan HTML-dokumentin sijaintiin (esimerkiksi kansio/tausta.jpg).

Tallenna muutokset ja avaa sivu selaimessa. Voit tehdä tämän napsauttamalla hiiren kakkospainikkeella ja valitsemalla "Avaa sovelluksella". Ilmoita annettuun luetteloon sen ohjelman nimi, jota käytät Internet-sivujen katseluun. Jos taustaparametri on asetettu oikein, näet aiemmin määritetyn taustakuvan. Jos kuvaa ei näy, tarkista, että background-attribuutti on määritetty oikein ja polku taustatiedostoon.

bgcolor-parametri

Voit asettaa taustavärin ilman kuvaa käyttämällä bgcolor-direktiiviä. Tämän määritteen arvoksi voit määrittää värin nimen Englannin kieli tai käytä väriarvoa HTML-paletissa. Esimerkiksi:

Tämä koodi antaa sivulle sinisen taustan. Jos haluat määrittää värisävyn tai tarkemman värin, käytä HTML-paletin arvoja:

Tässä tapauksessa #002902 on väri, joka on annettava sivulle.

CSS-attribuutit

Voit myös asettaa taustan käyttämällä CSS-koodia asetuksissa :

CSS:n avulla voit myös määrittää sivulle taustakuvan taustakuvan kautta:

CSS:n ja HTML:n käyttö antaa samat tulokset, mutta sivun näyttöparametreja asetettaessa kannattaa käyttää CSS:ää.

HTML-sivuston taustaa voidaan muuttaa käyttämällä molempia tag-attribuutteja kehon, niin kanssa CSS:n avulla-tyylejä sovelletaan myös tunnisteeseen kehon. Harkitse molempia vaihtoehtoja taustan tekemiseen verkkosivustolle.

Taustavärin muuttaminen HTML:n avulla

Tag kehon, kuten melkein kaikilla HTML-tunnisteilla, on omat attribuuttinsa. Attribuuttien merkitseminen kehon liittyä:

• bgcolor- määrittää sivun taustavärin;
• tausta- voit asettaa kuvan verkkosivun taustaksi (tätä asiaa käsitellään yksityiskohtaisesti artikkelissa:);
• rullaa- ohjaa vierityspalkin näyttöä sivulla;
• teksti- määrittää verkkosivulla näytettävän tekstin perusvärin;
• bgominaisuudet- osoittaa, rullaako tausta sivun mukana;
• linkki- ohjaa sivun linkkien oletusväriä;
• linkki- määrittää aktiivisen linkin värin;
• vlink- määrittää sivulla vieraillun linkin värin;
• vasen marginaali / oikea marginaali- määrittää sisällön sisennyksen selainikkunan vasemmasta tai oikeasta reunasta;
• ylämarginaali/alamarginaali- määrittää sisällön sisennyksen selainikkunan ylä- tai alareunasta;

Jos haluat muuttaa taustaväriä HTML:n avulla, käytämme attribuuttia bgcolor:

Tämä on esimerkkiteksti valkoinen, määritetty käyttämällä body-tunnisteen text-attribuuttia.

Huomautus: On suositeltavaa määrittää sivun taustaväri, vaikka tausta olisi valkoinen. Tämä johtuu siitä, että jotkut käyttäjät voivat käyttää selaimessaan epätyypillistä taustaväriä, mikä voi aiheuttaa sivustosi tekstin lukukelvottomaksi.

Sivun taustavärin muuttaminen CSS:n avulla

Tämä on esimerkki valkoisesta tekstistä, jossa käytetään tausta-CSS:ää. Sivun tausta on myös asetettu CSS:llä.

Nubex-verkkosivustojen rakentajalla voit valita mille tahansa verkkosivustolle valmiin taustan suuresta kuvakirjastosta tai lisätä omasi.

Aiemmissa luvuissa laadimme perusmallin HTML-dokumenteille, määritimme, mitä HTML-tunnisteet ovat, opimme tallentamaan ja muokkaamaan HTML-tiedostoja ja tässä luvussa Tutustutaan tunnisteen attribuutteihin ja muuttaa tekstin ja sivun taustan väriä.

Avataan omamme index.html, muokkausta varten: Onnistuin!!! Ja muutetaan sitä hieman, lisätään attribuutteja: text="#000000" bgcolor="#ffffff"> tein sen!!! Attribuutti on tagiparametri, joka lisätään tunnisteeseen "parina" (parametrin nimi + parametrin arvo).
Tunnisteen attribuuttien arvot lisätään:
1) text=#000000 ilman lainausmerkkejä;
2) teksti="#000000" lainausmerkeissä;
3) teksti="#000000" lainausmerkeissä.
Mikä tahansa näistä vaihtoehdoista on oikea, mutta jos välität koodin etiikasta, on parempi käyttää sitä kaksoislainausmerkit, kuten yllä olevassa esimerkissäni.

Attribuutti "teksti" ohjaa tekstin väriä koko sivulla ja "bgcolor" ohjaa sivun taustaväriä.

Nyt ehdotan puhumista HTML-dokumenttien väreistä. Väri on asetettu:
1) text="kulta"- sanat englanniksi, esimerkiksi: kulta (kulta), punainen (punainen), vihreä (vihreä) ja niin edelleen...
Mutta väri voi koostua vain yhdestä sanasta, esimerkiksi "punainen", mutta jos kirjoitat "vihreä-punainen", selain ei ymmärrä sitä ja jättää sen huomiotta.
2) text="#000000"- RBG värimaailma (punainen vihreä sininen). "#" tämä symboli osoittaa, että tämä on värinumero, kaksi ensimmäistä symbolia (nollat ​​esimerkissäni) kertovat kuinka monta "punaista" väriä otimme, toiset ovat vihreitä ja kaksi viimeistä sinistä.
Jokainen väri on määritetty välillä 00 - FF (0-1-2-3-4-5-6-7-8-9-A-B-C-D-E-F), esimerkiksi #000000-musta, #ffffff-white, #ff0000-red, # 00ff00- vihreä #0000ff-sininen

Sivuston bonuksena suosittelen lataamaan väripaletin (2kB), joka näkyy yllä olevassa kuvassa. Sinun on purettava arkisto ja suoritettava tiedosto color.html, aseta sitten suurelle kenttään hiiren osoitin haluamasi värin kohdalle, joka näkyy pienessä ikkunassa, ja jos napsautat hiirtä tässä vaiheessa, värikoodi tulee näkyviin oikealla olevaan pieneen ikkunaan.

Palataan nyt tiedostoomme index.html ja tallenna se nimellä tsvet.html, katsotaan nyt mitä tapahtui. Millainen hän oli ja millaisena hän on pysynyt? Ja olet täysin oikeassa, koska valkoinen on tausta ja musta tekstin oletusväri. Jos haluat huomata eron, muutetaan määritteiden arvoja:

text=gold" bgcolor="#0900b8"> tein sen!!! Tallennetaan ja katsotaan (avautuu uuteen välilehteen)

On olemassa muita tapoja asettaa tekstiä HTML-tiedostoihin, mutta näitä kahta pidetään tärkeimpänä.

Seuraavassa luvussa opimme käsittelemään tekstiä BR-tunnisteilla ja rivittämään tekstiä toiselle riville.

Mitä tahansa verkkosivustoa luotaessa toiminnallisuuden lisäksi suunnittelu on erittäin tärkeää. Tämä määrittää tietyn yrityksen tai henkilön oman tyylin ja suunnittelun, jolle verkkosivustoa luodaan. Taustan värin ja kuvan mukauttaminen on helppoa noudattamalla tämän artikkelin ohjeita.

Avaa HTML-tiedosto Notepadilla tai millä tahansa muulla tekstieditorilla, johon olet tottunut. Otetaan esimerkiksi primitiivinen verkkosivusto, jossa on vähän tekstiä. Voit avata tiedoston millä tahansa selaimella.

Vaihda ensin taustasi väri, koska ihmiset, joilla on hidas Internet-yhteys, eivät näe heti sivuston taustakuvaa. Hetken aikaa, kun kuva latautuu, he näkevät vain sivustosi värin.
Syötä tagiin parametri bgcolor=”*****”, jossa ***** on värikoodi. Voit selvittää HTML:n värit missä tahansa graafisessa muokkausohjelmassa valitsemalla "webille" -vaihtoehdon tai verkkosivustolta https://colorscheme.ru/color-names

Sinun tarvitsee vain valita väri ympyräpaletista ja määrittää sen intensiteetti neliön sisällä. Oikealla näet kaksi html-koodia. Kopioi ne ja liitä ne muistilehtiöön.

Kun olet valinnut värin ja lisännyt sen koodiin, katso, teitkö kaiken oikein katsomalla tuloksena olevaa verkkosivua selaimesta.

Nyt voit aloittaa taustakuvan lisäämisen. Lisää käyttömukavuutta lisäämällä haluamasi kuva koodikansioon. Anna hänelle nimi latinalaisin kirjaimin.

Selvitä nyt tiedoston sijainti napsauttamalla sitä hiiren kakkospainikkeella, valitsemalla "Avaa sovelluksella" ja napsauttamalla mitä tahansa tietokoneellesi asennettua selainta.

Kopioi osoite selaimesi hakupalkista.

Nyt tagissa syötä rivi:

• style=”background-image: url('file:///C:/Users/FILE_PATH.jpg')”

Tallenna tiedostosi.

Tarkista verkkosivusi. Näet, että tekstisi korvataan taustalla.

Huomaa, että käyttäjille, joilla on korkeampi näytön tarkkuus, kuvasi kopioidaan alas ja oikealle. Se ei näytä hyvältä, jos kuva ei ole yksivärinen. Tämän parametrin korjaamiseksi on olemassa erityisiä komentoja.

• background-repeat : "Arvo." Vaihtoehdot arvollesi voisivat olla: "repeat-x" – toistaa taustakuvasi sekä vaaka- että pystysuunnassa. “repeat-y” – toisto vain pystysuunnassa. "ei toistoa" – kuva jäätyy paikalleen eikä toistu. "välilyönti" – koko sivu täytetään enimmäismäärällä kuvakopioita, uloimmat rajataan. "pyöreä" - sama vaihtoehto, mutta kuvan reunat skaalataan huolellisesti;
• background-attachment: "Arvo". Jos korvaat tunnisteen "scroll" sanan Arvo sijasta, kuva vierii sivuston mukana. "kiinteä" - tausta pysyy muuttumattomana vierittäessä;
• background-size: Arvo Arvo2. Tässä arvojen tulee olla pikseleinä. Esimerkki: 100px 200px. Pikselien lisäksi hyväksytään prosenttiarvot. Tämä on vaihtoehto täyttää sivu kuvalla. Numeroiden lisäksi voit syöttää kaksi parametria: "contain" - täyttää sivun kuvalla pitkältä sivulta ja "cover" - täyttää sivun kuvalla leveydeltä.

Kun tiedät sivun täyttämisen HTML-taustalla perusteet, olet valmis luomaan ensimmäisen verkkosivustosi.

Kirjailijalta: Tervetuloa webformyfiin ja tänään haluan kertoa sinulle kuinka voit muuttaa sivuston taustaa. Taustavärillä tai taustalla olevalla kuvalla voi olla valtava rooli sivuston ulkonäössä, joten sinun on tiedettävä, miten se asetetaan.

Kuinka vaihtaa taustaa wordpressissä

Jälleen, jos sinulla on WordPress-moottori, sivun yleisen taustan muuttaminen ei ole vaikeaa. Sinun tarvitsee vain napsauttaa "Muokkaa" -painiketta "Ulkoasu" -välilehdessä. Täällä sinun on valittava "Värit". Valitsemastasi mallista riippuen voit ehkä valita eri elementtien värejä. Mutta voit valita sivun värin joka tapauksessa - kätevä väripaneeli avautuu edessäsi.

Asetusten määrä tässä riippuu siitä, mikä malli sinulla on. Joka tapauksessa koko sivun värin pitäisi olla mahdollista asettaa eri malleissa, voit myös asettaa taustan ja värin otsikoille, linkeille jne.

Itse asiassa se on kaikki mitä sinun tarvitsee tietää. Jos sinun on ladattava taustakuva, valitse sopiva kohde ja etsi tarvittava tiedosto tietokoneeltasi.

JavaScript. Nopea aloitus

Hyvällä tavalla kuva ei saa olla liian painava, koska se vaikuttaa suuresti sivuston latausnopeuteen. Ihanteellista on käyttää niin sanottuja saumattomia taustakuvia, jotka toistuvat vaaka- ja pystysuunnassa ja täyttävät siten koko tilan.

Kuvan lataamisen jälkeen sinulle esitetään muutama hyödyllinen asetus. WordPressin mukavuus on, että näet muutokset välittömästi valitsemiesi asetusten mukaan.

Ensin sinua pyydetään valitsemaan toistomenetelmä. Vaihtoehtoja on jo 4: toista vain vaakasuunnassa, vain pystysuunnassa, molemmilla puolilla, älä toista. Käyttämästäsi kuvasta riippuen sinun on tehtävä valinta.

Toiston avulla voit säästää merkittävästi kuvan kokoa, kun se on pienikokoinen, ja sitä voidaan toistaa niin, että teräviä siirtymiä toistojen välillä ei näy. Näin voit säästää kymmeniä kilotavuja verrattuna tapaan, jossa ladataan suurikokoinen täysikokoinen kuva.

asema. Tässä ei ole mitään selitettävää, katsokaa vain kuinka sivun ulkoasu muuttuu eri taustapaikoilla. Valitse vaihtoehto, josta pidät eniten.

Sidonta. Tämä on erittäin mielenkiintoinen asetus, jonka avulla voit valita, vieritetäänkö taustakuvaa sisällön kanssa vai jäädytetäänkö se yhteen paikkaan. Henkilökohtaisesti haluan aina valita kiinteän vaihtoehdon, koska kun vierität alaspäin, vain sisältölohkot liikkuvat.

Jos sinulla on esimerkiksi taustakuvan korkeus 1000 pikseliä, etkä toista tai kaappaa sitä, kun vierität alaspäin, se yksinkertaisesti katoaa näkyvistä. Taustan korjaaminen antaa kuvan pysyä näkyvissä koko ajan. Joskus tämä on erittäin tehokas ratkaisu.

JavaScript. Nopea aloitus

Opi JavaScriptin perusteet käytännön esimerkin avulla verkkosovelluksen luomisesta

Itse asiassa tämä kaikki on taustan vaihtamiseen WordPressissä. Kuten näet, kaikki on mahdollisimman yksinkertaista.

Kuinka muuttaa verkkosivuston taustaa html-muodossa

Okei, olemme tarkastelleet puhtaasti visuaalista versiota, jossa sinun ei tarvitse mennä koodiin ja kirjoittaa sinne mitään. Nyt selvitetään, kuinka taustaa vaihdetaan html:n ja css:n avulla. Mitä etuja tämä tarjoaa? Voit asettaa taustakuvia paitsi sivustolle yleensä, myös jokaiselle elementille erikseen. Esimerkiksi joillekin widgeteille, valikoille, otsikoille jne. Tämä antaa paljon enemmän mahdollisuuksia verkkosivujen suunnitteluun ja sen ulkoasun muuttamiseen.

Jotta pääset käyttämään kaikkea tätä tyyliä, sinun on löydettävä mallisi päätyylisivu. Yleensä se sijaitsee juurissa tai css-kansiossa, ja sen nimi on style.css tai main.css.

Siinä näet koodin, joka suunnittelee sivustosi eri elementtejä. Jos haluat asettaa taustan globaalisti, voit tehdä tämän määrittämällä taustan tekstinvalitsimelle eli sivun rungolle.

Miten tausta on asetettu?

Muista - taustaominaisuus. Nykyään on parempi käyttää tämän ominaisuuden kirjoittamisen lyhennettä. Esimerkiksi:

body( background: #ccc url(bg.png) ei toistoa 50 % 50 % kiinteä; )

keho ( tausta: #ccc url(bg.png) ei toistoa 50 % 50 % kiinteä;

Mitä tämä kaikki tarkoittaa? Ensimmäinen parametri on yleensä yksivärinen. Oletetaan, että asetamme sen harmaaksi. Väriä ei ehkä voida määrittää, jos taustakuva on määritetty. Kuten näet, kuva määritetään käyttämällä url-rakennetta (tiedostopolku). Vastaavasti sinun on kirjoitettava tiedoston polku oikein ja ilmoitettava myös sen pääte.

Kaikki tämän jälkeen muistiin kirjoittamani parametrit ovat valinnaisia ​​ja ne voidaan määrittää haluamallasi tavalla. Joten määritin, että taustakuvaa ei saa toistaa, se on asetettava keskelle sekä vaaka- että pystysuunnassa ja myös kiinnitettävä yhteen paikkaan, jotta se ei katoa vierittäessä.

Kuten näet, tässä ovat kaikki samat parametrit, jotka määritit visuaalisesti, mutta tässä ne on rekisteröity taustaominaisuuden arvoiksi.

Tässä esimerkissä käytin lyhennettyä ominaisuuden merkintää, se on vain kätevämpää, mutta itse asiassa jokaisella yksittäisellä parametrilla on oma ominaisuus: taustaväri värille, taustakuva kuvalle, tausta-sijainti sijainnin asettamiseen.

Tietenkin, jos haluat oppia sujuvasti näitä ominaisuuksia, suosittelen sinua ensin suorittamaan kurssimme ja jos haluat kehittyä css-kielen edistyneeksi käyttäjäksi, niin sitten. Siellä opit asettamaan useita taustoja samanaikaisesti, asettamaan niiden toiston, käyttämään liukuvärejä jne. Tiedot ovat erittäin mielenkiintoisia ja hyödyllisiä verkkosivustojen rakentajille.

No, kerroin sinulle taustan kanssa työskentelyn perusteista. Tilaa portaalimme saadaksesi uutisia ja lisätietoja verkkosivustojen rakentamisesta.

JavaScript. Nopea aloitus

Opi JavaScriptin perusteet käytännön esimerkin avulla verkkosovelluksen luomisesta