Урок 4

Властивість position

На цьому уроці ми будемо використовувати 3 спосіб підкючення стилів, за допомогою зовнішнього файлу з розширенням *.CSS
Його вказують у файлі вебсторінки між тегами <Head><link rel="stylesheet" href="pos.css"></Head>
В таких файлах записуються теги чи назви класів - що позначають теги, до яких задається група властивостей - Правило.
Назви тегів, які вказують в зовнішньому css файлів, при описі правил, називають - селекторами.

селектор1 {
   властивість1: значення;
   властивість2: значення;
   властивість3: значення;
   }
   селектор2 {
   властивість1: значення;
   властивість2: значення;
   }
і т.д.

Селектором може бути:
- Тег, наприклад <h1>
- Клас, вказується в тезі, як атрибут. наприклад <li class="li_klas1"> .
- Ідентифікатор (мітка), вказується в тезі, як атрибут. наприклад <a id="a1"> .
Якщо для селектора використовується назва класу, то селектор повинен починатися з символу ".", якщо як ідентифікатор то селектор повинен починатися з символу "#",

   .h1_klas {
   властивість1: значення;
   властивість2: значення;
   властивість3: значення;
   }
   h1 {
   властивість1: значення;
   властивість2: значення;
   }
   .li_klas1 {
   властивість1: значення;
   властивість2: значення;
   властивість3: значення;
   }
   #a1 {
   властивість1: значення;
   властивість2: значення;
   }
і т.д.

Це вигідно коли для одного тегу потрібно задати різні правила. Тоді відповідно кожному з них задається свій атрибут class="назва", або індифікатор id="назва". Наприклад.
- <p class="normal">....<p class="super">....<p class="small"> - <a id="new">....<a id="old">....<a class="well"> Тепер для кожного з цих класів можна використати різні правила CSS.
Виклик через ідентифікатор чи клас, можна здійснювати у всіх 3 підключеннях стилів!

Властивість position - це універсальна властивість, яка дозволяє встановити, або змінити положення елемента і містить чотири можливих значення: static (значення за замовчуванням), relative, absolute, fixed
Використовується поряд з властивостями:left,right,top,bottom,static.

1.position:static; за замовчуванням Будь-які значення left, right, top або bottom не впливають на зміну позиції.

2.position:relative; елементe може переміщатися відносно його поточної позиції.
Завдання 1. - Створіть файл pos.HTML вставте в нього код.

<html>
<Head>
<link rel="stylesheet" href="pos.css">
</Head>
<body>
<P>Тільки-но ми сховали човен, Джа захопив мене в джунглі, і незабаром ми
   вийшли на вузьку, добре утоптану стежку. </p>
<P class = "second"> Я кинувся вгору, намагаючись в останньому зусиллі
   дотягнутися до руки Джо, але Сітіком з такою силою рвонув спис на себе,
   що він вирвався з рук мезопа, ледь не зірвався зі скелі,
   а я, все ще чіпляючись за древко, полетів вниз, прямо в
   розкриту пащу звірюги. </p>
<P> Він вже перейшов на біг, замахуючись на ходу важким списом. </P>

</body>
</html>

- Створіть файл pos.css вставте в нього код.

p {border: 1px solid blue; }

Результат.

Тільки-но ми сховали човен, Джо захопив мене в джунглі, і незабаром ми вийшли на вузьку, добре утоптану стежку.

Я кинувся вгору, намагаючись в останньому зусиллі дотягнутися до руки Джо, але Сітіком з такою силою рвонув спис на себе, що він вирвався з рук мезопа, ледь не зірвався зі скелі, а я, все ще чіпляючись за древко, полетів вниз, прямо в розкриту пащу звірюги.

Він вже перейшов на біг, замахуючись на ходу важким списом.

- Давайте перемістимо другий абзац.Для цього у файлі pos.css вставте в нього код.

.second {position:relative;;border:2px solid red;left:20px;top:10px;}

Результат.

Тільки-но ми сховали човен, Джо захопив мене в джунглі, і незабаром ми вийшли на вузьку, добре утоптану стежку.

Він вже перейшов на біг, замахуючись на ходу важким списом.

Червоний абзац класу second перемістився на 20px зліва направо і на 10px зверху вниз.
Зверніть увагу, що сині абзаци не зрушили взагалі. Отже,при використанні відносного позиціонування, червоний абзац може вільно переміщатися, не порушуючи макет.

2.position:absolute
Властивість absolute дає можливість елементу переміщатися відносно першого позиціонованого перед ним елемента.
Позиційований елемент - це той, у якого значення position:relative,або absolute або fixed.
Позиціонований елемент виступає в якості точки відліку для інших вказаних нижче елементів.
Завдання 2.
- Створіть файл pos2.HTML вставте в нього код.

<html>
<Head>
<link rel="stylesheet" href="pos.css">
</Head>
<body>
<Section>
  Я позиційований елемент!
  <P>
    Я позиціонуюся абсолютно!
  </P>
</Section>

</body>
</html>

- Створіть файл pos2.css вставте в нього код.

section {
  background: gold;
  height:100px;
  padding:10px;
  position:relative; / * Перетворює  в точку відліку для  * /
}

p {
  background: limegreen;
  color: white;
  padding:10px;
  position:absolute; / * Робить 
 вільно переміщуються * /
  bottom:10px; / * 10px знизу * /
  left: 20px; / * 20px зліва * /
}

Результат.

Я позиційований елемент!

Я позиціонуюся абсолютно!

Жовтий розділ має висоту 200px, позиціонування задано як relative, що перетворює його в точку відліку для наступних елементів. Зелений абзац позиціонується як absolute і ми може вільно переміщати щодо жовтого розділу змінтвши значення left і bottom.

Якщо одночасно задати значення left і right то виконаєься тільки left
Якщо задати left: 0 і right: 0 то елемент розтягнеться на всю ширину.
Якщо ширина встановлена, то значення right відкидається.

3.position:fixed;
Властивість fixed дозаоляє задавати відступи left / right і top / bottom - відносно вікна перегляду в браузері.
Фіксований елемент не буде переміщатися разом з сторінкою, він фіксується на екрані. Тепер зрозуміли, що це за запис справа "Про мене взнаєте в кінці сторінки"? :)
Якщо не помітили, то порухайте сторінуц вверх вниз :).

Про це взнаєте в кінці сторінки