... главная страницаКарта сайтаКонтакты

Главная
Синтаксис CSS
Свойства CSS
Форматирование блоков
Списки
Пример применения стилей
Оптимизация стилей
Оформление текстов
Использование блоков
Позиционирование
Слои в CSS
Готовые решения
Дополнительные возможности CSS
Программа TopStyle
Таблица цветов

 

Все свойства CSS

 
Яндекс.Метрика
 
 

Использование блоков. Блоковая модель. (стр.3)

 

 

Блоковая модель ||  Модель визуального форматирования ||  Подключение таблиц стилей при помощи JavaScript
Управление видимостью блоков ||  Блоки и таблицы


Теперь внутрь этого блока поместим другой, для которого написано следующее правило:

Р{width:50%; border:1px dotted #336699}

<DIV ID="main_block">Содержимое главного блока #main_block
<Р>Параграф шириной 50% своего контейнера</Р>

Как видите, для вложенного абзаца не задано ни полей, ни отступов, только отображение границ синей пунктирной линией толщиной 1 пиксель, - чтобы можно было увидеть, где этот блок будет располагаться. В результате картина в окне браузера изменится.

Содержание главного блока #main_block

Параграф шириной 50% своего контейнера


Язык HTML не позволяет задать ширину и высоту блоков - блок всегда по ширине совпадает с размером контейнера. Например, мы не сможем при помощи HTML ограничить ширину абзаца, как только что сделали при помощи CSS-свойства width. Единственный способ ограничить абзац - это поместить его внутрь ячейки таблицы, поскольку для таблицы в HTML можно указать ширину.

Задание ширины в CSS и HTML
CSS HTML
Р{width:50%;}

<Р>Параграф шириной 50% от окна браузера.</Р>
<TABLE cellpadding="0" cellspacing="O" border="0" width="50%">
<TR>
<TD>
<Р>Параграф шириной 50% от окна браузера.</Р>
</TD>
</TR> </TABLE>


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

 

Блоковая модель ||  Модель визуального форматирования ||  Подключение таблиц стилей при помощи JavaScript
Управление видимостью блоков ||  Блоки и таблицы

 

Страница: - 1 - | - 2 - | - 3 - | - 4 - | - 5 - | - 6 - | - 7 - | - 8 -

 

Наверх страницы

 

Уроки CSS © 2007 - 2018 г. Все права защищены