Работа с текстом

Рассмотри варианты форматирования и установки стиля текста, так как это ключевая проблема для любого web-дизайнера. В этом уроке будут рассмотрены следующие свойства:

  • text-indent
  • text-align
  • text-decoration
  • letter-spacing
  • text-transform

Отступы [text-indent]
Свойство text-indent позволяет выделить параграф с помощью установки отступа для его первой строки. В примере 30px применяется ко всем параграфам <p>:
p {text-indent: 30px;}
text-indent    
    
Выравнивание текста [text-align]
CSS-свойство text-align соответствует атрибуту, используемому в старых версиях HTML. Текст может быть выровнен left, right, centred или justify.
В примере текст заголовочных ячеек таблицы <th> выравнивается вправо, а в ячейках данных <td> - по центру. Кроме того, нормальные параграфы - justify:
th {text-align: center;}
td {text-align: left;}
p {text-align: justify;}
text-align    
    
Декоративный вариант [text-decoration]
Свойство text-decoration позволяет добавлять различные "декоративные эффекты". Например, можно подчеркнуть текст, провести линию по или над текстом и т. д. В примере <h1> подчёркнуты, <h2> - имеют черту над текстом, а <h3> - перечёркнуты.
h1 {text-decoration: underline;}
h2 {text-decoration: overline;}
h3 {text-decoration: line-through;}
text-decoration    
    
Интервал между буквами [letter-spacing]
Интервал между буквами текста можно специфицировать свойством letter-spacing. Значение - нужная величина. Например, если вам необходимо 3px между буквами в параграфах <p> и 6px - в заголовках <h1>, то используется такой код:
h1 {letter-spacing: 6px;}
p {letter-spacing: 3px;}
letter-spacing    

Расстояние между словами.
Свойство word-spacing задаёт расстояние между словами (группами символов не разделенными пробелом) в строке.
Значения:

  • normal - Нормальное расстояние. (по умолчанию)
  • px - Расстояние задаётся в пикселях или любых других единицах измерения принятых в CSS.

    
Трансформация текста [text-transform]
Свойство text-transform управляет регистром символов. Можно выбрать capitalize, uppercase или lowercase, в зависимости от того, как выглядит текст в оригинальном HTML-коде.
Например, слово "headline" можно показать "HEADLINE" или "Headline". Имеются четыре возможных значения text-transform:
capitalize - Капитализирует каждое слово. Например: "john doe" станет "John Doe".
uppercase - Конвертирует все символы в верхний регистр. Например: "john doe" станет "JOHN DOE".
lowercase - Конвертирует все символы в нижний регистр. Например: "JOHN DOE" станет "john doe".
none - Трансформации нет - текст отображается так же, как в HTML-коде.

Для примера мы используем список имён. Все имена выделены с помощью <li> (list-item). Давайте капитализируем все имена и отобразим все заголовки верхним регистром.
Видите, HTML-код в этом примере в действительности записан в нижнем регистре.
h1 {text-transform: uppercase;}
li {text-transform: capitalize;}

text-transform

Интерлиньяж

Интерлиньяж - это расстояние между строками текста.
Расстояние между строками текста можно задать используя свойство line-height, сделать это можно следующими способами:

  • normal - Норма (по умолчанию).
  • % - Проценты. за сто процентов берется высота шрифта
  • 0.5 - Множитель. Может быть использовано любое число больше ноля. Так, например множитель 0.5 будет равняться половинному межстрочному расстоянию, а 2 - двойному.
  • px - Пиксели и любые другие единицы измерения, принятые в CSS.

Задание.

Создайте пример форматирования текста, как на рисунке ниже, сам текст можно скопировать ниже рисунка.

Цель создания CSS

Сам текст.

Цель создания CSS
CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц.
Основной целью разработки CSS являлось разделение описания логической структуры веб-страницы (которое производится с помощью HTML или других языков разметки) от описания внешнего вида этой веб-страницы (которое теперь производится с помощью формального языка CSS). Такое разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом. Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печатное представление, чтение голосом (специальным голосовым браузером или программой чтения с экрана), или при выводе устройствами, использующими шрифт Брайля.
NB! Текст редактируется с помощью CSS, а не с клавиатуры большие и маленькие буквы и отступы.

В предыдущем уроке мы рассматривали шрифты

В следующем уроке рассмотрим работу со ссылками на странице

О нас

Добро пожаловать в каталог продукции DigiPortfoolio OÜ.

Начиная с 2001 года мы обучались и развивались в сфере мультимедийного дизайна. На данный момент мы предлагаем услуги по созданию интернет дизайна, печатного дизайна, разработки рекламы, создание сайтов, туров 360 градусов.

Так же мы можем сделать печать на различных материалах и размерах. Изготовляем наклейки, визитки, roll-up стенды, сувенирную продукцию, печать на футболках.

В каталоге Вы найдете предлагаемые варианты, так же Вы можете связаться с нами по телефону +372 5596 5762 или прислать свой заказ на электронную почту info@digipo.eu

Ищите нас в социальных сетях:      

Мы в соцсетях

Смотрите нас в соцсетях, там мы буликуем готовые работы.