Zdravím všetkých čitateľov tohto článku a predplatiteľov môjho blogu! Dnešnú publikáciu chcem venovať téme, bez ktorej znalosti nebudú vaše internetové zdroje čitateľné a atraktívne: "Ako nastaviť písmo v html." Samotná téma je jednoduchá a som si istý, že ju rýchlo pochopíte.

Nemali by sme však zabúdať, že webové jazyky sú bohaté na najrôznejšie nástroje na návrh písma, ktoré v ideálnom prípade musíte poznať. Po prečítaní článku s istotou zvládnete formátovanie textu, naučíte sa nastavovať rôzne štýly, typy gramáží písma a zdobenia, ako aj meniť veľkosť a farbu viet aj jednotlivých písmen. Začnime!

Písma sú rôzne

Používa sa väčšina značiek, tlače a literatúry, webových stránok a iných služieb štandardné písma. Sú síce pohodlné, no už dávno nenudia a nebijú oku. Preto mnohí dizajnéri mierne menia vzhľad dizajnu alebo dokonca vytvárajú nové štýly. Najznámejšie a najvplyvnejšie fonty sú:

• Helvetica;
• Futura;
• Garamond;
• Bodoni;
• Bembo;
• Rockwell;
• Times New Roman.

Ich hlavné rozdiely sú vo vzťahu k určitým rodinám. Existujú pätkové, pätkové, dekoratívne, kurzíva a jednopriestorové rodiny.

Chcem tiež zdôrazniť, že existuje 5 jednotiek veľkosti písma.

Začnime s jazykom html a jeho "kreatívou"

názov najprv hlavička

P titulky s červeným písmenom!

Tu sa nachádza prvý odsek prúd príklad. Pre prehľadnosť tieto slová bude napísané kurzívou.

Pripomeňme si, že atribút align="centrum" nastaví text, ktorý sa má zobraziť v strede.

A teraz je čas css ukázať svoje schopnosti

Napriek celej množine rôznych značiek, ktoré poskytuje html, je css pohodlnejším a flexibilnejším nástrojom na úpravu vzhľadu písiem.

Hlavné vlastnosti používané na formátovanie obsahu sú písmo a jeho súčasti: text-dekorácia.

Najprv analyzujme písmo. Ide o univerzálny parameter, vďaka ktorému je možné nastaviť niekoľko hodnôt súčasne. Okrem toho každý parameter pracuje s vlastnými kľúčovými slovami.

Názov vlastnosti	Kľúčové slová
font-family	Možno nainštalovať ako štandardné rodiny písiem: bez pätiek (sans-serif); starožitný (serif); dekoratívne (fantasy); kurzíva (kurzíva); monospace (monospace), Rovnako aj štandardné existujúce štýly (Arial, Calibri atď.).
veľkosť písma	Na nastavenie absolútneho rozmeru symbolov sa používajú nasledovné zápisy: xx-small, x-small, small, medium, large, x-large, xx-large. Môžete tiež nastaviť jedinečnú hodnotu.
font-weight	Zodpovedá za sýtosť štýlu textu. Mení sa v rámci rozsahu alebo špecifikované pomocou slov normálne, tučné, svetlejšie alebo tučnejšie.
font-variant	Určuje zastúpenie písmen pomocou kľúčových slov: malé písmená, normálne alebo zdediť.
štýl písma	Nastaví obvyklý (normálny), šikmý (oblique), kurzívu (kurzíva) alebo zdedí rodiča (dedí).
písmo-roztiahnuť	Určuje hustotu písmen. Môžete určiť nasledujúce hodnoty: ultra-condensed, ultra-expanded, extra-condensed, extra-expanded, semi-condensed, semi-expanded, normal, expanded, condensed a inherit.

Nehnuteľnosť text-dekorácia pomáha zdobiť text doplnkové prvky, ako napríklad podčiarknutie ( zdôrazniť), prečiarknuté ( linka cez), overline ( overline), ako aj dediť parametre rodiča ( dediť) alebo zrušiť celé zúčtovanie ( žiadny).

A teraz je čas na druhý príklad. Zobral som predchádzajúci kód a naformátoval som ho css nástroje. Takže názov bol štylizovaný s tieňom (pomocou vlastnosti text-tieň) as obrysom okolo ( hranica-farba). Zároveň som zväčšil jedno slovo. Tiež som chcel použiť parameter nepriehľadnosť na nastavenie priehľadnosti titulkov.

názov najprv hlavička

Priesvitné titulky!

Tu sa nachádza prvý odsek prúd príklad. Pre prehľadnosť tieto slová bude napísané kurzívou.

ako zmeniť farbu písma v html

Ak sa aspoň trochu orientujete vo webových technológiách, mali by ste vedieť, že všetky značky a obsah dokumentu sú obsiahnuté v súbore html a v súbore css štýly ukladá štýly, ktoré definujú vzhľad rôzne prvky. Takže je to css, ktorý musíme použiť na zmenu farby písma a všetko ostatné.

V html existujú značky, ktoré umožňujú aplikovať na text určité efekty, no musíte uznať, že by nebolo úplne rozumné vymýšľať stovky značiek pre každý odtieň. V css to môžete ovládať oveľa pohodlnejšie. Takto sa dá napríklad nastaviť farba html písmo-prvok body, to znamená značku, ktorá zahŕňa celý obsah stránky zobrazený na obrazovke.

telo (farba: červená; )

telo ( farba: červená

Telo stránky sme napísali tak, aby bolo červené. Dostanú ho odseky, zoznamy, nadpisy a všetky ostatné prvky. To bude dovtedy, kým štýly pre tieto prvky nebudú prepísané inými.

Farebné formáty záznamu

Možno máte trochu vedomostí v oblasti web dizajnu? V tomto prípade by ste si mali uvedomiť, že existujú rôzne farebné režimy. Napríklad rgb, rgba, hsl, hex atď. Samozrejme, najjednoduchší spôsob, ako nastaviť odtieň, je jednoducho napísať kľúčové slovo. Urobili sme práve to, že vo vyššie uvedenom príklade červená robí písmená červenými, modrá ich robí modrými a hnedými hnedými. Toto sú len názvy farieb v angličtine.

Jediné, čo v tomto prípade potrebujete vedieť, je názov požadovanú farbu. Môžete si ich vyhľadať na internete v ktorejkoľvek tabuľke. Ďalšie populárny spôsob nastaviť farbu - zapíšte si ju hexadecimálny kód. Toto je takzvaný hexadecimálny formát. Príklady:

p( farba: #000; ) /* Text v odsekoch bude čierny. */ tabuľka( farba: #fff; ) /* Obsah v tabuľkách bude biely. */

Ako vidíte, musíte si zapísať mriežku, po ktorej kód farby. Ako ho spoznať? Môžete napríklad otvoriť Photoshop alebo akýkoľvek iný grafický editor, ktorý pri výbere farby zobrazuje svoj hexadecimálny kód. Môžete tiež využiť službu online.

Rgb je ďalší populárny formát nahrávania. Znamená to jednoducho - červená, zelená, modrá. Farba v tomto formáte je nastavená takto:

#footer(color: rgb(234, 22, 56); )

#footer( farba: rgb (234, 22, 56);

Prvok s ID pätou získa zadanú farbu. Podiel červenej bude 234, zelenej - 22, modrej - 56. Tieto hodnoty možno zapísať od 0 do 255. Podľa toho sa náš odtieň priblíži k červenej. V programe Maľovanie môžete pridať farby do palety zmenou sýtosti troch základných farieb.

Výhodou tejto metódy je, že jednoduchou zmenou troch čísel si môžete vybrať z miliónov farieb. Pri písaní s kľúčovými slovami budete mať vo svojom arzenáli len niekoľko stoviek farieb.

Rgba - priesvitný text!

Áno to nový režim záznamy, ktoré grafických editorov existuje už dlho, no vo webdizajne sa objavil relatívne nedávno. Píše sa to takto:

a( rgba(255, 12, 22, 0,5); )

rgba(255, 12, 22, 0,5);

Posledné číslo v položke určuje priehľadnosť. Dá sa písať od 0 do 1, kde 1 je úplne nepriehľadný text, čo je predvolené správanie. V tomto prípade sa všetky odkazy sfarbia na červeno, ale vďaka priehľadnosti bude jas farby oveľa menší a ak je pod odkazom ďalšie pozadie alebo prvok, bude viditeľný.

Nesprávny spôsob nastavenia farby

html má zastaranú podporu atribút farby a s ním bolo možné zachytiť farbu textu s kľúčové slovo. Teraz to už nemusí fungovať moderné prehliadače a táto metóda skutočne porušuje všeobecne uznávané webové štandardy. A tiež je nepríjemný.

Ako definovať farbu pre ľubovoľný fragment

Dobre, hovoríme tu o farbe písma odsekov, odkazov a tabuliek, ale toto sú pevné prvky, ale čo ak predsa len potrebujete definovať farbu pre jednu vetu, jedno slovo, jedno písmeno?

Len na záver požadovaný fragment v span tagy. Do vnútra tagu napíšeme atribút class, ktorému nastavíme ľubovoľnú, no zrozumiteľnú hodnotu. Napríklad takto:

Všetko, teraz zostáva len odkazovať na selektor v css.