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

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

RSS-лента

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

Урок 9. Отступы (поля) вокруг объектов в CSS.

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

Дата: 2009-04-22

Сегодня используя стили CSS мы научимся делать поля и отступы вокруг объектов. Что мы будем называть объектами? Объектами или как иногда говорят контейнерами можно назвать все что угодно - это может буть абзац с текстом, картинка (графический файл), таблица, строка в таблице и т.д. Т.е. - это абсолютно любой элемент оформления на web-странице. Давайте для простоты определимся, что у нас объектом - будет абзац с текстом заключенным в теги <p> </p>.

Создаем новый класс например .pol , и в фигурных {} скобках начинаем писать код стиля. Первое свойство:

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

  • margin-left: - отступ слева;
  • margin-top: - отступ сверху;
  • margin-right: - отступ справа;
  • margin-bottom: - отступ снизу.

Естественно можно применять эти значения в любом сочетании, например задать отступ слева и снизу (прописав в стиле значения margin-left: и margin-bottom:) или только сверху (margin-top:) и т.д. Еще свойство margih может принимать значение auto , которой прописывается так:

Листинг 9.1.

.pol { margin: 60px; margin-top: auto; }

Что мы записали? Эта запись означает: Отступ сверху по умолчанию (как задано во всем тексте), а совсех остальных сторон отступ 60px , все очень просто.

Следующее свойство padding: Это свойство можно условно отнести к внутренним отступам, это свойство задает отступы внутри контейнера, например если мы заключим наш текст в рамку и запишем новый стиль так:

Листинг 9.2.

.pol1 { padding: 30px; border: 1 px solid black; }

Что мы записали? Эта запись означает - мы задали рамку черного цвета вокруг нашего абзаца с текстом толщиной в 1 px и задали отступ текста от рамки 30px со всех сторон.

Так же как и преведущее свойство margih , свойство padding: имеет варианты:

  • padding-left: - отступ слева;
  • padding-top: - отступ сверху;
  • padding-right: - отступ справа;
  • padding-bottom: - отступ снизу.

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

Раз уж мы заговорили о контейнерах, давайте вспомним, как можно задать контейнер с заданными размерами, например нам на web-странице нужно вставить рекламный блок заданной ширины (width) и высоты (height) . Создаем новый класс .pol2 и пишем код:

Листинг 9.3.

.po2 { widtg: 400px; height: 300px; border: 1 px solid black; }

Код записанный в листинге 9.3. означает, что мы заключили текст нашего абзаца в рамку фиксированных размеров шириной 400 px и высотой 300 px черного цвета, толщиной в 1 px.

Теперь давайте разберемся как нам выровнять только что созданный блок заключенный в рамку. Для этого существует атрибут float: - указывает браузеру, что элемент (в данном случае блок 400х300) является плавающим. Подругому можно сказать, что атрибут float - это аналог атрибута align т.е. выравнивание. Принимает два значения:

  • float: left; - выравнивание блока по левому краю, соотвественно текст будет "обтекать" рекламный блок справа;
  • float: right; - выравнивание блока по правому краю, текст будет "обтекать" рекламный слева.

Листинг 9.4.

.po2 { widtg: 400px; height: 300px; float: left; border: 1 px solid black; }

Выровняв наш рекламный блок таким образом, мы замечаем, что "обтекающий" текст "прилип" к рамке рекламного блока. Значит нужно задать отступ от рамки блока. Делается это с помощью уже знакомого атрибута margin-right: . Вот как выглядит листинг кода:

Листинг 9.5.

.po2 { widtg: 400px; height: 300px; float: left; border: 1 px solid black; margin-right: 20px; }

Здесь мы задали еще и отступ текста от плавающего объекта в 20 px.

 

На сегодня все , пробуйте и экспериментируйте и у Вас все получится.

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


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


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

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

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

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