Каскадні таблиці стилів. Стильове оформлення сторінок

Стилем або CSS (Cascading Style Sheets, каскадні таблиці стилів) називається набір параметрів форматування, який застосовується до елементів документа, щоб змінити їх зовнішній вигляд.

Можливість роботи зі стилями здавна включають в розвинені видавничі системи і текстові редактори, тим самим дозволяючи одним натисканням кнопки надати тексту заданий, заздалегідь встановлений вид. Тепер це доступно і творцям сайту, коли колір, розміри тексту і інші параметри зберігаються в певному місці і легко «прикручуються» до будь-якого тегу. Ще однією перевагою стилів є те, що вони пропонують набагато більше можливостей для форматування, ніж звичайний HTML.

Розмежування коду і оформлення

Ідея про те, щоб код HTML був вільний від елементів оформлення типу установки кольору, розміру шрифту та інших параметрів, стара як світ. В ідеалі, веб-сторінка повинна містити тільки теги логічного форматування, а вигляд елементів задається через стилі. При подібному поділі робота над дизайном і версткою сайту може вестися паралельно.

Різне оформлення для різних пристроїв (адаптивність)

За допомогою стилів можна визначити вид веб-сторінки для різних пристроїв виводу: монітора, принтера, смартфона, планшета і ін. Наприклад, на екрані монітора відображати сторінку в одному оформленні, а при її друку – в іншому. Ця можливість також дозволяє приховувати або показувати деякі елементи документа при відображенні на різних пристроях.

Розширені в порівнянні з html способи оформлення елементів

На відміну від HTML стилі мають набагато більше можливостей по оформленню елементів веб-сторінок. Простими засобами можна змінити колір фону елемента, додати рамку, встановити шрифт, визначити розміри, положення і багато іншого.

Прискорення завантаження сайту

При зберіганні стилів в окремому файлі, він кешується і при повторному зверненні до нього витягується з кешу браузера. За рахунок кешування і того, що стилі зберігаються в окремому файлі, зменшується код веб-сторінок і знижується час завантаження документів.

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

Єдине стильове оформлення безлічі документів

Сайт це не просто набір пов'язаних між собою документів, а й однакове розташування основних блоків, і їх вид. Застосування однакового оформлення заголовків, основного тексту та інших елементів створює спадкоємність між сторінками і полегшує користувачам роботу з сайтом і його сприйняття в цілому. Розробникам ж використання стилів істотно спрощує проектування дизайну.

Базовий синтаксис CSS

Стильові правила записуються в своєму форматі, відмінному від HTML. Основним поняттям виступає селектор - це деяке ім'я стилю, для якого додаються параметри форматування. Як селектори виступають теги, класи і ідентифікатори. Загальний спосіб запису має наступний вигляд.

Спочатку пишеться ім'я селектора, наприклад, BODY, це означає, що всі стильові параметри будуть застосовуватися до тегу <body>, потім йдуть фігурні дужки, в яких записується стильова властивість, а її значення вказується після двокрапки. Стильові властивості поділяються між собою крапкою з комою, в кінці цей символ можна опустити.

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

Порівняємо коди сторінки без застосування стилів та зі стильовим оформленням.

HTML-документ, для форматування елементів якого використані атрибути тегів без застосування стилів:

<!DOCTYPE html>

<html>

<head>

<title>Сторінка без стилю</title>

</head>

<body>

<h1 align=center><font color='#000080' face="Comic Sans MS">Перший заголовок</font></h1>

<p><font color='#008000' size=4>Текст першого абзацу</font></p>

<p><font color='#008000' size=4>Текст другого абзацу</font></p>

<p><font color='#008000' size=4>Текст третього абзацу</font></p>

<p><font color='>#008000' size=4>Текст четвертого абзацу</font></p>

<h1 align=center><font color='#000080' face="Comic Sans MS">Другий заголовок</font></h1>

<p>Текст п'ятого абзацу</p>

<p>Текст шостого абзацу</p>

</body>

</html>

Атрибути форматування у цьому випадку мають додаватися до кожного тегу, що збільшує кількість коду. У вищенаведеному прикладі два останні абзаци без форматування, бо у тегах відсутні відповідні атрибути.

Способи додавання стилів на сторінку

Для додавання стилів на веб-сторінку існує кілька способів, які розрізняються своїми можливостями і призначенням:

  • глобальні стилі;

  • пов'язані (зовнішні) стилі;

  • внутрішні (вбудовані) стилі;

  • іморт стилів.

Глобальні стилі

При використанні глобальних стилів властивості CSS описуються в самому документі html і розташовуються в заголовку веб-сторінки. Цей спосіб додавання стилю дозволяє зберігати стилі в одному місці, в даному випадку прямо на тій же сторінці за допомогою контейнера <style></style> .

Файл HTML

<!DOCTYPE html>

<html>

<head>

<title>Глобальні стилі</title>

<style type="text/css">

h1 {

color: #000080;

font-family: Comic Sans MS;

text-align: center;

}

p {

color: #008000;

font-size: 14pt;

}

</style>

</head>

<body>

<h1>Перший заголовок</h1>

<p>Текст першого абзацу</p>

<p>Текст другого абзацу</p>

<p>Текст третього абзацу</p>

<p>Текст четвертого абзацу</p>

<h1>Другий заголовок</h1>

<p>Текст п'ятого абзацу</p>

<p>Текст шостого абзацу</p>

</body>

</html>

Приклад сторінки

Пов'язані (зовнішні) стилі

При використанні пов'язаних стилів опис селекторів та їх значень розташовується в окремому файлі, як правило, з розширенням .css, а для зв'язування документа з цим файлом застосовується тег <link>. Даний тег поміщається в контейнер <head></head>.

<link rel="stylesheet" type="text/css" href="style.css">

Значення атрибута тега <link> - rel залишається незмінним незалежно від коду. Значення href задає шлях до CSS-файлу, він може бути заданий як відносно, так і абсолютно. Зауважте, що таким чином можна підключати таблицю стилів, яка знаходиться на іншому сайті.

<link rel="stylesheet" type="text/css" href="http://htmlbook.ru/mysite.css">

Файл HTML

<!DOCTYPE html>

<html>

<head>

<title>Сторінка зовнішнім стилем</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<h1>Перший заголовок</h1>

<p>Текст першого абзацу</p>

<p>Текст другого абзацу</p>

<p>Текст третього абзацу</p>

<p>Текст четвертого абзацу</p>

<h1>Другий заголовок</h1>

<p>Текст п'ятого абзацу</p>

<p>Текст шостого абзацу</p>

</body>

</html>

Файл CSS (style.css)

h1 {

color: #000080;

font-family: Comic Sans MS;

text-align: center;

}


p {

color: #008000;

font-size: 14pt;

}

При застосуванні стилів css форматування елементів перенесено у окремий файл style.css, а в html-документі залишилася лише розмітка за допомогою тегів. При чому і два останні абзаци також відформатовані, тому що правила, записані для тега <p> в файлі css, впливають на кожен цей тег в файлі html.

Внутрішні стилі

Внутрішній або вбудований стиль є по суті розширенням для одиночного тега, використовується на поточній веб-сторінці. Для визначення стилю використовується атрибут style, а його значенням виступає набір стильових правил.

Файл HTML

<!DOCTYPE HTML>

<Html>

<Head>

<Meta charset = "utf-8">

<Title>Внутрішні стилі</title>

</Head>

<Body>

<P style = "font-size: 120%; font-family: monospace; color: #cd66cc">Приклад тексту</p>

<P>Приклад тексту без стилю</p>

</Body>

</Html>

Приклад сторінки

В даному прикладі стиль тега <p> задається за допомогою атрибута style, в якому через крапку з комою перераховуються стильові властивості.

Внутрішні стилі рекомендується застосовувати на сайті обмежено або взагалі відмовитися від їх використання. Справа в тому, що додавання таких стилів збільшує загальний обсяг файлів, що веде до підвищення часу їх завантаження в браузері, і ускладнює редагування документів для розробників.

Всі описані методи використання CSS можуть застосовуватися як самостійно, так і в поєднанні один з одним. В цьому випадку необхідно пам'ятати про їх ієрархії. Першим має пріоритет внутрішній стиль, потім глобальний стиль і в останню чергу пов'язаний стиль.

Імпорт CSS

У поточну стильову таблицю можна імпортувати вміст CSS-файлу за допомогою команди @import. Цей метод допускається використовувати спільно зі зв'язаними або глобальними стилями, але ніяк не з внутрішніми стилями. Загальний синтаксис наступний.

@import url ( "ім'я файлу") типи носіїв;

@import "ім'я файлу" типи носіїв;

Після ключового слова @import вказується шлях до стильового файлу одним з двох наведених способів - за допомогою url або без нього.

<! DOCTYPE HTML>

<Html>

<Head>

<Meta charset = "utf-8">

<Title> Імпорт </title>

<Style>

@import url("style/header.css");

H1 {

font-size: 120%;

font-family: Arial, Helvetica, sans-serif;

color: green;

}

</Style>

</Head>

<Body>

<H1> Заголовок 1 </h1>

<H2> Заголовок 2 </h2>

</Body>

</Html>

В даному прикладі показано підключення файлу header.css, який розташований в папці style.

Аналогічно відбувається імпорт і в файлі зі стилем, який потім підключається до документа.

@import "/style/print.css";

@import "/style/palm.css";

BODY {

font-family: Arial, Verdana, Helvetica, sans-serif;

font-size: 90%;

background: white;

color: black;

}

В даному прикладі показано вміст файлу mysite.css, який додається за допомогою тега <link>.

Опрацюйте теоретичні відомості:

08_Каскадні таблиці стилів.pdf
09_Робота з текстом та фонами в CSS.pdf

Практична частина

Вправа 1

Виконайте завдання за зразком:

Інструкція та матеріали для роботи за посиланням: Google-диск

Вправа 2

Виконайте завдання за зразком:

Сторінка 1

Сторінка 2

Інструкція та матеріали для роботи за посиланням: Google-диск