Page 48 - 6108
P. 48
Внутрішні текстові таблиці стилів
Внутрішні текстові стилі не використовують селектори, присвоєння
стилю відбувається безпосередньо до html-елементу через атрибут style:
<p style = "font-family: "Times New Roman", Georgia,
Serif; color: # 70d7700;"> Зверніть увагу на цей текст. </р>
Недоліком такого способу є неможливість автоматичного використання
даного стилю для іншого елемента.
Правило @import
Правило @import дозволяє завантажити зовнішню таблицю стилів. Щоб
директива @import працювала, вона повинна розташовуватися всередині тега
<style> перед іншими правилами:
<style type = "text / css">
@import url (mobile.css);
p { font-size: 0.9em; color: grey;}
</style>
Тег <link>
Зовнішня таблиця стилів представляє текстовий файл з розширенням .css,
в якому знаходиться весь набір стилів CSS. Він не містить HTML-код, тому
його не потрібно вкладати всередину тегів <style> ... </style>. Задані в
файлі стилі будуть працювати для всіх сторінок веб-сайту.
Зовнішня таблиця стилів (кілька таблиць стилів) прикріплюється до веб-
сторінки за допомогою тега <link>, вкладеного в тег <head>:
<link rel = "stylesheet" type = "text / css" href =
"style/style1.css">
<link rel = "stylesheet" type = "text / css" href =
"style/style2.css">
де rel = "stylesheet" вказує тип посилання (посилання на таблицю
стилів), а type = "text/css" повідомляє браузеру тип даних, в даному
випадку це текстовий файл, що містить css-код.
2.2.2 Селектори
За допомогою селекторів створюються CSS-правила для форматування
елементів веб-сторінки. В якості селекторів використовуються не тільки самі
елементи та їхні класи і ідентифікатори, а також псевдокласи і псевдоелементи.
Псевдокласи дозволяють додавати особливі класи до елементів,
вибираючи об'єкти, яких немає в структурі веб-сторінки, або які не можна
вибрати за допомогою звичайних селекторів, наприклад, перша буква або
перший рядок одного абзацу.
Псевдоелементи вибирають елементи, які не є елементами структури
html-сторінки.
Список селекторів CSS
– Універсальний селектор. Універсальний селектор відповідає будь-якому
елементу, наприклад, наступний запис обнулить відступи для всіх елементів
веб-сайту:
* {Margin: 0;}