русс | укр

Языки программирования

ПаскальСиАссемблерJavaMatlabPhpHtmlJavaScriptCSSC#DelphiТурбо Пролог

Компьютерные сетиСистемное программное обеспечениеИнформационные технологииПрограммирование

Все о программировании


Linux Unix Алгоритмические языки Аналоговые и гибридные вычислительные устройства Архитектура микроконтроллеров Введение в разработку распределенных информационных систем Введение в численные методы Дискретная математика Информационное обслуживание пользователей Информация и моделирование в управлении производством Компьютерная графика Математическое и компьютерное моделирование Моделирование Нейрокомпьютеры Проектирование программ диагностики компьютерных систем и сетей Проектирование системных программ Системы счисления Теория статистики Теория оптимизации Уроки AutoCAD 3D Уроки базы данных Access Уроки Orcad Цифровые автоматы Шпаргалки по компьютеру Шпаргалки по программированию Экспертные системы Элементы теории информации

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


Дата добавления: 2013-12-23; просмотров: 663; Нарушение авторских прав


Урок 10: Поля и заполнение

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

Урок 9: Боксовая модель

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

 

Эта иллюстрация может показаться слишком научной, поэтому попытаемся использовать эту модель на конкретном примере с заголовком и текстом. 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>

 

 

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

 

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

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

<% '

The properties which regulate the different boxes are: padding, margin and border. The next two lessons deal with exactly these three properties:

'

'

  • Lesson 10: The box model - margin & padding

'

  • Lesson 11: The box model - border

'

'

When you have finished these two lessons, you will master the box model and be able to layout your documents much finer and more precise than in the old fashion using tables in HTML.

%>

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

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

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



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

 

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

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

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

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

· Показать пример

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

body { margin: 100px 40px 10px 70px; } p { margin: 5px 50px 5px 50px; }

· Показать пример



<== предыдущая лекция | следующая лекция ==>
Идентификация элемента с помощью id | Примеры определения рамок


Карта сайта Карта сайта укр


Уроки php mysql Программирование

Онлайн система счисления Калькулятор онлайн обычный Инженерный калькулятор онлайн Замена русских букв на английские для вебмастеров Замена русских букв на английские

Аппаратное и программное обеспечение Графика и компьютерная сфера Интегрированная геоинформационная система Интернет Компьютер Комплектующие компьютера Лекции Методы и средства измерений неэлектрических величин Обслуживание компьютерных и периферийных устройств Операционные системы Параллельное программирование Проектирование электронных средств Периферийные устройства Полезные ресурсы для программистов Программы для программистов Статьи для программистов Cтруктура и организация данных


 


Полезен материал? Поделись:

Не нашли то, что искали? Google вам в помощь!

 
 

© life-prog.ru При использовании материалов прямая ссылка на сайт обязательна.

Генерация страницы за: 0.002 сек.