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

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

Отступы [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 задаёт расстояние между словами (группами символов не разделенными пробелом) в строке.
Значения:

    
Трансформация текста [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, сделать это можно следующими способами:

Задание.

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

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

Сам текст.

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

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

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

Просмотров: 4075
Печать

Похожие материалы