2.1.Введення.
CSS ( Каскадні таблиці стилів) - це вражаючий винахід людства , який значно полегшує та автоматизує створення веб -сайтів. Використовуючи цю чудову технологію , можна керувати зовнішнім виглядом величезної кількості сторінок, з однієї таблички стилів , також створювати красиві менюшки , робити різні ефекти і т.д.
Каскадні таблиці стилів відкривають абсолютно нові можливості у веб- дизайні. Зробити якісний дизайн без їх використання дуже проблематично .
Але найважливіше те , що використовуючи CSS ви заощаджуєте собі силу-силенну часу . Адже за допомогою одного маленького файлу стилів , ви можете керувати дизайном сотні , тисячі і навіть мільйони сторінок , і це дуже захоплює ...
Це не довідник , тут все написано швидше розмовною мовою :) Цей підручник допоможе Вам з вивченням таблиць стилів.
Тільки врахуйте , що вивчати CSS без знання HTML практично неможливо , і тому якщо ви ще не знайомі з ним , прочитайте для початку підручник html .
Приклади в підручнику побудовані таким чином: я показую тільки код таблиці стилів , а сам вихідний код html файлу не показую . Це робиться тому , що інакше обьем підручника буде занадто величезний . Так що якщо вам потрібно , дивіться вихідний html код просто натиснувши на прикладі правою кнопкою миші і вибравши пункт - Перегляд html - коду.
Що знадобиться нам для навчання?
Для навчання нам знадобляться браузер ( в якому ви переглядаєте веб -сторінки ) і звичайний блокнот ( можна знайти тут: Пуск- програми - стандартні - блокнот) . Є звичайно й більш автоматизовані програми ( Dreamweaver , FrontPage та ін ) але вони підходять більше для роботи , а не для навчання , і можуть тільки нашкодити ...
Які ще будуть поради ?
При навчанні , приділяйте більше часу практиці . Працюйте з прикладами , просто візьміть і наберіть вручну (а не копіювати -вставити ! ) Текст такий же , як у прикладі і подивіться на свій результат ! Так і цікавіше буде , і толку набагато більше ...\
2.2. Урок 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.