Tvorca stránky zvyčajne rozhoduje o tom, ktoré písmená budú veľké a ktoré malé, na základe pravidiel pravopisu a vlastných preferencií. Proces zmeny veľkých a malých písmen v znakoch je však možné zautomatizovať pomocou vlastnosti textová transformácia. Táto vlastnosť môže nadobúdať štyri hodnoty:

• žiadny - text je napísaný bez zmien;
• kapitalizovať- každé slovo bude začínať veľkým písmenom;
• malé písmená - všetky znaky sa stanú malými (malými);
• veľké písmená- všetky znaky budú veľké (veľké).

Napríklad nasledujúce pravidlo určuje, že nadpis H1 by mal byť napísaný veľkými písmenami:

H1 (transformácia textu: veľké písmená;)

Je vhodné nastaviť automatickú zmenu veľkosti písmen pre skratky, názvy prvkov, nadpisy a iné. textové prvky, kde chcete písať veľkými alebo malými písmenami.

Dekorácia textu: vlastnosť dekorácie textu

Nehnuteľnosť text-dekorácia umožňuje nastaviť dodatočný dizajn textu. Hodnoty tejto vlastnosti sú konštanty žiadne, podčiarknuté, prečiarknuté, prečiarknuté a blikať, ktorá vám umožní zobraziť normálny text, nakresliť čiaru nad, pod alebo cez text alebo nechať text blikať. Príklad použitia rôznych hodnôt tejto vlastnosti je znázornený na obrázku 11.4.

Ryža. 11.4.

Najčastejšia aplikácia nehnuteľnosti text-dekorácia je zmeniť predvolené podčiarknutie odkazu. Nasledujúce pravidlo napríklad určuje, že odkazy by mali byť podčiarknuté:

A:link (text-decoration: underline;)

Word spacing: vlastnosť word-spacing

Ak chcete nastaviť medzery medzi slovami v texte, použite vlastnosť word-spacing. Hodnotu tejto vlastnosti je možné nastaviť pomocou kľúčové slovo normal , čo je predvolené nastavenie a nastavuje štandardné medzery pre aktuálne písmo. Ak chcete nastaviť interval, okrem štandardného, ​​môžete zadať hodnotu v ľubovoľných dostupných jednotkách CSS, pričom hodnota môže byť záporná.

Nasledujúce pravidlo teda zväčšuje medzery medzi slovami v nadpise H1 o 1 em:

H1 (medzery slov: 1 em;)

Zarovnanie textu: vlastnosť zarovnania textu

Zarovnanie sa vzťahuje na umiestnenie ľavého alebo pravého okraja bloku textu pozdĺž neviditeľného vertikálna čiara. Používa sa na zarovnanie textu. vlastnosť textu-zarovnať . Platné hodnoty tejto vlastnosti sú left, right, center a justify , ktoré určujú zarovnanie doľava, doprava, na stred a zarovnanie do bloku.

Nasledujúce pravidlo nastavuje zarovnanie na stred všetkých prvkov obsiahnutých v prvku DIV:

DIV (zarovnanie textu: na stred;)

Úvod: vlastnosť line-height

Vedenie je vzdialenosť medzi základnými čiarami tesne rozmiestnených čiar. Za normálnych okolností závisí riadkovanie od typu a veľkosti písma a automaticky ho určuje prehliadač. Túto hodnotu je však možné zmeniť pomocou vlastnosti line-height. Predvolená hodnota normal spôsobí, že prehliadač automaticky vypočíta riadkovanie. Akékoľvek číslo väčšie ako nula sa považuje za násobiteľ veľkosti písma aktuálneho textu. Ako hodnoty pre túto vlastnosť je tiež možné použiť ľubovoľné jednotky dĺžky akceptované v CSS. Je tiež povolené používať percentuálny zápis, v tomto prípade sa výška písma berie ako 100 %. Záporné riadkovanie nie je povolené.

Letter spacing: vlastnosť letter-spacing

Prehliadač automaticky vyberie medzery medzi znakmi na základe veľkosti a typu písma. V niektorých prípadoch je potrebné opraviť medzery medzi písmenami. Vlastnosť letter-spacing sa používa na ovládanie medzier medzi písmenami. Ako hodnoty pre túto vlastnosť možno použiť ľubovoľné jednotky dĺžky CSS, ale odporúča sa použiť relatívne jednotky založené na veľkosti písma (em a ex). Na rozdiel od riadkovanie, vlastnosť letter-spacing umožňuje zápornú hodnotu, no v tomto prípade sa musíte uistiť, že čitateľnosť textu zostane zachovaná.

Nasledujúce pravidlo zväčšuje medzery medzi znakmi v hlavičke H1 o 0,5 em.

modul CSS text popisuje funkcie CSS, ktoré riadia preklad zo zdroja na formát a zalamovanie riadkov. Rôzne vlastnosti CSS poskytuje kontrolu nad konverziou malých a veľkých písmen, manipuláciou s medzerami, pravidlami delenia slov a zalamovaním textu a riadkov, zarovnávaním, medzerami a odsadzovaním.

Základnou jednotkou textu je znak. Keďže však systémy písania nie sú vždy také jednoduché ako základná anglická abeceda, to, čo znak v skutočnosti je, závisí od kontextu, v ktorom sa výraz používa. Napríklad v kórejskom systéme písania možno každé štvorcové znázornenie slabiky (napr. 한 = han) považovať za znak. Štvorcový symbol však skutočne pozostáva z niekoľkých písmen, z ktorých každé predstavuje fonému (napr. ㅎ = h, ㅏ = a, ㄴ = n) a každé z nich možno tiež považovať za symbol.

1. Transformácia textu: vlastnosť text-transform

Vlastnosť text-transform upravuje štýl textu. Nemá to vplyv na základný obsah a nemalo by to mať vplyv na obsah operácie kopírovania a vkladania obyčajného textu.

Nehnuteľnosť sa dedí.

Syntax

transformácia textu: žiadna; text-transform: veľké písmená; text-transform: veľké písmená; text-transform: malé písmená; text-transform: zdediť; text-transform: počiatočné;

2. Spracovanie medzier a zlomov riadkov: vlastnosť white-space

Vlastnosť white-space spracováva medzery medzi slovami a zlomy riadkov v rámci prvku.

Nehnuteľnosť sa dedí.

Biely vesmír
Hodnoty:
normálne	Predvolená hodnota. Medzi slová sa vkladá iba jedna medzera, ďalšie medzery sa vyhadzujú. Text sa zalamuje iba v prípade potreby.
nowrap	Zakáže zlomy riadkov okrem prípadu, keď sa použije .
pre	Medzery v texte sa neignorujú, prehliadač zobrazuje nadbytočné medzery a zalomenia riadkov.
predbaliť	V prípade potreby zachováva medzery v texte zalamovaním riadkov.
predlinka	Odstráni extra priestory, okrem prípadov .
break-spaces	Správanie je identické s predbalením, okrem toho, že: akákoľvek sekvencia neodstrániteľných medzier vždy zaberá miesto, a to aj na konci riadku; možnosť zalomenia riadku existuje za každou neodstrániteľnou medzerou, vrátane medzier.
počiatočné
dediť

Syntax

Medzera: normálne; white-space: nowrap; white-space: pre; white-space: pre-wrap; white-space: pre-line; white-space: break-spaces; white-space: zdediť; white-space: počiatočné;

3. Nastavenie tabulátora: vlastnosť veľkosti tabulátora

Vlastnosť tab-size sa používa na zmenu veľkosti odsadenia získaného pomocou klávesu TAB. Hodnoty vlastností sa ignorujú, keď je nastavená jedna z troch hodnôt vlastností pre-line, normal alebo nowrap.

Funguje len pre prvky a <pre>Pre ostatné prvky bloku bude hodnota vždy rovná jednej. Hodnoty vlastností uvedené v jednotkách dĺžky sú podporované iba v prehliadači Chrome 42+.</p> <p>Nehnuteľnosť sa dedí.</p> <p><b>Syntax</b></p><p>tab-size: 0; tab-size: 10px; tab-size: dedit; tab-size: initial;</p><h3>4. Zalomenie riadkov a hranice slov</h3> <p>Keď je obsah na úrovni riadkov rozdelený do riadkov, je rozdelený do riadkov. Takéto rozdelenie sa nazýva zlom riadku.</p> <p>Keď sa riadok zlomí v dôsledku explicitných ovládacích prvkov zalomenia riadka, ako je nový riadok alebo značka <br>, začiatok alebo koniec bloku je vynútené zalomenie riadku.</p> <p>Ak sa riadok zalomí v dôsledku zalamovania obsahu, keď prehliadač vytvorí voliteľné zalomenia riadkov, aby sa zmestil do obsahu, ide o mäkké zalomenie.</p> <h4>4.1. Pravidlá porušovania písmen: vlastnosť rozdeľovania slov</h4> <p>Vlastnosť word-break definuje možnosť jemného zalamovania medzi písmenami, t.j. kedy je prijateľné prerušovať riadky textu. Predovšetkým kontroluje, či medzi susednými typografickými znakmi a/alebo číslicami existuje mäkké zalomenie. Toto nemá vplyv na pravidlá upravujúce mäkké delenie slov vytvorené medzerami.</p> <p>Nehnuteľnosť sa dedí.</p> <p><b>Syntax</b></p><p>Rozdelenie slov: normálne; prelomenie slov: break-all; prelomenie slov: udržať-všetko; prelomenie slov: zdediť; zalomenie slov: začiatočné;</p><h4>4.2. Zalomenie riadku: zalomenie riadku</h4> <p>Vlastnosť zalomenia riadka definuje pravidlá zalomenia riadku aplikované v rámci prvku, konkrétne ako zalomenie riadka interaguje s interpunkciou a symbolmi.</p> <p>Nehnuteľnosť sa dedí.</p> <table class="t1"><tr><th colspan="2">line-break</th> </tr><tr><td>Hodnoty:</td> <td> </td> </tr><tr><td>auto</td> <td>Prehliadač definuje množinu obmedzení zalomenia riadkov, ktoré sa majú použiť, ktoré sa môžu líšiť v závislosti od dĺžky riadku, ako napríklad použitie menej obmedzujúcich pravidiel pre zalomenie riadkov pre krátke riadky. Predvolená hodnota.</td> </tr><tr><td>voľný</td> <td>Rozdelí text pomocou najmenej obmedzujúcej sady pravidiel zalomenia riadkov. Zvyčajne sa používa na krátke riadky, napríklad v novinách.</td> </tr><tr><td>normálne</td> <td>Rozdeľuje text pomocou najbežnejšej sady pravidiel zalomenia riadkov.</td> </tr><tr><td>prísny</td> <td>Rozdeľuje text pomocou prísneho súboru pravidiel zalamovania riadkov.</td> </tr><tr><td>počiatočné</td> <td>Nastaví hodnotu vlastnosti na jej predvolenú hodnotu.</td> </tr><tr><td>dediť</td> <td>Zdedí hodnotu nehnuteľnosti od <a href="https://bar812.ru/sk/manipulyacii-s-dom-na-chistom-javascript-tehniki-raboty-s-dom.html">nadradený prvok</a>. </td> </tr></table><p><b>Syntax</b></p><p>zalomenie riadku: auto; line-break: voľný; zalomenie riadku: normálne; zalomenie riadku: prísne; zalomenie riadku: zdediť; line-break: initial;</p><h4>4.3. Delenie slov: vlastnosť pomlčiek</h4> <p>Vlastnosť hyphens určuje, či je povolené delenie slov na vytvorenie mäkkého delenia v riadku textu.</p> <p>Delenie slov je riadené delenie slov, pri ktorom sa zvyčajne nesmú lámať, aby sa zlepšilo usporiadanie odsekov. Rozdelenie slov sa zvyčajne vyskytuje pozdĺž slabičných alebo morfemických hraníc a keď je rozdelenie vizuálne označené (zvyčajne vložením spojovníka, -). V niektorých prípadoch môže delenie slov zmeniť aj pravopis slova. V každom prípade je zalamovanie slov iba efektom vykresľovania: nemalo by mať vplyv na obsah dokumentu, výber textu ani vyhľadávanie.</p> <p>Text CSS Level 3 nedefinuje presné pravidlá delenia slov, preto sa odporúča zvoliť vhodné pomlčky pre daný jazyk.</p> <p>Nehnuteľnosť sa dedí.</p> <table class="t1"><tr><th colspan="2">pomlčky</th> </tr><tr><td>Hodnoty:</td> <td> </td> </tr><tr><td>žiadny</td> <td>Slová sa nerozdeľujú, aj keď znaky v slove delenie slov výslovne definujú.</td> </tr><tr><td>Manuálny</td> <td>Slová sú zalamované iba na tých miestach, kde sú vo vnútri slova symboly, ktoré jasne označujú možnosť zalamovania slov ( <a href="https://bar812.ru/sk/volnistaya-bukva-na-klaviature-kak-vvodit-specialnye-simvoly-otsutstvuyushchie.html">zvláštny charakter</a>-). Predvolená hodnota.</td> </tr><tr><td>auto</td> <td>Slová možno rozdeliť na možnosti delenia slov, ktoré sú určené automaticky príslušným zdrojom delenia slov okrem tých, ktoré sú explicitne označené podmieneným pomlčkou. Aby ste dosiahli správne zalamovanie slov, musíte nastaviť jazyk svojho obsahu (napríklad pomocou atribútu jazyk HTML alebo hlavičky HTTP Content-Language).</td> </tr><tr><td>počiatočné</td> <td>Nastaví hodnotu vlastnosti na jej predvolenú hodnotu.</td> </tr><tr><td>dediť</td> <td>Zdedí hodnotu vlastnosti z nadradeného prvku.</td> </tr></table><p><b>Syntax</b></p> <p>Spojovníky: žiadne; pomlčky: manuálne; pomlčky: auto; pomlčky: dediť; pomlčky: začiatočné;</p><h4>4.4. Pretečenie zalamovacieho bloku: vlastnosť overflow-wrap/word-wrap</h4> <p>Vlastnosť overflow-wrap (alebo jej zastaraný názov word-wrap) určuje, či sa riadok, ktorý sa nedá zlomiť, môže zlomiť v nevyriešených bodoch, aby sa zabránilo pretečeniu riadka. Funguje, keď vlastnosť white-space umožňuje zalamovanie.</p> <p>Nehnuteľnosť sa dedí.</p> <table class="t1"><tr><th colspan="2">pretekať-zabaliť, zalamovať</th> </tr><tr><td>Hodnoty:</td> <td> </td> </tr><tr><td>normálne</td> <td>Nelomiteľné čiary sa môžu zlomiť iba v povolených bodoch prerušenia. Predvolená hodnota.</td> </tr><tr><td>zlomiť slovo</td> <td> </td> </tr><tr><td>kdekoľvek</td> <td>Neprerušiteľná postupnosť znakov môže byť prerušená v ľubovoľnom bode, ak v reťazci nie sú žiadne iné prijateľné body prerušenia. Ovplyvňuje iba vizuálne zobrazenie bez ovplyvnenia zdrojového textu. Na bod zlomu riadka sa nepridáva spojovník. Pri výpočte natívnych minimálnych veľkostí obsahu sa berú do úvahy všade prítomné možnosti mäkkého balenia.</td> </tr><tr><td>počiatočné</td> <td>Nastaví hodnotu vlastnosti na jej predvolenú hodnotu.</td> </tr><tr><td>dediť</td> <td>Zdedí hodnotu vlastnosti z nadradeného prvku.</td> </tr></table><p><b>Syntax</b></p><p>prepadový obal: normálny; overflow-wrap: break-word; prepadový obal: kdekoľvek; pretečenie-zabaliť: zdediť; prepadový obal: počiatočný;</p><h3>5. Zarovnanie a zarovnanie riadkov</h3> <p>Zarovnanie riadkov a zarovnanie riadi spôsob, akým je obsah vložený v riadku distribuovaný.</p> <h4>5.1. Skratka pre zarovnanie textu: vlastnosť zarovnania textu</h4> <p>Blok textu je množina vložených blokov. Vlastnosť text-align určuje vlastnosti text-align-all a text-align-last a popisuje, ako sa polia na úrovni riadkov v každom riadkovom poli zarovnajú so začiatkom a koncom vloženého poľa. Iné hodnoty ako justify-all alebo match-parent sa priradia k text-align-all a automaticky sa obnovia na text-align-last.</p> <p>Nehnuteľnosť sa dedí.</p> <table class="t1"><tr><th colspan="2">zarovnanie textu</th> </tr><tr><td>Hodnoty:</td> <td> </td> </tr><tr><td>začať</td> <td>Obsah na úrovni riadku je zarovnaný s predným okrajom vloženého poľa. Predvolená hodnota.</td> </tr><tr><td>koniec</td> <td>Obsah na úrovni riadku je zarovnaný ku koncovému okraju vloženého poľa.</td> </tr><tr><td>vľavo</td> <td>Obsah na úrovni riadku je zarovnaný k ľavému okraju riadku riadkového poľa. Vo vertikálnych systémoch písania to bude fyzický vrch alebo spodok v závislosti od orientácie textu.</td> </tr><tr><td>správny</td> <td>Obsah na úrovni riadku je zarovnaný k pravému okraju riadku riadkového poľa. Vo vertikálnych systémoch písania to bude fyzický vrch alebo spodok v závislosti od orientácie textu.</td> </tr><tr><td>stred</td> <td>Obsah na úrovni riadku je vycentrovaný v riadkovom poli.</td> </tr><tr><td>ospravedlniť</td> <td>Text je zarovnaný na šírku vloženého rámčeka, aby presne vyplnil riadkový rámček, vložený oproti ľavému a pravému okraju nadradeného prvku. Ak nie je uvedené inak v text-align-last , posledný riadok pred vynútenou prestávkou alebo koncom bloku je zarovnaný na začiatok. Medzery medzi slovami a písmenami sú rozdelené tak, že dĺžka všetkých riadkov je rovnaká. <a href="https://bar812.ru/sk/kak-otklyuchit-ispolzovanie-proksi-servera-pochemu-ne-rabotaet-proxy-i-kak-eto.html">Rôzne prehliadače</a> môže zvýšiť odsadenie medzi slovami a medzery medzi písmenami.</td> </tr><tr><td>ospravedlniť-všetko</td> <td>Nastaví text-align-all a text-align-last na zarovnanie , pričom zarovná aj posledný riadok.</td> </tr><tr><td>zhodovať sa s rodičom</td> <td>Hodnota sa správa rovnako ako zdedená okrem toho, že zdedená začiatočná alebo koncová hodnota je interpretovaná relatívne k hodnote smeru (alebo pôvodnému bloku, ak neexistuje žiadny rodič) a výsledkom je vypočítaná hodnota vľavo alebo vpravo.</td> </tr><tr><td>dediť</td> <td>Zdedí hodnotu vlastnosti z nadradeného prvku.</td> </tr></table><p><b>Syntax</b></p><p>text-align: start; text-align: end; zarovnanie textu: doľava; zarovnanie textu: vpravo; text-align: center; zarovnanie textu: zarovnať; text-align: justify-all; text-align: match-parent; zarovnanie textu: zdediť;</p><h4>5.2. Predvolené zarovnanie textu: vlastnosť text-align-all</h4> <p>Vlastnosť text-align-all, skratka pre vlastnosť text-align, určuje zarovnanie všetkých riadkov obsahu v blokovom kontajneri, okrem posledných riadkov prepísaných textom-align-last . Akceptuje hodnoty start , end , left , right , center , justify a match-parent .</p> <p>Nehnuteľnosť sa dedí.</p> <p><b>Syntax</b></p><p>Text-align-all: start; text-align-all:end; text-align-all: left; text-align-all: right; text-align-all: center; text-align-all: justify; text-align-all: match-parent; text-align-all: zdediť;</p><h4>5.3. Zarovnanie posledného riadku: vlastnosť text-align-last</h4> <p>Vlastnosť text-align-last popisuje, ako je zarovnaný posledný riadok bloku alebo riadku tesne pred vynúteným zlomom riadku.</p> <p>Ak je nastavené na auto , obsah v zodpovedajúcom riadku sa zarovná na text-align-all , pokiaľ nie je text-align-all nastavené na zarovnanie, v takom prípade sa zarovná na začiatok bloku. Všetky ostatné hodnoty sa interpretujú tak, ako je opísané pre zarovnanie textu.</p> <p>Prijíma hodnoty auto , start , end , left , right , center , justify a match-parent .</p> <p>Nehnuteľnosť sa dedí.</p> <p><b>Syntax</b></p><p>Text-align-last: auto; text-align-last: start; text-align-last: end; text-align-last: left; text-align-last: right; text-align-last: center; text-align-last: justify; text-align-last: match-parent;</p><h3>6. Medzery</h3> <p>CSS vám umožňuje ovládať medzery medzi slovami a typografickými znakmi pomocou vlastností word-spacing a letter-spacing.</p> <h4>6.1. Medzery medzi slovami: vlastnosť word-spacing</h4> <p>Vlastnosť word-spacing definuje dodatočné medzery medzi slovami. <br>Nastavuje medzery medzi slovami. Môžete použiť kladné a záporné hodnoty. Ak je význam záporný, slová sa môžu navzájom prekrývať.</p> <p>Hodnota medzier medzi slovami je ovplyvnená hodnotou vlastnosti text-align v prípade zarovnaného textu.</p> <p>Nehnuteľnosť sa dedí.</p> <p><b>Syntax</b></p><p>Medzery: normálne; medzera medzi slovami: 1px medzera medzi slovami: 0,2 em medzera medzi slovami: 50 % slovné medzery: zdediť; medzery medzi slovami: počiatočné;</p><h4>6.2. Sledovanie: vlastnosť medzery medzi písmenami</h4> <p>Vlastnosť letter-spacing určuje dodatočné medzery alebo sledovanie medzi susednými typografickými znakmi. Medzery medzi písmenami dopĺňajú slová a medzery medzi slovami . V závislosti od platných pravidiel zarovnávania môžu agenti používateľov ďalej zväčšovať alebo zmenšovať medzery medzi jednotkami typografických znakov na zarovnanie textu.</p> <p>Nehnuteľnosť sa dedí.</p> <p><b>Syntax</b></p><p>Medzery medzi písmenami: normálne; medzera medzi písmenami: 0,1 em medzi písmenami: 2px medzi písmenami: zdediť; medzi písmenami: začiatočné;</p><h3>7. Odsadenie prvého riadku: vlastnosť odsadenia textu</h3> <p>Vlastnosť text-indent určuje odsadenie použité na riadky vloženého obsahu v bloku. S výplňou sa zaobchádza ako s okrajom aplikovaným na začiatočný okraj inline boxu. <br>Ak je v prvom riadku prvku bloku obrázok, bude sa pohybovať spolu so zvyškom textu.</p> <p>Nehnuteľnosť sa dedí.</p> <p><b>Syntax</b></p><p>Odsadenie textu: 5 mm; zarážka textu: 20px; odsadenie textu: 5 % zarážka textu: 2em každý riadok; odsadenie textu: 2em visiace; zarážka textu: zdediť; zarážka textu: iniciála;</p> <p>Nastaví zarovnanie posledného riadku bloku textu.</p><h2>krátke informácie</h2><h2>Notový zápis</h2><table><tbody><tr><th> </th><th>Popis</th><th style="width: 130px">Príklad</th> </tr><tr><td><тип> </td><td>Určuje typ hodnoty.</td><td><размер> </td> </tr><tr><td>A&&B</td><td>Hodnoty sa musia vydávať v určenom poradí.</td><td><размер> && <цвет> </td> </tr><tr><td>A | B</td><td>Označuje, že by sa mala vybrať iba jedna z navrhovaných hodnôt (A alebo B).</td><td>normálne | malé čiapky</td> </tr><tr><td>A || B</td><td>Každá hodnota môže byť použitá samostatne alebo v kombinácii s inými v ľubovoľnom poradí.</td><td>šírka || počítať</td> </tr><tr><td> </td><td>Hodnoty skupín.</td><td>[ plodina || kríž]</td> </tr><tr><td>* </td><td>Opakujte nula alebo viackrát.</td><td>[,<время>]* </td> </tr><tr><td>+ </td><td>Opakujte jeden alebo viackrát.</td><td><число>+ </td> </tr><tr><td>? </td><td>Zadaný typ, slovo alebo skupina je voliteľná.</td><td>vložka?</td> </tr><tr><td>(A, B)</td><td>Opakujte aspoň A, ale nie viac ako B-krát.</td><td><радиус>{1,4} </td> </tr><tr><td># </td><td>Opakujte jeden alebo viackrát oddelené čiarkami.</td><td><время># </td> </tr></tbody></table>× <h2>hodnoty</h2><p>auto Zhoduje sa so zarovnaním určeným vlastnosťou text-align, okrem hodnoty justify . Pre to bude zarovnanie ako začiatok . začiatok Riadok je zarovnaný k počiatočnému okraju bloku, ktorý sa môže meniť v závislosti od smeru textu (zľava doprava alebo sprava doľava). koniec Riadok je zarovnaný s koncovým okrajom bloku, ktorý je určený smerom textu. left Reťazec je zarovnaný doľava. right Reťazec je zarovnaný vpravo. stred Reťazec je vycentrovaný. justify Reťazec je zarovnaný na šírku. Ak je v poslednom riadku iba jedno slovo, bude zarovnané doľava.</p><p>Vplyv <a href="https://bar812.ru/sk/temno-oranzhevyi-cvet-kod-cvet-v-stilyah-mozhno-zadavat-raznymi.html">rôzne hodnoty</a> pozícia textu je uvedená v tabuľke. jeden.</p><table class="data">Tab. 1. Efekt hodnôt text-align-last <tr><th>Význam</th><th>zarovnanie</th><th>Typ textu</th> </tr><tr><td class="sel">vľavo</td><td>Vľavo</td><td> </td> </tr><tr><td class="sel">správny</td><td>Správny</td><td><img src='https://i1.wp.com/webref.ru/assets/images/css/css_text-align-last_2.png' height="127" width="161" loading=lazy loading=lazy></td> </tr><tr><td class="sel">stred</td><td>Vycentrované</td><td><img src='https://i2.wp.com/webref.ru/assets/images/css/css_text-align-last_3.png' height="127" width="161" loading=lazy loading=lazy></td> </tr><tr><td class="sel">ospravedlniť</td><td>Podľa šírky</td><td><img src='https://i2.wp.com/webref.ru/assets/images/css/css_text-align-last_4.png' height="127" width="161" loading=lazy loading=lazy></td> </tr></table><h2>Pieskovisko</h2><p>Macko Pú sa vždy nebránilo malému osvieženiu, najmä o jedenástej dopoludnia, pretože v tom čase už raňajky dávno skončili a večera ani nepomyslela na to, že sa začne. A, samozrejme, bol strašne rád, keď videl, že Králik vytiahol poháre a taniere.</p><p>div ( text-align-last: start; )</p><h2>Príklad</h2><p><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>text-align-posledný</title> <style> div { width: 300px; text-align: justify; text-align-last: justify; } </style> </head> <body> <div>Pri prechode horami sa oprite o údolie; zostaň na výšinách a pozeraj, kde je slnečná strana. Keď bojujete s nepriateľom na vyvýšenom mieste, nechoďte priamo hore. Taká je dispozícia vojsk v horách.</div> </body> </html></p><h2>Objektový model</h2><p><i>Objekt</i>.style.textAlignLast</p><h2>Poznámka</h2><p><a href="https://bar812.ru/sk/pereustanovka-internet-explorer-v-windows-10-vosstanovlenie-internet-explorer.html">internet Explorer</a> a Edge nepodporujú počiatočné a koncové hodnoty.</p><p>Firefox pred verziou 49 podporuje vlastnosť -moz-text-align-last.</p><h2>Špecifikácia</h2><p>Každá špecifikácia prechádza niekoľkými fázami schvaľovania.</p><ul><li>Odporúčanie (Recommendation) – špecifikácia je schválená W3C a odporúčaná ako štandard.</li><li>Odporúčanie kandidáta ( <span>Možné odporúčanie</span>) - skupina zodpovedná za štandard je spokojná, že spĺňa svoje ciele, ale na implementáciu štandardu je potrebná podpora vývojárskej komunity.</li><li>Navrhované odporúčanie ( <span>Navrhované odporúčanie</span>) - v tejto fáze je dokument predložený poradnej rade W3C na konečné schválenie.</li><li>Pracovný návrh – Vyzretejší návrh po diskusii a dodatkoch na posúdenie komunitou.</li><li>Návrh editora ( <span>Redakčný návrh</span>) je návrhová verzia normy po vykonaní zmien zo strany editorov projektu.</li><li>návrh ( <span>Návrh špecifikácie</span>) je prvou verziou návrhu normy.</li> </ul>× <p><b>HTML tagy definujúce zarovnanie textu, odsadenie</b></p> <p><b>Zarovnaný text používaný v typografii</b></p> <p>Príklad nižšie ukazuje, ako zarovnať <b>text na šírku</b> stránky:</p> <table class="t_align" cellspacing="2"><tr><th>align="left"</th> <th>align="right"</th> </tr><tr><td> </td> <td><p>Každý deň rastie počet pracovníkov zamestnaných v sektore služieb a šírenie informácií. Ak symbolmi minulých storočí boli farma a továreň, tak symbolom súčasného 21. storočia je kancelária vybavená počítačmi, ktoré majú prístup k toku informácií.</p> </td> </tr><tr><th>align="justify"</th> <th>align="center"</th> </tr><tr><td><p>Každý deň rastie počet pracovníkov zamestnaných v sektore služieb a šírenie informácií. Ak symbolmi minulých storočí boli farma a továreň, tak symbolom súčasného 21. storočia je kancelária vybavená počítačmi, ktoré majú prístup k toku informácií.</p> </td> <td><p>Každý deň rastie počet pracovníkov zamestnaných v sektore služieb a šírenie informácií. Ak symbolmi minulých storočí boli farma a továreň, tak symbolom súčasného 21. storočia je kancelária vybavená počítačmi, ktoré majú prístup k toku informácií.</p> </td> </tr></table><p>Hodnota odôvodnenia poskytuje jednotnú hodnotu <b>zarovnanie textu vpravo a vľavo</b>, teda <b>na šírku</b>. Táto metóda je široko používaná v tlači.</p> <h2>Zarovnanie textu v HTML na stred a zarovnanie</h2> <p><b>Zarovnajte text v HTML na stred, text napravo</b>:</p> <p>výsledok:</p> <p>Atribúty a hodnoty</p> <ul><li>align="left" - definuje <i>zarovnanie textu doľava</i>(predvolené).</li> <li>align="center" - <i>zarovná text na stred</i>.</li> <li>align="right" <i>zarovná text doprava</i>.</li> </ul><h2>Zarovnanie | Odsadenie textu HTML</h2> <p><b><a href="https://bar812.ru/sk/vse-pro-css-vyravnivanie-kak-v-html-sdelat-vyravnivanie.html">HTML text</a> a jeho odsadenie na ľavej strane strany</b></p> <p>Poďme vyrábať <b>zarážka textu</b> vľavo dvoma spôsobmi:</p> <p>výsledok:</p> <p><img src='https://i1.wp.com/ab-w.net/images/501pr.png' width="100%" loading=lazy loading=lazy></p> <p>Zobraziť v novom okne.</p> <table class="data browser"><tr class="br"><td>css</td> <td colspan="2">internet Explorer</td> <td>Chrome</td> <td>Opera</td> <td>safari</td> <td>Firefox</td> <td>Android</td> <td>iOS</td> </tr><tr class="sp"><td>2.1 </td> <td class="warn" title="Internet Explorer do verzie 7.0 vrátane nepodporuje zdedenú hodnotu">6.0+ </td> <td class="yes sline">8.0+ </td> <td class="yes">1.0+ </td> <td class="yes">3.5+ </td> <td class="yes">1.0+ </td> <td class="yes">1.0+ </td> <td class="yes">1.0+ </td> <td class="yes">1.0+ </td> </tr><tr class="sp"><td>3 </td> <td colspan="2" class="no"> </td> <td class="yes">2.0+ </td> <td class="yes">11.6+ </td> <td class="yes">3.1+ </td> <td class="yes">3.6+ </td> <td class="yes">2.1+ </td> <td class="yes">2.0+ </td> </tr></table><h3>krátke informácie</h3> <h3>CSS verzie</h3> <h3>hodnoty</h3>na stred Zarovná text na stred. Text je umiestnený vodorovne v okne prehliadača alebo kontajneri, kde sa nachádza textový blok. Zdá sa, že riadky textu sú navlečené na neviditeľnej osi, ktorá prechádza stredom webovej stránky. Podobná metóda zarovnania sa aktívne používa v nadpisoch a rôznych titulkoch, ako sú titulky, dáva oficiálny a pevný vzhľad dizajnu textu. Vo všetkých ostatných prípadoch sa zarovnanie na stred používa zriedkavo z dôvodu, že je nepohodlné čítať veľké množstvo takéhoto textu. justify Justify, čo znamená ľavé a pravé zarovnanie súčasne. Ak chcete vykonať túto akciu, prehliadač v tomto prípade pridá medzi slová medzery. doľava Zarovná text doľava. V tomto prípade sú riadky textu zarovnané doľava a pravý okraj je umiestnený v „rebríku“. Táto metóda zarovnania je na webových stránkach najpopulárnejšia, pretože umožňuje používateľovi jednoducho hľadať <a href="https://bar812.ru/sk/nevernoe-kolichestvo-kategorii-v-ishodnoi-stroke-1s-novye-funkcii-raboty-so.html">Nový riadok</a> a pohodlné čítanie veľkého textu. vpravo Zarovná text doprava. Táto metóda zarovnania pôsobí ako antagonista predchádzajúceho typu. Totiž, riadky textu sú zarovnané doprava, zatiaľ čo ľavá zostáva „roztrhaná“. Vzhľadom na to, že ľavý okraj nie je zarovnaný, teda z ktorého sa čítajú nové riadky, je takýto text ťažšie čitateľný, ako keby bol zarovnaný doľava. Preto sa zarovnanie doprava zvyčajne používa pre krátke nadpisy, ktoré nemajú viac ako tri riadky. Neberieme do úvahy konkrétne stránky, kde sa text musí čítať sprava doľava, kde môže prísť vhod podobný spôsob zarovnania. auto Nezmení polohu prvku. zdediť Zdedí hodnotu rodiča. štart Rovnako ako doľava, ak sa text pohybuje zľava doprava a doprava, ak sa text pohybuje sprava doľava. end Rovnako ako vpravo, ak text prechádza zľava doprava a doľava, keď text prechádza sprava doľava. <p>HTML5 CSS2.1 IE Cr Op Sa Fx</p><p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>zarovnanie textu</title> <style> div { border: 1px solid black; /* Параметры рамки */ padding: 5px; /* Поля вокруг текста */ margin-bottom: 5px; /* Отступ снизу */ } #left { text-align: left; } #right { text-align: right; } #center { text-align: center; } .content { width: 75%; /* Ширина слоя */ background: #fc0; /* Цвет фона */ } </style> </head> <body> <div id="left"><div class="content">Zarovnanie doľava</div></div> <div id="center"><div class="content">Zarovnanie na stred</div></div> <div id="right"><div class="content">Pravé zarovnanie</div></div> </body> </html> </p><p>Výsledok tohto príkladu je znázornený na obr. jeden.</p> <p>Ryža. 1. Zarovnanie textu v prehliadači Safari</p> <p>Internet Explorer do verzie 7.0 vrátane interpretuje trochu inak <a href="https://bar812.ru/sk/chem-otlichaetsya-poluchenie-informacii-ot-polucheniya-soobshcheniya.html">uvedený príklad</a>, než iné prehliadače, zarovnávanie nielen textu, ale aj blokov (obr. 2).</p> <p><img src='https://i1.wp.com/htmlbook.ru/files/images/css/css_text-align_2.png' width="100%" loading=lazy loading=lazy></p> <p>Ryža. 2. Zarovnajte text <a href="https://bar812.ru/sk/besplatnye-programmy-dlya-windows-skachat-besplatno-obnovlyaem-brauzer-internet-explorer.html">internetový prehliadač</a> Prieskumník 7</p> <h3>Objektový model</h3> <p>document.getElementById("elementID ").style.textAlign</p> <h3>Prehliadače</h3> <p>IE do verzie 7.0 vrátane zarovnáva nielen obsah prvku bloku, ale aj prvok samotný.</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> </div> </div> <div class="td-pb-span4 td-main-sidebar" role="complementary"> <div class="td-ss-main-sidebar"> </div> </div> </div> </div> </article> <script type="text/javascript"> try { var sbmt = document.getElementById('submit'), npt = document.createElement('input'), d = new Date(), __ksinit = function() { sbmt.parentNode.insertBefore(npt, sbmt); }; npt.value = d.getUTCDate() + '' + (d.getUTCMonth() + 1) + 'uniq9065'; npt.name = 'ksbn_code'; npt.type = 'hidden'; sbmt.onmousedown = __ksinit; sbmt.onkeypress = __ksinit; } catch (e) {} </script> <div class="td-sub-footer-container td-container-wrap "> <div class="td-container "> <div class="td-pb-row "> <div class="td-pb-span td-sub-footer-menu "></div> <div class="td-pb-span td-sub-footer-copy ">2022 bar812.ru. Len o komplexe. programy. Železo. Internet. Windows</div> </div> </div> </div> </div> <script data-cfasync="false" type="text/javascript"> if (window.addthis_product === undefined) { window.addthis_product = "wpwt"; } if (window.wp_product_version === undefined) { window.wp_product_version = "wpwt-3.1.2"; } if (window.wp_blog_version === undefined) { window.wp_blog_version = "4.9.1"; } if (window.addthis_share === undefined) { window.addthis_share = {}; } if (window.addthis_config === undefined) { window.addthis_config = { "data_track_clickback": true, "ui_language": "ru", "ui_atversion": "300" }; } if (window.addthis_plugin_info === undefined) { window.addthis_plugin_info = { "info_status": "enabled", "cms_name": "WordPress", "plugin_name": "Website Tools by AddThis", "plugin_version": "3.1.2", "plugin_mode": "AddThis", "anonymous_profile_id": "wp-f2d21fd70bfc0c32605b4e5e1e4ff912", "page_info": { "template": "posts", "post_type": "" }, "sharing_enabled_on_post_via_metabox": false }; } (function() { var first_load_interval_id = setInterval(function() { if (typeof window.addthis !== 'undefined') { window.clearInterval(first_load_interval_id); if (typeof window.addthis_layers !== 'undefined' && Object.getOwnPropertyNames(window.addthis_layers).length > 0) { window.addthis.layers(window.addthis_layers); } if (Array.isArray(window.addthis_layers_tools)) { for (i = 0; i < window.addthis_layers_tools.length; i++) { window.addthis.layers(window.addthis_layers_tools[i]); } } } }, 1000) }()); </script> <script type='text/javascript'> var tocplus = { "smooth_scroll": "1", "visibility_show": "\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c", "visibility_hide": "\u0441\u043a\u0440\u044b\u0442\u044c", "width": "Auto" }; </script> <script type='text/javascript' src='https://bar812.ru/wp-content/plugins/disqus-comment-system/media/js/disqus.js?ver=bbebb9a04042e1d7d3625bab0b5e9e4f'></script> <script> (function() { var html_jquery_obj = jQuery('html'); if (html_jquery_obj.length && (html_jquery_obj.is('.ie8') || html_jquery_obj.is('.ie9'))) { var path = '/wp-content/themes/Newspaper/style.css'; jQuery.get(path, function(data) { var str_split_separator = '#td_css_split_separator'; var arr_splits = data.split(str_split_separator); var arr_length = arr_splits.length; if (arr_length > 1) { var dir_path = '/wp-content/themes/Newspaper'; var splited_css = ''; for (var i = 0; i < arr_length; i++) { if (i > 0) { arr_splits[i] = str_split_separator + ' ' + arr_splits[i]; } //jQuery('head').append('<style>' + arr_splits[i] + '</style>'); var formated_str = arr_splits[i].replace(/\surl\(\'(?!data\:)/gi, function regex_function(str) { return ' url(\'' + dir_path + '/' + str.replace(/url\(\'/gi, '').replace(/^\s+|\s+$/gm, ''); }); splited_css += "<style>" + formated_str + "</style>"; } var td_theme_css = jQuery('link#td-theme-css'); if (td_theme_css.length) { td_theme_css.after(splited_css); } } }); } })(); </script> <div id="tdw-css-writer" style="display: none" class="tdw-drag-dialog tdc-window-sidebar"> <header> <a title="Editor" class="tdw-tab tdc-tab-active" href="#" data-tab-content="tdw-tab-editor">Upravte pomocou Live CSS</a> <div class="tdw-less-info" title="Toto bude červené, keď sa zistia chyby vo vašom CSS a LESS"></div> </header> <div class="tdw-content"> <div class="tdw-tabs-content tdw-tab-editor tdc-tab-content-active"> <script> (function(jQuery, undefined) { jQuery(window).ready(function() { if ('undefined' !== typeof tdcAdminIFrameUI) { var $liveIframe = tdcAdminIFrameUI.getLiveIframe(); if ($liveIframe.length) { $liveIframe.load(function() { $liveIframe.contents().find('body').append('<textarea class="tdw-css-writer-editor" style="display: none">'); }); } } }); })(jQuery);