Оформлення тексту css

17

Від автора: вітаємо вас на сторінках блогу webformyself. За оформлення тексту css відповідає в першу чергу, так як саме за допомогою мови формується зовнішній вигляд всіх елементів. Давайте розглянемо основні властивості, які впливають на зовнішній вигляд текстового вмісту.

Колір

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

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

Колір в css задається за допомогою властивості color. Значення можна записати у вигляді ключових слів (white brown, orange), шістнадцяткових hex-кодів (#000, #fff, #ccc) і в режимі rgb (red, green, blue) де визначається насиченість кожного з цих квітів у числове значення від 0 до 255.

Сам шрифт

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

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

Задати шрифт можна за допомогою властивості font-family, а значенням виступає ім’я або сімейство. Для надійності можна записати пару варіантів через кому. Наприклад, так: Font-family: «Lato», Georgia, Arial, sans-serif;

Тут ми записали аж чотири варіанти. Якщо браузер знайде шрифт Lato, то буде використовувати саме його. Якщо ж він не буде виявлений, то наступним браузер спробує використовувати Georgia, а якщо і його не буде, то Arial. Цей шрифт є на будь-яких комп’ютерах з операційною системою Windows.

Якщо ви записуєте якийсь шрифт, то переконаєтеся, що він буде доступний, тому що при завантаженні буде витрачатися час на перевірку його наявності, а якщо його вже немає, то це мінус до швидкості сайту.

Оформлення тексту css

Розмір шрифту

Також допомагає оформити текст css властивість font-size. Воно, як зрозуміло з назви, задає розмір тексту. Зазвичай записують в пікселях, хоча часто також використовуються відносні одиниці em.

У деяких елементів html розмір тексту визначений спочатку. Наприклад, якщо ви укладете текст в теги h1, то він автоматично виведеться великими жирними літерами. Насправді ви легко можете змінити цю установку за замовчуванням:

h1{
font-weight: normal;
font-size: 50px;
}

Наприклад, прибрати жирність і збільшити базовий розмір. Наприклад, назва сайту іноді виводиться дуже великим шрифтом

Тінь тексту

Будь-якого текстового фрагмента можна задати тінь з допомогою правила text-shadow. Давайте розберемо його синтаксис на прикладі:

span{
text-shadow: 2px 2px 5px red;
}

Всі текстові фрагменти, укладені в теги span, отримають таку тінь. Виглядає вона так:

Оформлення тексту css

Перше числове значення задає зсув по горизонталі, друге – зсув по вертикалі, третє – розмиття тіні, це дозволяє знизити її різкість і насиченість. Останній параметр – колір.

Якщо будь-яке із значень вам не потрібно, просто поставте 0. Колір записувати обов’язково. Параметри тіні залежать в першу чергу від розміру шрифту – чим він більший, тим більше можна робити зміщення.

Вкрай не рекомендую вам використовувати тінь для оформлення основного текстового вмісту, вона потрібна швидше для поліпшення краси заголовків, якихось пунктів або списку чарунок у таблицях, але ніяк не основної інформації на сторінці, яка повинна бути подана в скромнішому вигляді.

Множинна тінь

Так-так, в css можна через кому визначити для тексту кілька тіней. Тут важливо тільки запам’ятати наступне правило: тіні, які розташовуються в коді першими, будуть перекривати ті, які розташовані далі, тому всім следющим тіням необхідно ставити зсув більше, щоб побачити їх на сторінці.

span{
font-size: 40px;
text-shadow: 0 0 5px red, 0 0 10px orange, 0 0 15px yellow, 0 0 20px green, 0 0 25px aqua;
}
div{
font-size: 40px;
text-shadow: 0 0 5px red, 0 0 10px orange, 0 0 15px yellow, 0 0 20px green, 0 0 25px aqua,
0 0 30px blue, 0 0 35px purple;
}
p{
font-size: 40px;
text-shadow: 1px 1px 0 red, -1px -1px 0 orange, 2px 2px yellow, -2px -2px green;
}

Оформлення тексту css

Кількість доданих тіней необмежено, зміщення можна задавати як тільки з одного боку, так і з двох, а можна не ставити взагалі. Також тінь може підходити до тексту і покращувати його зовнішній вигляд, а може тільки псувати, все залежить від поєднань кольорів.

Оформлення тексту css

Тіні є потужним css3-інструментом для оформлення тексту і вже сьогодні активно використовуються, в основному в заголовках, які треба по-особливому виділити серед іншого тексту.

Інші властивості

На цьому, звичайно, арсенал css прийомів для стилізації тексту не закінчується. У цій статті ви можете прочитати ще про деяких параметрах, таких, як жирність, накреслення, варіанти написання букв та їх трансформація (посилання на статтю «Як встановити шрифт»). Там же описується і letter-spacing – інтервал, який можна додавати до потрібних текстовим фрагментам, якщо це буде необхідно.

Оформлення при наведенні

Також можна і часом потрібно оформити текст красиво в css при наведенні на нього курсору мишки. У чому може полягати така стилізація? Наприклад, у появі підкреслення, зміни кольору тексту, або фонового кольору, зміни розміру шрифту і т. д.

Цікаво, що останнім часом в сайтобудуванні популярно робити всі зміни плавно. Для цього просто пропишіть потрібного елементу на сторінці:

#header{
transition: (затримка в секундах або мілісекундах) наприклад 1s;
}

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

Підсумок

В css величезний арсенал засобів для зміни зовнішнього вигляду тексту. Найпотужніший з них – це можливість використовувати будь-які шрифти, ставлячи їх через font-family, а також добавившаяся в css3 можливість додавати тінь. На цьому я закінчую цю статтю, присвячену прийомам редагування тексту, а вам бажаю успішно використовувати ці знання при розробці веб-сайтів. Додаткову інформацію з теми ви можете знайти в преміум курсі з css3