Як і будь-який інший мова програмування, 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;
