«Единственный способ творить великие дела – это любить то, что ты делаешь»
CSS
site.komp36.ru Создание сайтов. Твой сайт фотографа Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Продающий лендинг «Установка и продажа окон» Установка и продажа окон, установка дверей, перегородок. Одностраничный продающий сайт. Заявки прямо с сайта
site.komp36.ru Универсальный лендинг. Любая тема сайта - 4900 руб. Лендинг адаптируется под любую тему: ремонт, отделка, продажа окон, дверей, лестниц, мебели и многое другое
site.komp36.ru Создание сайтов. Сайт сервисного центра. Сайт компании. Новости и отзывы. Несколько прайс-листов – под каждый отдельная страница. Возможность размещения статей


Далее на странице...

В HTML большинство тегов можно отнести к двум основным группам - блочные элементы и строчные элементы.

Блочными являются такие теги как <h1><h6>, <p>, <table> и другие. Блочные элементы представляют собой как бы отдельную структурную единицу – блок, выделенный абзацем и имеющий границы. Нельзя расположить два блочных элемента на одной строке. Блоки следуют один под другим.

Что касается строчных элементов, то их можно располагать на одной строке и, естественно, внутри блока. Строчные элементы не отделяются от остального содержимого страницы абзацами. Это такие теги как <strong>, <em>, <img> и другие.

Выше говорилось о том, что блоки располагаются друг под другом. Существуют также вложенные блоки, расположенные внутри других: например абзацы, представленные тегом <p>, могут располагаться внутри контейнера <div>. Но и те, и другие имеют одинаковою структуру.



Структура блока

Блоковая модель в CSS

Мы говорим о блоковой модели в CSS, так как именно свойства CSS позволяют определить и задать все параметры блока, чего нельзя сделать средствами языка HTML.

Итак, любой блок имеет форму прямоугольника.

Каждый блок имеет границу и содержимое: это может быть текстовая информация, фотографии, логотип фирмы и т.п., называемое контентом (англ. content — содержание).

Границе блока при помощи свойства border можно придать необходимое оформление: задать толщину, цвет и стиль линий. По умолчанию граница невидима.

Между содержимым и границей существуют внутренние расстояния - поля (свойство padding). Ими необязательно пользоваться. То есть если их явно не установить при помощи свойства padding, то граница будет вплотную примыкать к содержимому блока, либо отстоять от него на каком-то минимальном расстоянии. С другой стороны, поля могут иметь совершенно конкретные размеры, которые указывает разработчик.

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

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

Фрагмент кода

<div style="border:#CC0066 solid 2px; width:700px;">

<div style="border:
#009999 solid 1px;"> Для вложенного блока не заданы поля и отступы.</div>
<div style="border:
#009999 solid 1px; padding:5px;"> Вложенный блок с полями 5 пикселей. </div>
<div style="border:
#009999 solid 1px; padding:5px; margin:5px;"> Для вложенного блока заданы поля и отступы шириной 10 пикселей.</div>

</div>

<div style="border:
#3399CC dotted 3px; width:400px; margin-top:25px; padding:5px;">
Предыдущий блок имеет вложенные блоки. Это - нет. Для него установлены поля 5 пикселей и верхний отступ 25 пикселей!
</div>

Результат

site.komp36.ruТвой сайт фотографа. Создание сайтов Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Акция Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Акция Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта

CSS по шагам
Тематические публикации
site.komp36.ru Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта

Все cвойства CSS
Тематические публикации
site.komp36.ru Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта