Ну для початку, скажу що селектор служить для того, щоб однозначно визначити елемент в html документі, до якого ми хочемо застосувати той чи інший стиль CSS.
До цього моменту, ми з вами працювали саме з цим селектором.Т.е. в якості селектора використовувалося безпосередньо ім'я html елемента. до якого ми хотіли застосувати даний стиль. Тобто написавши клас наприклад для параграфа (Р). всі параграфи на сторінці набували стиль даного класу.
P font-family: arial, verdana, sans-serif;
font-size: 12px
>
А тепер уявіть ситуацію, коли необхідно зробити перший параграф в одному стилі, другий в іншому, третій в третьому і.т.д. Тут нам на допомогу прийде селектор по класу.
Давайте розберемо як створити універсальний клас в CSS. А зробити це дуже просто: спочатку ставимо крапку, потім відразу, без пробілу, пишемо ім'я класу, ну а потім в фігурних дужках стиль. Ну наприклад:
.green font-family: arial, verdana, sans-serif;
font-size: 12px; color: green;
>
Як застосувати даний стиль?
Припустимо ми хочемо застосувати даний стиль до певного параграфу в документі. Ось як це буде виглядати в html:
Як бачите використовується атрибут class зі значенням назви стилю. Зрозуміло? ось вам ще прімерчік:
Це звичайний параграф. для нього використовується селектор по елементу
Цей параграф зелений, т.к до нього застосували клас
А цей параграф більшого шрифту і червоний
Цей параграф знову звичайний, по класу селектора елемента
Вказуємо спочатку базовий стиль для всіх параграфів (селектор по елементу), а потім вже, якщо хочемо в будь-якому пункті щось змінити, створюємо для нього спеціальний стиль (селектор по класу) і присвоюємо його цього параграфу. Коли ми створюємо цей самий спеціальний клас, ми повинні писати туди тільки ті властивості, які хочемо додати, або змінити, по відношенню до базового стилю для цього елемента.
Класи з прикладу вище, можна застосувати не тільки до параграфу, але і як заголовки, або наприклад до осередку таблиці, або до всієї таблиці, коротше вони можуть застосовуватися всюди, де вони можуть на щось вплинути (в даному випадку скрізь, де є параметр колір, і текст).
Зробити так, щоб клас діяв тільки на певний елемент (наприклад параграф) можна вказавши назву елемента перед точкою:
Тепер клас green не діятиме ні на що інше, крім елемента P.
↑ Вгору ↑
Даний селектор застосовується якщо необхідно виділити один єдиний елемент. унікальний, відмінний від усіх інших в документі. Наприклад, виділимо перший заголовок на сторінці певним чином:
<Н1 id =" firstheader "> Перший заголовок на сторінці
Як бачите в html-частини замість атрибута class тут вживається атрибут id. а в css - замість точки вживається знак #.
В принципі, те ж саме можна зробити і з використанням селектора по класу, це вже кому як більше подобається :)
↑ Вгору ↑
Це дуже корисна річ. Припустимо у нас є сторінка з таблицями і параграфами тексту, причому і в таблиці, і в параграфах зустрічаються виділені жирним шрифтом (strong) слова. І ось, нам різко знадобилося зробити так, щоб слова, в параграфі, які виділені жирним стали зеленого кольору. Так ось:
Тобто на початку P потім пробіл, потім STRONG а вже потім стиль. Читається ця строчка приблизно так: Якщо всередині елемента P є елемент STRONG то елементу strong привласнити стиль зеленого кольору.
Вкладеність може бути будь-якого рівня. Ось ще приклад: "Якщо раптом всередині комірки таблиці (td). Зустрінеться параграф (P), всередині якого буде слово виділене жирним (STRONG) то нехай це слово стане червоним!"
Ну тепер я думаю Вам все вже зрозуміло. Експерементіруйте, створюйте свої стилі, і буде вам щастя.