У цьому розділі мова піде про те, як впровадити CSS в документ HTML, тобто зв'язати стильовий опис елемента безпосередньо з самим елементом, HTML тегом.
Здійснити це завдання можна трьома способами:
- Написати стильовий опис у самому елементі. Такий метод хороший лише в тому випадку якщо такий елемент один єдиний в HTML документі який потребує окремого стильового опису.
- Написати стильовий опис всім ідентичних елементів HTML документа. Такий метод виправдовує себе, якщо стиль сторінки принципово відрізняється від загального дизайну веб-сайту (групи взаємопов'язаних сторінок).
- Винести стильовий опис елементів HTML у окремий файл CSS. Це дозволить керувати дизайном всього сайту повністю, кожною сторінкою сайту в якій зазначено звернення до файлу CSS. Цей метод є найефективнішим використанням таблиці каскадних стилів.
Давайте детальніше розглянемо кожен варіант, а заразом познайомимося з правилами синтаксису написання CSS.
Атрибут стиль.
Майже кожен HTML тег має атрибут style, який говорить про те, що до цього тегу застосовується певний стильовий опис.
Пишеться так:
style="">
Все, що буде написано між лапками атрибуту styleі буде стильовим описом для даного елемента, в даному випадку елемента
Ну наприклад:
style="color: #ff0000; font-size:12px"> це параграф з індивідуальним стилем
У цьому випадку ми вказали, що цей параграф повинен відображатися червоним і мати розмір шрифту в 12 пікселів. У наступних розділах я докладно розповім про те, що написано в лапках, зараз мова йде про те, як застосувати CSS до якогось HTML тегу.
За таким самим принципом можна вказати індивідуальний стиль практично для кожного HTML елемента.
style="background-color: #c5ffa0">
style="color: #0000ff; font-size:18px">Все про слонів
Купити слона
style="color: #ff0000; font-size:14px">
style="color: #0000ff; font-size:16px">Взяти слона на прокат
style="color: #ff0000; font-size:14px">
Але ще раз повторюся такий спосіб впровадження CSSхороший лише в тому випадку якщо потрібно задати певний стиль малому числу HTML елементів.
Тег (не плутайте з однойменним атрибутом) у якому відбувається опис потрібних нам елементів.
Подивіться приклад, нижче до нього будуть коментарі.
Все про слонів
На цьому сайті Ви знайдете будь-яку інформацію про слонів.
Купити слона
У нас Ви можете за вигідними цінами придбати найкращих слонів!!
Взяти слона на прокат
Тільки у нас Ви можете взяти будь-яких слонів на прокат!
Як видно з прикладу ми досягли точно такого ж результату, що і в першому випадку тільки тепер ми не прописуємо кожному елементу стиль індивідуально, а винесли його в "голову" документа, тим самим вказавши що всі заголовки ,
- будуть синіми а параграфи
- Червоними. Уявіть як ми полегшили б собі роботу якби на сторінці сотня таких параграфів і штук п'ятнадцять заголовків, та й сам документ став менше важити за рахунок "видалення" всіх стильових описів, що повторюються, для кожного окремо взятого елемента.
Тепер обіцяні коментарі:
Тег йде безпосереднє оголошення стилів тих чи інших HTML елементів відповідно до наступного синтаксису:
Якщо у блоці оголошення стилів вказується кілька властивостей елемента, вони між собою розділяються точкою з комою.
CSS в окремому зовнішньому файлі.
Чи довго, чи підійшли ми до головної, на мій погляд, гідності CSS, а саме можливості виносити всі відомості стосовно дизайну сайту в окремий зовнішній файл.
Отже, відкриваємо блокнот (або інший редактор) і пишемо в ньому наступний текст:
Body (background-color: #c5ffa0)
a (color:#000060; font-weight: bold;)
a:hover (color:#ff0000; font-weight: bold; text-decoration:none)
h1 (color: #0000ff; font-size:18px)
h2 (color: #ff00ff; font-size:16px)
p (color: #600000; font-size:14px)
Про те, що це таке дивне ми написали, намагатимуся докладно розповісти у наступних розділах цього підручника.
Усі! файл зі стильовим описом створено! Тепер залишилося зовсім трохи, а саме змусити потрібні сторінкинашого сайту черпати інформацію з цього файлу.
Робиться це за допомогою тега (зв'язок). Тег багатоцільовий та служить для "зв'язування" HTML документа з додатковими зовнішніми файлами, що забезпечують його належну роботу. Тег є своєрідним посиланням, тільки призначеним не для користувачів, а для програм оглядачів (браузерів). Оскільки несе у собі виключно службову інформацію він міститься у заголовку HTML документа між тегами та не виводиться браузерами на екран.
Тег має атрибути:
href- Шлях до файлу.rel- Визначає відносини між поточним документом та файлом, на який робиться посилання.
- shortcut icon - Визначає, що файл, що підключається .
- stylesheet- Визначає, що файл, що підключається, містить таблицю стилів.
- application/rss+xml - Файл у формат XMLдля опису стрічки новин.
Так як ми підключаємо як зовнішній файл каскадну таблицю стилів, то наше службове посилання набуває наступного вигляду:
Повторюся, щоб точно розвіяти можливі непорозуміння. Атрибуту relпривласнюємо значення stylesheetоскільки підключаємо як зовнішній файл каскадну таблицю стилів, вказуємо шлях до файлу css (у цьому прикладі файл називається mystyle.cssі лежить поруч із документом HTML у якому прописується це посилання) так само вказуємо, що даний файл текстовий і містить у собі стильовий опис type="text/css"
Тепер вставляємо цей рядок у заголовки сторінок нашого сайту і насолоджуємося результатом.
Файл mystyle.css
body (background-color: #c5ffa0)
a (color:#000060; font-weight: bold;)
a:hover (color:#ff0000; font-weight: bold; text-decoration:none)
h1 (color: #0000ff; font-size:18px)
h2 (color: #ff00ff; font-size:16px)
p (color: #600000; font-size:14px)
Файл index.html
Меню:
Все про слони.
Купити слон.
Взяти слона на прокат.
Все про слонів
На цьому сайті Ви знайдете будь-яку інформацію про слонів.
Файл elephant.html
Меню:
Все про слони.
Купити слон.
Взяти слона на прокат.
Купити слона
У нас Ви можете за вигідними цінами придбати найкращих слонів!!
Файл elephant1.html
Меню:
Все про слони.
Купити слон.
Взяти слона на прокат.
Взяти слона на прокат
Тільки у нас Ви можете взяти будь-яких слонів на прокат!
У прикладі вище, "сайт про слони", на даний момент, є три сторінки, кожна з яких пов'язана з одним єдиним зовнішнім файлом css - mystyle.css. Таким чином, ми значно його "розвантажили" та зробили дизайн всього сайту "мобільним". Уявіть скільки б кілобайт ми виграли, якби на цьому сайті було сотня повноцінних сторінок!? А також, скільки б часу заощадили, якби нам знадобилося щось змінити в його дизайні!?
У цьому розділі ми розглянули три методи застосування CSS в HTML документ. Який краще використовувати?
- Використовуйте атрибут styleдля будь-якого елемента, якщо цей елемент з відмінним від інших елементів стилем один єдиний на всьому сайті.
- Використовуйте тег
Створюємо таблицю CSS та підключаємо до html сторінок