Як зробити жирний шрифт?
Отже, перша можливість, про яку зазвичай згадують при оформленні тексту - це надання їй жирного накреслення. Для цього в html є 2 тега, але ми ж сьогодні говоримо з вами про css, тому не будемо їх розглядати.
У стилях ж для цього існує властивість font-weight і всього два його значення: normal і bold. Друге, як ви розумієте, і робить текст жирним. Цікаво, що також можна задавати числові значення від 100 до 900. 400 відповідає режиму normal, 700 - bold. Але, на жаль, це не працює у всіх браузерах, тому я рекомендую все-таки користуватися ключовими словами.
Також є слова bolder і lightet. вони робить жирність шрифту більше або менше по відношенню до того, як він встановлений для батьківського елемента. Ними теж можете користуватися.
Як написати в css курсивом?
Йдемо далі і тепер зробимо текст курсивним. Для цього існує властивість font-style і його значення italic. Саме воно надає курсивне накреслення. Також є значення oblique. при ньому зовнішній вигляд тексту трохи відрізняється. Це так званий курсив.
Підкреслення і закреслення
Щоб підкреслити або закреслити текст в css є властивість text-decoration і у нього багато значень, розглянемо кожне:
- Underline - підкреслення знизу;
- Overline - зверху;
- Line-through - закреслення;
- None - значення за замовчуванням, нічого не застосовується;
- Blink - миготливий текст (не рекомендується використовувати взагалі).
Потрібно сказати, що у посилань на веб-сторінці за замовчуванням є підкреслення знизу, якщо ви хочете його скасувати, то потрібно для них прописати text-decoration: none.
вирівнювання тексту
Звичайно ж, не можна забувати про таку важливу штуку, як вирівнювання. Саме тексту, а не елементу, в якому він розміщується. Для цього є text-align і кілька його значень:
- Left - по лівому краю (це за замовчуванням);
- Center - по центру (для заголовків, наприклад);
- Right - по правому (часто так вирівнюють цитати);
- Justify - по ширині. При цьому параметрі текст спробує вирівнюватися так, щоб займати в кожному рядку однакову ширину.
варіант написання
Цікава властивість, яке дуже рідко застосовується, але все ж існує - font-variant. По суті, у нього всього одне значення: small-caps. Це означає, що всі букви перетворюються в заголовні, але трохи зменшуються в розмірі.
Розмір шрифту в css
Тепер ми добралися до ще одного властивості - font-size. І як ви вже зрозуміли, воно дозволяє нам визначити розмір шрифту. Зазвичай його ставлять в пікселях, іноді в відносних одиницях em. а іноді навіть в процентах. Загалом, можна по-різному.
Для основного тексту на сторінці зазвичай встановлює розмір шрифту 12-16 пікселів, для заголовків і підзаголовків - 20-30.
ім'я шрифту
Мабуть, одна з найцікавіших можливостей - вибрати назву шрифту, який буде використовуватися. Якщо ви активно користуєтеся Ворд, то напевно знаєте як мінімум парочку. Це Arial, Times New Roman, Tahoma, Verdana і т.д. Це так звані стандартні шрифти, які йдуть разом з операційною системою.
В html типи шрифтів бувають такі:
- Serif - із зарубками.
- Sans-serif - без зарубок, оптимальний варіант для основного тексту.
- Monospace - моноширинних, для виведення коду і т.д.
- Cursive - курсивні.
- Fantasy - декоративні, для різних оформлювальних цілей.
Ах да, я ж навіть не згадав властивість, яким потрібно задавати ім'я - це font-family. наприклад:
Як бачите, можна через кому вказувати кілька шрифтів. Браузер використовує той, який буде першим знайдений. Можна вказати і сімейство, про всяк випадок, щоб якийсь шрифт вже точно був використаний.
Якщо ви підключаєте якийсь шрифт, або його назва складається з декількох слів, то їх потрібно укладати в одинарні або подвійні лапки, як у третьому прикладі.
Скорочена запис властивостей сімейства font
Як ви могли помітити, дуже багато параметрів тексту в css починаються з приставки font-. Все це можна записати скорочено в такий спосіб:
Font: style, variant, weight, size, family.
Якщо якийсь параметр не потрібен, він просто опускається, приклад:
Встановлює жирний курсивний шрифт Вердана, розміром 30.
перетворення регістра
Щоб змінити регістр букв, використовуйте властивість text-transform. У нього є такі значення:
- Lowercase - всі букви рядкові;
- Uppercase - всі букви заголовні;
- Capitalize - кожна перша буква нового слова стає великої.
Як виділити в css першу букву або перший рядок
Для цього використовуйте псевдокласи: first-letter і: first-line. Про їх використанні я написав тут. Це корисно, коли перша буква по формленію повинна сильно відрізнятися від інших, як роблять у багатьох книгах.
Якщо вам потрібно зробити новий рядок в абзаці, то це робиться за допомогою властивості text-indent, докладніше його опис дивіться в цій статті.
Управління переповненням тексту
У css3 з'явилося властивість, яке дозволяє задати команду що робити, якщо текст не влазить в контейнер. Це text-overflow і у нього два значення:
- Clip - обрізає весь зайвий текст
- Ellipsis - обрізає і додає в кінець три крапки
Загалом, властивість з розряду "щоб знали". поки я їм ніколи не користувався.
Текстова тінь
Ну і, звичайно, яке оформлення тексту без тіні, без цього чудового властивості text-shadow. яке з'явилося в css3. При правильному використанні це дозволяє значно прикрасити текст. Втім, я не буду тут докладно описувати це властивість, більш детально про нього можете подивитися в цій статті. де я показую, як з його допомогою зробити обведення потрібних слів.
колір шрифту
Звичайно, в цій статті я перерахував багато властивостей для перетворення зовнішнього вигляду тексту, але нічого досі не сказав про колір. Він задається за допомогою color. про це я докладно написав тут.