Властивості тексту css

Raisa Kravets -


Властивості тексту дозволяють задавати параметри слів і речень, а також їх взаємне розташування.

Форматування та встановлення стилю тексту - ключова проблема для будь-якого web-дизайнера. 

 Є наступні властивості тексту CSS:

  • text-indent
  • text-align
  • text-decoration
  • line-height
  • text-shadow
  • letter-spacing
  • word-spacing
  • text-transform

text-indent

​Властивість text-indent дозволяє установити відступ для його першого рядка.

Синтаксис:

/* значення <length> */
text-indent: 3mm;
text-indent: 40px;

/* значення <percentage> залежить від ширини блоку*/
text-indent: 15%;

/* значення ключович слів */
text-indent: 5em each-line;
text-indent: 5em hanging;
text-indent: 5em hanging each-line;

/* міжнародні значення */
text-indent: inherit;
text-indent: initial;
text-indent: unset;

See the Pen text-indent by kravets (@raisa69) on CodePen.


text-align

​Властивість text-align описує, як вирівнюється текст усередині блоку по горизонталі

Синтаксис:

text-align: left
text-align: right
text-align: center
text-align: justify
text-align: start
text-align: end
text-align: match-parent
text-align: start end
text-align: "."
text-align: start "."
text-align: "." end
text-align: inherit

See the Pen text-align by kravets (@raisa69) on CodePen.


line-height

​Властивість line-height встановлює розмір простору між рядками, наприклад у тексті.

Синтаксис:

/* Keyword value */
line-height: normal;

/* Unitless values: use this number multiplied
by the element's font size */
line-height: 3.5;

/* <length> values */
line-height: 3em;

/* <percentage> values */
line-height: 34%;

/* Global values */
line-height: inherit;
line-height: initial;
line-height: unset;

See the Pen line-height by kravets (@raisa69) on CodePen.


​letter-spacing, word-spacing

​Інтервал між буквами тексту можна специфікувати властивістю letter-spacing, а між словами word-spacing

Синтаксис:

/* Значення - ключові слова */
letter-spacing: normal;

/* Значення <length> */
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: .3px;

/* Глобальні значення */
letter-spacing: inherit;
letter-spacing: initial;
letter-spacing: unset;

See the Pen letter-spacing by kravets (@raisa69) on CodePen.


​CSS-властивість word-spacing встановлює довжину пробілу між словами та між тегами

Синтаксис:

/* Значення ключовим словом */
word-spacing: normal;

/* <length> значення */
word-spacing: 3px;
word-spacing: 0.3em;

/* <percentage> значення  */
word-spacing: 50%;
word-spacing: 200%;

/* Глобальные значення */
word-spacing: inherit;
word-spacing: initial;
word-spacing: unset;

See the Pen word-spacing by kravets (@raisa69) on CodePen.


text-transform

​Властивість text-transform управляє регістром символів.

Є чотири можливих значення text-transform:

  • сapitalize - кожне слово з великої букви. Наприклад: "john doe" стане "John Doe".
  • uppercase - Конвертує всі символи у верхній регістр. Наприклад: "john doe" стане "JOHN DOE".
  • lowercase - Конвертує всі символи в нижній регістр. Наприклад: "JOHN DOE" стане "john doe".
  • none -Трансформації немає - текст відображається так само, як в HTML-коді.

See the Pen text-transform by kravets (@raisa69) on CodePen.

​text-shadow 

Властивість text-shadow додає тінь до тексту, а також встановлює її параметри: колір тіні, зміщення щодо напису і радіус розмиття.

 Будь-яка тінь описується комбінацією зсувів по осях X і Y щодо елемента, радіусом розмиття і кольором.

Генератор тіней :

See the Pen Text shadow generator by Hala Alkhellow (@halakhellow) on CodePen.

text-decoration

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

Синтаксис:

text-decoration: text-decoration-line || text-decoration-style || text-decoration-color

Властивість text-decoration — складена а це означає, що його можна розкласти на наступні властивості:

  • text-decoration-line — вид лінії: закреслення, підкреслення чи надкреслення;
  • text-decoration-style — стиль лінії, може приймати значення:
    • solid — суцільная лінія;
    • double — подвійна лінія;
    • dotted — точкова лінія;
    • dashed — пунктирна лінія;
    • wavy — хвиляста лінія.
  • text-decoration-color — колір лінії.

See the Pen Untitled by kravets (@raisa69) on CodePen.



Вправа 1

  • Створіть папку завдання з назвою "text1_css"
  • У цій папці створіть новий HTML файл - index.html
  • У index.html створіть HTML скелет документа
  • Створіть новий CSS файл - style.css
  • Підключіть CSS файл до HTML файлу
Текст для  відпрацювання властивостей тексту:

Професія верстальник сайтів
Верстальник - це одна з професій, освоїти яку можна своїми силами за відносно короткий термін. В середньому на вивчення основ верстки може піти 2-3 місяці, після чого ви зможете виконувати перші проекти і заробляти гроші. У цій статті ви дізнаєтеся, хто такий верстальник сайтів і чим він займається, де можна вчитися і як шукати роботу в цій галузі, скільки можна заробити. Також в статті містить посилання на 10 безкоштовних курсів для навчання професії.
Хто такий верстальник сайтів і чим він займається?
 Верстальник - це фахівець, який створює HTML-шаблон для сайту на основі макета, наданого веб-дизайнером. Говорячи простими словами, дизайнер малює майбутній сайт у вигляді умовної «картинки». Однак браузери (Google Chrome, яндекс.браузер і інші) картинки не розуміють. Їм потрібен спеціальний код, який показує програму, де вивести меню на сторінці, фотографії, текст та інші елементи, і якими вони повинні бути. Все це кодується за допомогою мови розмітки HTML і каскадних таблиць стилів CSS. 
Що робить верстальник сайту?
Спочатку дизайнер надсилає макети в форматі .PDF. Далі робота йде наступним чином: З макета верстальник бере фони, логотип сайту, різні зображення, які використовуються в дизайні, і зберігає їх у вигляді окремих файлів на своєму комп'ютері. Далі створює HTML-код, який зберігається в окремому файлі. Цей код вміють читати і розуміти браузери. Окремо до HTML-коду додаються CSS-файли, в яких описується оформлення різних елементів на сторінках (розмір шрифту, колір шрифту, оформлення таблиць, списків і т.д.). 
Далі файли з HTML-кодом і CSS передаються розробникам, які інтегрують їх у CMS - систему управління сайтом. 
Плюси і мінуси професії верстальника
Необхідні навички та знання для початку роботи можна освоїти за 2-3 місяці. Можливість самостійного навчання з нуля по книгам і курсам. Професія підходить новачкам, які раніше не працювали в ІТ. 
Можливість працювати як в офісі, так і віддалено. Хороша зарплата, якщо порівнювати із середніми доходами в цілому. Не вимагає глибокого занурення в програмування. Потрібно постійно освоювати нове, тому що технології не стоять на місці. 

 Що повинен знати і вміти верстальник сайтів?
Щоб почати заробляти на верстці сайтів, необхідно мати такі знання і навички: 
  • Знати мову розмітки HTML і CSS, а також HTML-фреймворки. Найпопулярніший з них - Bootstrap. Його рекомендую освоювати в першу чергу. 
  • Вміти верстати блоками (є ще табличная верстка, але вона застаріла). 
  • Верстальник повинен розбиратися в мові програмування JavaScript. Важливо знати основи, щоб встановлювати і налаштовувати готові скрипти. 
  • Знати, що таке кросбраузерності верстка, адаптивна верстка. Уміння верстати на рівні Pixel Perfect - це додатковий плюс. 
  • Знати, як виконувати основні операції в Photoshop і Figma.
  •  Розбиратися, що таке шари, як вирізати картинки, фон і т.д. Знання PHP буде плюсом. 

Завдання 1

  1. Зробіть всі абзаци <p> червоного кольору.
  2.  Зробіть всі <h1> зеленого кольору.
  3.  Зробіть всі <h2> блакитного кольору.
  4.  Зробіть всі <h3> оранжевого кольору.

Завдання 2 на style


Для вирішення завдань даного блоку вам знадобляться наступні HTML атрибути: style.

  1.  Зробіть перший на сторінці абзац <p> зеленого кольору.
  2.  Зробіть другий на сторінці абзац <p> червоного кольору.

Завдання 3 на ширину і висоту

Для вирішення завдань даного блоку знадобляться наступні CSS властивості: width, height.

  1.  Зробіть всі абзаци <h2> шириною 300px

Завдання 4 на вирівнювання

Для вирішення завдань даного блоку  знадобляться наступні CSS властивості: text-align.

  1.  Поставте все <h1> по центру.
  2.  Поставте все <h2> по правому краю.
  3.  Зробіть так, щоб текст в абзацах <p> був вирівняний одночасно і по правому і по лівому краю.

  5.  Зробіть так, щоб у другому абзаці <p> текст був вирівняний по центру.

Завдання 5 на жирність

Для вирішення завдань даного блоку вам знадобляться наступні CSS властивості: font-weight.

  1.   Зробіть одночасно  <h1> і <h2> нежирним.

Завдання 6 на курсив

Для вирішення завдань даного блоку вам знадобляться наступні CSS властивості: font-style.

  1.  Зробіть все <h2> курсивом
  2.  Зробіть всі абзаци <p> курсивом, а перший абзац - ні.

Завдання 7 на розмір шрифту

Для вирішення завдань даного блоку вам знадобляться наступні CSS властивості: font-size.

  1.  Зробіть все <h2> 20px.
  2. Зробіть всі абзаци <p> 15px.

Завданя 8 на сімейство

Для вирішення завдань даного блоку вам знадобляться наступні CSS властивості: font-family.

  1.  Зробіть для абзаців <p> шрифт Arial.
  2.  Зробіть для <h2> шрифт Times New Roman.
  3.  Зробіть для <h3> будь-який шрифт без зарубок.

Завдання 9 на міжрядковий інтервал

Для вирішення завдань даного блоку вам знадобляться наступні CSS властивості: line-height.

  1.  Зробіть міжрядковий інтервал для абзаців <p> в 30px.

Завдання 10 на властивість-скорочення font

Для вирішення завдань даного блоку вам знадобляться наступні CSS властивості: font.

  1.  Закоментуйте всі стилі для абзаців.
  2.  Для <p> зробіть шрифт Arial, 16 пікселів, курсив, жирний, міжрядковий інтервал в 30px.
  3.  Для <h1> зробіть наступний шрифт: нежирний, 20 пікселів, Verdana.

Завдання 11 на новий рядок

Для вирішення завдань даного блоку вам знадобляться наступні CSS властивості: text-indent.

  1.  Зробіть новий рядок в абзацах 30px.
  2.  Для другого абзацу <p> приберіть новий рядок.

Вправа 2


текст  для виконання завдання:

оформлення тексту
Давно з'ясовано, що при оцінці дизайну і композиції читається текст заважає зосередитися. Lorem Ipsum використовують тому, що той забезпечує більш-менш стандартний заповнення шаблону, а також реальний розподіл букв і пробілів в абзацах, яке не виходить за простій дублікації "Тут ваш текст.
Заголовок другого рівня
Багато програм електронної верстки та редактори HTML використовують Lorem Ipsum як текст за замовчуванням, так що пошук за ключовими словами "lorem ipsum" відразу показує, як багато веб-сторінок все ще чекають свого справжнього народження.
За минулі роки текст Lorem Ipsum
Деякі версії з'явились помилково
Є багато варіантів Lorem Ipsum

Стилізований текст має виглядати так:
Виконайте всі пункти завдання і порівняйте з результатом. 
  • Створіть папку завдання з назвою "text_css"
  • У цій папці створіть новий HTML документ - index.html
  • У index.html створіть HTML скелет документа
  • Створіть новий CSS файл - style.css
  • Підключіть CSS файл до HTML файлу
  • Створіть заголовок першого рівня в тезі body і напишіть там текст "Оформлення тексту"
  • Додайте даному заголовку клас title
  • В CSS файлі створіть селектор для тега body і напишіть наступні стилі - шрифт Arial, sans-serif, розмір шрифту 16px, колір тексту # 333, міжрядковий відступ 1.5
  • В CSS файлі створіть селектор для класу title, і напишіть наступні стилі - розмір шрифту 40px, колір тексту # f03333, міжрядковий відступ 1.2, всі букви заголовні
  • Розмітьте скопійований текст завдання абзацами та заголовками
  • Для заголовоку другого рівня надайте йому клас subtitle
  • В CSS файлі створіть селектор для класу subtitle, і напишіть наступні стилі - розмір шрифту 30px, колір тексту # 12ac11, міжрядковий відступ 1.2, підкреслення тексту знизу
  • Розмітьте ненумерований список з трьома пунктами
  • Задайте списку клас list
  • В CSS файлі створіть селектор для класу list, і напишіть наступні стилі - розмір шрифту 20px, колір тексту # 444, всі букви похилі, стиль маркерів списку - square

Завдання  3

Створити файл такого зразка:

Завдання 4

Сворити файл з таким стилізваним текстом:


Завдання 5

Властивості тексту - завдання з автоперевіркою

 Завдання 6

See the Pen диктант-шрифт-текст2 by kravets (@raisa69) on CodePen.

Завдання 7

Виправити помилки в css, щоб результат був як на зображенні:


See the Pen Trolltunga-errors-css by kravets (@raisa69) on CodePen.

Tags:
Нові Старіші