RSS-лента

Урок 6. Работаем с текстом в CSS.

Автор: Андрей Краснокутский

Дата: 2009-03-19

Форматируем текст web-страницы в CSS.

В данном уроке мы будем учиться работать с текстом - это различные отступы, подчеркивания, выравнивания, высота строки и т.д.

Первое свойство котором мы изучим - это выравнивание. В CSS это свойство задается как text-align: . Так же как и в HTML может принимать значение:

• left - выравнивание по левому краю (хотя как Вы знаете выравнивание по левому краю принято по умолчанию, но иногда это необходимо прописать явно);
• right - выравнивание по правому краю;
• center - выравнивание по центру;
• justify - выравнивание по ширине страницы;

Как записать в коде? Открываем нашу таблицу стилей style.css и создаем новый класс, называем его например .alig или как то иначе, лишь бы потом сами разобрались :-) и добавляем такой код (например мы хотим выравнить абзац текста по ширине страницы):

Листинг 6.1.

Естественно не забываем присвоить этот класс этому самому абзацу или другому элементу внешний вид которого необходимо изменить например так:
<p class="center">

Следующее свойство уже знакомое Вам с этим свойством мы сталкивались при изучении ссылок в CSS это text-decoration: может принимать значения:

• underline - подчеркивание снизу как у ссылок;
• none - без подчеркивания;
• overline - линия сверху текста;
• line-through - зачеркнутый текст;

Например мы хотим зачеркнуть текст (очень часто применяется в интернет магазинах при указании цен Старая цена - зачеркивают, Новая цена). Записывается в коде так,:

Листинг 6.2.

Следующее свойство это text-indent: . С помощью этого свойства можно задать красную строку (отступ справа первого слова - вспоминате русский язык) например на 30px . Задается как в px (пикселях), так и в других единицах: см (сантиметрах), em (3 ширины буквы m) абсолютных единицах. Записывается так:

Листинг 6.3.

Следующее свойство это text-transform: . Это свойство изменяет вид букв в предложении маленькие или большие. Может принимать значения:

• capitalize - с помощью этого значения можно заставить браузер отображать каждую первую букву слова в предложении с большой буквы, хотя в исходном коде эти буквы будут записаны маленькими (строчными);
• uppercase - все слова в предложении написаны большими буквами, хотя в исходном коде эти буквы будут записаны маленькими (строчными);
• lowercase - все слова в предложении написаны маленькими (строчными) буквами ;

Записывается в коде:

Листинг 6.4.

Следующее свойство это letter-spacing: . С помощью этого свойства можно задать интервал между буквами в предложении например в 10px . Задается как в px (пикселях), так и в других единицах: см (сантиметрах), em (3 ширины буквы m) абсолютных единицах. Т.е. между каждой буквой в каждом слове будет интервал в 10 px или 15 px (сколько укажете). Записывается так:

Листинг 6.5.

Следующее свойство это word-spacing: . С помощью этого свойства можно задать интервал между словами в предложении например в 20px . Задается как в px (пикселях), так и в других единицах: см (сантиметрах), em (3 ширины буквы m) абсолютных единицах. Т.е. между каждым словом в предложении будет интервал например в 20 px или 30 (сколько укажете) . Записывается так:

Листинг 6.6.

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

Листинг 6.7.

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

Читайте так же:

Смотрите поясняющие Видео Уроки.

Приступаем к форматированию текста.

Вставляем заголовки на web-страницу.

Форматируем текст web-страницу.

Правила написания коррекного кода web-страницы.

Просмотров: 9083

Поделитесь этой информацией со своими друзьями!

Комментарии к этой статье (уроку):

Добавить Ваш комментарий:

Навигация

Уроки HTML

CSS уроки

Статьи

Инструменты

Шаблоны сайтов

Книги

Украшения

Сайт от А до Я

Заработать в Интернете

Обман в Интернете

Охрана труда

МОДУЛЬНЫЕ КАРТИНЫ

PHP УРОКИ

Услуги

Скрипты

Почтовая Рассылка

SEO

jQuery

Специальная оценка условий труда (СОУТ) - АРМ

Платежные системы Интернета

УРОКИ ФОТОШОП

Секретный раздел

Видео Курсы

Заработает каждый от Школьника до Пенсионера! "Как?" Узнать сейчас >>> Хотите заработать? 2-х Уровневая Партнерская программа! Присоединяйтесь.

Последние заметки

Модульная картина: Роскошь красного бархата

Модульная картина абстракция: Энергия солнца

Модульная картина: Синие розы

Модульная картина: Водопад

Модульная картина: Орхидеи

Новости сайта

Архив

2016 год:

2015 год:

2014 год:

2013 год:

2012 год:

2011 год:

2010 год:

2009 год:

2008 год:

Сайты друзей

Регистрация доменов

ООО "ПК "ЛюксСтрой"

Наши ссылки

Если Вам понравился
наш сайт, установите
Нашу ссылку, и
Получите подарки!!!

Наши Аттестаты

Проверить аттестат

Проверено Z-PAYMENT