Сегодня: 19 апреля 2024 г., пятница Время:

Online-учебник по CSS

Автор учебника: Евгений Андросов

Урок 6. Свойства и значения (текст)

Как и в предыдущих уроках, здесь мы рассмотрим все дополнительные свойства и их значения одного большого свойства "text".

text-align – выравнивание текста

Текст может быть выровнен: left (по левому краю), right (по правому краю), center (по центру) или justify (равномерно по всей длине заданного поля).
Пример:

td {text-align: justify;}

text-decoration. Это свойство позволяет добавлять различные "декоративные эффекты". Например, можно подчеркнуть текст, провести линию под или над текстом. Пример всех перечисленных эффектов:

h1 {
text-decoration: underline;
}
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through;
}

И вот что мы видим в браузере:

Подчекркнутый текст

Линия над текстом

Перечеркнутый текст

Примечание: значение "overline" поддерживается далеко не всеми браузерами. Если у вас этой линии нет, не спешите думать, что это ошибка в учебнике. Я тестировал Учебник на разных компьютерах и в разных браузерах: примерно половина из них отображает линию над текстом, а другая половина - нет. Кроме того, я проверял таблицу стилей, отвечающую за этот урок в Валидаторе (о том, что это такое, пойдет речь в самом последнем уроке) и он ошибок не выдал. Все, что я могу рекомендовать в данном случае: просто не использовать это значение.

text-transform. Интересное свойство, которое трансформирует текст в верхний или нижний регистр. Существует несколько видов подобной трансформации:

none- трансформации нет - текст отображается так же, как в HTML-коде. Это значение стоит всегда по умолчанию, поэтому его можно не указывать.
capitalize – делает заглавные первые буквы каждого слова. Применяется, обычно для перечня имен. Например: "сергей иванов" с помощью этого значения превратится в "Сергей Иванов".
uppercase - конвертирует все символы в верхний регистр. Например: "Сергей Иванов" станет "СЕРГЕЙ ИВАНОВ".
lowercase - Конвертирует все символы в нижний регистр. Например: "СЕРГЕЙ ИВАНОВ" станет "сергей иванов".

text-indent - позволяет выделить параграф с помощью установки отступа для его первой строки.
Например, мы задаем отступ в 50 пикселей.

Смотрим пример

До встречи в следующем уроке!

Предыдущий урок | К началу урока | К оглавлению | Следующий урок

Непонятно? Есть вопросы?
Задайте их прямо сейчас и получите ответ автора учебника!

Комментарий добавил(а): Игорь
Дата: 06.12.2011

.nrek { background-color: #FB700F; border: 1px solid #FD3C07 } input, select { font-size: small; color: #ffffff; border-width: 1px; border-color: #000000; border-style: solid; background-color: #0a4284 } Здраствуйте. Я хочу изменит цвет фона кнопок и цвет текста на кнопках. У меня почти получилось, только ещё в месте с кнопкой меняется цвет поле ввода, а мне нужна только кнопка. Помогите пожалуйста, я уже столько прочитал учебников по css, что голова раскалывается...

Задать вопрос

Имейте, пожалуйста, ввиду, что любые ссылки, html-теги или скрипты, будут выводиться в виде обычного текста - бессмысленно их использовать. Вопросы, содержащие мат и оскорбления, будут немедленно удалены.