Inset Рамка отображается так, что весь блок кажется вдавленным

OUTSET Рамка отображается так, что весь блок кажется выпуклым

Примечание: минимальная ширина рамки типа double должна равняться 3 px, иначе она будет отображаться некорректно.

Примеры:

h1 {border-width: 4px;border-style: dotted;border-color: red}

p {border-width: 2px;border-style: solid;border-color: blue}

Сокращенная форма - border

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

h1 {border: 4px dotted red}

p {border: 2px solid blue}

Во всех перечисленных выше примерах, если добавить после слова border одно из ключевых слов (top, right, bottom, left) можно регулировать параметры рамки с разных сторон соответственно (верх, право, низ, лево). Ну вот например можно сделать так:

h1 {border-top-width: 30px;border-top-style:solid ;border-top-color: red;

border-right-width: 20px;border-right-style:dashed ;border-right-color: gold;

border-bottom-width: 10px;border-bottom-style:dashed;border-bottom-color: green;

border-left-width: 40px;border-left-style:solid ;border-left-color: blue;}

В сокращенном виде:

h1 {border-top: 30px solid red;

border-right: 20px dashed gold;

border-bottom: 10px dashed green;

border-left: 40px solid lue}

Можно также комбинировать перечисленные выше свойства:

h1 {border: 30px solid red;

border-bottom: 10px solid gold;}

Урок 11: Поля (margin) и отступы (padding)

MARGIN (Поля) - это расстояние от границы(рамки) блока, до ближайших элементов, или, если их нет, до краев документа.

PADDING (Отступы) - как бы внутреннее расcтояние, между границей(рамкой) и содержимым блока.

Создадим три стиля для трех разных параграфов, с различными значениями margin и padding:

.p1 {background-color : #FFE446; border:1px solid red; margin:70px}

.p2 {background-color : #FFE446; border:1px solid red; padding:70px}

.p3 {background-color : #FFE446; border:1px solid red; margin:50px; padding:20px}

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

p {margin-top:50px; margin-right:50px; margin-bottom:50px; margin-left:150px}

В сокращенной записи:

p {margin:50px; margin-left:150px}

Возможен также такой вариант записи:

p {margin: 50px 50px 50px 150px}

Т.е. значения записываются по часовой стрелке: верхнее, правое, нижнее, левое.

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

Урок 12: Высота(height) и ширина(width) блоков

По умолчанию высота и ширина блоков определяются автоматически по содержимому блока.

Можно задавать необходимую (фиксированнкю) ширину и высоту блоков.

HEIGHT - свойство устанавливающее высоту блока;

WIDTH - свойство устанавливающее ширину блока;

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

Я создал 4 класса, и поочередно присвоил их одному и тому же боксу (в данном случае DIV) с текстом. Смотрите что получилось.

.box1 {width: 300px; border: 1px solid red; background: #FFE446}

Как видите, ширина фиксированная и равна 300 пикселей, а высота устанавливается по умолчанию, в зависимости от содержимого.

.box2 {height: 300px; border: 1px solid red; background: #FFE446}

Теперь, фиксированная высота, а ширина растягивается по содержимому.

.box3 {width: 300px; height: 600px; border: 1px solid red; background: #FFE446}

Здесь фиксированная как высота, так и ширина.

В боксе с фиксированной шириной и высотой, если содержимое не влезает туда, то выходит за рамки блока.