Додавання CSS до веб-сторінки
Є фактично три способи додати CSS до веб-сторінки, і кожен з них має цілком конкретну мету та використання.
- Просмотров |
Є фактично три способи додати CSS до веб-сторінки, і кожен з них має цілком конкретну мету та використання.
Зовнішня таблиця стилів
Найпоширенішим та найбільш корисним способом додавання таблиці стилів на вашу веб-сторінку є використання зовнішньої таблиці стилів. Ви створите окремий документ, назвемо його ‘style.css’. Частина “стиль” не має значення, ви можете називати це “sirHenry.css”, якщо ви так вибрали; це важлива частина .css.
У цій таблиці стилів ви точно визначите, які шрифти, кольори, кольори та / або зображення фону, інтервал, розташування тощо. Наприклад:
body { background-color: #ffffff; color: #000000; font-family: Arial, sans-serif; } p { padding: 15px; } h1 { color: FF0000; font-family: "Wide Latin"; }
І ви називаєте цей стиль document.css і зберігаєте його в тому ж каталозі, в якому знаходиться ваш файл index.html.
Але якщо ви подивитеся на сторінку index.html у вашому веб-переглядачі зараз, ви не побачите жодного з кольорів, визначених нами у style.css. Для того, щоб побачити чарівні кольори, ми повинні зв’язати таблицю стилів з HTML-документом. І це зроблено за допомогою цього коду:
<link href="style.css" rel="stylesheet" type="text/css">
І ця лінія повинна перейти в головний розділ вашого документа HTML – так, тут:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>A Good Title for this Page</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="style.css"> </head>
Тепер переконайтеся, що style.css і ця нова версія вашої HTML-сторінки також завантажені на ваш хостинг-обліковий запис, оновіть html-сторінку, і ви побачите … Тоді є:
Внутрішній стиль
Замість того, щоб використовувати зовнішню таблицю стилів, ви можете додати весь стиль безпосередньо до головного розділу кожної сторінки – це буде виглядати так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>A Good Title for this Page</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> body { background-color: #ffffff; color: #000000; font-family: Arial, sans-serif; } p { padding: 15px; } h1 { color: FF0000; font-family: "Wide Latin"; } </style> </head>
Це метод, який корисний для стилю, який застосовується лише до тієї самої сторінки, яку вона вставляє, – напевно, не те, що ми визначили вище. Хорошим прикладом того, коли внутрішній стиль може бути практичним, є контактна сторінка вашого сайту – стиль для контактної форми (ймовірно) не буде потрібний ніде всьому сайту, тому додаванням частин, які стосуються саме цих тегів, лише на контактна форма має здоровий глузд.
Причина того, що використання внутрішнього стилю для таких речей, як тіло та теги h1, не є гарною ідеєю зовсім просто. Скажімо, ви використовували вищенаведене для свого нового сайту, і тепер, коли закінчено всі 159 сторінок, ви вирішите, що ви дійсно повинні змінити колір тегів h1. І тепер вам доведеться відкрити кожен з цих 159 сторінок і внести ці зміни. НЕ дуже ефективно, чи не так?
І, нарешті, ми маємо:
Вбудоване оформлення
На додаток до вищенаведеної зовнішньої таблиці стилів (для всіх сторінок сайту) та внутрішнього стилю (для всіх стилів на цій ONE сторінці) існує також вбудований стиль. Це практично, якщо ви стилізувати лише одне ціле один раз на вашому сайті. Може бути, це ОДИН пункт на цій ОСНОВНІЙ сторінці, який ви хочете залишити – але тільки той самий – на весь сайт. Тоді ви можете використовувати нахил стиль так:
<p style="border: solid 5px #FFAA00;"> The very special paragraph that shows up only ONE time on this ONE page on the ENTIRE site - only here, nowhere else. Got it? </p>
