CSS властивості text-decoration, vertical-align, text-align, text-indent для оформлення тексту в Html

1. Text-decoration, text-align, text-indent в CSS
2. Vertical-align - вертикальне вирівнювання
3. Text-transform, letter-spacing, word-spacing і white-space

Наша взаимовыгодная связь https://banwar.org/

Привіт, шановні читачі блогу KtoNaNovenkogo.ru. Сьогодні ми продовжуємо вивчати основи стильової розмітки CSS і у нас на черзі властивості text-decoration, vertical-align, text-align, text-indent і ряд інших, які допомагають оформляти зовнішній вигляд текстів в Html коді.

У минулій статті ми розглянули властивості font-family, font-weight, font-size і font-style в CSS коді , Які призначаються для настройки зовнішнього вигляду шрифтів при сучасної блокової верстці сайтів .

Ну, а ще раніше ми у всіх подробицях розглянули всі типи селектор в CSS , Дізналися як їх можна групувати і які пріоритети розставляє браузер при їх інтерпретації. Правда, все це було розбите на кілька статей, тому щоб не заплутатися я раджу вивчати матеріали в тому порядку, як це наведено в довіднику .

Text-decoration, text-align, text-indent в CSS

Як же в Css працювати з текстом? Цілком логічно буде припустити, що для цієї мети існують спеціально призначені правила. Давайте почнемо з text-align, яке є фактично заміною атрибута align (він використовувався в чистому Html 4.01 за версією валідатора для вирівнювання вмісту, наприклад, абзаців P або заголовків).

Він має всього чотири можливих значення:

Сенс залишається таким же, як і був раніше. Text align - це горизонтальне вирівнювання рядків. Застосовується це правило виключно тільки для блокових елементів (параграфи, заголовки і т.п.), тобто тих тегах, в яких може з'явитися кілька рядків. Оскільки в малих елементах рядків може бути тільки одна, то і сенсу використання в них text-align особливого немає.

Зрозуміло, що значення цього правила означають вирівнювання, відповідно: по лівому краю (left), по правому краю (right), по центру (center) і по ширині сторінки (Justify - одночасно по лівому і правому краю за рахунок збільшення відстані між словами) . Само собою, що значення Justify варто використовувати для елементів хоча б з кількома рядками тексту, інакше видимого ефекту від цього не буде.

Для прикладу, я вирівняв попередній абзац по ширині (бачите у нього рівні кордону і зліва, і справа), використовуючи:

text-align: justify;

За замовчуванням горизонтальне вирівнювання тексту здійснюється по лівому краю, тобто спеціально писати text-align: left не потрібно, якщо, звичайно ж, раніше ви не задавали інше вирівнювання. Цей абзац я, до речі, вирівняв по центру (center) знову ж для наочного прикладу, але тут, я думаю, все і так зрозуміло.

Наступне Css правило text-indent дозволяє задати новий рядок, наприклад, для тексту в тезі абзацу P. Відступ нового рядка можна задати за допомогою вказівки величини (як зі знаком плюс, так і зі знаком мінус, використовуючи розміри (пікселі, em або ex) допустимі в CSS ) Або за допомогою відсотків:

Від чого вважаються відсотки в text-indent? Від ширини області, яка відведена під текст. Тобто Css правило text-indent: 50% задасть новий рядок рівну половині довжини цієї самої рядки. Ну, а цей абзац якраз і є прикладом такого правила.

А можна, наприклад, визначення від'ємного значення рядка в text-indent і тоді ми отримаємо приблизно те, що ви бачите в цьому абзаці. Для досягнення даного результату я написав для тега абзацу P ось таке ось CSS правило:

text-indent: -1em;

Ну, а звичайне використання text-indent (для завдання стандартної нового рядка) може виглядати так: text-indent: 40px; (До речі, застосоване до цього параграфу). Це правило, так само як і розглянуте раніше text-align, застосовується тільки для блокових елементів, тобто там, де може з'явитися кілька рядків (абзаци, заголовки і т.п.).

Так, тепер давайте перейдемо до text-decoration (оформлення за допомогою горизонтальної лінії), яке застосовується вже до всіх Html елементів (і рядковим, і блоковим).

Воно може мати лише чотири значення:

Тобто можна використовувати за допомогою text-decoration: надкресленням (overline), перекреслення (line-through) або підкреслення (underline), ну, або взагалі нічого не використовувати (none). Деякі Html елементи вже мають за замовчуванням оформлення горизонтальною лінією, наприклад, гіперпосилання (тег A) (Вони за умовчанням підкреслюються).

Тому виділяти щось ще підкресленням (крім гіперпосилань) не є добре, бо у користувачів в підсвідомості записано, що раз підкреслено (а ще і кольором виділено) - значить з цього можна клікнути для переходу. Але виділяючи підкресленням звичайний текст, ви вводите користувача в оману і подальше за ним розчарування вашим ресурсом (він то думав, а виявилося що ...).

Якщо текст гіперпосилання потрібно буде зробити неподчеркнутим (наприклад, в меню), то використовуйте для text decoration елемента гіперпосилання значення none.

Нюансом у використанні Css правила text-decoration є те, що можна буде прописати відразу три (йди два) значення для будь-якого Html елемента (опускаючи none) і в результаті ви отримаєте надчеркнуто-підкреслено-перекреслений фрагмент тексту (прикольно звучить і виглядає, чи не так чи?):

text-decoration: underline overline line-through;

Значення для text decoration (якщо ви хочете використовувати відразу декілька з них) потрібно писати через символ пробіл.

Vertical-align - вертикальне вирівнювання

Далі у нас йде вертикальне вирівнювання - vertical-align. Практично для всіх елементів в Html коді воно означає вирівнювання між собою малих елементів з текстом щодо їх базової лінії. Правда, для тегів таблиці Td і Th це означає трохи інше - вирівнюватися по вертикалі буде весь контент, який знаходиться в цих осередках.

Для Css правила vertical-align можна використовувати наступні значення:

Рядки за замовчуванням вирівнюються по базовій лінії. Ось дивіться, я застосував до цього фрагменту тексту збільшення шрифту і ці два фрагменти вирівнялися за базовою (нижньої) лінії. А вертикальне вирівнювання за допомогою vertical-align якраз і призначений саме для зміни способу вирівнювання рядків.

Наприклад, якщо я для того ж збільшеного фрагмента тексту напишу vertical-align: baseline, то ніяких змін не відбудеться, тому що значення baseline використовується для цього Css правила за замовчуванням.

До речі, в якості значень для нього можна використовувати і числа, а напис vertical-align: 0 означатиме теж саме, що і vertical-align: baseline, тобто значення baseline еквівалентно нулю. Отже, якщо ми хочемо вказати будь-якої зрушення в вертикальному вирівнюванні, то це зрушення будемо вказувати щодо базової лінії (або ж нуля).

Можна написати так:

vertical-align: 10px;

І отримаємо зсув фрагмента зі збільшеним шрифтом вгору на 10 пікселів щодо базової лінії. Якщо напишемо від'ємне значення:

vertical-align: -10px;

То отримаємо зсув фрагмента вниз щодо базової лінії. З прикладів видно, що через зсув збільшилася висота рядка, щоб текст містився в ній без наїзду на сусідню рядок. Зрушення можна також задавати в Em і Ex, ну, і в процентах, які будуть вважатися від висоти лінії цього елемента (пам'ятаєте в минулій статті ми навчилися її ставити за допомогою line-height ).

Для вертикального вирівнювання вмісту комірок таблиць в vertical-align слід використовувати значення Top і Bottom для отримання, відповідно, вирівнювання вмісту по верхній і нижній межі комірки (ну, а middle в комірці таблиці використовується як значення вертикального вирівнювання за замовчуванням).

А для шрифтових елементів можна використовувати text-top, text-bottom, middle. Давайте для прикладу застосуємо до цього фрагменту тексту значення:

vertical-align: middle;

Що вийшло в результаті? За базової лінії звичайного тексту вирівнялася середня лінія збільшеного фрагмента, тобто ми отримали вертикальне вирівнювання по середній лінії. Для text-top і text-bottom буде все аналогічно. Ось так text-top, а так text-bottom.

Text-transform, letter-spacing, word-spacing і white-space

Далі у нас на черзі text-transform - трансформація символів. Воно так само застосовується до будь-яких Html елементів (і блоковим, і рядковим) і може мати лише чотири значення:

None використовується за умовчанням і означає, що символи в тексті змінюватися ніяк не будуть - як написано в Html, так і будуть відображатися. Значення Uppercase для text-transform дозволить трансформувати усі літери фрагменту в заголовні (приклад показаний в цьому реченні, де використовувалося правило text-transform: uppercase, а спочатку букви були написані рядкові).

Значення lowercase для Css правила text-transform дозволить вам трансформувати все символи фрагмента в рядкові, ну, а значення capitalize зробить все перші літери слова великими (приклад в цьому реченні - text-transform: capitalize). Тобто за допомогою text-transform можна зробити все що завгодно зі звичайним текстом, а потім запросто все повернути назад.

Тому, якщо у вас, наприклад, стоїть завдання зробити все заголовки написаними тільки великими літерами, то в Html пишіть їх зазвичай, а великими їх зробите вже в CSS через text-transform: uppercase. Потім, якщо ви вирішите щось поміняти назад, то досить внести тільки маленька зміна в стилі, а не в вміст всіх 100500 заголовків на вашому сайті.

Далі давайте розглянемо CSS правила, які дозволять нам змінювати відстані між символами і словами - letter-spacing і word-spacing. Обидва ці правила можуть мати два типи значень:

За замовчуванням і letter-spacing, і word-spacing мають значення Normal, ну або це те ж саме, що нуль (тобто відстань між символами і словами ніяк не змінюється). Величину ж зміни відстані в цих правилах можна буде вказувати тільки в пікселах, або Em або Ex, але ніяк не в процентах.

Однак, можна використовувати як позитивні (розрідження символів або слів), так і негативні значення (зближення символів або слів). Наприклад, можна «ось так розрідити символи в цій фразі» за допомогою наступного Css правила:

letter-spacing: 0.4em;

Або ж можна «ось так зблизити символи в цій фразі» за допомогою:

letter-spacing: -1px;

Теж саме можна сказати і про word-spacing з однієї лише тільки різницею, що при цьому відстань буде змінюватися вже між словами, як, наприклад, в цій фразі, за допомогою вот такой вот CSS конструкції:

word-spacing: 4em;

Аналогічно можна використовувати в word-spacing негативні значення для зменшення відстані між словами.

Ну, і останнє на сьогодні Css правило, яке дозволяє певним чином оформляти текст в Html коді - це white-space. Відповідає воно за відображення символів пробілів на веб сторінці, які мали місце бути при написанні Html коду.

Як ви пам'ятаєте зі статті про символи пробілу в Html , Браузер при розборі коду об'єднує всі прогалини, символи перенесення рядків і табуляції в один єдиний пробіл, і здійснює перенесення рядків на веб сторінці саме по пробільним символам, які мали місце бути в коді.

Так ось, white space може приймати одне з трьох значень:

Зрозуміло, що за замовчуванням використовується значення Normal і в цьому випадку все відображається так, як я описав трохи вище. А ось при використанні значення Pre ми отримаємо повну аналогію з використанням тега Pre в чистому Html , Тобто на веб-сторінці текст буде відображений з усіма тими зайвими пробільними символами, які мали місце бути при написанні коду і переноси браузер вже по ним зробити не зможе.

Ну, а значення nowrap просто заборонить браузеру переносити по тим пробільним символам, які він знайде всередині фрагмента з CSS правилом white-space: nowrap. Спробувати, як все це працює, ви зможете і самі, створивши простенький Html файлик і уклавши будь-який фрагмент тексту в подібні теги:

<Div style = "white-space: pre;"> фрагмент піддослідного тексту </ div>

Удачі вам! До швидких зустрічей на сторінках блогу KtoNaNovenkogo.ru

Збірки по темі

Використовую для заробітку