|
|
|
|
Урок 9. Отступы (поля) вокруг объектов в CSS. Автор: Андрей Краснокутский Дата: 2009-04-22 Сегодня используя стили CSS мы научимся делать поля и отступы вокруг объектов. Что мы будем называть объектами? Объектами или как иногда говорят контейнерами можно назвать все что угодно - это может буть абзац с текстом, картинка (графический файл), таблица, строка в таблице и т.д. Т.е. - это абсолютно любой элемент оформления на web-странице. Давайте для простоты определимся, что у нас объектом - будет абзац с текстом заключенным в теги <p> </p>. Создаем новый класс например .pol , и в фигурных {} скобках начинаем писать код стиля. Первое свойство: margin: 60px; - задает отступ со всех сторон вокруг абзаца (контейнера) в 60 px , естественно 60 px - взято для примера эта цифра может быть любая которая Вам больше подходит в каждом конкретном случае. Есть и варианты, а именно:
Естественно можно применять эти значения в любом сочетании, например задать отступ слева и снизу (прописав в стиле значения margin-left: и margin-bottom:) или только сверху (margin-top:) и т.д. Еще свойство margih может принимать значение auto , которой прописывается так: Листинг 9.1.
Что мы записали? Эта запись означает: Отступ сверху по умолчанию (как задано во всем тексте), а совсех остальных сторон отступ 60px , все очень просто. Следующее свойство padding: Это свойство можно условно отнести к внутренним отступам, это свойство задает отступы внутри контейнера, например если мы заключим наш текст в рамку и запишем новый стиль так: Листинг 9.2.
Что мы записали? Эта запись означает - мы задали рамку черного цвета вокруг нашего абзаца с текстом толщиной в 1 px и задали отступ текста от рамки 30px со всех сторон. Так же как и преведущее свойство margih , свойство padding: имеет варианты:
Напоминаю что все эти свойство задают отступ внутри контейнера (от рамки до текста в нашем случае) применять их можно так же, по отдельности или в любых сочетаниях. Раз уж мы заговорили о контейнерах, давайте вспомним, как можно задать контейнер с заданными размерами, например нам на web-странице нужно вставить рекламный блок заданной ширины (width) и высоты (height) . Создаем новый класс .pol2 и пишем код: Листинг 9.3.
Код записанный в листинге 9.3. означает, что мы заключили текст нашего абзаца в рамку фиксированных размеров шириной 400 px и высотой 300 px черного цвета, толщиной в 1 px. Теперь давайте разберемся как нам выровнять только что созданный блок заключенный в рамку. Для этого существует атрибут float: - указывает браузеру, что элемент (в данном случае блок 400х300) является плавающим. Подругому можно сказать, что атрибут float - это аналог атрибута align т.е. выравнивание. Принимает два значения:
Листинг 9.4.
Выровняв наш рекламный блок таким образом, мы замечаем, что "обтекающий" текст "прилип" к рамке рекламного блока. Значит нужно задать отступ от рамки блока. Делается это с помощью уже знакомого атрибута margin-right: . Вот как выглядит листинг кода: Листинг 9.5.
Здесь мы задали еще и отступ текста от плавающего объекта в 20 px.
На сегодня все , пробуйте и экспериментируйте и у Вас все получится. Просмотров: 14548 Поделитесь этой информацией со своими друзьями! Комментарии к этой статье (уроку): Добавить Ваш комментарий: |
Новости сайта Домены 
Google Adsense |
Навигация
Видео Курсы
Последние заметки
Новости сайта
Архив 2016 год: 2015 год: 2014 год: 2013 год: 2012 год: 2011 год: 2010 год: 2009 год: 2008 год: Сайты друзей Наши ссылки
Если Вам понравился  Наши Аттестаты
|
|
Разрешается полное или частичное копирование материалов сайта с обязательным |