Как создать свой сайт бесплатно? Как сделать сайт своими руками? Как заработать в Интернете? Создание сайтов на заказ.

Запрос должен быть не менее 4-х символов.

RSS-лента

Сегодня:        Добавить в Избранное       Написать Автору        Обмен валют        Оплата сервисов

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

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

Дата: 2009-03-19

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

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

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

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

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

Листинг 6.1.

.alig {
text-align:justify;
}

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

 

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

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

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

Листинг 6.2.

.alig {
text-decoration:line-through;
}

 

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

Листинг 6.3.

.alig {
text-indent:3em;
}

 

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

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

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

Листинг 6.4.

.alig {
text-transform:capitalize;
}

 

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

Листинг 6.5.

.alig {
letter-spacing:10px;
}

 

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

Листинг 6.6.

.alig {
word-spacing:20px;
}

 

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

Листинг 6.7.

.alig {
text-align:justify;
text-decoration:line-through;
text-indent:3em;
text-transform:capitalize;
letter-spacing:10px;
word-spacing:20px;
word-spacing:20px;
}

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

 

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

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

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

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

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

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

 

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


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


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

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

Введите сумму чисел с картинки:
Введите сумму чисел

GudzonPartner.com

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


05.08.2014
Новый раздел! Платежные системы Интернета. Все о платежных системах и сервисах.

09.08.2013
Новинка! Обзор и Анализ реальных способов заработка. Как и Сколько можно заработать в Интернете? Цифры. Факты. Комментарии.

28.05.2013
Обновилась Партнерка сайта! Зарабатывайте вместе с нами! "Новые товары и рекламные материалы"

25.05.2013
Видео Курс! "Как создать свой Информационный Бизнес в Интернете" Зарабатывайте: от 30000 ++ рублей.

Почтовая рассылка! Бесплатные электронные книги из серии: "Секреты создания сайтов"


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

Новинка!
Как реально заработать
в Интернете?
"Обзор видов и способов заработка."

Специальный Отчет:

Специальный Отчет: Как и сколько можно реально заработать в Интернете? Рельные цифры, факты и анализ различных способ заработка в Интернете

В подарок всем подписчикам!

SmartResponder.ru
Ваш e-mail: *
Ваше имя: *

Полный список наших почтовых рассылок!

Домены

Сервис мгновенной регистрации Доменов

Google Adsense



Навигация

Уроки HTML

CSS уроки

Статьи

Инструменты

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

Книги

Украшения

Сайт от А до Я

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

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

Охрана труда

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

PHP УРОКИ

Услуги

Скрипты

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

SEO

jQuery

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

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

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

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

Видео Курсы

Видео Курс по созданию собственного Информационного Бизнеса в Интернете
Заработает каждый
от Школьника до Пенсионера!
"Как?"
Узнать сейчас >>>


Хотите заработать?
2-х Уровневая
Партнерская программа!

Присоединяйтесь.


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

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

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

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

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

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

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

RSS Лента Новостей сайта www.LuksWeb.ru

Наши новости в Твиттере

Архив

2016 год:

2015 год:

2014 год:

2013 год:

2012 год:

2011 год:

2010 год:

2009 год:

2008 год:

Сайты друзей

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

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

Деревянные дома от СПК "Ванда"

Наши ссылки

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

QR код сайта www.LuksWeb.ru

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


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

 

Аттестован системой Z-PAYMENT
Проверено Z-PAYMENT