Domov › Internet › Vlastnosti, které upravují text. Vertikální zarovnání Vertikální zarovnání

Vlastnosti, které upravují text. Vertikální zarovnání Vertikální zarovnání

V tomto článku si povíme, jak se formátuje text v CSS, podíváme se na techniky zarovnání textu, jak pomocí CSS udělat červenou čáru, nastavit řádkování a mezery mezi slovy, jak ozdobit text, převést text na začátek nebo malá písmena a jak vytvořit velká písma.

Během vzhledu webu se budete muset neustále měnit vzhled webové stránky. Jedním z prvních úkolů při práci s textem na stránce je potřeba jej zarovnat.

Zarovnání textu

Podívejme se na příklad práce se zarovnáním textu:

Příklad použití vlastnosti text-align

Jezte více těchto měkkých francouzských rohlíků a pijte čaj.

čtyři) třídy, které definují různé možnosti zarovnání textu. Pro všechny prvky

nastavíme barvu pozadí na rgba(0, 255, 0, .1) .

Výsledek našeho příkladu:

Odsazení prvního řádku

Pokud otevřete téměř jakoukoli knihu obsahující textové informace, můžete si všimnout, že první řádek každého odstavce je obvykle odsazený (červená čára).

Pokud potřebujete, aby váš dokument vypadal takto tištěné vydání, pak použijte toto Vlastnost CSS m, jako odsazení textu .

Můžete je aplikovat relativní jednotky měření, která používáte v dokumentu, ať už jde o pixely nebo hodnoty, na kterých závisí základní velikost písmo (např em).

Upozorňujeme, že v některých situacích může být nutné použít záporné odsazení prvního řádku vlastnost text-indent umožňuje použití záporných hodnot, v takovém případě je řádek posunut v opačném směru.

Podívejme se na příklad použití této vlastnosti:

Příklad použití <a href="https://innovakon.ru/cs/settings/svoistva-css-dlya-oformleniya-teksta-html-vertical-align-text-align-text-indent-i-drugie-css.html">vlastnosti odsazení textu</a>

Jezte více těchto měkkých francouzských rohlíků a pijte čaj. Jezte více těchto měkkých francouzských rohlíků a pijte čaj. Jezte více těchto měkkých francouzských rohlíků a pijte čaj. Jezte více těchto měkkých francouzských rohlíků a pijte čaj.

V v tomto příkladu vytvořili jsme 4 ( čtyři) styl a aplikoval je jeden po druhém čtyři odstavce. Pro první odstavec nastaven na výchozí hodnotu odsazení ( 0 ), Pro druhý nastavit odsazení 40 pixelů, Pro třetí indikované negativní odsazení ( -20 pixelů), v důsledku toho se odstavec přesunul mimo okno prohlížeče a pro čtvrtý odstavec odsazený rovný 50% .

Upozorňujeme, že pokud použijete procentuální hodnoty, odsazení závisí na šířce nadřazený prvek, který obsahuje odstavec.

Výsledek našeho příkladu:

Rýže. 61 Příklad použití vlastnosti text-indent (červená čára).

Nastavení řádkování

Při práci s textem je často potřeba umístit řádky odstavce blíže k sobě, nebo naopak - roztáhnout je. Vzdálenost mezi základními liniemi sousedních čar se nazývá vedoucí nebo řádkování .

V CSS je vlastnost line-height zodpovědná za řádkování (proklad). Čím vyšší je hodnota této vlastnosti, tím větší je mezera mezi řádky.

Vezměte prosím na vědomí, že při nastavování hodnoty výšky řádku pomocí jednotek pixelů, velikosti řádkování, bude přímo záviset na velikosti písma, to znamená, že se automaticky upraví úměrně změně vlastnosti font-size (velikost písma), o které jsme pojednávali v předchozím článku.

Zpravidla ve všech moderní prohlížeče výchozí výška řádku je 120 %.

Řádkování se vypočítá takto:

Výška řádku ( výška čáry) mínus výška písma ( velikost písma)

Například velikost písma je 20 pixelů a výšku řádku 150% (30 pixelů). Tak se ukazuje:

Výška řádku ( 150 % nebo 30 pixelů) mínus výška písma ( 20 pixelů) = 10 pixelů

Velikost řádku můžete nastavit pomocí číselné hodnoty. Reklama vypadá takto:

volič(výška řádku: 1,5;)

Jak vidíte, jednotky měření nejsou uvedeny a číslo funguje jako násobitel. Při použití číselných hodnot se řádkování vypočítá takto:

Číselná hodnota * velikost písma

Například písmo odstavce je nastaveno na 2 em, a výška řádku je uvedena jako 1.5 :

p(velikost písma: 2em; výška řádku: 1,5;)

Vypočtená hodnota řádkování v našem případě bude 3 em:

Číselná hodnota ( 1.5 ) * velikost písma ( 2 em) = 3 em

Ve většině případů je použití multiplikátoru velmi výhodné, protože prvky dědí hodnoty řádkování nadřazeného prvku.

výška řádku: <a href="https://innovakon.ru/cs/settings/absolyutnyi-blok-po-centru-vyravnivanie-elementov-vyravnivanie-svoistvom.html">Příklad použití</a>

vlastnosti výšky čáry

Odstavec s výškou řádku: 10 pixelů

Odstavec, ve kterém je výška řádku: normální

Odstavec, ve kterém výška řádku: 150 %

V tomto příkladu jsme se podívali na způsoby, jak určit výšku řádku v pixelech, procentech a pomocí multiplikátoru.

Výsledek našeho příkladu:

Rýže. 62 Příklad použití vlastnosti line-height (nastavení řádkování).

Mezery mezi slovy a znaky

Při návrhu stránek na webu musíte upravit mezery nejen mezi řádky, ale i mezi nimi samostatnými slovy, nebo symboly. Umožní vám to například zmenšení mezer mezi znaky dlouhý název kompaktnější, nebo naopak, zvýšením intervalu získá protaženější vzhled.

Chcete-li nastavit konkrétní mezery mezi znaky, musíte použít vlastnost letter-spacing CSS. Při práci s vlastností používejte relativní jednotky Rozměry CSS (em, rem, px a tak dále). Jsou povoleny kladné i záporné hodnoty. Kladné hodnoty odpovídajícím způsobem zvětšují mezery mezi znaky a záporné hodnoty je zmenšují, až se písmena a symboly vrství na sebe.

Podívejme se na příklad použití vlastnosti letter-spacing:

Příklad použití vlastnosti letter-spacing

class = "test" > mezera mezi písmeny: -1px

mezery mezi písmeny: normální

mezera mezi písmeny: 2px

mezera mezi písmeny: 1 em

V tomto příkladu jsme se podívali na způsoby, jak určit mezery mezi znaky v textu v pixelech (pozitivní i záporná hodnota) a em jednotky.

Výsledek našeho příkladu:

Mezery mezi jednotlivými slovy můžete nastavit pomocí vlastnosti CSS s podobným názvem – word-spacing. Podobně jako u vlastnosti letter-spacer použijte relativní jednotky CSS ( em, rem, px a tak dále). Jsou povoleny kladné i záporné hodnoty. Kladné hodnoty odpovídajícím způsobem prodlužují interval mezi slovy a záporné hodnoty jej zkracují, dokonce až do té míry, že slova na sebe vrství.

Podívejme se na příklad použití vlastnosti word-spacing:

Příklad použití vlastnosti word-spacing

V tomto příkladu jsme se podívali na způsoby, jak určit mezery mezi slovy v textu v pixelech (záporná hodnota) a jednotkách em.

Výsledek našeho příkladu:

Textová dekorace

Vlastnost CSS text-decoration nám dává možnost přidat do textu takové typy dekorace, jako jsou:

podtržení
přeškrtnout
řádek nad textem

Jedním z nejběžnějších použití této vlastnosti je však zrušení dekorace a s vlastností text-decoration musíte použít klíčové slovo none:

A { /* pomocí voliče typu vyberte všechny hypertextové odkazy */ text-dekorace: žádná; /* odstranit ozdobu textu */ }

V tomto příkladu jsme odstranili dekoraci (podtržení) ze všech hypertextových odkazů. Úplný seznam klíčová slova vlastnosti textové dekorace jsou uvedeny v této tabulce:

Upozorňujeme, že většina uživatelů spojuje podtržený text s hypertextovým odkazem a přeškrtnutý text s smazaný text, takže použijte dekoraci, když je to opravdu nutné.

V jedné deklaraci můžete použít více hodnot:

text-decoration : podtržení prolínání ; /* definuje řádek pod textem a řádek přes text */

Podívejme se na příklad použití vlastnosti text-decoration na text:

Příklad použití vlastnosti text-decoration

Text-dekorace: podtržení;

Text-dekorace: overline;

Text-decoration: line-through;

Text-dekorace: podtržení nadtržení;

V tomto příkladu jsme vytvořili čtyři různé styly a aplikovali je postupně na každý odstavec. V první do odstavce přidána textová dekorace - řádek dole (hodnota podtržení), in druhý dekorace textu - řádek nahoře (hodnota podtržení), in třetí zdobení textu - přeškrtávání (prolínání) a dovnitř čtvrtý dvojitá textová dekorace - čára nahoře a dole (podtržení hodnot podtržení).

Výsledek našeho příkladu:

Rýže. 65 Příklad použití vlastnosti text-decoration (dekorace textu v CSS).

Velká a malá písmena

CSS poskytuje možnost převést jakýkoli text na velká nebo malá písmena a převést první písmeno každého slova na velká. Vlastnost text-transform řídí velikost písmen v tabulce níže:

Podívejme se na příklad použití vlastnosti text-transform na text:

Příklad použití vlastnosti text-transform

V tomto příkladu jsme vytvořili tři různé styly a aplikovali je na každý odstavec jeden po druhém. V prvním odstavci byly první znaky každého slova převedeny na velká písmena (hodnota velkých písmen), ve druhém byly všechny znaky převedeny na velká (hodnota velkých písmen) a ve třetím na malá písmena (hodnota malých písmen).

Rýže. 66 Příklad použití vlastnosti text-transform (změna velikosti písmen v textu).

Velká písmena v CSS

Malá velká písmena nebo velká (anglicky) malé čepice) - styl písma, ve kterém malá písmena vypadají jako zmenšená velká písmena. Chcete-li vytvořit takový styl, použijte vlastnost CSS font-variant s následující syntaxí:

volič(varianta písma: malá písmena; /* nastavit velké písmo */ }

Podívejme se na příklad použití:

Příklad použití vlastnosti font-variant

Odstavec se zobrazí normálním písmem.

Malá písmena jsou nastavena na malá velká písmena.

V tomto příkladu je první odstavec ponechán beze změny a na druhý je aplikována vlastnost font-variant s hodnotou malých písmen, díky čemuž bude text zobrazen malými písmeny ( malá písmena jsou nastaveny jako zmenšená velká písmena).

CSS dává dostatek příležitostí o práci se stylem textu. Můžete ovlivnit písmo, barvu, velikost a další vlastnosti textu.

Protože je tato stránka určena začátečníkům, připomeňme si nejprve základní Syntaxe CSS a použitou terminologii.

Každý CSS pravidlo sestává z selektoru a definice. Selektor je obvykle tag, na který aplikujeme náš styl, a definicí je samotný styl. Definice se skládá z vlastnosti a její hodnoty. Například: vlastnost - barva, hodnota - červená.

Syntaxe CSS je následující:

selektor (vlastnost: hodnota)

Příklad pravidla CSS:

p( barva: modrá)

Zobrazte text modře. Jeden selektor může mít více párů (vlastnost: hodnota).

p( barva:modrá; velikost písma: 10pt)

V tomto příkladu je pravidlo nastaveno na tag

Zobrazte text modře a 10pt. To znamená, že zde máme dva páry (vlastnost: hodnota) aplikované na jeden selektor, in v tomto případě na značku odstavce

Až se v budoucnu v textu objeví slova vlastnost a hodnota, bude to míněna definice selektoru v pravidle CSS.

Vlastnosti písma

Pokud tuto vlastnost v CSS nezadáte, prohlížeč zobrazí text ve výchozím písmu. To je obvykle Times New Roman.

Seznam písem v hodnotě font-family může obsahovat jedno nebo více jmen oddělených čárkou. Pokud název písma obsahuje mezery, například Trebuchet MS, musí být uzavřen v uvozovkách, jednoduchých nebo dvojitých.

Prohlížeč jeden po druhém kontroluje přítomnost písem ze seznamu v počítači uživatele. Pokud je přítomen první font v seznamu, pak je použit, jinak prohlížeč zkontroluje přítomnost druhého fontu ze seznamu. Pokud žádné není, použije se výchozí písmo. Na konci seznamu je obvykle napsáno klíčové slovo, které popisuje požadovaný typ písma – patkové, bezpatkové, fantasy, kurzíva nebo monospace.

Univerzální rodiny písem:

patkové - starožitné fonty (patkové fonty), např. Times;
sans-serif - bezpatková písma (fonty bez patek nebo bezpatkové), typickým představitelem je Arial;
monospace - jednoprostorová písma, šířka každého znaku v takové rodině je stejná (font Courier).
fantasy - rodina dekorativních písem;
kurzíva - kurzíva rodina písem;

Příklad použití:

Příklad použití font-family

Nadpis h1

Nadpis h2

Následující vlastnost:

Příklad kódu, v tomto příkladu vložíme styly do značky pomocí atributu style.

Příklad použití stylu písma

Příklad normálního písma.

Příklad kurzívou.

Příklad písma s kurzívou.

Je vidět, že kurzíva se vzhledově nijak neliší od kurzívy.

Následující vlastnost:

Velká písmena je název v typografii pro text, ve kterém malá písmena vypadají jako zmenšená velká písmena. Je třeba rozlišovat malá a jednoduše zmenšená velká písmena. Velká písmena jsou o něco vyšší než malá písmena a zpravidla mají mírně rozšířené proporce.

Příklad použití font-variant

Prostý text. Text malými písmeny.

Opět prostý text.

Následující vlastnost:

Vlastnost font-weight nastavuje váhu písma. K tomu se používají následující klíčová slova ve významu: tučné - tučný styl, normální - normální styl. Hodnotu lze nastavit v rozsahu od 100 do 900 v krocích po 100. Extra světlá tloušťka písma, kterou může prohlížeč zobrazit, je 100 a extra tučné písmo je 900. Normální tloušťka písma (která je výchozí) je 400, standardní tučný text je tučný, - hodnota 700.

Prohlížeče obvykle nedokážou přesně zobrazit požadovanou tloušťku písma, takže přepínají mezi tučným , normálním a světlejším . V praxi je styl ve většině prohlížečů obvykle omezen pouze na dvě možnosti: normální styl a tučný styl.

Světlejší a tučnější hodnoty mění váhu písma vzhledem k váze rodiče, dolů a dolů.

Příklad použití font-weight

Prostý text. tučný text.

Opět prostý text.

Následující vlastnost:

Vlastnost font-size určuje velikost písma prvku. Velikost písma lze nastavit několika způsoby.

Absolutní velikost písma lze nastavit pomocí klíčových slov: xx-small (extrémně malé), malé (malé), střední (střední (výchozí hodnota), velké (velké), x-large (velmi velké), xx-large (extrémně velké ). Absolutní velikosti písma závisí na nastavení prohlížeče a operační systém, takže nejsou úplně absolutní.

Pro změnu velikosti textu vzhledem k nadřazenému prvku se používá další sada konstant (větší - zvětšuje velikost vzhledem k nadřazenému prvku, menší - zmenšuje velikost).

Příklad použití velikosti písma.

Prostý text.

Text xx-malý. Text větší.

Text malý.

Textové médium.

Text velký.

Text x-velký.

Text xx-velký.

Opět prostý text.

Text 150 %.

Text 15px. Text větší.

Vlastnosti textu

CSS kromě práce s fonty poskytuje řadu nástrojů pro práci s vlastnostmi samotného textu.

Podívejme se na první vlastnost:

Při nastavování řádkování začíná sestava od základního řádku písma. Ve výchozím nastavení závisí mezera mezi řádky textu na typu a velikosti písma a je určena automaticky prohlížeči. Záporné úvodní hodnoty nejsou povoleny.

Práce s <a href="https://innovakon.ru/cs/services/kak-sdelat-pravilno-otstupy-v-vorde-ispolzovanie-abzaca-v-word-kak.html">řádkování</a>

Prostý text. První řádek.
Druhý řádek.
Třetí řádek.

Změněný text. První řádek.
Druhý řádek.
Třetí řádek.

Při psaní procent se výška písma bere jako 100 %.

Následující vlastnost:

Pomocí definice ( textová dekorace: žádná) Z odkazů můžete odstranit podtržení, které je standardně nainstalováno v prohlížečích.

Práce s vlastností text-decoration.

Vyhledávač Google.

Následující vlastnost:

Vlastnost text-transform řídí zobrazení písmen, můžete je nastavit na velká nebo velká písmena v závislosti na zvolené hodnotě.

vlastnost text-transform

Vlastnictví	Význam	Popis	Příklad
textová transformace	žádný kapitalizovat velká písmena malá písmena	Odstraňte všechny efekty Začněte velkými písmeny CELÝ KAPITÁL všechna malá písmena	text-transform: velká písmena

Příklad použití:

Práce s vlastností text-transform.

Text žádný.

Text velkými písmeny.

Velký text.

Text malými písmeny.

Porovnejte text obsažený v html kódu s textem v okně prohlížeče.

Následující vlastnost:

Vlastnost text-align se používá k vodorovnému zarovnání textu v okně prohlížeče nebo kontejneru, ve kterém je textový blok umístěn.

vlastnost text-align

Vlastnictví	Význam	Popis	Příklad
zarovnání textu	vlevo právo centrum ospravedlnit	Zarovnání textu	zarovnání textu: vpravo

Podrobný popis hodnot:

na střed - text je zarovnán na střed.
justify - zarovnání šířky, ve skutečnosti se zarovnává doprava i doleva zároveň se tvoří mezi slovy textu prázdná místa, která prohlížeč vyplňuje mezerami;
vlevo - zarovnání k levému okraji. Toto je výchozí hodnota.
zarovnání vpravo - vpravo.

Příklad použití této vlastnosti bude kombinován s příkladem další vlastnosti.

Následující vlastnost:

Vlastnost text-indent se používá k vytvoření hodnoty odsazení prvního řádku bloku textu (například pro odstavec

Tato vlastnost umožňuje zápornou hodnotu, v takovém případě se vytvoří přesah prvního řádku.

vlastnost text-indent

Vlastnictví	Význam	Popis	Příklad
odsazení textu	význam %	Odsazení prvního řádku	odsazení textu: 15px; odsazení textu: 10 %

Práce s <a href="https://innovakon.ru/cs/services/vyravnivanie-koda-html-vyravnivanie-teksta-v-css-svoistvo.html">vlastnosti zarovnání textu</a> a odsazení textu.

Práce s vlastnostmi zarovnání textu a odsazení textu. Chcete-li lépe porozumět tomu, jak kód funguje, otevřete stránku v novém okně a zmenšete její velikost.

Oblíbené v kategorii: