GetInfo.Ru – Компьютерная библиотека
Последние поступления
Как выбрать систему управления базы данных
Базы данных03/09/14
Этапы загрузки UNIX (в схеме)
Unix27/03/12
Gatewall Antispam: тотальный контроль электронной почты
Спам21/04/11
Мастер-класс: создаем Интернет-магазин (Часть 1)
Обзоры ПО20/04/11
CorelDRAW Graphics Suite X5: Что нового?
Обзоры ПО20/07/10
Добавить статью
Самые читаемые материалы
Динамическое изменение цвета фона ячеек(27884)
Основы работы со слоями(16179)
Единицы измерения CSS(13242)
Шрифты и CSS(10847)
Использование CSS для блочных элементов(10112)
Всего статей: 793Всего авторов: 364Подразделов: 47Добавлено за сутки: 0
Статьи  СТАТЬИ Форум  ФОРУМ Рейтинг  РЕЙТИНГ Поиск  ПОИСК Контакты  КОНТАКТЫ
» Главная » CSS/DHTML » Использование CSS для блочных элементов

Использование CSS для блочных элементов


Дмитрий Бабанов
trogo@mail.ru

Коротко о CSS
Как известно, CSS (Cascading Style Sheets) - это стандарт переопределения стилевых шаблонов для элементов HTML-страниц. С помощью различных средств CSS (селекторы классов и идентификаторов, псевдоклассы и пр.) стандартный вид электронного документа можно легко превратить в привлекательную и стильную страницу.

Подводные камни HTML
Каждый, кто хоть однажды создавал электронные документы средствами HTML, знает, что использование этого языка разметки сопряжено с рядом трудностей и невидимых невооруженным взглядом "подводных камней", неминуемо возникающих в процессе верстки. В итоге приходится прибегать к чрезвычайно сложным и порой изощренным способам, дабы получить примерно одинаковый результат вывода информации на экран монитора разными браузерами.

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

Непокорная форма
Все наверняка встречались с ситуацией, когда внутренняя структура веб-сайта содержит такой элемент, как пользовательская форма. Ее размещение на странице, что называется, "as is" ("как есть") может привести к весьма плачевным изменениям в структуре макета, ибо тег-контейнер <FORM> по умолчанию создает отступы определенных размеров вокруг содержимого формы.

Вывод HTML-формы со значением отступов по умолчанию

Опишу на примере конкретную ситуацию, с которой мне неоднократно приходилось сталкиваться на практике. Пользовательская форма размещается в "шапке" сайта, которая имеет довольно сложную структуру и содержит непростой background, вследствие чего различные браузеры варьируют размер "шапки" по вертикали совершенно по-разному. Соответственно, задний фон (background) отображается совсем не так, как хочется HTML-верстальщику

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

На самом деле эту проблему можно легко решить с помощью задания основных свойств CSS. Как известно, тег-контейнер <FORM> является блочным элементом HTML. Соответственно, с помощью такого свойства CSS, как margin, возможно самостоятельно определять размеры отступов от края формы:

<FORM STYLE="margin: 0px 0px 0px 0px">
Содержимое формы...
</FORM>

В данном случае мы установили отступ, равный 0, от всех краев формы (порядок определения отступов следующий: верх, право, низ, лево).

Вывод HTML-формы со значением отступов, равным нулю

Помимо этого, с помощью каскадных таблиц стилей CSS мы можем описывать такие свойтва блочных элементов, как:

  • поле справа
  • поле слева
  • поле сверху
  • поле снизу
  • отступы внутри элемента
  • отступ первой строки
  • цвет заднего фона
  • изображение заднего фона
  • ширина элемента и т.д.

Работаем с параграфами
Также стоит выделить отдельно такое свойство блочных элементов, как ширина элемента. С помощью данного свойства можно создавать самые разнообразные эффекты отображения стандартных HTML-элементов без всяких на то усилий и долгих утомительных корректировок кода или использования сложных вложенных таблиц. Достаточно будет использовать элемент параграфа <P> и описать его размеры с помощью CSS.

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

<P STYLE="width: 300px; background-color: #CECECE;">
Пример текстового блока фиксированной ширины.
</P>

Как видно из примера, текст внутри параграфа расположился слишком близко к краям, что выглядит несколько неаккуратно и непрезентабельно. Подобная трудность при использовании таблицы компенсируется с помощью определения нужных значений атрибутов CELLSPACING и CELLPADDING. Средства CSS позволяют и в этом случае обойтись без таблиц:

Текстовый блок со значением отступа по умолчанию

<P STYLE="width: 300px; background-color: #CECECE; padding: 10px;">
Пример текстового блока фиксированной ширины с заданным отступом от всех краев.
</P>

Текстовый блок с заданным одинаковым значением отступа

Если нам необходимо задать разные значения конкретных полей отступа, придется использовать несколько иную конструкцию, которая, к сожалению, может отображаться не всегда корректно во всех популярных браузерах:

<P STYLE="width: 300px; background-color: #CECECE; padding-left: 5px; padding-right: 10px; padding-top: 15px; padding-bottom: 20px;">
Пример текстового блока фиксированной ширины с заданным отступом от всех краев.
</P>

Текстовый блок с необходимым значением отступа с каждой стороны

 
02.12.2004
Версия для печати Версия для печати Запомнить ссылку Запомнить ссылку
Ваша оценка:  1   2   3   4   5     

 О проектеПерепечаткаАвторамПартнерыО нас пишут
Наверх
©2003—2007. GETINFO.RU. ВСЕ ПРАВА ЗАЩИЩЕНЫ.