Svoj blog alebo web si môžete veľmi jednoducho prispôsobiť. Tento článok ukazuje, aké ľahké je zmeniť písmo v hlavičke a obrázku na pozadí stránky.

Blogeri a majitelia stránok zvyčajne menia pozadie, aby bola ich stránka pre návštevníkov vizuálne atraktívnejšia. Nesprávne pridaný obrázok na pozadí však môže návštevníka zmiasť a dokonca spôsobiť nedôveru k vašej stránke alebo blogu a neochotu ich znova navštíviť. Pre správne pridanie pozadia je dôležité použiť správne HTML kódy.

Existuje len niekoľko jednoduchých, s ktorými sa môžete zmeniť vzhľad vašu existujúcu stránku. Mnoho používateľov si ani neuvedomuje, aké je to jednoduché.

Ako prispôsobiť písmo

V prvom rade budete musieť kamkoľvek potom pridať štyri metaznačky< head >. Nižšie uvedené symboly môžete jednoducho skopírovať a po odstránení medzier ich vložiť do svojho zdroja.

Ako prispôsobiť farbu pozadia

Otvorte stránku v kóde HTML svojho blogu alebo webovej lokality. Keď upravujete stránku v Dreamweaveri, môžete ju otvoriť, aby ste si uľahčili prácu. Ak je vaša lokalita vytvorená pomocou nástroja na tvorbu webovej lokality, niektoré služby vám umožňujú zmeniť nastavenia HTML online tak, že prejdete na stránku Návrh a vyberiete kartu Upraviť HTML. V každom prípade by ste mali mať prístup k HTML kódom pre váš blog alebo webovú stránku. Proces nastavenia sa môže značne líšiť v závislosti od toho, aké služby máte k dispozícii a aký motor používate.

Nestojí za to hľadať samostatný obrázok s inou farbou, ak všetko, čo musíte urobiť, je zmeniť farbu pozadia. Namiesto toho môžete jednoducho upraviť kód HTML a zmeniť existujúcu farbu na akúkoľvek, ktorú chcete zachovať.

Diagram môžete ľahko nájsť HTML farby v odborných publikáciách. Každá farba sa v značke zobrazí ako šesťmiestny kód. Napríklad biele pozadie je označené ako #FFFFFF.

Nájdite teda kód farby, ktorý chcete na svojej stránke vidieť ako farbu pozadia. V značke by to vyzeralo takto:

farba pozadia:#XXXXXX; (

Po uložení farby pozadia do HTML uvidíte, že vzhľad vašej stránky sa zmenil.

Pridanie obrázka na pozadí

Vyberte obrázok, ktorý chcete pridať ako pozadie. Existuje veľa stránok, ktoré vám umožňujú stiahnuť si takéto pozadie. Okrem toho môžete použiť obrázok, ktorý je už uložený v počítači.

Nahrajte obrázok na internet. Mnohé vám umožňujú sťahovať obrázky zadarmo. Získajte adresu URL obrázka na pozadí. Ak to chcete urobiť, musíte otvoriť obrázok v prehliadači a skopírovať adresu URL.

Prilepením kódu pridajte obrázok ako pozadie. V HTML to vyzerá takto:

background-image: url(URL obrázku);

Musíte pridať kód tam, kde začína telo stránky v HTML. Po úprave uložte zmeny a načítajte svoje stránky. Budete môcť vidieť, že obrázok úplne nahradil farbu pozadia.

Pamätajte však, že príliš veľké obrázky sa môžu načítať veľmi dlho, čo bude pre mnohých návštevníkov nepríjemné. Z tohto dôvodu sa snažte na tento účel vybrať malé obrázky.

Ak chcete zmeniť farbu pozadia celej webovej stránky alebo jednotlivých prvkov, použite všeobecnú vlastnosť pozadia alebo farba pozadia. Farbu je možné zadať v akomkoľvek formáte dostupnom v CSS. Najbežnejšie sú nasledujúce metódy.

Podľa názvu farby

Prehliadače podporujú niektoré farby podľa názvu. Tu sú nejaké Kľúčové slová- čierna (čierna), biela (biela), červená (červená), zelená (zelená), modrá (modrá) atď.

Podľa hexadecimálnej hodnoty

Na určenie farieb sa používajú hexadecimálne čísla. Šestnástková sústava je na rozdiel od desiatkovej sústavy založená, ako už názov napovedá, na čísle 16. Čísla budú nasledovné: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Čísla od 10 do 15 sú nahradené latinskými písmenami. Čísla väčšie ako 15 v šestnástkovej sústave vznikajú spojením dvoch čísel do jedného. Napríklad číslo 255 palcov desiatková sústava zodpovedá číslu FF v šestnástkovej sústave. Aby sa predišlo nejasnostiam v definícii číselnej sústavy, pred hexadecimálnym číslom sa nachádza symbol hash #, napríklad #666999. Každá z troch farieb – červená, zelená a modrá – môže nadobúdať hodnoty od 00 do FF. Označenie farby je teda rozdelené do troch zložiek #rrggbb, kde prvé dva znaky označujú červenú zložku farby, dva stredné zelenú zložku a posledné dva modrú zložku. Je povolené používať skrátenú formu ako #rgb, kde by mal byť každý znak zdvojený. Záznam #fc0 by sa teda mal považovať za #ffcc00. Na malých a veľkých písmenách v tomto prípade nezáleží, takže text je možné písať veľkými aj malými písmenami.

S RGB

Farbu môžete definovať pomocou hodnôt červenej, zelenej a modrej v desatinných číslach. Každá z troch zložiek môže mať číslo od 0 do 255. Je tiež prijateľné nastaviť farbu v percentách, napríklad rgb(90%, 30%, 60%).

RGBA

Formát RGBA je syntaxou podobný RGB, ale obsahuje alfa kanál, ktorý určuje priehľadnosť prvku. Hodnota 0 je úplne priehľadná, 1 je nepriehľadná a stredná hodnota ako 0,5 je priesvitná.

Príklad 1 ukazuje zmenu farby pozadia a textu.

Príklad 1: Farba pozadia

Udržateľnosť

Stabilita podľa Ljapunova osciluje stabilné zariadenie.

Výsledok tento príklad znázornené na obr. jeden.

Ryža. 1. Farebné pozadie

Formát RGBA vám umožňuje nastaviť farbu pozadia prvku na priesvitnú, takže pozadie webovej stránky bude presvitať. Vyzerá to nápadnejšie a pôsobivejšie, keď máme obrázok na pozadí alebo vzor, ​​a nie plnú farbu. Potom bude obrázok presvitať cez pozadie, ale čitateľnosť textu zostane (obr. 2).

Ryža. 2. Polopriehľadné pozadie

Príklad 2 ukazuje použitie formátu RGBA na vytvorenie takéhoto pozadia.

Príklad 2: Formát RGBA

S pomocou css farba a pozadia môžete nastaviť takmer akýkoľvek prvok webovej stránky, ľubovoľne ovládať obrázok na pozadí, jeho opakovanie horizontálne aj vertikálne. Okrem toho pomocou CSS môžete umiestniť obrázok na pozadie kdekoľvek na obrazovke pomocou polohovania. Neutekajme ešte ďaleko, poďme po poriadku.

Vlastnosť COLOR

Táto vlastnosť nastavuje farbu prvku, konkrétnejšie farbu textu vo vnútri prvku. Hodnota je uvedená v jednej z možných foriem:

• názov farby (ZELENÁ, ČIERNA, ČERVENÁ...);
• hexadecimálny kód farby (008000, 000000, FF0000...);
• desiatkový farebný kód v RGB (color:rgb (40, 175, 250));

Vlastnosť COLOR sa zdedí a ak pre žiadny prvok nie je nastavená hodnota, hodnota sa zdedí od svojho predka. Môže sa však stať, že nie je nastavený ani pre predchodcu - potom sa použije šablóna so štýlmi prehliadača s použitím predvolených hodnôt. Farba prvku v tomto prípade bude pravdepodobne čierna.

Ako som už spomínal, takmer všetkým prvkom sa dá nastaviť farba, môže to byť (H1... H6), (silné, em) a dokonca aj celé (p) a dokonca aj okraje tabuľky, ale o tom neskôr.

Tu je príklad nastavenia farby textu pomocou CSS:

h1 (farba: modrá)

V tomto príklade budú všetky nadpisy prvej úrovne webovej stránky modré:

silný (farba: červená)

V tomto prípade bude všetko, čo je v texte stránky, zvýraznené značkou silný, zmení farbu na červenú.

Dá sa to napísať takto:

h1, p, silné (farba : zelená )

Potom budú nadpisy prvej úrovne, všetky odseky a všetko, čo je zvýraznené značkou, zelené.

Keď je potrebné zvýrazniť nadpisy rôznymi farbami, použijú sa selektory tried. Atribút sa používa na definovanie triedy v HTML trieda A, ktoré možno použiť na akýkoľvek prvok. V HTML kóde budete musieť napísať:

class="blue"> Farba titulov tejto triedy bude modrá

V šablóne štýlov CSS v tomto prípade napíšeme pravidlo, kde prvok H1 bude selektorom a cez bodku ( . ) názov triedy:

h1.Blue (farba: modrá)

V HTML dokumentoch sa používajú aj selektory podľa identifikátora, sú definované atribútom id. Identifikátor je dôležitejší alebo prioritnejší atribút ako trieda. A ak sú v kóde HTML pre prvok špecifikované trieda aj identifikátor, použije sa štýl identifikátora. Identifikátor je označený znakom libry ( # ). Ak chcete použiť identifikátor v kóde HTML, musíte napísať:

id="modrá"> Farba názvov tohto identifikátora bude modrá

V šablóne so štýlmi postupne:

h1#Blue (farba: modrá)

Vlastnosť BACKGROUND-COLOR

Táto vlastnosť vám umožňuje nastaviť farbu pozadia pre stránku ako celok, odsek, odkaz, vo všeobecnosti pre ľubovoľnú HTML prvok. Na tento účel je farba alebo hodnota špecifikovaná v hodnote vlastnosti. transparentný(priehľadné). Kód pre pozadie stránky je napísaný:

telo (farba pozadia: aqua)

V tomto prípade bude pozadie stránky tyrkysové a aby sme dali pozadie nadpisu, napíšeme:

h1 (farba pozadia: žltá)

Získame žlté pozadie nadpisov prvej úrovne.

Farba a pozadie v CSS

Vlastnosť BACKGROUND-REPEAT

Táto vlastnosť sa používa pri nastavení na určenie, či sa bude opakovať horizontálne a vertikálne. Platné hodnoty:

• opakovať- obraz sa opakuje vertikálne a horizontálne;
• opakujte x- obraz sa opakuje iba vodorovne;
• opakovať-y- obraz sa opakuje iba vertikálne;
• bez opakovania- obraz sa neopakuje.

Kód je napísaný takto:

p(
obrázok na pozadí: url( adresa súboru obrázka) ;
background-repeat : repeat-x
}

Text tohto odseku bude v hornej časti obrázka na pozadí, ktorý bude umiestnený vodorovne.

Vlastnosť BACKGROUND-ATTACHMENT

Táto vlastnosť sa používa na informovanie prehliadača, či sa má obrázok na pozadí stránky posúvať s textom ( rolovať) alebo zostaň stáť ( pevné).

telo (
obrázok na pozadí: url( adresa súboru obrázka) ;
background-repeat : repeat-x ;
pozadie: pevné
}

V tomto prípade zostane obrázok na pozadí pevný.

POZADIE - POZÍCIA Nehnuteľnosť

Táto vlastnosť sa používa na umiestnenie obrázka vzhľadom na . Hodnoty sú nastavené v percentách (%), v jednotkách dĺžky (cm, px), s kľúčovými slovami:

• Vertikálne:
• top- horná časť obrázka je zarovnaná s horným okrajom stránky alebo bloku;
• stred
• dno- spodná časť obrázka je zarovnaná so spodným okrajom stránky alebo bloku.
• Vodorovne:
• vľavo- ľavý okraj obrázka je zarovnaný s ľavým okrajom stránky alebo bloku;
• stred- stred obrázka je zarovnaný na stred stránky alebo bloku;
• správny- pravý okraj obrázka je zarovnaný s pravým okrajom stránky alebo bloku.

Príklad kódu píšeme v percentách, jednotkách dĺžky a kľúčových slovách:

telo (
obrázok na pozadí: url( adresa súboru obrázka) ;
pozícia na pozadí: 0% 0%
}

Telo(
obrázok na pozadí: url( adresa súboru obrázka) ;
Pozícia pozadia: 10px 25cm
}

Telo(
obrázok na pozadí: url( adresa súboru obrázka) ;
poloha na pozadí: stred hore
}

V predchádzajúcich kapitolách sme zostavili hlavnú šablónu HTML dokumentov, rozhodli sme sa, čo sú HTML tagy, naučili sme sa ukladať a upravovať html súbory a v tejto kapitole sme Zoznámime sa s atribútmi značiek a zmeniť farbu textu a pozadia stránky.

Otvorme naše index.html, na úpravu: Zvládol som!!! A poďme to trochu zmeniť, pridať atribúty: text="#000000" bgcolor="#ffffff"> Dokázal som to!!! Atribút je parameter tagu, ktorý sa do tagu vkladá ako „pár“ (názov parametra + hodnota parametra).
Vkladajú sa hodnoty atribútov značky:
1) text=#000000 bez úvodzoviek;
2) text="#000000" v jednoduchých úvodzovkách;
3) text="#000000" v úvodzovkách.
Ktorákoľvek z týchto možností je správna, ale ak vám záleží na etike kódexu, je lepšie použiť dvojité úvodzovky, ako v mojom príklade vyššie.

Atribút "text" ovláda farbu textu na celej stránke a "bgcolor" ovláda farbu pozadia stránky.

Teraz navrhujem hovoriť o farbách pre HTML dokumenty. Farba je nastavená:
1) text="zlato"- slová v angličtine, napríklad: zlatá (zlatá), červená (červená), zelená (zelená) a tak ďalej ...
Farba však môže pozostávať iba z jedného slova, napríklad „červená“, ale ak napíšete „zelená-červená“, prehliadač to nepochopí a jednoducho to bude ignorovať.
2) text="#000000"- RBG (červená zelená modrá) farebná schéma. "#" tento znak hovorí, že ide o číslo farby, prvé dva znaky (v mojom príklade nula) hovoria, koľko sme zobrali "červenú" farbu, druhé zelené a posledné dva modré.
Každá farba je nastavená od 00 do FF (0-1-2-3-4-5-6-7-8-9-A-B-C-D-E-F), napríklad #000000-black, #ffffff-white , #ff0000-red , # 00ff00- zelená #0000ff-modrá

Ako bonus zo stránky vám navrhujem stiahnuť si farebnú paletu (2kB), ktorá je znázornená na obrázku vyššie. Ak chcete spustiť súbor, musíte archív rozbaliť farba.html, potom na veľkom poli umiestnite ukazovateľ myši na požadovanú farbu, ktorá sa zobrazí v malom okne, a ak v tomto čase kliknete myšou, v malom okne napravo sa zobrazí kód farby.

Teraz späť k nášmu súboru index.html a uložiť ako tsvet.html, teraz sa pozrime, čo sa stalo. Aké to bolo a aké to je? A máte úplnú pravdu, pretože biela je pre pozadie a čierna pre text je predvolená farba. Aby sme si všimli rozdiel, zmeňme hodnoty atribútov:

text=gold" bgcolor="#0900b8"> Dokázal som to!!! Uložiť a sledovať (otvorí sa na novej karte)

Existujú aj iné spôsoby nastavenia textu v súboroch html, ale tieto dva sa považujú za hlavné.

V ďalšej kapitole sa naučíme spravovať text s BR tagmi, ako zalamovať text na iný riadok.

17.10.2015

Ešte nie

Ahojte všetci!
Pokračujeme v učení základov HTML.
V tejto lekcii poviem a ukážem na príkladoch ako urobiť pozadie z farby alebo obrázka na stránke HTML.
Všetko je celkom jednoduché!
Začnime farbou!
Myslím, že vám neušlo, kde som hovoril o tom, ako zmeniť farbu textu a na konci článku som dal kódy pre rôzne farby a odtiene. Prečo som vám pripomenul túto lekciu? Áno, pretože existuje tabuľka s hotovými farebnými kódmi, vezmite si ich a hneď cvičte v tejto lekcii.
Ako teda vytvoriť farebné pozadie v HTML...

Farba pozadia v HTML

Farba pozadia v dokumente HTML je štandardne biela. Ako nastaviť farbu podľa želania?
K tomu nám pomôže atribút „bgcolor“. Ak chcete maľovať na pozadie, napíšte tento atribút do značky " body»:

Buď takto:

Tu je úplný HTML kód:

Text strany bude zelený a pozadie čierne.

Výsledok bude takýto:

Ak chcete vytvoriť pozadie z obrázka, pridajte atribút „background“ do značky „body“:

Vyplňte ľubovoľný obrázok, kde sa nachádza vaša webová stránka (napríklad moja stránka má názov „fon“ s príponou „.gif“):

Tu je úplný HTML kód:

Výsledok bude takýto:

Ak sa obrázok na pozadí nachádza v priečinku obrázkov alebo v inom priečinku, bude vyzerať takto:

Tu je úplný HTML kód:

Text stránky na krásnom pozadí.

To je na dnes všetko! Myslím, že lekcia nebola ťažká a všetko ste pochopili. Ak máte nejaké otázky, píšte do komentárov.
Teším sa na vás na ďalších lekciách.

Predchádzajúci príspevok
Ďalší príspevok