Задание на лабораторный практикум 2 (стр. 4 )

Зона padding окружает зону content. Данная зона используется для задания величины отступа содержимого элемента (зона content) от его границы (зона border). Зона может быть разбита на четыре части, которые могут оформляться независимо от друг друга: padding-top, padding-right, padding-bottom, padding-left.

Зона border окружает зону padding. Данная зона позволяет задать элементу границу произвольной ширины, стиля и цвета. Зона может быть разбита на: border-top, border-right, border-bottom, border-left.

Зона margin окружает зону border. Данная зона позволяет задать величину внешнего отступа данного элемента от окружающих. Зона может быть разбита на: margin-top, margin-right, margin-bottom, margin-left.

Пример использования блоковой модели

Пример

.ex1

{

border:10px red solid;

margin-left:50px;

margin-right:10px;

padding:15px;

}

.ex2

{

border:5px brown solid;

margin-top:30px;

margin-left:250px;

margin-right:70px;

padding:15px;

}

Правильное задание ширины и высоты элемента

Свойства width и height устанавливают ширину и высоту только блока content, а не элемента целиком.

Итоговый размер элемента помимо размеров content будет включать в себя еще и размеры padding, border и margin.

Пример

.ex1

{

width:400px;

}

.ex2

{

width:250px;

padding-left:85px;

padding-right:85px;

border-left:5px brown solid;

border-right:5px brown solid;

}

Стиль границ

CSS свойство border-style позволяет установить стиль для границ HTML элемента.

Значения для установки стилей границ:

solid границы будут нарисованы сплошной линией; dashed границы будут нарисованы пунктирной линией; dotted границы будут нарисованы точками; double границы будут нарисованы двойной сплошной линией.

Пример

.bor1

{

border-style:solid;

}

.bor2

{

border-style:dashed;

}

.bor3

{

border-style:dotted;

}

Обратите внимание: по умолчанию граница элементов всегда невидима (значение none).

Цвет границы

С помощью CSS свойства border-color Вы можете задать цвет границы HTML элемента.

Цвет может быть задан следующими способами:

С помощью имени (например 'red' задаст красный цвет); С помощью RGB значения (например 'rgb(255,255,255)' задаст белый цвет); С помощью шестнадцатеричного значения (например '#00ff00' задаст зеленый цвет).

Пример

.bor1

{

border-style:solid;

border-color:red;

}

.bor2

{

border-style:solid;

border-color:green;

}

.bor3

{

border-style:solid;

border-color:blue;

}

Толщина границы

С помощью CSS свойства border-width Вы можете задать толщину границы HTML элемента.

Толщина может быть указана либо в пикселях, либо с помощью предопределенных значений: thin, medium, thick (тонкая, средняя, толстая).

Пример

.bor1

{

border-style:solid;

border-width:4px;

}

.bor2

{

border-style:solid;

border-width:2px;

}

.bor3

{

border-style:solid;

border-width:thin;

}

Задание стилей для отдельных сторон

Рассмотренные ранее свойства могут также применяться к отдельным сторонам границы. Их названия перечислены на рисунке ниже:

Пример

.bor1

{

border-top-style:solid;

border-width:2px;

}

.bor2

{

border-bottom-style:solid;

border-width:2px;

}

.bor3

{

border-left-style:solid;

border-right-style:solid;

border-width:2px;

}

Существует способ быстрого задания стилей границ. Например в результате применения border-style:dashed double solid groove; К верхней границе будет применено dashed, к правой double, к нижней solid, а к левой groove.

Если Вы укажете только два значения, например border-style:dashed double, то верхняя и нижняя граница будут оформлены как dashed, а левая и правая граница будут оформлены как double.

Стенографическое задание свойств

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

Стенографическая форма записи объединяет все свойства оформления границ в одном свойстве border.

Пример

/* Вокруг элемента с классом bor1 будет отображена сплошная граница зеленого цвета,

толщиной 2 пикселя */

.bor1

{

border:2px solid green;

}

Порядок следования свойств в стенографической форме записи:

border-width border-style border-color

Обратите внимание: Вы можете пропускать неиспользуемые свойства.

Пример

/* Вокруг элемента с классом bor1 будет отображена сплошная граница толщиной

1 пиксель */

.bor1

{

border:1px solid;

}

Внешняя граница

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

Пример

.out1

{

outline-style:dashed; /* определяет стиль внешней границы */

outline-color:green; /* определяет цвет внешней границы */

outline-width:4px; /* определяет ширину внешней границы */

border-style:solid;

}

CSS Padding

В CSS существует два вида отступов: внутренние и внешние.

Внутренний отступ - это расстояние между содержимым элемента и его границей. Внешний отступ - это расстояние отступаемое с внешней стороны границы элемента.

Величина отступов может определяться в пикселях (px), сантиметрах (cm), процентах (%), em.

CSS свойство padding позволяет установить величину внутреннего отступа.

Пример

.pad1

{

border-style:solid;

padding:20px;

}

.pad2

{

border-style:solid;

padding:10px;

}

.pad3

{

border-style:solid;

padding:5px;

}

Величина отступа может быть независимо определена для каждой стороны элемента:

Пример

/* Отступ от содержимого элемента до его верхней границы равен 30, до левой 20, до

нижней 10 и до правой 40 пикс. */

.pad1

{

padding-top:30px;

padding-left:20px;

padding-bottom:10px;

padding-right:40px;

}

CSS Margin

С помощью CSS свойства margin Вы можете задать величину внешнего отступа.

Пример

.mar1

{

margin:25px;

}

.mar2

{

margin:10px;

}

.mar3

{

margin:5px;

}

Величина внешнего отступа также может быть задана отдельно для каждой стороны элемента:

Пример

/* Отступ с верхней стороны элемента равен 20, снизу 40, слева 70, а справа

10 пикселям */

.mar1

{

margin-top:20px;

margin-bottom:40px;

margin-left:70px;

margin-right:10px;

}

Краткая форма записи

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

Пример

/* Отступ от содержимого до границы элемента сверху будет равен 60, справа 20,

снизу 40, а слева 50 пикселям */

.pad1

{

border:2px solid;

padding:60px 20px 40px 50px;

}

/* Отступ от содержимого до границы элемента сверху будет равен 40, слева и

справа 30, а снизу 10 */

.pad2

{

border:2px solid;

padding:40px 30px 10px;

}

/* Отступ от содержимого до границы элемента сверху и снизу будет равен 40,

а слева и справа 30 */

.pad3

{

border:2px solid;

padding:40px 30px;

}

Краткая форма записи может также использоваться с внешними отступами:

Пример

/* Внешний отступ сверху элемента будет равен 50, справа 20, снизу 40 и слева 50

пикселям */

.mar1

{

margin:50px 20px 40px 50px;

}

/* Внешний отступ сверху элемента будет равен 30, слева и справа 40, а снизу 50

пикселям */

.mar2

{

margin:30px 40px 50px;

}

/* Внешний отступ сверху и снизу элемента будет равен 30, а слева и справа 50

пикселям */

.mar3

{

margin:30px 50px;

}

Скрытие элементов в CSS

В CSS скрыть элементы можно двумя способами:

С помощью свойства visibility:hidden; С помощью display:none.

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

Пример

/* Абзац стал невидим, но все еще занимает место на странице */

p. dis1

{

visibility:hidden;

}

Второй способ позволяет полностью скрыть элемент, чтобы он больше не занимал места на странице.

Пример

/* Абзац стал невидим и не занимает места */

p. dis1

{

display:none;

}

Блочные и строковые элементы в CSS

В CSS встречаются два типа элементов по способу отображения:

Блочные элементы полностью занимают всю ширину их родительского элемента. Примеры блочных элементов: p, h1-h6, div. Строковые элементы занимают только необходимую им ширину. Примеры строковых элементов: a, span.

С помощью CSS Вы можете изменять способ отображения элементов. В следующем примере элемент p отображен как строковый:

Пример

/* Превратим блочный элемент p в строковый */

#dis1

{

display:inline;

}

Также Вы можете отображать строковые элементы как блочные:

Пример

/* Превратим строковый элемент a в блочный */

a. dis1

{

display:block;

}

Размещение элементов

С помощью свойств позиционирования Вы можете размещать элементы где пожелаете.

Пример

#pos1

{

position:absolute;

top:10px;

left:200px;

}

#pos2

{

position:absolute;

top:1px;

left:0px;

}

#pos3

{

position:absolute;

top:100px;

right:70px;

}

Попробовать в редакторе

Местоположение элементов задается с помощью следующих CSS свойств:

top - устанавливает величину смещения текущего элемента от верхнего края родительского элемента; bottom - устанавливает величину смещения текущего элемента от нижнего края родительского элемента; left - устанавливает величину смещения текущего элемента от левого края родительского элемента; right - устанавливает величину смещения текущего элемента от правого края родительского элемента.

Описанные выше свойства не вступят в силу пока Вы не зададите способ размещения. Также способ размещения определяет поведение данных свойств.