2 Каскадні таблиці стилів CSS (Cascading Style Sheets)
HTML код окремо, стилі окремо
У сучамному WEB дизайні атрибути style зустрічаються надзвичайно рідко. Стилі перенесли в окремий розділ, щоб відокремити від html - коду.
Всі необхідні стилі для сайту записали у вигляді правил.
Правило - це селектор та його стилі у фігурних дужках у вигляді оголошень.
Пару властивість: значення називається оголошення, або декларація. Якщо оголошень декілька, то між ними необхідно ставити ;
Селектор – це такій собі «маркер» що вказує до яких елементів і в якому місті застосувати правило. Селектором може бути тег.
Оголошення разом з селектором називають css правилом.
Набір правил називають каскадні таблиці стилів (Cascading Style Sheets, скорочено - CSS).
Види селекторів
Селекторами можуть бути теги, класи, ідентифікатори.
1) Селетор типу - тег
Якщо селектор – тег, то правило буде застосовано до всіх тегів вказаного типу.
Наведемо приклад:color:blue;
}
<P> Це наступний абзац. Напевно він теж синій </P>
В прикладі всі абзаци HTML стрінки синього кольору.
Зверніть увагу, що в css коді правила в знаходяться в окремих рядках. Так прийнято для кращого сприйняття коду.
2) Селетор - клас
Якщо, наприклад, деякі однакові теги повинні мати одні стилі, а деякі інші, тоді до тегів додається атрибут class = "назва класу", в css правилах перед назвою класу ставиться крапка.
.назва класу {оголошення;}Також можна розглянути випадки, коли теги різні, а стилі однакові. В таких випадках також доречно застосувати атрибут class.
Наведемо приклад:color:blue;
}
.red {
color:red;
}
<H3 class = blue> Тут назва статті синім текстом </H3>
<p class = blue> Текст абзацу статті – синій, в одному стилі із заголовком статті. Всі подальші абзаци бажано було б розфарбувати в той самий синій атрибутом class = “blue”</p>
3) Селетор - ідентифікатор (id).
Ідентфікатор використовується для створення унікальних елементів на сторінці (заголовок, авторський підпис, рекламний блок, тощо). Ідентифікатор застосовується також при написаннні програмних скриптів.
В правилах ідентифікатор позначається знаком #
#ідентифікатор {оголошення;}
Правило застосовується до тегів з атрибутом id = "ідентифікатор".
Наведемо приклад:font-family:
”Monotype Corsiva”;
color:blue;
}
<p id = "author"> Автори статті: Вулодька та Юрчик </p>
Де розташувати css код і як його під'єднати до html коду
Стилі для багатосторінкового сайту
В багатьох випадках таблиця стилів створюється не для однієї сторінки сайту, а для всіх сторінок одразу. Тоді css код найкраще створити в будь-якому текстовому блокноті, потім зберегти як файл типу css. Наприклад file.css Потім файл css необхідно "прив'язати" до відповідних html сторінок сайту. Для імпорту css файлу в html документ в розділі head треба вставити тег link з атрибутами:
<head>
<link rel="stylesheet" type="text/css" href="ім'я css файлу ">
</head>
Наведемо приклад створення файлу file.css та підключення його до html коду файлу file.html :
color:red;
}
<head>
<link rel="stylesheet" href="file.css">
</head>
<body>
<p> В цьому абзаці червоний колір тексту </p>
</body>
</html>
Зберігання стилів в одному css файлі економить багато часу під час редагування. Адже зміна стилю в css файлі стосується всіх html файлів сайту.
Стилі для однієї сторінки сайту
Часто буває, що необхідно створити стиль для одного html файлу. В такому випадку таблицю стилів варто створити в контейнері <style> </style>, який має знаходититись виключно в розділі <head> <head>
<head>
<style>
p {
color:red;
}
</style>
</head>
<body>
<p> В цьому абзаці червоний колір тексту </p>
</body>
</html>
1) Виконайте вправи за посиланням
2) Виконайте вправу 2 в зошиті