Анотація: В лекції даються основні відомості про синтаксис CSS, розглядаються основні способи впровадження CSS в HTML. Також описуються основні селектори, псевдоелементи і псевдокласи, зачіпаються такі фундаментальні концепції CSS як успадкування і каскадирование.
синтаксис CSS
Існує кілька різних селекторів, кожен з яких відповідають різним частинам розмітки. Чотирма найбільш загальними селекторами є універсальні селектори. селектори елементів, селектори класів і селектори ідентифікаторів.
Універсальні селектори. Універсальні селектори дозволяють застосувати стильове оформлення відразу до всіх елементів на сторінці. Наприклад, наступне правило встановлює суцільну кордон товщиною 1 піксель для кожного елемента на сторінці:
Селектори елементів. Для визначення інформації про подання елементів HTML більшість стильових правил використовують в якості селекторів імена цих елементів. наприклад,
Наведене вище правило застосовуватиметься до всіх елементів
...
.Селектори класів. Нагадаємо, що Специфікація HTML 4.01 передбачає для всіх елементів спеціальний атрибут class. який дозволяє певним чином відзначити деякі структурні елементи в документі, наприклад
Каскадні таблиці стилів дозволяють використовувати в якості селекторів значення атрибутів class. Назви класів в селекторах предваряются точкою і вказуються після імен елементів:
У наведеному прикладі стильове правило буде застосовуватися тільки до тих елементів
...
. атрибут class яких має значення important.Каскадні таблиці стилів також дозволяють використовувати в селекторах назви класів без вказівки імен елементів:
Подібні стильові правила будуть застосовуватися до всіх елементів, які мають атрибут class з вказаним значенням.
Селектори ідентифікаторів. Крім класів, Специфікація HTML передбачає для всіх елементів ще один спеціальний атрибут id. за допомогою якого будь-якого елементу можна призначити унікальний ідентифікатор. наприклад:
Головна відмінність ідентифікаторів від класів полягає в тому, що кожне значення атрибута id має бути унікальним. Ідентифікатори в селекторах вказуються після імен елементів і передує символом #:
Дане стильове правило буде застосовуватися до єдиного екземпляру елемента
Можна поєднувати кілька селекторів, щоб визначити ще більш конкретні правила. Наприклад, запис