Вбудовування таблиць стилів в html-документ

§ 3. Вбудовування таблиць стилів в HTML-документ.

Сьогодні напевно важко уявити собі веб-сайт без використання такої, вельми потужною технології, як каскадні таблиці стилів. У цій статті ми поговоримо з вами про те, яким чином підставляються стилі в веб-сторінку.

Розрізняють три способи розміщення стилю на сторінці:
  • Підставляються стилі (in-line)
  • Вбудовувані стилі (embedded)
  • Зовнішні таблиці стилів
Тепер давайте розглянемо кожен спосіб окремо. Перший спосіб - це підставляються таблиці стилів. Даний метод ми застосовуємо для конкретного елемента сторінки, наприклад для горизонтальної лінії (
). приклад:


Застосувавши цей стиль, ми отримаємо горизонтальну лінію довжиною 50 пікселів, висотою в 4 пікселя і, відповідно, кольором # ff8c00. Даний спосіб вбудовування стилю доцільно використовувати, якщо необхідно змінити стиль написання тексту, гарнітуру, колір тільки в певному місці сторінки.

Наступний спосіб підстановки # 151; це вбудований стиль. Даний спосіб більш компактно додає таблицю стилів. Здійснюється шляхом додавання в заголовок html-сторінки тегів , між якими ви записуєте потрібні стилі. приклад:

Наступним способом підстановки буде використання зовнішньої таблиці стилів. Даний спосіб є найкращим, для використання каскадних таблиць стилів. Являє собою ось що. Все css-стилі ми збираємо в одному єдиному текстовому файлі і в кожної html-сторінці робимо посилання на цей файл. Тепер ми дуже швидко зможемо змінити необхідного файла та ці зміни автоматично відіб'ються на всіх сторінках сайту. Чи не правда зручно?

Існує два способи звернення до зовнішніх таблиць стилів (до речі, файл таблиць стилів повинен мати розширення .css) з html-сторінки.



Тема вашої сторінки


...

Тут ми використовуємо спеціальний тег , який посилається на файл зі стилями. Даний спосіб добре підтримується різними браузерами і є найбільш часто використовуваних. Атрибути, що містяться в даному тезі позначають наступне: атрибут rel = "stylesheet" вказує на те, що ми будемо мати справу з таблицею стилів, атрибут href = "..." вказує місце розташування css-файлу. Тут може вказуватися як відносний шлях, так і абсолютний.

Тут потрібно зробити зауваження, що функція @import повинна стояти перед будь-якими правилами. Перевагою даного способу є можливість додати на сторінку відразу кілька таблиць стилів.

Перераховані тут способи вбудовування таблиць стилів мають свої плюси і мінуси. Це вже вам вирішувати, яким чином слід прикріпити стиль на сторінку, який спосіб буде більш прийнятним для вас і для конкретної ситуації. Хай щастить.

У вас виникли питання? Прошу на форум. Тут швидко дадуть відповідь на ваше запитання.

А тим часом на форумі