- вирівнювання тексту
- Відступ першого рядка
- Установка міжрядкового інтервалу
- Інтервал між словами і символами
- Декорування тексту
- Верхній і нижній регістр
- Капітель в CSS
- Питання і завдання по темі
Наша взаимовыгодная связь https://banwar.org/
У цій статті мова піде про те як відбувається форматування тексту в CSS, будуть розглянуті прийоми вирівнювання тексту, як силам CSS зробити новий рядок, встановити міжрядковий інтервал та інтервал між словами, як зробити декорування тексту, перетворити текст в верхній, або нижній регістр і як створити капітель шрифту.
В ході верстки сайту Вам доведеться постійно змінювати зовнішній вигляд веб-сторінок. Однією з перших завдань при роботі з текстом на сторінці є необхідність його вирівняти.
вирівнювання тексту
Завдяки властивості CSS text-align , Ви можете розмістити заголовки вашого документа по центру, розташувати текстове вміст щодо лівого, або правого краю, або, може, ви готуєте сторінки до друку і необхідно вирівняти їх по ширині, подібно до того, як текст розміщується в друкованих виданнях.
Щоб встановити вирівнювання для тексту, використовуйте наступні ключові слова з властивістю text-align :
Значення Опис left вирівнює текст вліво. Це значення за замовчуванням (якщо напрямок тексту зліва направо). right Вирівнює текст вправо. Це значення за замовчуванням (якщо напрямок тексту справа наліво). center Вирівнює текст по центру. justify Розтягує лінії так, що кожна лінія має однакову ширину (розтягує текст по ширині).
Давайте розглянемо приклад роботи з вирівнюванням тексту:
<! DOCTYPE html> <html> <head> <title> Приклад використання властивості text-align </ title> <style> div {background-color: rgba (0, 255, 0, .1); / * Задаємо колір заднього фону для всіх елементів <div> * /} .test {text-align: left; / * Задаємо вирівнювання тексту вліво * /} .test2 {text-align: center; / * Задаємо вирівнювання тексту по центру * /} .test3 {text-align: right; / * Задаємо вирівнювання тексту вправо * /} .test4 {text-align: justify; / * Задаємо вирівнювання тексту по ширині * /} </ style> </ head> <body> <div class = "test"> З'їж ж ще цих м'яких французьких булок та випий чаю. </ Div> <div class = "test2"> З'їж ж ще цих м'яких французьких булок та випий чаю. </ Div> <div class = "test3"> З'їж ж ще цих м'яких французьких булок та випий чаю. </ Div> <div class = "test4"> З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. </ Div> </ body> </ html>
В даному прикладі ми створили 4 (чотири) класу, які визначають різні варіанти вирівнювання тексту. Для всіх елементів <Div> ми встановили колір заднього фону rgba (0, 255, 0, .1).
Результат нашого прикладу:
Ріс.60 Приклад використання властивості text-align (вирівнювання тексту).
Відступ першого рядка
Якщо Ви відкриєте практично будь-яку книгу, що містить текстову інформацію, то можете помітити, що перший рядок кожного абзацу, як правило, має відступ (новий рядок).
Якщо у вас є необхідність додати вашому документу вид подібний друкованому виданню, то скористайтеся таким CSS властивість, як text-indent .
Ви можете застосувати ті відносні одиниці виміру, які ви використовуєте в своєму документі, будь то пікселі, або значення, які залежать від базового розміру шрифту (наприклад, такі як em).
Звертаю Вашу увагу, що в деяких ситуаціях у вас може з'явиться необхідність використовувати негативний відступ першого рядка, властивість text-indent допускає використання від'ємних значень, в цьому випадку рядок зсувається в зворотному напрямку.
Давайте розглянемо приклад використання цієї властивості:
<! DOCTYPE html> <html> <head> <title> Приклад використання властивості text-indent </ title> <style> .test {text-indent: 0px; / * Задаємо відступ для першого рядка текстового блоку 0px (це значення за замовчуванням) * /} .test2 {text-indent: 40px; / * Задаємо відступ для першого рядка текстового блоку 40px * /} .test3 {text-indent: -20px; / * Задаємо негативний відступ для першого рядка текстового блоку * /} .test4 {text-indent: 50%; / * Задаємо відступ для першого рядка текстового блоку 50% * /} </ style> </ head> <body> <p class = "test"> З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. </ P> <p class = "test2"> З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. </ P> <p class = "test3"> З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. </ P> <p class = "test4"> З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. </ P> </ body> </ html>
В даному прикладі ми створили 4 (чотири) стилю і по черзі застосували їх до чотирьох абзацах. Для першого абзацу встановили значення відступу за замовчуванням (0), для другого задали відступ 40 пікселів, для третього вказали негативний відступ (-20px), в результаті чого, абзац зрушився за вікно браузера і для четвертого абзацу встановили відступ рівний 50%.
Звертаю вашу увагу, що якщо ви використовуєте процентні значення, то відступ залежить від ширини батьківського елементу, в якому знаходиться абзац.
Результат нашого прикладу:
Мал. 61 Приклад використання властивості text-indent (новий рядок).
Установка міжрядкового інтервалу
При роботі з текстом часто виникає необхідність розташувати рядки абзацу ближче один до одного, або навпаки - розтягнути їх. Відстань між базовими лініями сусідніх рядків називається інтерліньяж або міжрядковий інтервал.
В CSS за міжрядковий інтервал (інтерліньяж) відповідає властивість line-height (Висота рядка). Чим вище значення цього властивості, тим більше проміжок між рядками.
Звертаю Вашу увагу на те, що при встановленні значення висоти рядка з використанням одиниць вимірювання пікселі, розмір міжрядкового інтервалу, безпосередньо залежатиме від розміру шрифту, тобто він буде автоматично корегуватися пропорційно зміні властивості font-size (Розмір шрифту), розглянутого в попередній статті.
Як правило, у всіх сучасних браузерах висота рядка за замовчуванням становить 120%.
Розрахунок міжрядкового інтервалу відбувається наступним чином:
висота рядка (line-height) мінус висота шрифту (font-size)
Наприклад, розмір шрифту становить 20 пікселів, а висота рядка 150% (30 пікселів). Таким чином, виходить:
висота рядка (150% або 30px) мінус висота шрифту (20px) = 10px
Допускається задавати розмір висоти рядка з використанням числового значення. Оголошення виглядає наступним чином:
Cелектор
{line-height: 1.5; }
Як ви можете помітити, одиниці виміру при цьому не вказуються, а число виступає в ролі множника. При використанні числових значень розрахунок міжрядкового інтервалу відбувається наступним чином:
Числове значення * розмір шрифту
Наприклад, шрифт для абзацу встановлений 2em, а висота рядка задана як 1.5:
p{font-size: 2em; line-height: 1.5; }
Розрахункове значення міжрядкового інтервалу в нашому випадку складе 3em:
Числове значення (1.5) * розмір шрифту (2em) = 3em
У більшості випадків множник використовувати дуже зручно, так як елементи успадковують значення міжрядкового інтервалу батьківського елемента. Давайте розглянемо приклад використання властивості line-height :
<! DOCTYPE html> <html> <head> <title> Приклад використання властивості line-height </ title> <style> .test {line-height: 10px; / * Задаємо висоту рядка в пікселях. * /} .Test2 {line-height: normal; / * Задаємо висоту рядка (значення за замовчуванням). * /} .Test3 {line-height: 150%; / * Задаємо висоту рядка в процентах від поточного розміру шрифту. * /} .Test4 {line-height: 2; / * Задаємо висоту рядка числом, яке буде множитися з поточним розміром шрифту. * /} </ Style> </ head> <body> <p class = "test"> Параграф в якому line-height: 10px <br> Параграф в якому line-height: 10px </ p> <p class = " test2 "> Параграф в якому line-height: normal <br> Параграф в якому line-height: normal </ p> <p class =" test3 "> Параграф в якому line-height: 150% <br> Параграф в якому line -height: 150% </ p> <p class = "test4"> Параграф в якому line-height: 2 <br> Параграф в якому line-height: 2 </ p> </ body> </ html>
В даному прикладі ми розглянули способи вказівки висоти рядка в пікселях, відсотках і з використанням множника.
Результат нашого прикладу:
Мал. 62 Приклад використання властивості line-height (установка міжрядкового інтервалу).
Інтервал між словами і символами
Оформляючи сторінки на сайті, доводиться регулювати інтервал не тільки між рядків, але і між окремими словами, або символами. Наприклад, зменшивши інтервал між символами, дозволить зробити довгий заголовок більш компактним, або навпаки, збільшивши інтервал, додасть йому більш розтягнутий вигляд.
Щоб встановити певний інтервал між символами необхідно використовувати CSS властивість letter-spacing . При роботі з властивістю використовуйте відносні одиниці виміру CSS (em, rem, px і так далі). Допускається використання як позитивних, так і негативних значень. Позитивні значення відповідно збільшують інтервал між символами, а негативні зменшують, аж до нашарування букв і символів один на одного.
Давайте розглянемо приклад використання властивості letter-spacing :
<! DOCTYPE html> <html> <head> <title> Приклад використання властивості letter-spacing </ title> <style> .test {letter-spacing: -1px; / * Задаємо негативний інтервал між символами в тексті. * /} .Test2 {letter-spacing: normal; / * Задаємо інтервал між символами в тексті (значення за замовчуванням). * /} .Test3 {letter-spacing: 2px; / * Задаємо інтервал між символами в тексті (2px). * /} .Test4 {letter-spacing: 1em; / * Задаємо інтервал між символами в тексті (1em). * /} </ Style> </ head> <body> <div class = "test"> letter-spacing: -1px </ div> <div class = "test2"> letter-spacing: normal </ div> < div class = "test3"> letter-spacing: 2px </ div> <div class = "test4"> letter-spacing: 1em </ div> </ body> </ html>
В даному прикладі ми розглянули способи вказівки інтервалу між символами в тексті в пікселях (як позитивне, так і негативне значення) і одиницях виміру em.
Результат нашого прикладу:
Рис.63 Приклад використання властивості letter-spacing (інтервал між символами в тексті).
Задати інтервал між окремими словами дозволяє схоже по найменуванню властивість CSS - word-spacing . За аналогією з властивістю letter-spacing використовуйте відносні одиниці виміру CSS (em, rem, px і так далі). Допускається використання як позитивних, так і негативних значень. Позитивні значення відповідно збільшують інтервал між словами, а негативні зменшують, аж до нашарування слів друг на друга.
Давайте розглянемо приклад використання властивості word-spacing :
<! DOCTYPE html> <html> <head> <title> Приклад використання властивості word-spacing </ title> <style> .test {word-spacing: normal; / * Визначаємо відстань між словами (значення за замовчуванням) * /} .test2 {word-spacing: 1em; / * Визначаємо відстань між словами (1em) * /} .test3 {word-spacing: -5px; / * Визначаємо відстань між словами (від'ємне значення) * /} </ style> </ head> <body> <p class = "test"> З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. </ P> <p class = "test2"> З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. </ P> <p class = "test3"> З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. </ P> </ body> </ html> У даному прикладі ми розглянули способи вказівки інтервалу між словами в тексті в пікселях (від'ємне значення) і одиницях виміру em.
Результат нашого прикладу:
Мал. 64 Приклад використання властивості word-spacing (інтервал між словами в тексті).
Декорування тексту
CSS властивість text-decoration дає нам можливість додати до тексту такі види декорування як:
- підкреслення
- перекреслення
- лінія над текстом
Однак, одне з найпоширеніших застосувань цієї властивості це скасування декорування, при цьому необхідно використовувати з властивістю text-decoration ключове слово none:
a
{/ * селектором типу вибираємо все гіперпосилання * / text-decoration: none; / * Прибираємо декорування тексту * /}
В даному прикладі ми прибрали декорування (підкреслення) у всіх гіперпосилань. Повний перелік ключових слів властивості text-decoration вказано в даній таблиці:
Значення Опис none Визначає нормальний текст (без декорування). Це значення за замовчуванням underline Визначає лінію під текстом. overline Визначає лінію над текстом. line-through Визначає лінію, що проходить через текст (перекреслення).
Звертаю Вашу увагу, що у більшості користувачів підкреслений текст асоціюється з гіперпосиланням, а перекреслений з віддаленим текстом, тому використовуйте декорування, коли це дійсно необхідно.
Допускається використовувати кілька значень в одному оголошенні:
text-decoration: underline line-through; / * Визначає лінію під текстом і лінію, що проходить через текст * /
Давайте розглянемо приклад використання властивості text-decoration у тексті:
<! DOCTYPE html> <html> <head> <title> Приклад використання властивості text-decoration </ title> <style> .test {text-decoration: underline; / * Додаємо декорування тексту (лінія знизу) * / color: red; / * Встановлюємо колір шрифту * /} .test2 {text-decoration: overline; / * Додаємо декорування тексту (лінія зверху) * / color: green; / * Встановлюємо колір шрифту * /} .test3 {text-decoration: line-through; / * Додаємо декорування тексту (перекреслення) * / color: blue; / * Встановлюємо колір шрифту * /} .test4 {text-decoration: underline overline; / * Додаємо подвійне декорування тексту (лінія зверху і знизу) * / color: orange; / * Встановлюємо колір шрифту * /} </ style> </ head> <body> <p class = "test"> text-decoration: underline; </ P> <p class = "test2"> text-decoration: overline; </ P> <p class = "test3"> text-decoration: line-through; </ P> <p class = "test4"> text-decoration: underline overline; </ P> </ body> </ html>
В даному прикладі ми створили чотири різних стилю і застосували їх по черзі до кожного абзацу. У першому абзаці додали декорування тексту - лінія знизу (значення underline), у другому декорування тексту - лінія зверху (значення overline), в третьому декорування тексту - перекреслення (line-through), а в четвертому подвійне декорування тексту - лінія зверху і знизу ( значення underline overline).
Результат нашого прикладу:
Мал. 65 Приклад використання властивості text-decoration (декорування тексту в CSS).
Верхній і нижній регістр
CSS надає можливість здійснити перетворення будь-якого тексту в верхній або нижній регістр, а також перетворити перші літери кожного слова у верхній регістр. Управляє регістром тексту властивість text-transform , Нижче в таблиці наведені всі його значення:
Значення Опис none Текст відображається як є (реєстр букв не змінюється). Це значення за замовчуванням. capitalize Перетворює перші символи кожного слова у верхній регістр. uppercase Перетворює всі символи у верхній регістр. lowercase Перетворює всі символи в нижній регістр.
Давайте розглянемо приклад використання властивості text-transform у тексті:
<! DOCTYPE html> <html> <head> <title> Приклад використання властивості text-transform </ title> <style> .test {text-transform: capitalize; / * Перетворимо перші символи кожного слова у верхній регістр * /} .test2 {text-transform: uppercase; / * Перетворимо всі символи у верхній регістр * /} .test3 {text-transform: lowercase; / * Перетворимо всі символи в нижній регістр * /} </ style> </ head> <body> <p class = "test"> З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. </ P> <p class = "test2"> З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. </ P> <p class = "test3"> З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. </ P> </ body> </ html>
В даному прикладі ми створили три різних стилі і застосували їх по черзі до кожного абзацу. У першому абзаці перші символи кожного слова були перетворені в верхній регістр (значення capitalize), у другому все символи в верхній регістр (значення uppercase), а в третьому в нижній регістр (значення lowercase).
Мал. 66 Приклад використання властивості text-transform (зміни регістру тексту).
Капітель в CSS
Малі заголовні, або капітель (англ. Small caps) - накреслення шрифту, в якому малі знаки виглядають як зменшені великі літери. Для створення такого зображення використовується CSS властивість font-variant з наступним синтаксисом:
Cелектор
{font-variant: small-caps; / * Задаємо капітель шрифту * /}
Розглянемо приклад використання:
<! DOCTYPE html> <html> <head> <title> Приклад використання властивості font-variant </ title> <style> .test {font-variant: small-caps; / * Задаємо капітель шрифту * /} </ style> </ head> <body> <p> Параграф відображається звичайним шрифтом. </ P> <p class = "test"> Малі літери встановлюються як прописні зменшеного розміру. </ P> </ body> </ html>
В даному прикладі перший параграф залишений без змін, а до другого застосовано властивість font-variant зі значенням small-caps, завдяки якому текст буде виведений в капітелі (малі літери встановлюються як прописні зменшеного розміру).
Мал. 67 Приклад використання властивості font-variant (капітель шрифту).
Питання і завдання по темі
Перед тим як перейти до вивчення наступної теми пройдіть практичне завдання:
Якщо у Вас виникають труднощі при виконанні практичного завдання, Ви завжди можете відкрити приклад в окремому вікні і проінспектувати сторінку, щоб зрозуміти який код CSS був використаний.
Наша взаимовыгодная связь https://banwar.org/. Запустив новый сайт, "Пари Матч" обещает своим клиентам незабываемый опыт и возможность выиграть крупные суммы.
