«Единственный способ творить великие дела – это любить то, что ты делаешь»
CSS
site.komp36.ru Создание сайтов. Твой сайт фотографа Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Продающий лендинг «Установка и продажа окон» Установка и продажа окон, установка дверей, перегородок. Одностраничный продающий сайт. Заявки прямо с сайта
site.komp36.ru Универсальный лендинг. Любая тема сайта - 4900 руб. Лендинг адаптируется под любую тему: ремонт, отделка, продажа окон, дверей, лестниц, мебели и многое другое
site.komp36.ru Создание сайтов. Сайт сервисного центра. Сайт компании. Новости и отзывы. Несколько прайс-листов – под каждый отдельная страница. Возможность размещения статей


В предыдущей статье мы рассмотрели свойства, отвечающие за оформление шрифта. На этой странице продолжаем работу с текстом: знакомимся с свойствами CSS, отвечающими за форматирование и оформление текста.



Выравнивание текста

Свойство text-align позволяет выравнивать текст по горизонтали в пределах элемента.

По умолчанию текст размещается в левой части элемента - значение left. Он также может располагаться в правой части, выравниваться по центру или по ширине элемента, если свойство text-align принимает соответственно значения right, center и justify.

Свойство применимо ко всем элементам.

Фрагмент кода

<div class="border_green">
<p style="text-align:
left;"> Текст расположен слева. </p>
<p style="text-align:
center;"> Выравнивание по центру. </p>
<p style="text-align:
right;"> Текст расположен в правой части абзаца. </p>
</div>

Результат

Текст расположен слева.

Выравнивание по центру.

Текст расположен в правой части абзаца.

Оформление и выделение текста

Свойство text-decoration позволяет определенным образом выделить текст:

подчеркнуть текст - значение underline, перечеркнуть текст - значение line-through,

провести линию над текстом - значение overline и установить мигающий текст - значение blink .

Присвоение свойству text-decoration значения none отменяет все оформление, включая подчеркивание ссылок, устанавливаемое браузером по умолчанию.

Свойство применимо ко всем элементам.

Отступ первой строки

Свойство text-indent позволяет установить величину отступа первой строки в элементе.

Величина отступа измеряется в единицах принятых в CSS (подробнее здесь...) или задается в %.

Свойство применимо к блочным элементам (подробнее здесь...).

Фрагмент кода

<p> Первая строка этого абзаца не выделена отступом. По умолчанию величина отступа первой строки равна 0. </p>
<p style="text-indent:
25px;"> Отступ первой строки этого абзаца составляет 25 пикселей. Как видите, следующая строка не имеет отступа! </p>

Результат

Первая строка этого абзаца не выделена отступом. По умолчанию величина отступа первой строки равна 0.

Отступ первой строки этого абзаца составляет 25 пикселей. Как видите, следующая строка не имеет отступа!

Регистр букв

Свойство text-transform задает регистр букв для текста элемента.

Все буквы текста в элементе будут заглавными, если свойству text-transform присвоено значение uppercase, строчными при значении lowercase или каждое слово в тексте будет начинаться с заглавной буквы при значении capitalize.

При значении none (значение по умолчанию) текст не меняет регистра.

Свойство применимо ко всем элементам.

Фрагмент кода

<p style="text-transform:uppercase;"> Все буквы текста в верхнем регистре. </p>
<p style="text-transform:
capitalize;"> Лишь первая буква каждого слова в верхнем регистре. </p>

Результат

Все буквы текста в верхнем регистре.

Лишь первая буква каждого слова в верхнем регистре.

Интервал между буквами и словами

Свойства letter-spacing и word-spacing задают соответственно интервал между буквами и интервал между словами в тексте элемента.

Интервал задается в единицах длины, принятых в CSS (подробнее здесь...).

По умолчанию эти расстояния зависят от используемого шрифта.

Свойства применимы ко всем элементам.

Фрагмент кода

<p style="letter-spacing:5px;"> Интервал между буквами равен 5 пикселям. </p>
<p style="word-spacing:
10px;"> Расстояние между словами составляет 10 пикселей. </p>

Результат

Интервал между буквами равен 5 пикселям.

Расстояние между словами составляет 10 пикселей.

Межстрочный интервал

Межстрочный интервал устанавливается с помощью свойства line-height.

Интервал задается в единицах длины, принятых в CSS (подробнее здесь...); в % относительно высоты текущего шрифта, которая принимается за 100%; или указывается любое положительное число - множитель. В этом случае интервал будет равен произведению множителя на размер текущего шрифта.

При значении normal (значение по умолчанию) межстрочный интервал зависит от шрифта и определяется браузером.

Фрагмент кода

<p style="line-height:2;"> Установим межстрочный интервал, выбрав в качестве значения число 2. То есть множитель равен 2. В итоге интервал в два раза больше размера текущего шрифта. </p>

Результат

Установим межстрочный интервал, выбрав в качестве значения свойства число 2. То есть множитель равен 2. В итоге интервал в два раза больше размера текущего шрифта.

Пробелы и переносы

По умолчанию несколько пробелов в исходном коде браузеры отображают как один, а перенос текста на следующую строку происходит автоматически.

Свойство white-space позволяет учесть все пробелы, установленные в исходном коде, а также контролирует перенос текстовой строки.

При значении pre свойства white-space браузер учтет все пробелы и переносы в исходном коде. Но автоматический перенос строк не работает.

При значении nowrap пробелы и переносы не учитываются, и если не осуществить перенос строки с помощью тега <br>, то добавится полоса прокрутки.

И значение по умолчанию normal, как уже упоминалось, не учитывает несколько пробелов, и при этом имеет место автоматический перенос сток.

Свойство применимо к блочным элементам (подробнее здесь...).

Добавление тени

Оформление текста тенью придает ему эффект трехмерности и позволяет таким образом заметно выделить его, привлекая тем самым внимание.

Добавление к тексту тени происходит при помощи свойства text-shadow.

Обязательными параметрами тени являются сдвиги по оси X и по оси Y, которые задаются в единицах измерения, принятых в CSS (подробнее здесь...). Далее можно указать радиус размытия тени (также в единицах измерения, принятых в CSS), и, при необходимости, цвет тени, который можно задать двумя способами (подробнее здесь...).

По умолчанию радиус размытия тени равен 0, а цвет тени совпадает с цветом текста.

Добавление нескольких теней приветствуется с точки зрения улучшения визуального эффекта при их сочетании.

Но в использовании тени есть и недостаток, заключающийся в том, что браузер Internet Explorer понимает добавление тени только с 10.0 версии.

Фрагмент кода

<p style="color:#CCFF33; font-size:40px; text-shadow: #FF3366 3px 3px 5px, teal 3px 3px 10px; "> К тексту добавлены две тени! </p>

Результат

К тексту добавлены две тени!

site.komp36.ruТвой сайт фотографа. Создание сайтов Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Акция Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Акция Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта

CSS по шагам
Тематические публикации
site.komp36.ru Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта

Все cвойства CSS
Тематические публикации
site.komp36.ru Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта