Способи застосування css
Існує три способи застосування таблиць стилів:
Внутрішні таблиці стилів (Inline Style Sheets) - за допомогою спеціального атрибута розміщуються в HTML теги.
Таблиця 3.1
Лістинг 3.1 - Приклад HTML: |
Лістинг 3.2 - Приклад CSS |
|
|
Як можна помітити(Таб.3.1), код Inline Style Sheet вийшов більше ніж HTML. Тому ISS слід використовувати, тільки якщо необхідно задати певному елементу свій індивідуальний стиль.
За допомогою додаткового атрибута style ми можемо визначити потрібні нам стильові параметри в будь-якому тегу. Це найлегший спосіб, і діє він в межах лише одного тегу. Але представте, наскільки виросте розмір файлу, і наскільки незручно буде його виправляти, якщо ми будемо вказувати стиль в кожного тегу.
Глобальні таблиці стилів (Global Style Sheets) - визначають стиль елементів у всім документі.
Для цього використовується тег <STYLE type="text/css">. Він розміщається в заголовку документа <head> .
Лістинг 3.3:
Тепер ці стилі можна застосовувати в будь-якому місці html-коду. Для цього використовуються наступні конструкції:
Лістинг 3.4
В даному прикладі всі елементи <H1> будуть написані великим червоним курсивом, всі елементи із зазначеним класом BLUE будуть блакитними.
Зв'язані таблиці стилів (Linked Style Sheets) - можуть бути використані для декількох документів відразу й зберігаються в зовнішньому файлі.
Приклад зовнішнього файлу:
Лістинг 3.5 -Файл main.css
В самому ж HTML документі робиться посилання на цей файл за допомогою тегу <LINK>. Виглядає це так:
<LINK rel="STYLESHEET" TYPE="text/css" HREF="шлях до файлу">
Лістинг 3.6 - Файл іndex.html
Це самий зручний спосіб, і для основної таблиці стилів рекомендується користуватися саме ним.
Чому каскадні?
Каскадність полягає в тому, що стилі можуть перевизначаться. Наведений нижче список способів впровадження стилів відповідає порядку перевизначення. Нижче розташований спосіб може перевизначити попередньо розташований.
Способи впровадження стилів на сторінці:
використання окремого стильового файлу й вставка його за допомогою тегу <link>
опис стилю в заголовку документа
застосування стилю як параметра в тегу.
Наприклад, ми визначили в зовнішньому стильовому файлі, що текст в тегу <p> повинен бути написаний за допомогою шрифту висотою 10 пунктів. Але якщо в заголовку сторінки ми додатково вкажемо, що той же текст в тегу <p> повинен бути написаний шрифтом в 12 пунктів, то текст буде виведений шрифтом 12 пунктів - тобто стиль в заголовку сторінки перевизначив стиль в зовнішньому файлі.
Для чого це потрібно? Припустимо, що для всіх посилань у заголовку на нашій сторінці визначений наступний стиль:
<style type="text/css">
<!--
a.link { text-decoration: none; color:red; }
-->
</style>
</head>
І, отже, будь-який текст, який є гіперпосиланням, автоматично стає червоним і перестає бути підкресленим. І от ми вирішили наприкінці сторінки вказати посилання на сайт автора сторінки, але зробити це не сильно помітно, щоб не акцентувати на цьому увага. Зробити це нам потрібно всього лише в одному місці сторінки і визначати для цього додатковий клас недоцільно. Досить локально перевизначити колір посилання:
<a href="http://www.ivanov.ua"><span style="color: #000000;">Вася Іванов</span></a>
або так
<a href="http://www. ivanov.ua " style="color: #000000;"> Вася Іванов</a>
Зробили ми це за допомогою атрибута style, а він діє лише в межах того тегу, у якім був визначений.
Тег <span></span> визначає будь - яку область, до якої ми можемо застосувати стиль.