Робота з класами в html і css
Коротко про те, для чого нам взагалі потрібні класи. Припустимо у нас на сторінці є кілька абзаців, і ми вирішили кожному з них поставити своє оформлення. Один повинен бути зеленого кольору, інший жовтого, а третій - так взагалі синього. Як бути в цьому випадку? Адже все що є в нашому розпорядженні на даний момент, так це тег p. І якщо ми будемо ставити йому правило, то воно автоматично застосується для всіх елементів. А нам би цього не хотілося. Ось на цей випадок і придумали класи.
Як ви напевно вже здогадалися, класи використовуються в тому випадку, коли нам потрібно дати певного абзацу властивості, які притаманні тільки одному йому. В html коді, щоб якомусь тегом призначити клас, потрібно в атрибуті class прописати сама назва класу. Наприклад class = 'green'. По факту це буде виглядати приблизно ось так:
Але від того, що ми прописали елементу такої атрибут, сам текст зеленим від цього не став. Тому що потрібно задати йому CSS правило. А зробити це можна так:
Дане правило можна прочитати так: постав елементу p з класом green зелений колір. Тепер, якщо ми хочемо домогтися того, щоб всі абзаци, що знаходяться у нас на сторінці були зеленого кольору, ми просто прописуємо їм відповідний клас. І бачимо що ті параграфи, яким ми дали даний атрибут, забарвилися в зелений колір.
Для закріплення матеріалу, можете іншим абзаців призначити свої класи і прописати їм власні CSS правила.
З іншими елементами абсолютно та ж історія. Ви можете точно так же, задати класи заголовку h1 або h2 і розфарбувати їх в інші кольори. Ну а взагалі, сама суть не в самих кольорах, а в тому щоб виділити ті чи інші елементи на сторінці за допомогою класів. А правила ви їм будете вільні задавати такі, які заманеться.
Так само ви можете зіткнутися з такою ситуацією, що вам знадобиться зробити зеленим не тільки абзац, а й заголовок теж. І тут у вас буде три варіанти. Зробити так:
Прописати окремо правила для заголовка і абзацу:
Використовувати угруповання селекторів:
Але можна зробити коротше, вказавши так:
Тут ми не вказуємо ніяких селектор, а даємо зрозуміти, що працюємо з усіма елементами, які мають зазначений клас.
Крім того, у нас так само є можливість задати приналежність елемента відразу до декількох класів. Для цього достатньо вказати у елемента другий клас через пробіл. Наприклад, ось так:
А вже в CSS для селектора big задати необхідні йому правила.
Де це може використовуватися?
Ну наприклад, якщо ви хочете не тільки вказати колір вашого елементу, але так само ще і встановити розмір шрифту. Але ви не хочете робити це для всіх елементів з класом green, а хочете використовувати дане правило лише для певного абзацу. Наприклад, так:
На скріншоті видно, що певного абзацу, серед інших забарвлених зеленим кольором, я вирішив поставити ще більший розмір шрифту. Але я не міг прописати правило font-size для селектора з класом green. Тому що в цьому випадку, у мене б у всіх абзаців, що мають клас green, збільшився розмір шрифту.
На сьогодні мабуть все, тому що все, що я хотів вам розповісти про класи, вже розповів. До зустрічі в наступних уроках!