Урок 1:Принцип роботи CSS
Як і будь-який інший мова програмування, CSS має строго певний синтаксис, тобто правила за якими створюються таблиці стилів. Запам'ятайте, в CSS на відміну від HTML немає ні елементів, ні атрибутів, ні тегів. Основною структурною одиницею тут є правило, яке визначає, як буде виглядати той чи інший елемент в документі.
Розглянемо структуру правила:
Як видно з малюнка вище , спочатку записується так званий селектор , що показує до якого html тегу ( тегам ) застосовується те чи інше властивість . Більш докладно про типи селекторів в CSS ми поговоримо в 8 уроці , тому що Ви вже будете знати базові властивості CSS і з легкістю зрозумієте мене .
Далі , безпосередньо за селектором , пишеться блок оголошення стилів , який обов'язково укладається у фігурні дужки.
Кожне оголошення в свою чергу складається з властивості і його значення. Після властивості ставиться двокрапка . Правило може містити в собі кілька оголошень . У такому випадку вони повинні бути відокремлені один від одного крапкою з комою ( див. рисунок ) причому після останнього оголошення крапку з комою можна не ставити.
Показане вище правило вказує на те , що всі заголовки першого рівня в документі будуть блакитного кольору з розміром шрифту 14 пікселів .
Між HTML і CSS багато спільного , і тому запам'ятати властивості CSS Вам буде дуже просто .
Як підключити CSS таблицю до HTML документу ?
Як ви вже знаєте , вся фішка css в тому , що змінюючи стильові правила у зовнішній таблиці стилів , ми можемо керувати дизайном як завгодно великої кількості сторінок.
Але для цього нам потрібно підключити зовнішню таблицю стилів до всіх сторінок html , дизайном яких ми хочемо управляти. Давайте по -порядку :
Зовнішня таблиця стилів це просто текстовий файл з розширенням . Css .
Припустимо у нас є таблиця стилів style.css і кілька сторінок html , і причому все це розташовано в одній папці. Тоді в кожному документі який ми хочемо підключити , в голові документа ( між тегами <head> і </ head > ) необхідно прописати рядок:
<link rel="stylesheet" type="text/css" href="style.css">
Цей рядок вказує браузеру, що він повинен використовувати правила відображення HTML - файлу з CSS- файлу.
Тепер спробуйте самі:
Відкрийте Блокнот ( або інший редактор ) і створіть за допомогою нього два файли знаходяться в одній папці : CSS файл - style.css і HTML файл - index.htm . Нагадаю для тих , хто забув як це робити : просто відкриваєте блокнот, вибираєте " Файл " потім "зберегти як" і в полі ім'я файлу пишіть style.css . Аналогічно для index.htm .
Файли приблизно наступного змісту:
index.htm
<! DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 Transitional / / EN"
" http://www.w3.org/TR/html4/loose.dtd ">
<html>
<head>
<title> Працюємо зі стилями </ title >
<link rel="stylesheet" type="text/css" href="style.css" >
</ head >
<body>
<h1> Це моя перша таблиця стилів , і якщо все працює , то незважаючи на те , що це заголовок першого рівня , він відобразиться висотою всього лише 14 пікселів і буде блакитного кольору </ h1 >
</ body >
</ html >
style.css
h1 { color : blue ; font - size : 14px }
Нижче я наведу ще два способи підключення стилів , які не вимагають зовнішньої таблиці стилів. Це чисто для загального розвитку , і застосовувати їх на практиці я Вам не раджу, тому це дуже незручно.
Можна розташовувати правила стилів безпосередньо в голові документа:
<! DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 Transitional / / EN"
" http://www.w3.org/TR/html4/loose.dtd ">
<html>
<head>
<title> Працюємо зі стилями </ title >
<style type="text/css">
h1 { color : blue ; font - size : 14px }
</ style >
</ head >
<body><h1> Це моя перша таблиця стилів , і якщо все працює , то незважаючи на те , що це заголовок першого рівня , він відобразитися висотою всього лише 14 пікселів і буде блакитного кольору </ h1 >
</ body >
</ html >
Також , можна задавати стиль за допомогою атрибуту style . наприклад:
<! DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 Transitional / / EN"
" http://www.w3.org/TR/html4/loose.dtd ">
<html>
<head>
<title> Працюємо зі стилями </ title >
</ head >
<body>
<h1 style="color:blue;font-size:14px"> Це моя перша таблиця стилів , і якщо все працює , то незважаючи на те , що це заголовок першого рівня , він відобразитися висотою всього лише 14 пікселів і буде блакитного кольору < / h1 >
</ body >
</ html >
Обидва ці прикладу не використовують хоча б тому , що вони не дають особливих переваг перед html . Адже при спробі змінити дизайн всього сайту , побудованого за таким принципом , доведеться змінювати стилі на всіх сторінках , а це знову ж час ...
Сподіваюся Вам все зрозуміло. Вже в наступному уроці , ми почнемо вивчення основних властивостей CSS.
Урок 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 ).
Урок 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 ;
}
Урок 4: Робота з текстом.
У цьому уроці ми розглянемо основні властивості CSS відповідають за форматування тексту.
text - align
text - decoration
text - indent
text - transform
letter - spacing
word - spacing
Властивість TEXT - ALIGN
Властивість вирівнювання тексту , аналогічне атрибуту ALIGN використовуваному в html . Може приймати чотири значення :
left - вирівнювання по лівому краю (значення за замовчуванням) ;
right - вирівнювання по правому краю;
center - вирівнювання по центру;
justify - вирівнювання по ширині ( по правому і лівому краях одночасно).
Тут все дуже просто , ну от наприклад :
h1 { text - align : center ;}
h2 { text - align : left ;}
h3 { text - align : right ;}
p { text - align : justify ;}
Властивість TEXT - DECORATION
Дозволяє оформляти текст певним чином. Розглянемо чотири основних значення даної властивості :
none - значення за замовчуванням. Додаткового оформлення не відбувається ;
underline - текст підкреслюється знизу ;
overline - текст надчерківается зверху ;
line - through - текст перекреслюється ;
h1 {
text - align : center ;
text - decoration : underline ;
}
h2 {
text - align : center ;
text - decoration : overline ;
}
h3 {
text - align : center ;
text - decoration : line - through ;
}
Властивість TEXT - INDENT
Це властивість знадобиться нам для створення відступів першого рядка , іншими словами абзаців. Значення краще задавати в пікселах , це універсальний спосіб .
h1 { text - align : center ;}
p {
text - indent : 40px ;
}
Властивість TEXT - TRANSFORM
C допомогою цієї властивості , можна видозмінювати текст , а саме міняти великі літери на маленькі або навпаки. Може мати такі значення:
capitalize - змінює регістр перших букв кожного слова так , щоб вони були заголовними . Наприклад: " створіть сайт зараз " стане " Створіть Сайт Сейчас".
Частенько це властивість використовується при написанні рекламних текстів , це більше привертає уваги!
uppercase - робить з усіх букв заголовні . Наприклад: " текст у css " стане " ТЕКСТ У CSS "
lowercase - робить з усіх букв маленькі . Наприклад: " TRANSFORM " cтанет " transform " .
none - не виробляє зміни регістру ; це значення використовується за умовчанням.
Властивість WORD - SPACING
Дозволяє змінювати відстань між словами. Значення також краще задавати в пікселах .
h1 { word - spacing : 20px ;}
p { word - spacing : 10px ;}
Урок 6:Робота з списками.
У цьому уроці ми розглянемо основні властивості CSS , що відповідають за зовнішній вигляд списків. Їх зовсім трохи , так що урок буде коротким , але корисним!
list - style - type
list - style - position
list - style - image
list - style
Запам'ятайте: Всі ці властивості універсальні, тобто можуть застосовуватися як до впорядкованих списками , так і до неврегульованим . У цьому то і прикол CSS, що можна з неупорядкованого списку , зробити впорядкований і навпаки :)
Властивість LIST - STYLE- TYPE
Дозволяє визначати вид маркера елементів списку . Це можуть бути цифри , букви , квадратики , кружечки і ін Нижче наведені основні значення цієї властивості :
disk - маркер у вигляді закрашеного кола ;
circle - маркер у вигляді незафарбовані кола ;
square - маркер у вигляді закрашеного квадрата ;
decimal - звичайні десяткові числа , наприклад 1,2,3,4,5 і т. д.;upper - roman - великі римські цифри , типу I , II , III , IV , V і т.д. ;
lower - roman - маленькі римські цифри типу i , ii , iii , iv , v і т.д.
upper - alpha - великі літери A , B , C , D , E і так далі;
lower - alpha - малі літери типу a , b , c , d , e і т.д.;
none - маркер списку відсутнє ;
Переробимо , для приколу , впорядкований список в невпорядкований , тобто елементу OL ( впорядкований список ) напишемо square , а елементу UL ( невпорядкований ) тип upper - roman ;
ol { list - style - type : square ;}
ul { list - style - type : upper - roman ;}
Властивість LIST - STYLE- IMAGE
Це напевно найцікавіше властивість у списках. Воно дозволяє поставити замість маркера будь-яке зображення . Як значення вказується ключове слово url і потім в круглих дужках шлях до зображення . У деяких застарілих версіях браузерів , працює неккоректно .
ul { list - style - image : url ( galka.gif ) ;}
Властивість LIST - STYLE- IMAGE
Це напевно найцікавіше властивість у списках. Воно дозволяє поставити замість маркера будь-яке зображення . Як значення вказується ключове слово url і потім в круглих дужках шлях до зображення . У деяких застарілих версіях браузерів , працює неккоректно .
ul { list - style - image : url ( galka.gif ) ;}
Не забувайте , що url ( galka.gif ) означає що зображення galka.gif лежить в тій же папці , де і css -файл. Якщо у вас зображення не там , відповідно і шлях вказуйте інший!
Скорочена форма LIST - STYLE
Перераховані вище властивості можна записати більш компактно . Для цього існує скорочений варіант list - style ;
Такий варіант з трьох рядків :
ul {
list - style - type : square ;
list - style - position : inside ;
list - style - image : url ( galka.gif ) ;
}
Раціональніше замінити таким :
ul { list - style : square inside url ( galka.gif ) }
Властивості вказуються через пробіл і послідовність у даному випадку ролі не грає.
Урок 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 ;