Урок 7: Поля (margin) і відступи (padding)
Це дуже простий, але в цей же час і потрібний урок. Давайте подивимося, в чому відмінність margin від padding. Для цього, ще разок згадаємо блокову модель в CSS.
MARGIN ( Поля ) - це відстань від межі (рамки ) блоку , до найближчих елементів , або , якщо їх немає , до країв документа .
PADDING ( Відступи ) - як би внутрішнє Расcтояние , між межею ( рамкою) і вмістом блоку.
І давайте відразу подивимося прімерчік : створимо три стилю для трьох різних параграфів , з різними значеннями margin і padding і подивимося на результат:
. p1 {
background - color : # FFE446 ;
border : 1px solid red ;
margin : 70px ;
}
. p2 {
background - color : # FFE446 ;
border : 1px solid red ;
padding : 70px ;
}
. p3 {
background - color : # FFE446 ;
border : 1px solid red ;
margin : 50px ;
padding : 20px ;
}
Ну як розібралися ? якщо читали текст всередині прикладу , то точно розібралися ...
Додаючи вже знайомі нам ключові слова: top , right , bottom , left можна регулювати відступи і поля відповідно зверху , праворуч , знизу , зліва.
p {
margin - top : 50px ;
margin - right : 50px ;
margin - bottom : 50px ;
margin - left : 150px ;
}
Теж саме , тільки в більш скороченої запису:
p {
margin : 50px ;
margin - left : 150px ;
}
Тобто так як тільки ліве поле відрізняється від інших, ми просто записали спільне поле , а потім дописали значення лівого поля , і отримали той же результат що і в першому прикладі.
Можливий також такий варіант запису:
p {
margin : 50px 50px 50px 150px ;
}
Тобто значення записуються за годинниковою стрілкою: верхнє , праве , нижнє, ліве .
У яких випадках краще користуватися відступами , а в яких полями ?
А це вже вирішувати Вам , можу тільки дати декілька принципових відмінностей:
Відступи ( padding ) распологаются всередині блоку , а поля ( margin ) - за їх межами ;
Фон блоку і фонове зображення поширюються тільки на відступи , але не на поля. Поля завжди прозорі , і крізь них просвічує фон батьківського елементу .
Урок 8: Шари в CSS.
У цьому уроці , поговоримо про таке поняття як шар в CSS . Для тих , хто працював з графічними редакторами , це поняття має бути знайома , а для решти постараюся пояснити .
Створюючи блок в CSS , ми завжди чітко задаємо його параметри , а також позиціонуємо його в певне місце на екрані. Таким чином , будь-який блок має дві координати X і Y , які визначають положення блоку на площині екрану . Але в CSS є ще і третя , просторова координата Z , яка визначає номер шару , на якому знаходиться блок . Тобто чим більше координата Z , тим вище цей шар знаходиться по відношенню до решти . Наприклад шар з номером 2 буде ближче розташований до користувача , переглядає вашу сторінку , ніж шар з номером 1 . А шар з номером 1 , буде розташовуватися вище , ніж основний код сторінки .
За створення шару в CSS відповідає властивість Z- index , а прийняті ним значення , вказують номер шару .
Наприклад , можна зробити з карт знамениту комбінацію Royal Flash .
Як бачите , кожна карта , трохи перекриває іншу. Ось як це виглядає в коді :
. desatka_buba {
position : absolute ;
left : 200px ;
top : 200px ;
z - index : 1 ;
}
. valet_buba {
position : absolute ;
left : 215px ;
top : 215px ;
z - index : 2 ;
}
. dama_buba {
position : absolute ;
left : 230px ;
top : 230px ;
z - index : 3 ;
}
. korol_buba {
position : absolute ;
left : 245px ;
top : 245px ;
z - index : 4 ;
}
. tuz_bubna {
position : absolute ;
left : 260px ;
top : 260px ;
z - index : 5 ;
}
Ну а в html коді , просто привласнюєте малюнкам відповідні стилі , типу :
<img src="10buba.gif" class="10_buba"> ну і так далі .
Якщо гарненько розібратися з цим простим методом , можна створювати досить пристойні речі. Наприклад розміщувати текст над зображенням , або навпаки , створювати красиві заголовки , наприклад з ефектом тіні.