2.3. Урок 2: Колір і фон.
Цей урок ми присвятимо такому важливому моменту як колір і фон в CSS . Ви побачите , як прикольно , і наскільки ефективніше ніж у html , все це працює!
Запам'ятай : кольори в CSS вказуються так само , як і в html . Тобто можна вказувати шестнадцатиричное значення , наприклад # ff3355 , або ж назву кольору ( red , green , blue та ін )
Основними властивостями кольору і фону в CSS є:
color
background - color
background - image
background - repeat
background - attachment
background - position
background
А тепер детальніше , і по -порядку :
властивість COLOR
Задає основний колір (колір переднього плану) того чи іншого елемента . Наприклад , якщо ми хочемо зробити колір всіх заголовків першого рівня червоним , а колір тексту параграфів зеленим , то таблиця стилів буде виглядати так:
H1 {
color : red ;
}
P {
color : green ;
Властивість BACKGROUND -COLOR
Задає фоновий колір елемента . На відміну від html , в якому фоновий колір можна використовувати тільки для сторінки або елементу таблиці (тобто мають атрибут bgcolor ) в CSS , фоновий колір можна задавати для чого завгодно: для таблиць , заголовків , параграфів , посилань тощо Тут головне правильно визначити що нам потрібно.Ну от наприклад , щоб змінити фоновий колір всієї сторінки , потрібно задати це властивість елементу BODY - тому що саме він відповідає за тіло документа, тобто за всю сторінку .
BODY {
background - color : # FFEE8C ;
}
H1 {
color : red ;
background - color : blue ;
}
P {
color : green ;
}
Властивість BACKGROUND - IMAGE
Дана властивість використовується для завдання фонового зображення. У прикладі нижче , я вкажу фонове зображення для всієї сторінки , тобто для елемента BODY .
BODY {
background - color : # FFEE8C ;
background - image : url ( smile.png ) ;
}
H1 {
color : red ;
background - color : blue ;
}
P {
color : green ;
}
Як бачите , в якості значення властивості , вказується шлях до зображення , але трохи не так як в html . На початку пишеться URL а потім відразу , Без пробілів ! в круглих дужках положення картинки . Якщо вона знаходиться в тій же папці то пишемо просто назва картинки , як у прикладі вище. Якщо допустимо в папці img , то пишемо так url ( img / smile.png ).
2.4. Урок 3: Шрифти.
У цьому уроці ми подивимося як виглядають шрифти в CSS , а саме розглянемо основні властивості шрифтів: сімейство , вага , стиль , варіант , розмір , також дізнаємося за яким принципом браузер вибирає потрібний шрифт.
Так от за шрифти в CSS відповідають наступні характеристики:
font - family
font - style
font - variant
font - weight
font - size
font
Властивість FONT - FAMILY
Дана властивість визначає гарнітуру шрифту. Взагалі FONT - FAMILY з англ. означає сімейство шрифту. Справа в тому , що шрифти з тих чи інших ознаками , об'єднуються в сімейства. Я розгляну три основних групи:
Serif - шрифти з характерними " зарубками " , найбільш яскравий представник - "Times New Roman " ;
Sans - serif - шрифти рубані , без зарубок , наприклад Arial або Verdana ;
Monospace - Шрифт фіксованої ширини (з однаковою відстанню між символами , на зразок друкарської машинки ) , такі як " Courier New " ;
На малюнку нижче зображені назви основних , використовуваних на практиці , шрифтів , згруповані за домами . Причому відображені вони саме так , як виглядають насправді , наприклад назву " Times New Roman" відображує шрифтом "Times New Roman ".
Властивість FONT - STYLE
Дана властивість задає стиль шрифту. Може приймати три значення:
normal - звичайний;
italic - курсивний ;
oblique - похилий ;
У вас може виникнути питання: "чим відрізняється курсивний від похилого ? " , - Справа в тому , що значення italic означає використання вбудованого в шрифт курсивного накреслення. Адже майже кожен шрифт включає в себе всі символи і букви в нормальному виконанні , в напівжирному виконанні й у курсивном .
А значення oblique - це штучно створений курсив , тобто створений нахилом стандартних букв на певний кут .
h1 {
font - family : verdana , arial , sans - serif ;
font - style : normal ;
}
h2 {
font - family : verdana , arial , sans - serif ;
font - style : italic ;
}
h3 {
font - family : verdana , arial , sans - serif ;
font - style : oblique ;
}
Властивість FONT - VARIANT
Ця властивість використовується для вибору варіанту написання букв нижнього регістру. Може приймати два значення:
normal - значення за замовчуванням , текст відображається звичайним чином .
small - caps - букви нижнього регістра відображаються як зменшені заголовні .
Тобто як бачите великі ( великі літери ) залишаються без змін , а маленькі - являють собою повну копію заголовних букв , тільки злегка меншого розміру.
За замовчуванням ( тобто якщо взагалі не записувати це властивість ) текст буде відображатися звичайним накресленням .
Приклад запису стилю :
h1 {
font - family : verdana , arial , sans - serif ;
font - variant : small - caps ;
}
h2 { font - family : verdana , arial , sans - serif ;}
Властивість FONT - WEIGHT
Ця властивість визначає насиченість шрифту , тобто з його допомогою можна зробити шрифт жирним . Основні значення : normal - звичайний і bold - жирний . Деякі браузери підтримують числові значення : 100 , 200,300,400,500,600,700,800,900 . Для довідки: 400 рівносильно normal , а 700 - bold . Але я не раджу вам користуватися числами !
P { font - family : arial , verdana , sans - serif ;}
DIV {
font - family : arial , verdana , sans - serif ;
font - weight : bold ;
}