Протягом цього ряду було вже декілька разів зазначено про таблиці стилів. Ці таблиці стилів дозволяють чітко відокремлювати макет від дизайну. Благодаря CSS, HTML-елементи відповідають виключно за логічне або семантичне опис документу.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
h1 {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
p {
font-family:Geneva, Arial, Helvetica, sans-serif;
color:#0066FF;
}
</style>
</head>
<body>
<h1>PSD-Tutorials.de</h1>
<p>dein Grafik-, Web- & Fotoportal</p>
</body>
</html>У браузері документ виглядає так:
У розділі body HTML-файла визначено два елементи:
• заголовок
• абзац тексту
За допомогою CSS ці два елементи форматуються. Для цього область стилів визначається в розділі head за допомогою style. У межах цієї області відбувається форматування елементів.
Ось визначення для заголовка h1 ще раз:
h1 {
font-family: "Courier New", Courier, monospace;
font-size: 200%;
}
З показаною синтаксою визначаються дві речі:
• Встановлюється сімейство шрифтів.
• Визначається розмір шрифту.
На цьому етапі ми починаємо загальні розділи щодо використовуваної синтакси. Кожна інструкція CSS по суті складається з двох частин - селектора та CSS-декларації. Завдяки селектору вибирається елемент, який потрібно відформатувати. Як саме виглядатиме це форматування, визначає CSS-декларація. Селектор завжди знаходиться зліва, а CSS-декларація - справа всередині фігурних дужок.
Справжня CSS-декларація знову складається з двох елементів, а саме властивості та значення. Властивість та значення розділяються двокрапкою. За значенням слідує крапка з комою.
Selektor {
Eigenschaft: Wert;
}Підключення таблиць стилів
Існує декілька різних способів включення таблиць стилів у веб-сторінки. По-перше, ви можете безпосередньо призначити стиль HTML-тегу. Приклад:
<h1 style="color: #0033CC;">PSD-Tutorials.de</h1>
У цьому прикладі заголовок відображається синім кольором.
Ви також можете додати кілька стильових інструкцій безпосередньо до HTML-тегу.
<h1 style="color: #0033CC; background-color: #99FF66">PSD-Tutorials.de</h1>
Просто додайте їх одна за одною, розділяючи їх крапкою з комою.
Загалом ці так звані вбудовані стилі мають сенс лише тоді, коли окремі області в межах сторінки потрібно індивідуально форматувати. Однак, як правило, вам слід уникати такого прямого форматування, оскільки відтак HTML-код стає неповним.
Центральне визначення у розділі head
Ви можете визначити центральну таблицю стилів всередині розділу head HTML-файлу. Тут визначаються всі стилі, які повинні застосовуватися до цього файлу.
<head>
<style type="text/css">
.text {
font-family: "Courier New", Courier, monospace;
font-size: 200%;
}
</style>
</head>
Перевага цього способу полягає в тому, що, на відміну від інблокованого варіанта, визначені формати можна використовувати кілька разів у документі. У попередньому прикладі було визначено CSS-клас text. (Докладна інформація про селектори, такі як використаний тут клас, буде наведена в наступному навчальному посібнику). Цей клас можна використовувати довільну кількість разів у документі.
<h1 class="text">PSD-Tutorials.de</h1> <p class="text">dein Grafik-, Web- & Fotoportal</p>
Таке визначення має перевагу перед вбудованим варіантом, оскільки зміни можна виконати дуже швидко.
Відокремлення CSS-інструкцій
Найбільш практичний спосіб визначення CSS - це відокремлення стилів у зовнішній файл. Таким чином, безліч HTML-файлів можуть отримати доступ до одного і того ж CSS-файлу. Таким чином, однорідне форматування всіх файлів, що входять до веб-проекту, стає дуже простим. Подальші зміни, які повинні впливати на усі сторінки, можна легко впровадити.
<link rel="stylesheet" type="text/css" href="css/styles.css">
У частині файлу HTML визначений елемент link. Спочатку параметра-значення rel="stylesheet" визначається в link. Потім вказується type="text/css". Атрибуту href призначається відповідний CSS-файл. Тут важливо - подібно до включення зображень - правильно вказати шлях. У поточному прикладі я припускаю, що файл CSS styles.css знаходиться у каталозі css, який, в свою чергу, знаходиться на тому самому рівні, що й сам HTML-файл.
Зверніть увагу, що посилається на CSS-файл через звичайний текстовий файл із розширенням css. Методом зовнішнього CSS-файлу визначаються відповідні CSS-інструкції.
h1 {
font-family:"Courier New", Courier, моноширинний;
font-size: 200%;
}
Альтернативною до показаного варіанта з посиланням є імпорт таблиць стилів. Тут також CSS-інструкції розташовані в зовнішньому файлі. Для цього використовується наступний синтаксис:
<style type="text/css">
@import url("css/styles.css");
</style>
Усередині дужок вказується шлях до файлу CSS, який необхідно імпортувати. До речі, @import у CSS-синтаксисі. Тому директива @import може бути використана і всередині файлів CSS. Це дозволяє викликати із таблиці стилів інші таблиці стилів, що сприяє кращому порядку таблиць стилів.
Нарешті, виникає питання, чи варто використовувати link чи @import. В принципі я віддаю перевагу link, оскільки цей варіант просто швидший, тобто продуктивність сторінки краща.
Стилізація для різних медіа
Можна визначити таблиці стилів для різних медіа, таких як принтер або екран. Для цього використовується атрибут media. При цьому таблицю стилів можна присвоїти кільком розділяються комами медіа.
<link rel="stylesheet" media="screen" href="css/styles.css"> <link rel="stylesheet" media="print " href="css/druck.css">
У цьому випадку було викликано дві таблиці стилів, одну для екрану, іншу для випадку, якщо сторінку роздруковують. Так от, файл CSS druck.css буде завантажено, коли викликається функція друку в браузері. Всього доступні наступні значення media:
• all – Для всіх вихідних медіа.
• aural – Файл CSS використовується для голосових систем виведення.
• braille – Файл CSS призначений для брайльових принтерів з тактильним відгуком, що можуть генерувати так звану «сліпецьку» мову.
• embossed – Це спонукає до брайльових сторінкових принтерів.
• handheld – Призначений для пристроїв пристосованих для ручного тримання.
• print – Файл CSS призначений для друку на папері. Браузери автоматично повинні звертатися до цього файлу при виклику друку.
• projection – Цей варіант призначений для проектованих презентацій.
• screen – Призначений для екранного відображення.
• tty – Файл CSS призначений для медіа, що використовують фіксовану сітку знаків. Це можуть бути, наприклад, телетайп і термінали.
• tv – Це стосується пристроїв, схожих на телевізори. Припускається, що пристрої мають низьку роздільну здатність і обмежену прокрутку.
Крім показаного HTML-синтаксису з використанням елемента link, є також спеціальні варіанти CSS. Для цього використовується @import або @media.
<style type="text/css">
@media screen, projection {
/* Формати для екрану */
}
@media print {
/* Формати для друку */
}
</style>
У межах елементу style визначаються через @media області для визначення форматів, призначених для певного вихідного носія. Для цього за @media, розділених пробілами, вказується один з вже описаних типів медіа. Кілька типів медіа вказуються через коми.
