Блочная (css) верстка - введение

Блочная (css) верстка пришла на смену гораздо менее удобной табличной. Суть - содержимое сайта разбивается на блоки, блокам задаются различные стили, параметры, для чего используются каскадные таблицы стилей (css) - отдельный файл с соответствующим расширением. Можно задавать так же в теге <head>, или прописывать для каждого элемента в отдельности.. Однако вариант с использованием отдельного файла наиболее предпочтителен так как значительно уменьшает размер страницы в сравнении с другими способами.

К примеру, 4 блока - прямоугольники, два из них (2 и 3) расположены внутри первого (1), еще один блок (4) - внутри блока 2:

<div>1

<div>2<div>4</div></div>

<div>3</div>

</div>

Для наглядности выделил блоки.

Что бы расположить изменить расположение и внешний вид блоков, им присваиваются различные стили (свойства) - отступы, поля, границы, размеры, выравнивание и др. Для начала присвою блоку 2 стили непосредственно внутри тега:

 

<div>1

<div style="float:left; padding-top:20px; padding-right:25px; padding-bottom:20px; padding-left:25px; margin-top:20px; margin-right:25px; margin-bottom:20px; margin-left:25px; border:1px solid; background:#D6E9C6">2<div>4</div></div>

<div>3</div>

</div>

Здесь были заданы отступы (margin), поля (padding), выравнивание (float), границы (border), фон (background). В итоге получим примерно следующее:

Такой вариант является крайне неудобным, так как у нас может быть много страниц с блоком, имеющим подобное оформление, более того на каждой странице их может быть несколько, а значит необходимо стили вынести отдельно, присвоив блокам идентификаторы, либо классы. Если блоки с определенными стилями будут присутствовать только на одной странице, можно воспользоваться тегом <style></style>, в остальных случаях все выносится в отдельный файл. 

В примере вынесу стили в отдельный тег, блоку 2 присвою идентификатор:

<style>

#block {float:left; padding-top:20px; padding-right:25px; padding-bottom:20px; padding-left:25px; margin-top:20px; margin-right:25px; margin-bottom:20px; margin-left:25px; border:1px solid; background:#D6E9C6}

</style>

 

<div>1

<div id="block">2<div>4</div></div>

<div>3</div>

</div>

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

Комментарии (0)