Полезное в сети

Всегда в теме

Статистика


Яндекс.Метрика


Онлайн всего: 1
Гостей: 1
Пользователей: 0

Рекомендуем



Главная » Статьи » Образовательные » Программирование

Как работает CSS?(часть 4 Боксовая модель, Поля и заполнение)
Боксовая модель

Боксовая модель в CSS описывает боксы, генерируемые для HTML-элементов. Боксовая модель также имеет детальные опции
для определения полей, рамок, заполнения и содержимого каждого элемента. На диаграмме далее показано, как построена
боксовая модель:

Боксовая модель в CSS


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

<h1>Article 1:</h1>

<p>All human beings are born free
и equal in dignity и rights.
They are endowed with reason и conscience
и should act towards one another in a
spirit of brotherhood</p>

Добавив цвет и информацию шрифта этот пример можно представить так:


В этом примере - два элемента :
и
. Боксовая модель этих элементов выглядит так:



Хотя это может показаться немного сложным, тем не менее, видно, что каждый HTML-элемент окружён боксом.
Боксом, который можно настроить с помощью CSS.

Поля и заполнение

В предыдущем уроке мы рассмотрели боксовую модель. В этом уроке объясним, как можно изменять представление элементов
свойствами margin и padding.

Установим поля элемента

У элемента есть четыре стороны: right, left, top и bottom. Поля margin это расстояние от каждой
стороны с до соседних элементов (или краёв документа). См. также диаграмму в Уроке 9.

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


CSS-код для этого примера выглядит так:

body {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}

Или вы можете написать более элегантно:

body {
margin: 100px 40px 10px 70px;
}

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

body {
margin: 100px 40px 10px 70px;
}

p {
margin: 5px 50px 5px 50px;
}
Установим заполнение элемента

Заполнение не влияет на расстояние элемента до других элементов, а лишь определяет внутреннее расстояние между рамкой
и содержимым элемента.

Использование заполнения/padding можно показать на простом примере, где все заголовки имеют цветной фон:

h1 {
background: yellow;
}

h2 {
background: orange;
}

Определяя заполнение для заголовков, вы устанавливаете величину поля вокруг текста каждого заголовка:

h1 {
background: yellow;
padding: 20px 20px 20px 80px;
}

h2 {
background: orange;
padding-left:120px;
}

Рамки

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

Толщина рамки [border-width]

Толщина рамки определяется свойством border-width, которое может иметь значения thin, medium и thick,
или числовое значение в пикселах. На рисунке показана эта система:



Цвет рамки [border-color]

Свойство border-color определяет цвет рамки. Значения - нормальные значения цвета, например:
"#123456", "rgb(123,123,123)" или "yellow".
Типы рамок [border-style]

Существуют различные типы рамок. Ниже показаны восемь типов рамки и их интерпретация в Internet Explorer 5.5.
Все примеры показаны цветом "gold" и толщиной "thick", но могут, естественно, выводиться другим цветом и толщиной.

Значения none или hidden могут использоваться, если вы не хотите отображать рамку.

Примеры определения рамок

Три рассмотренных выше свойства можно объединить в каждом элементе и, соответственно, устанавливать разные рамки.
Для иллюстрации взглянем на документ, где определены разные рамки для
,
,
и
.

Результат, может быть, не столь впечатляющ, но он демонстрирует некоторые возможности:

h1 {
border-width: thick;
border-style: dotted;
border-color: gold;
}

h2 {
border-width: 20px;
border-style: outset;
border-color: red;
}

p {
border-width: 1px;
border-style: dashed;
border-color: blue;
}

ul {
border-width: thin;
border-style: solid;
border-color: orange;
}

Можно также установить специальные свойства для верхнего, нижнего, правого и левого края рамки. Вот как это делается:

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

border-bottom-width: thick;
border-bottom-style: solid;
border-bottom-color: blue;

border-right-width: thick;
border-right-style: solid;
border-right-color: green;

border-left-width: thick;
border-left-style: solid;
border-left-color: orange;
}

Сокращённая запись [border]

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

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

можно объединить в:

p {
border: 1px solid blue;
}

Высота и ширина

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

Установка ширины [width]

Свойством width вы можете определять ширину элемента.

В примере показан бокс для ввода текста:

div.box {
width: 200px;
border: 1px solid black;
background: orange;
}

Установка высоты [height]

Обратите внимание, как, в предыдущем примере, высота бокса устанавливается содержимым этого бокса.
Высоту элемента можно определить свойством height. В качестве примера попытаемся создать бокс высотой 500px:

div.box {
height: 500px;
width: 200px;
border: 1px solid black;
background: orange;
}

Резюме
Уроки 9, 10, 11 и 12 дали введение в боксовую модель CSS. Как вы, вероятно, заметили, боксовая модель предоставляет
много новых возможностей. Ранее вы уже могли использовать таблицы в HTML для дизайна страниц, но с помощью CSS и
боксовой модели вы сможете создавать элегантный дизайн более точно и в соответствии с рекомендациями W3C.
Категория: Программирование | Добавил: Wrecker (18.05.2012)
Просмотров: 1098 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Поиск

Вход

Гость
  • Вход
  • Регистрация
  • Читаемое

    Заходи не жди