12789

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

Практическая работа

Информатика, кибернетика и программирование

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

Русский

2013-05-03

13.38 KB

2 чел.

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

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

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

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

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

В качестве первого примера мы разберёмся, как определить поля самогó документа, т. е. элемента <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;

}

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

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

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

h1 {

background: yellow;

}

h2 {

background: orange;

}

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

 Задание: определяя заполнение для заголовков, вы устанавливаете величину поля вокруг текста каждого заголовка (сделать самостоятельно и сравнить с предыдущим примером):

h1 {

background: yellow;

padding: 20px 20px 20px 80px;

}

h2 {

background: orange;

padding-left:120px;

}

Резюме

Вам остался один шаг до создания боксовой модели в CSS. В следующем уроке мы рассмотрим, как устанавливать рамки разного цвета и как очерчивать элементы.

К началу


 

А также другие работы, которые могут Вас заинтересовать

80232. Системи мультимедіа 543.5 KB
  Цифровий відеозапис забезпечує помітно кращу якість кадру, чіткіше зображення і кращу передачу кольорів. Більш того, цифрову копію відеофільму не відрізниш від оригіналу, що робить редагування і обробку зображення, навіть на рівні любителя, значно простіше, а якість - вищим в порівнянні з аналоговою відеотехнологією.
80233. Планування в організації 13.07 MB
  Планування в організації. Сутність планування як функції управління Щоб спільні зусилля співробітників організації були успішними вони повинні знати що від них очікується. Для цього необхідно: сформулювати цілі до яких прагне організація; визначити шляхи досягнення встановлених цілей; на підставі цього поставити задачі перед підрозділами організації та конкретними виконавцями. Планування процес визначення цілей організації та прийняття рішень щодо шляхів їх досягнення.
80234. Командні ролі 42 KB
  Командні ролі описують типову схему конструктивної поведінки людини в команді. Не слід плутати командні ролі з типом особи, під яким розуміють переважний спосіб взаємодії з навколишнім світом або спрямованість психологічної енергії. Командна роль, яку людина переймає на себе часто залежить від складу і стану команди
80235. Мотивація. Процесні теорії мотивації 10.37 MB
  Потреби поділяють на: потреби першого роду первісні які за своєю сутністю є фізіологічними потреби в їжі сні тощо; потреби другого роду вторинні які носять соціально психологічний характер потреби в повазі владі визнанні заслуг тощо. Потреби першого роду закладені в людину генетично а другого є наслідком її соціальної життєдіяльності. Потреби неможливо безпосередньо спостерігати або вимірювати. Потреба яка реально відчувається людиною викликає у неї прагнення здійснити конкретні дії спрямовані на задоволення цієї потреби.
80236. Управлінський контроль. Контроль поведінки працівників в організації 10.37 MB
  Управлінський контроль Поняття та процес контролю. Інструменти управлінського контролю. Поняття та процес контролю Контроль це процес забезпечення досягнення цілей організації шляхом постійного спостереження за її діяльністю та усунення відхилень які при цьому виникають. В межах процесу контролю модель якого наведена на рис.
80237. Лідерство. Ситуаційні теорії лідерства 142.5 KB
  Наявність права впливати на діяльність підлеглих є необхідною передумовою керування але ще не гарантує ефективності такого впливу. Але перебуванням нагорі визначає лише видимість керування а не його сутність. Отже поведінковий підхід спирається на стиль керування. Стиль керування це манера поведінки керівника щодо підлеглих через яку і здійснюється вплив на працівників організації.
80238. Комунікації. Управління комунікаційними процесами 160 KB
  Процес комунікації. Міжособистісні та організаційні комунікації. Процес комунікації У вузькому розумінні комунікація це процес обміну інформацією фактами ідеями поглядами емоціями тощо між двома або більше особами. Для здійснення процесу комунікації необхідні принаймні 4 умови: наявність щонайменше двох осіб: відправника особи яка генерує інформацію що призначена для передачі; одержувача особи для якої призначена інформація що передається; наявність повідомлення тобто закодованої за допомогою...
80239. Ефективність управління. Напрямки підвищення ефективності управлінської праці 98.5 KB
  Ефективність управління можна вимірювати за результатами керованих обєктів і процесів. І все ж встановлення ефективності власне управління можливе, але за допомогою іншого використання вихідної логічної формули. Наприклад, способи управління, що дозволяють досягти заданого фіксованого результату за найменших витрат
80240. Поняття і сутність менеджменту. Менеджмент як вид професійної діяльності 6.35 MB
  Важко дати єдине абсолютно чітке та повне визначення поняття «менеджмент». Функції, сфери, рівні менеджменту та ситуації у яких вони реалізуються значно різняться між собою. Щоб з’ясувати сутність менеджменту на нього треба подивитись з різних точок зору