Здрастуйте, шановні читачі блогу . Сьогодні ми продовжуємо вивчати основи стильової розмітки 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.
Значення Css властивості vertical-align sub і super відповідають під — і надиндексу, які мали місце бути в чистому Html (до використання CSS властивостей для візуального оформлення).
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.4 em;
Або ж можна ось так зблизити символи в цій фразі» з допомогою:
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 файлик і уклавши будь-який фрагмент тексту подібні теги:
фрагмент піддослідного тексту
Удачі вам! До зустрічей на сторінках блогу
