2.7.Урок 6:Робота з рамками.
Давайте в цьому уроці поговоримо про рамках. Основні властивості рамок в CSS наступні:
border-width
border-color
border-style
Скорочена форма - border
приклади
Властивість BORDER-WIDTH
Це властивість задає товщину рамки. Значення зазвичай вказується в пікселях, але також можна вказувати ключовими словами thin (2px), medium (4px) і thick (6px). Для кращого розуміння, скільки це один піксель, дивіться малюнок нижче:
Скорочена форма - border
Як і в інших властивостях , у рамки є скорочена форма border . На початку пишеться товщина , потім після пробілу стиль , а потім після пробілу колір. Попередній приклад можна записати так:
h1 {
border : 30px outset red ;
}
h2 {
border : 20px dashed gold ;
}
h3 {
border : 16px double green ;
}
P {
border : 1px dotted blue
}
приклади :
У всіх перерахованих вище прикладах , якщо додати після слова border одне з ключових слів ( top , right , bottom , left ) можна регулювати параметри рамки з різних сторін відповідно ( верх , право , низ , ліво ) . Ну от наприклад можна зробити так:
h1 {
border - top - width : 30px ;
border - top - style : solid ;
border - top - color : red ;
border - right - width : 20px ;
border - right - style : dashed ;
border - right - color : gold ;
border - bottom - width : 10px ;
border - bottom - style : dashed ;
border - bottom - color : green ;
border - left - width : 40px ;
border - left - style : solid ;
border - left - color : blue ;
}
Природно набагато красивіше код буде виглядати у скороченому вигляді:
h1 {
border - top : 30px solid red ;
border - right : 20px dashed gold ;
border - bottom : 10px dashed green ;
2.8. Урок 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 ) - за їх межами ;
Фон блоку і фонове зображення поширюються тільки на відступи , але не на поля. Поля завжди прозорі , і крізь них просвічує фон батьківського елементу .