Dnes vám poviem, ako robiť slová tučným písmom na webových stránkach pomocou HTML a CSS. Tento dizajn sa používa, keď potrebujete na stránke zvýrazniť určité informácie. Navyše hovoríme nielen o nadpisoch, ale aj o jednoduchých slovách a frázach v texte. Toto sa implementuje celkom jednoducho.
Na zvýraznenie určitého textu tučným písmom sa používajú špeciálne značky HTML - a ... Napríklad nasledujúci kód:
| Obyčajný text. Náhľad. Silný tučný text. |
Obyčajný text.
Náhľad.
Silný tučný text.
Výstup poskytuje nasledujúci obrázok:
Posledné dve možnosti vyzerajú vizuálne rovnako, líšia sa však od seba navzájom. Označiť určuje jednoduchú štylistickú smelosť slova, zatiaľ čo dodáva určitý sémantický „vylepšený“ (dôležitý) význam. To znamená, že posledný riadok nie je len tučným textom, ale aj dôležitými informáciami. V zásade sa pre vyhľadávače odporúča používať presne .
Tučný text môžete vidieť aj v HTML pomocou štýlov:
Príklad tučného textu.
Ukážkový text s tučne slovo.
Stránka to zobrazuje takto:
Aj keď odvážny HTML kód funguje správne, nemal by. Všetky štýly dizajnu musia byť vykreslené v súbore CSS. Preto ste vo vyššie uvedenom príklade museli používať značky
A zadajte príslušnú triedu a potom zapíšte jej vzhľad do šablóny so štýlmi. Toto sú pravidlá pre kódovanie. Pre hrubé písmo v HTML teda použite značku .
Tučný text CSS
Aby boli CSS tučné, používa sa vlastnosť font-weight. S jeho pomocou je označená „saturácia“ fragmentu textu. Hodnoty sa môžu pohybovať od 100 do 900, ale najbežnejšie používané sú:
- tučné písmo (tučné písmo) - predvolene 700;
- normal - predvolene 400.
K dispozícii sú tiež možnosti pre odvážnejšie a svetlejšie hodnoty, ktoré menia písmo v závislosti od rodiča na viac alebo menej tučné písmo.
Ak chcete v CSS nastaviť tučný text, musíte pre tento alebo ten prvok nastaviť nejaký štýl, napríklad:
Obyčajný text s mastný výtok v centre.
silné (font-weight: bold;)
Tu by som rád poznamenal jednu malú nuansu, o ktorej mi bolo povedané - ak vytvoríte novú triedu pre nejaký prvok, potom je vhodné použiť viac-menej „zrozumiteľný názov“. Napríklad v príklade vyššie vyzerá štýl class = "my-bold-font" logickejšie ako class = "new-font", pretože čiastočne môžete pochopiť jeho účel. To je plus pre tých, ktorí budú v budúcnosti hľadať a používať vaše rozloženie.
V ďalšom článku vám poviem o niekoľkých zaujímavých tučných písmach, ktoré sa mi podarilo nájsť.
V html hrá veľkosť písma dôležitú úlohu. Umožňuje vám upriamiť pozornosť používateľa na dôležité informácie zverejnené na webovej stránke. Aj keď je dôležitá nielen veľkosť písmen, ale aj ich farba, hrúbka a dokonca aj rodina.
Značky a atribúty pri indexovom prehľadávaní pomocou html typov písma
Hypertextový jazyk má veľkú sadu nástrojov na prácu s písmami. Nakoniec, práve formátovanie textu je hlavnou úlohou html.
Dôvodom pre vytvorenie jazyka HTML bol problém so zobrazením pravidiel formátovania textu v prehliadačoch.
Zvážte značky, ktoré sa používajú na prácu s písmami v html, a ich atribúty. Hlavná je značka ... Pomocou hodnôt jeho atribútov môžete nastaviť niekoľko charakteristík písma:
- farba - nastaví farbu textu;
- veľkosť - veľkosť písma v konvenčných jednotkách.
Kladné hodnoty atribútov od 1 do 7 sú podporované.
- face - slúži na nastavenie rodiny fontov textu, ktorý sa má použiť vo vnútri značky ... Podporovaných je niekoľko hodnôt súčasne oddelených čiarkami.
Naformátuje sa iba text medzi časťami spárovanej značky písma. Zvyšok textu je zobrazený štandardným predvoleným písmom.
Aj v html existuje niekoľko spárovaných značiek, ktoré určujú iba jedno pravidlo formátovania. Tie obsahujú:
- - nastaví tučné písmo v html. Označiť akcia je podobná predchádzajúcej;
- - veľkosť je väčšia ako predvolená;
- - menšia veľkosť písma;
- - kurzíva. Podobná značka ;
- - podčiarknutý text;
- prečiarknutý;- - zobraziť text iba malými písmenami;
- - veľkými písmenami.
Obyčajný text
Náhľad
Náhľad
Viac ako obvykle
Menej ako obvykle
Kurzíva
Kurzíva
Podčiarknuté
Prečiarknutý
Možnosti atribútu štýlu
Okrem opísaných značiek existuje niekoľko ďalších spôsobov, ako zmeniť písmo v html. Jedným z nich je použitie generického atribútu štýlu. Pomocou hodnôt jeho vlastností môžete nastaviť štýl zobrazenia písma:
1) font-family - vlastnosť nastavuje rodinu fontov. Je možný výpočet niekoľkých hodnôt.
Zmena písma v html na ďalšiu hodnotu nastane, ak predchádzajúca rodina nie je nainštalovaná v operačnom systéme používateľa.
Syntax zápisu:
rodina fontov: názov písma [, názov písma [, ...]]
2) veľkosť písma - veľkosť je nastavená od 1 do 7. Toto je jeden z hlavných spôsobov, ako môžete zväčšiť písmo v html.
Syntax zápisu:
veľkosť písma: absolútna veľkosť | relatívna veľkosť hodnota | úroky dediť
Nastaviť možno aj veľkosť písma:
- V pixeloch;
- V absolútnej hodnote ( xx-malý, x-malý, malý, stredný, veľký);
- V percentách;
- V bodoch (pt).
Veľkosť písma: 7
Veľkosť písma: 24px
Veľkosť písma: veľké
Veľkosť písma: 200%
Veľkosť písma: 24pt
3) štýl písma - nastavuje štýl písania písma. Syntax:
štýl písma: normálne | kurzíva | šikmý | dediť
Hodnoty:
- normálny - normálny pravopis;
- italic - kurzíva;
- šikmé - písmo naklonené doprava;
- inherit - dedí pravopis nadradeného prvku.
Príklad toho, ako zmeniť písmo v html pomocou tejto vlastnosti:
štýl písma: dediť
štýl písma: kurzíva
štýl písma: normálne
štýl písma: šikmý
4) variant písma - prevádza všetky veľké písmená na veľké písmená. Syntax:
variant písma: normálne | malé čiapočky | dediť
Príklad toho, ako pomocou tejto vlastnosti zmeniť písmo v html:
variant písma: dediť
variant písma: normálne
variant písma: malé písmená
5) váha písma - umožňuje nastaviť hrúbku písma textu (sýtosť). Syntax:
váha písma: tučné | odvážnejšie | svetlejšie | normálne | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Hodnoty:
- bold - nastaví html tučné písmo;
- odvážnejší - tučnejší vo vzťahu k normálu;
- svetlejší - menej nasýtený vzhľadom na normálne;
- normálny - normálny pravopis;
- 100-900 - nastaví hrúbku písma v číselnom ekvivalente.
váha písma: tučné
váha písma: odvážnejšie
váha písma: ľahšie
váha písma: normálne
váha písma: 900
váha písma: 100
Vlastnosť písma a farba písma html
Písmo je ďalšou vlastnosťou kontajnera. Interne kombinoval hodnoty niekoľkých vlastností určených na zmenu písma. Syntax písma je:
font: veľkosť písma font-family | dediť
Hodnotu je možné nastaviť aj na písma použité systémom v nápisoch na rôznych ovládacích prvkoch:
- titulok - pre tlačidlá;
- ikona - pre ikony;
- jedálny lístok - jedálny lístok;
- schránka na správy - pre dialógové okná;
- small-caption - pre malé ovládacie prvky
- status-bar - písmo stavového riadku.
písmo: ikona
písmo: titulok
písmo: ponuka
písmo: schránka na správy
malý titulok
písmo: stavový riadok
font: italic 50px bold "Times New Roman", Times, serif
Ak chcete nastaviť farbu písma v html, môžete použiť vlastnosť color. Umožňuje vám nastaviť farbu pomocou kľúčového slova aj formátu rgb. A tiež vo forme hexadecimálneho kódu.
Ahojte milí čitatelia blogu! Tento článok sa zameria na značky na formátovanie textu... Tučným alebo kurzívovým textom je vynikajúci príklad. Zvážime tiež vplyv niektorých značiek na vnútornú optimalizáciu stránky a pravidlá ich písania. O tom sa dočítate v uvedenom článku. Mimochodom, podobné prvky návrhu textu nájdete v mnohých textových editoroch, napríklad vo Worde.
Značky sú rozdelené do 2 typov: blokové a vložené. Pri použití prvého z nich môžete zmeniť obsah časti textu (riadky, jednotlivé fragmenty alebo slová), zatiaľ čo druhé sú. Značky formátovania, ktorým sa v tomto článku pozrieme, sú prevažne malé.
Pravidlá a poradie písania značiek
Čo je začiatočná a koncová značka, už viete. Ak nie, prečítajte si článok na úplnom začiatku tohto materiálu. Stručne povedané, existujú dva typy značiek: jednotlivé značky (napríklad zalamovanie do nového riadku)) a kontajner (spárovaný). Takže všetky značky na formátovanie textu sú spárované... To znamená, že akýkoľvek prvok má začiatočnú a koncovú značku a výber musí byť vložený medzi ne. Správny výber frázy by napríklad vyzeral takto: Vybratý úryvok
Keď prehliadač spracuje tento fragment, zobrazí sa nasledujúci text: Vybratý úryvok. Mimochodom, všetky značky sa v informačnom kanáli RSS () nezobrazujú.
Hlavnou vecou pri písaní značiek je udržiavať ich zatvorené. V opačnom prípade bude všetok text na stránke tučný (v príklade so značkou) ). Existujú však situácie, kedy je potrebné zvýrazniť určitý fragment súčasne tučnou kurzívou. Túto akciu však nevykonáva žiadna značka. Z tejto situácie existuje iba jedna cesta: použite súčasne dve značky. Na akom poradí ich použitia nezáleží. Preto tým, že napíšete text s tagmi, ako je tento:
Vybratý úryvok
alebo takto:
Vybratý úryvok
Stále dostanete Vybratý úryvok kurzívou a tučným písmom súčasne. Je však lepšie použiť prvú možnosť, pretože spočiatku bola jediná a správna. Nezabudnite tiež, že každý prehliadač môže v závislosti od nastavení zaobchádzať so značkami odlišne (). Teraz prejdime k samotným formátovacím značkám.
Tučné písmo a kurzíva - značky , , a
Najobľúbenejšie značky na formátovanie textu - s dôrazom na to tučne a kurzívou... Zvyčajne sa používajú na to, aby sa kúsku pripisovala dôležitosť. Prvý prípad slúži na zvýraznenie fragmentu obsahujúceho užitočné informácie alebo kľúčové slová. Kurzíva sa používa na rovnaké účely ako tučné písmo, ale informácie sú menej dôležité, pretože kurzíva je na pozadí základného textu menej viditeľná ako tučné písmo.Najprv zvážte tučný text... Pre túto akciu sa používajú dve značky - a ... Nie je žiadny rozdiel vo vzhľade. Aj keď vzhľadom na to, že ktorýkoľvek prehliadač môže interpretovať každý prvok odlišne, môžete vidieť rozdiely. Takto vyzerá text v značkách a v podobe, ktorú už prehliadač spracoval:
Text v silných značkách
Text v značkách b
A takto vyzerajú tieto dva riadky v zdrojovom kóde stránky:
Text v silných značkách Text v značkách b
Rovnakú situáciu môžeme pozorovať v prípade kurzíva a ... Pokúste sa nájsť rozdiely medzi týmito dvoma príkladmi:
Text v em tagoch
Text v značkách I
A tu je zdrojový kód:
Text v em tagoch Text v značkách I
Uvažované tagy s kurzívou a kurzívou sa teda v skutočnosti nelíšia, ale prečo potom napríklad aj my tagy Ak tu ? Ten druhý obsahuje koniec koncov iba jeden znak (bez započítania zátvoriek), a preto sa ľahšie píše. A vec je, že značky a ovplyvniť. Ak tieto značky obklopíte kľúčovými slovami, bude to mať priaznivý vplyv na propagáciu webových stránok. Hlavnou vecou je nepreháňať to - maximálny text by mal byť v značke tučným textom. a rovnaké množstvo kurzívy v značke .
Ak chcete iba zvýrazniť nejaký okamih v texte, použite značku alebo ... Všeobecne si myslím, že vyhľadávače považujú text v týchto značkách aj za dôležitejší, ale zapnutý interná optimalizácia stále majú menší vplyv ako a .
Lomítko textové značky - , a
Teraz sa pozrime na niekoľko značiek, ktoré používajú vlastnosť v štýle textu. Najznámejší textový editor, aký poznáš, je značka
alebo podčiarknuť. Táto značka nemá žiadny vplyv na hodnotenie (pokiaľ viem), ale pomôže zvýrazniť text a zamerať sa na neho. Hneď vyššie som uviedol príklad použitia tejto značky. Existujú ďalšie dve značky, ktoré majú podobný účel - a ... Oba majú funkciu preškrtnutého textu. Túto značku môžete použiť v každej situácii: ak aktualizujete dokument (alebo skôr jeho časť), môžete prečiarknuť starý a pridať nový; ak sa chystáte napísať niečo, čo sa odchyľuje od témy materiálu; niečo, čo nezodpovedá morálnym a etickým normám.
Rozdiely medzi týmito dvoma značkami sú iba v ich písanie, v dôsledku čoho je lepšie použiť prvý, pretože po prvé, je to pohodlnejšie písať, a po druhé, na vašej stránke bude menej HTML kódu a vyhľadávače ho milujú.
Označiť a atribúty - parametre písma textu
Teraz sa pozrime na značku, ktorá sa nepoužíva bez atribútov. Pomocou neho môžete nastaviť parametre pre konkrétny text. Všeobecne je teraz lepšie použiť (kaskádové štýly), pretože môžu výrazne skrátiť celý HTML kód stránky. Pozrime sa teda na tú istú značku . Pre neho je tu všetko tri atribúty:
- tvár- samotné písmo. Napríklad Arial, Courier alebo Verdana. Môžete uviesť niekoľko, tk. nie všetci používatelia majú rozsiahlu sadu písiem a napísaním niekoľkých atribútov tvár si prehliadač bude môcť zvoliť, ktoré z nich použije, alebo lepšie povedané, ktoré sa v systéme nachádzajú;
- veľkosť- atribút označujúci veľkosť textu. Môže byť vyjadrený v ľubovoľných jednotkách aj v pixeloch;
- farba- farba textu. Tento atribút je možné použiť v HTML kódoch farieb aj v slovách. Prvé z nich majú tvar #FFFFFF (kde F je akékoľvek číslo alebo písmeno od A do F) a druhé sú napísané jednoduchými slovami (napríklad červená je červená).
Takto vyzerá text v značke pomocou každého atribútu:
Tento text má veľkosť 6 pixlov
Tento text je červený Tento text je napísaný písmom Arial Tento text je červený a má veľkosť 5 pixelovA tu je to, čo uvidíte po spracovaní napísaného kódu: 
Blokované prvky návrhu textu - hlavičky -, odstavec
, odstavec
Na záver sa pozrieme na blokové prvky, ktoré sa používajú takmer v každom dokumente. Jedná sa o značky nadpisov a odsekov. Zvážme prvé. Existuje 6 typov nadpisov a každý z nich má svoju vlastnú značku. Každý druh má iba svoje vlastné sériové číslo a je zaznamenávaný pomocou značiek
, ,..., ... Takto vyzerajú všetky hlavičky pri spracovaní:
... Takto vyzerajú všetky hlavičky pri spracovaní:
Číslo za názvom slova sa zhoduje s číslom v značke
Teraz si povieme niečo o značke zvýraznenia odseku.
Funkciou tejto značky je oddeliť text od iného podobného textu prázdnym riadkom. Ak sa pozriete na zdrojový kód dokumentu, uvidíte toto:
Zelené polia majú jeden odsek, červené polia ďalší. Takto vyzerá tento kód po spracovaní prehľadávačom (šípka ukazuje na prázdny riadok):
Vo výsledku získame pomerne zreteľné oddelenie jedného odseku od druhého, čo je výhodné - čítanie sa stáva pohodlnejším.
Takže článok o tagy na formátovanie dokumentu... Je ich oveľa viac, ako som popísal v tomto materiáli. Je to len to, že o niektorých musíte povedať dosť veľa, v dôsledku čoho sa im budú venovať samostatné články s úplnou recenziou.!
Váha písma sa určuje pomocou atribútu CSS váha písma, ktoré môžu nadobúdať nasledujúce hodnoty:
- ľahší- ľahší
- normálne- normálne
- tučne- odvážne
- odvážnejšie- odvážnejšie
- 100..900 - 100 zodpovedá najtenšiemu písmu; 900 - najtučnejšia
Atribút štýl písma(štýl písma) sa používa na písanie kurzívou a môže mať nasledujúci význam:
- kurzíva- kurzíva, okraje textu sú zaoblené
- normálne- normálne
- šikmý- kurzíva
Atribút variant písma(typ písma) sa používa na písanie malými písmenami a môže mať nasledujúci význam:
- normálne- normálne
- smaoo-čiapky- malé veľké písmená
Okrem tučnej kurzívy a malých písmen aj niekoľko ďalších populárnych štýlov: podčiarknutie a označenie.
Atribút textová výzdoba(dekorácia textu) slúži na podčiarknutie textu a môže nadobúdať nasledujúce hodnoty:
- blikať- blikajúci text (IE nepodporuje)
- line-through- preškrtnutý text
- žiadny- bez zmien
- nadčiarkovať- riadok nad textom
- zdôrazniť- podčiarknutý text
Atribút textová transformácia(transformácia textu) sa používa na prácu s malými veľkými písmenami a môže nadobúdať nasledujúce hodnoty:
- kapitalizovať- všetky slová sa začínajú veľkým písmenom
- malými písmenami- celý text je napísaný malými písmenami
- žiadny- bez zmien
- veľké písmená- celý text je napísaný veľkými písmenami
Príklad použitia váha písma, štýl písma, textová výzdoba, textová transformácia: Príklad č. 9
HTML kód stránky:
Bez názvu
„Zlatý prsteň Ruska“(v staroveku Zalesye), turistická trasa, ktorá obsahuje sieť staroruských miest: Sergiev Posad, Pereslavl-Zalessky, Rostov Veľký, Jaroslavľ, Kostroma, Ples, Vladimír, Bogolyubovo, Suzdal, Yuryev-Polskoy, Uglich. Názov Zalesye je primárne geografický, znamenal všetko, čo bolo vo vzťahu ku Kyjevskej Rusi „mimo lesa“.
Turistická trasa (v prevádzke od začiatku roku 1970) vedená historickými mestami prechádza územím piatich regiónov - Moskva, Jaroslavľ, Kostroma, Ivanovskaja, Vladimirskaja. Starodávne mestá týchto krajín majú svoj vlastný osud, svoju vlastnú minulosť. Vo svojom historickom vývoji prešli od svojich prvých dní narodenia po dnešok náročnou cestou. Na tejto dlhej ceste sa nenávratne stratilo veľa. Ľahostajnosť a nedbanlivosť vedú k čiastočnému alebo úplnému zničeniu jedinečných budov, ako sú mestá Kalyazin, Mologa, Uglich. Pri stavbe vodnej elektrárne Uglich bol vyhodený do povetria starodávny Pokrovský kláštor s jedinečnými pamiatkami z 15. - 17. storočia, ktorý spadol pod vodu. Polovica kostolov v Uglichu bola zbúraná, ploty kláštorov boli demontované, čo zničilo ich celistvosť súboru. Vďaka úsiliu reštaurátorov sa podarilo desiatky predmetov starovekej architektúry, zdanlivo nenávratne stratených, vyradiť z núdzového stavu a zachrániť pred zničením. Obnovené v pôvodnej podobe: architektonický celok kláštora Vzkriesenia (1674-77) v Uglichu, kostol na príhovor na Nerl (12. storočie), Dmitrijský chrám (12. storočie) a „Zlatá brána“ Vladimíra , Katedrála svätého Juraja (12. storočie) Jurjev-Polský, pamiatky starovekého Suzdalu, kde sa uskutočnili komplexné práce na obnove historických budov v celom meste, mestské múzeum. Znovu boli vytvorené celé architektonické komplexy múzeí drevenej architektúry v Kostrome a Suzdale. To všetko sú výtvory ľudských rúk, ktoré sa dotkli chránených oblastí Ruskej krajiny.
