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

Блоки в CSS представляют собой самостоятельную структурную единицу, имеющую форму прямоугольника. Каждый элемент в дереве элементов документа - самостоятельный блок. В CSS есть блоки, которые структурно отделены от остальных, а есть строчные блоки, которые могут находиться внутри структурных блоков. Но и те, и другие имеют одинаковую структуру:

  Каждый такой блок обязательно имеет информационную часть, или содержимое, которым может быть текст, изображение или другая информация. Эта часть блока называется его контентом или содержимым. Например, для элемента P содержимым блока является текст абзаца.

Вокруг области контента могут быть пустые, не занятые содержимым области, называемые полями (margin).

Непосредственно за полями проходит граница блока (border), которая может иметь определенную толщину и стиль линий. Ширина блока может быть произвольной - от нулевой (граница в этом случае не видна) до произвольно заданной в единицах измерениях длины. Стиль линий может быть различным, от простой линии до объемных вариантов. Кроме того, граница может иметь произвольный цвет.

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

Рамки в css

Основные свойства рамок в CSS следующие:

С войство BORDER-WIDTH. Это свойство задает толщину рамки. Значение обычно указывается в пикселях, но также можно указывать ключевыми словами thin (2px) , medium(4px) и thick(6px).

На рисунке приведены значения ширины от 1 до 10 пикселей.

Свойство BORDER-COLOR. Определяет цвет рамки. Значение цвета задается обычным образом, например: "#ff3344", или "gold".

Свойство BORDER-STYLE. Определяет вид рамки. Ниже приведены 8 основных значений данного свойства. Все рамки в примере выполнены цветом gold и шириной 6 px

ЗАДАНИЕ: Для создания стиля страниц используйте возможности CSS, выполните следующие задания:

1 задание.      Выполните подготовительную работу: создав 3 страницы, для каждой из которых задайте свой цвет фона,  заголовок 1 уровня «Страница №…» и произвольный рисунок, сохраните страницы под именами str1.html,  str2.html,  str3.html.

2 задание.      Создайте страницу, состоящую из 3 равных вертикальных областей. В каждой из которых отобразите соответственно содержимое 1, 2 и 3 страниц. Задайте ширину и цвет границ блоков по желанию. Сохраните ее под именем vert.html.

3 задание.      Измените страницу, заменив вертикальное деление на горизонтальное. Уберите ширину ицвет границ блоков. В первом блоке установите запрет на изменение его размера. Сохраните HTML-документ под именем gor.html.

Практическое занятие № 13 Позиционирование блоков web-сайта..

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

Коды формируемых профессиональных компетенций: ПК 1.1–1.5, ПК 3.3

Технология выполнеия задания

Технология CSS позволяет размещать что угодно, там где Вам угодно. Нужно просто указать координаты блока и все. Под блоком мы понимаем не только <div>, но и заголовки, параграфы, рисунки, списки, в общем все, что является блоковой моделью. Это помогает создать действительно прикольный, уникальный дизайн.

Рассмотрим две основные модели позиционирования:

Абсолютное позиционирование (POSITION:ABSOLUTE;)

Обычно для позиционирования применяют именно этот тип. В технологии CSS, свойство позиционирования обозначается как POSITION, а чтобы указать , что это позиционирование абсолютное, пишут значение ABSOLUTE. Затем используя ключевые слова top, right,bottom,left указывают необходимые координаты, которые отсчитываются от краев окна браузера.

Посмотрите на рисунок ниже.

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

З адание 1: Рассмотрим, обычный документ с одним изображением, и обтекающим его текстом.

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

.smile{

border: 1px solid red;

position:absolute;

top:100px;

right:100px;

}

Применяем класс к изображению в HTML, пишем <img class="smile"> .Получим:

<html> <head> <META NAME="ROBOTS" CONTENT="NOINDEX"> <title>Блоковая модель</title> <link href="style13.css" rel="stylesheet" type="text/css"> </head> <body> <p>If you're like the vast majority… </p> <p align="left"> <img src="smile.png" width="270" height="243" align="left" class="smile">If you're like … <div></div> </body> </html>

Задание 2: Опишите и сравните следующие примеры стиля в созданной ранее странице:

.smile{position: absolute; bottom:300px; left:100px;}

.smile{position: absolute; bottom:300px; left:100px; }

.smile{position:absolute; bottom:300px; left:100px; }

Задание 3: Если необходимо зафиксировать блок, т.е. чтобы он не прокручивался вместе с основным содержимым, т.е. не скролился, то необходимо указать значение FIXED. Создайте следующий стиль:

.smile{ position:fixed; bottom:300px; left:100px; }

Относительное позиционирование (POSITION:RELATIVE; )

П ри относительном позиционировании, бокс смещается, но его прежнее место ничего не заполняет. Обозначается в как POSITION: RELATIVE;

Координаты в отличие от абсолютного позиционирования, отсчитываются от прежнего положения блока.

Задание 4: Рассмотрим пример простого документа с текстом и рисунком (см. рисунок слева).

А вот пример, как будет выглядеть этот же документ, если изображение спозиционировать относительно, используя следующий Css код:

.smile{ border:1px solid red; position:relative; top:200px; left:100px;}