О свойствах CSS


Вы хотите узнать больше о свойствах CSS.
В примерах этой главы используются популярные свойства, такие как color, font- famiiy, font-size и text-decoration. Свойства заключаются в фигурные скобки и сразу следом за свойствами располагаются их значения, как показано в следующей обобщенной синтаксической записи:
selector { property: value;
}
Реальный пример может выглядеть так:
li {
list-style-type: circle;
}
Каждый раз, когда в документе появляется элемент li, стандартный знак маркера в нем заменяется кружком.
Представление о блочной модели
Вы хотите лучше понять блочную или контейнерную модель и поведение окружающих информационный блок полей (margin), рамки (border) и отступов (padding).
У каждого элемента блочного уровня, такого как р или div, есть четыре края: верхний, правый, нижний и левый. Все эти стороны блочных элементов формируются из трех зон, окружающих информационное наполнение блока (рис. 2.20).
Таким образом, каждый блочный элемент состоит из четырех секций.
♦ Content (контент)— реальное информационное наполнение, такое как текст, изображения, апплеты на языке Java и другие объекты. Область контента находится в середине блока.
♦ Padding (отступ) — пробельная зона, которая окружает область контента.
♦ Border (рамка) — следующая наружная зона, окружающая зону отступа и формирующая рамку вокруг блока.
♦ Margin (поле)— зона, начинающаяся от края рамки и располагающаяся снаружи от нее.
По умолчанию величина поля (margin) равна 0, т. е. поле сливается с краем рамки. Рамка (border) со значением 0 совпадает с краем пробельной зоны или отступа.
Очевидно, что отступ (padding) со значением 0 выравнивается по контенту. Положительные значения расширяют блоки.

Для того чтобы представить себе блочную модель, мысленно нарисуйте картонную коробку, лежащую на полу.
Посмотрите на нее сверху и вы увидите ее четыре края: верхний, правый, нижний и левый. Коробка может быть большой или маленькой, т. к. вы можете изменять свойства height (высота) И width (ширина).
div { height: 150рх; width: 150рх;
}
Кладите в коробку книги до тех пор, пока всю ее не заполните книгами.
<div>
<li>Moby Dick</li>
<li>The red Badge of Courage</li>
<li>The Catcher in the Rye</li>
</div>
Для того чтобы легче было увидеть края коробки, обведите ее рамкой:
div {
border: thin solid #000000;
height: 150px; width: 150px;
}
 



Страница: 1 | 2


Правельные рецепты CSS