Полезное в сети
Всегда в теме
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Свежий софт
| Wrecker |  |
| Kaspersky Internet Security 2015 | |
| Wrecker |  |
| Virtual DJ | |
| Wrecker |  |
| SoundForge 11 | |
| Wrecker |  |
| Alcohol 120 | |
| Wrecker |  |
| Norton Internet Security 2014 | |
| Iron |  |
| Loaris Trojan Remover | |
Рекомендуем
| Главная » Статьи » Образовательные » Программирование |
Как работает 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. | |
| Просмотров: 1468 | Рейтинг: 0.0/0 |
| Всего комментариев: 0 | |
