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ä.
Kumpikin näistä vaihtoehdoista on oikea, mutta jos välität koodin eettisyydestä, on parempi käyttää lainausmerkkejä, 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 hiiren osoitin suureen kenttään tarvitsemasi 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.

HTML-sivuston taustaa voidaan muuttaa käyttämällä molempia tag-attribuutteja kehon, ja käyttämällä tunnisteeseen sovellettavia CSS-tyylejä 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 esimerkki valkoisesta tekstistä, joka on määritetty body-tunnisteen text-attribuutilla.

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ä saattaa aiheuttaa sivustosi tekstin lukukelvottomaksi.

Sivun taustavärin muuttaminen CSS:n avulla

Tämä on esimerkki valkoisesta tekstistä tausta-CSS:llä. Sivun tausta on myös asetettu CSS:llä.

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

Kirjailijalta: Tervetuloa webformyselfiin 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ä, kuinka 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 värit eri elementeille. Mutta voit valita sivun värin joka tapauksessa - kätevä väripaneeli avautuu edessäsi.

Asetusten määrä riippuu siitä, mikä malli sinulla on. Joka tapauksessa koko sivun värin pitäisi olla ehdottomasti 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 pieni, ja se voidaan toistaa niin, että teräviä siirtymiä toistojen välillä ei näy. Näin voit säästää kymmeniä kilotavuja verrattuna menetelmään, jossa suurikokoinen täysikokoinen kuva ladataan.

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

Sidonta. Tämä on erittäin mielenkiintoinen asetus, jonka avulla voit valita, vieritetäänkö taustakuvaa sisällön mukana 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 se on kaikki 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 lyhennettyä versiota. Esimerkiksi:

body( background: #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 (tiedostopolku) -rakennetta. 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, taustan sijainti sijainnin asettamiseksi.

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.

Voit mukauttaa blogisi tai verkkosivustosi täysin helposti. Tässä artikkelissa kerrotaan, kuinka helppoa on vaihtaa sivusi otsikkofonttia ja taustakuvaa.

Bloggaajat ja verkkosivustojen omistajat muuttavat yleensä taustaa tehdäkseen verkkosivustostaan ​​visuaalisesti houkuttelevamman vierailijoille. Väärin lisätty taustakuva voi kuitenkin hämmentää vierailijaa ja jopa saada hänet epäluottamukseen sivustoosi tai blogiisi eivätkä halua vierailla siellä uudelleen. Jotta tausta voidaan lisätä oikein, on tärkeää käyttää asianmukaisia ​​HTML-koodeja.

Voit muuttaa olemassa olevan verkkosivustosi ulkoasua muutamalla yksinkertaisella tavalla. Monet käyttäjät eivät edes ymmärrä, kuinka yksinkertaista se on.

Kuinka muokata fonttia

Ensinnäkin, sinun on lisättävä neljä sisällönkuvauskenttää mihin tahansa sen jälkeen< head >. Voit yksinkertaisesti kopioida alla olevat symbolit ja liittää ne resurssiisi poistamalla ensin välilyönnit.

Kuinka muokata taustaväriä

Avaa blogisi tai verkkosivustosi HTML-sivu. Kun muokkaat sivua, voit avata sen Dreamweaverissä työsi helpottamiseksi. Jos sivustosi on luotu verkkosivustojen rakennustyökalulla, joissakin palveluissa voit muuttaa HTML-asetuksia verkossa siirtymällä Suunnittelu-sivulle ja valitsemalla Muokkaa HTML-koodia -välilehden. Joka tapauksessa sinun pitäisi pystyä käyttämään blogisi tai verkkosivustosi HTML-koodeja. Asennusprosessi voi vaihdella suuresti sen mukaan, mitkä palvelut ovat käytettävissäsi ja mitä moottoria käytät.

Ei ole mitään järkeä yrittää etsiä erillistä kuvaa eri värillä, jos sinun tarvitsee vain vaihtaa taustaväri. Sen sijaan voit yksinkertaisesti muokata HTML-koodia ja muuttaa nykyisen värin sellaiseksi, jonka haluat säilyttää.

Löydät helposti HTML-värikartat erikoisjulkaisuista. Jokainen väri näkyy merkinnässä kuusinumeroisena koodina. Esimerkiksi valkoinen tausta on merkitty #FFFFFF.

Etsi siis värikoodi, jonka haluat näkyvän sivustossasi taustavärinä. Merkinnässä se näyttää tältä:

taustaväri:#XXXXXX; (

Kun olet tallentanut taustavärin HTML:ään, huomaat, että sivusi ulkoasu on muuttunut.

Taustakuvan lisääminen

Valitse kuva, jonka haluat lisätä taustaksi. On monia sivustoja, joiden avulla voit ladata tällaisia ​​taustoja. Vaihtoehtoisesti voit käyttää kuvaa, joka on jo tallennettu tietokoneellesi.

Lataa kuva Internetiin. Monet antavat sinun ladata kuvia ilmaiseksi. Hanki URL-linkki taustakuvaasi. Tätä varten sinun on avattava kuva selaimessasi ja kopioitava URL-osoite.

Liitä koodi lisätäksesi kuvan taustaksi. HTML:ssä se näyttää tältä:

taustakuva: url(kuvan URL-osoite);

Sinun on lisättävä koodi, jossa sivun leipäteksti alkaa HTML-koodissa. Tallenna muutokset muokkauksen jälkeen ja lataa sivustosi. Voit nähdä, että kuva on korvannut taustavärin kokonaan.

Muista kuitenkin, että liian suurten kuvien lataaminen voi kestää hyvin kauan, mikä on epämiellyttävää monille vierailijoille. Tästä syystä yritä valita pieniä kuvia tähän tarkoitukseen.

Avulla CSS-väri ja tausta Voit määrittää sen melkein mihin tahansa web-sivun elementtiin, hallita vapaasti taustakuvaa ja sen toistoa vaaka- ja pystysuunnassa. Lisäksi CSS:n avulla voit sijoittaa taustakuvan mihin tahansa näytölle paikannuksella. Älkäämme menkö toistaiseksi liian pitkälle, mennään järjestyksessä.

VÄRI ominaisuus

Tämä ominaisuus määrittää elementin värin tai tarkemmin elementin sisällä olevan tekstin värin. Arvo määritetään jollakin seuraavista tavoista:

• värin nimi (VIHREÄ, MUSTA, PUNAINEN...);
• heksadesimaalinen värikoodi (008000, 000000, FF0000...);
• desimaalivärikoodi RGB:ssä (väri:rgb (40, 175, 250));

COLOR-ominaisuus periytyy, ja jos millekään elementille ei ole asetettu arvoa, arvo peritään sen esi-isältä. Mutta voi käydä niin, että sitä ei ole asetettu myöskään esi-isälle - silloin selaimen tyylisivua käytetään oletusarvoilla. Elementin väri on tässä tapauksessa todennäköisesti musta.

Kuten jo mainitsin, voit asettaa värin melkein kaikille elementeille, ne voivat olla (H1... H6), (strong, em) ja jopa kokonaislukuja (p) ja jopa taulukon reunuksia, mutta siitä lisää myöhemmin.

Katsotaanpa esimerkkiä tekstin värin asettamisesta CSS:n avulla:

h1 (väri: sininen)

Tässä esimerkissä kaikki verkkosivun ensimmäisen tason otsikot ovat sinisiä:

vahva (väri: punainen)

Tässä tapauksessa kaikki, mikä on sivun tekstissä, korostetaan tunnisteella vahva, muuttuu punaiseksi.

Voit kirjoittaa sen näin:

h1, p, vahva (väri: vihreä)

Sitten ensimmäisen tason otsikot, kaikki kappaleet ja kaikki tunnisteella korostetut ovat vihreitä.

Kun on tarpeen korostaa otsikoita eri väreillä, käytetään luokkavalitsimia. Luokan määrittämiseen HTML:ssä käytetään attribuuttia luokkaa, jota voidaan soveltaa mihin tahansa elementtiin. HTML-koodiin sinun tulee kirjoittaa:

class="Sininen" > Tämän luokan otsikon väri on sininen

CSS-tyylisivulle kirjoitetaan tässä tapauksessa sääntö, jossa valitsin on H1-elementti ja pisteen kautta ( . ) luokan nimi:

h1.Blue (väri: sininen)

HTML-dokumenteissa käytetään myös tunnisteen valitsimia, jotka määritetään attribuutilla id. Tunniste on tärkeämpi tai tärkeämpi attribuutti kuin luokka. Ja jos HTML-koodin elementille on määritetty sekä luokka että tunniste, tunnistyyliä käytetään. Tunniste on merkitty hash-merkillä ( # ). Jotta voit käyttää tunnistetta HTML-koodissa, sinun on kirjoitettava:

id="Sininen" > Tämän tunnuksen otsikon väri on sininen

Tyylisivulla vuorostaan:

h1#Blue (väri: sininen)

TAUSTAA-VÄRI-ominaisuus

Tämän ominaisuuden avulla voit asettaa taustavärin koko sivulle, kappaleelle, linkille tai yleensä mille tahansa HTML-elementille. Tätä varten ominaisuuden arvo määrittää värin tai arvon läpinäkyvä(läpinäkyvä). Sivun taustan koodi on kirjoitettu:

runko (taustaväri: vesi)

Tässä tapauksessa sivun tausta on turkoosi, ja taustan antamiseksi otsikolle kirjoitamme:

h1 (taustaväri: keltainen)

Saamme keltaisen taustan ensimmäisen tason otsikoille.

Väri ja tausta CSS:ssä

TAUSTAA-TOISTA-ominaisuus

Tätä ominaisuutta käytetään määrittämään, toistuuko se vaaka- ja pystysuunnassa. Kelvolliset arvot:

• toistaa- kuva toistetaan pysty- ja vaakasuunnassa;
• toista-x- kuva toistetaan vain vaakasuunnassa;
• toista-y- kuva toistetaan vain pystysuunnassa;
• ei-toistoa- kuva ei toistu.

Koodi on kirjoitettu näin:

p(
taustakuva: url( kuvatiedoston osoite) ;
background-repeat: toista-x
}

Tämän kappaleen teksti on taustakuvan päällä, joka sijoitetaan vaakasuoraan.

TAUSTAA-KIINTEÄ omaisuus

Tätä ominaisuutta käytetään osoittamaan selaimelle, tuleeko sivun taustakuvaa vierittää tekstin kanssa ( rullaa) tai pysyä liikkumattomana ( korjattu).

keho (
taustakuva: url( kuvatiedoston osoite) ;
background-repeat : toista-x ;
taustaliite: korjattu
}

Tässä tapauksessa taustakuva pysyy liikkumattomana.

BACKGROUND-POSITION -ominaisuus

Tätä ominaisuutta käytetään kuvan sijoittamiseen suhteessa . Arvot määritetään prosentteina (%), pituusyksiköinä (cm, px) avainsanoilla:

• Pystysuoraan:
• alkuun- kuvan yläreuna on kohdistettu sivun tai lohkon yläreunaan;
• keskusta
• pohja- kuvan alareuna on tasattu sivun tai lohkon alareunaan.
• Vaakasuunnassa:
• vasemmalle- kuvan vasen reuna on tasattu sivun tai lohkon vasempaan reunaan;
• keskusta- kuvan keskiosa on tasattu sivun tai lohkon keskelle;
• oikein- kuvan oikea reuna on tasattu sivun tai lohkon oikeaan reunaan.

Kirjoitamme esimerkkikoodin prosentteina, pituusyksiköinä ja avainsanoina:

keho (
taustakuva: url( kuvatiedoston osoite) ;
tausta-sijainti: 0% 0%
}

Runko (
taustakuva: url( kuvatiedoston osoite) ;
taustan sijainti: 10px 25cm
}

Runko (
taustakuva: url( kuvatiedoston osoite) ;
tausta-sijainti: ylhäällä keskellä
}