Отже розглянемо приклад:
Як ми бачимо, що файл складається з правил виду:
Таким чином за допомогою селекторів ми вибираємо потрібні нам елементи і для певних властивостей задаємо необхідні значення.
Бувають декількох видів:
Узагальнюючі. Вони містять у собі зірочку. Використовуючи їх, ми призначаємо правила відразу всіх елементів в межах документа або батьківського об'єкта. У прикладі * визначає шрифт Tahomа для всіх елементів нашої сторінки.
Назва тега. Якщо нам потрібно обробити всі теги з одним ім'ям, то це правило підходить найкраще. Ми можемо перефарбувати всі параграфи, або поміняти розмір всіх заголовків. Ось і в нашому випадку body
Клас елементів. Дозволяє вказати потрібні стилі відразу для всіх елементів одним класом. Наприклад, якщо ви хочете частина елементів списку перефарбувати в інший колір, то для них ви задаєте атрибут class = "class-name». а у властивостях пишіть конструкцію починається з точки - .class-name. У нашому прикладі .first
Ідентифікатор елемента. Дуже зручно в тих випадках, коли вам потрібно поміняти властивості тільки одного елемента на сторінці. Наприклад, поставити фон для шапки сайту, або поміняти розмір форми підписки справа. І багато іншого. Для цього у елемента сторінки потрібно задати атрибут id = "attr-id", а у властивостях вказати # attr-id. У нашому прикладі #r
вкладеність селектор
Ще більш розширити функціонал селекторів CSS можна за допомогою їх вкладеності.
Наприклад, у вас на сторінці необхідно у всіх параграфах перефарбувати посилання в червоний колір. Ви можете написати такий селектор.
Замість назв тегів можна застосовувати класи і ідентифікатори, тут немає ніяких обмежень.
Як бачите, подібний підхід дозволяє створювати більш приватні разі і максимально гнучко змінювати властивості тільки потрібних нам елементів, не зачіпаючи всі інші.
спадкування властивостей
Ще одне важливою особливістю CSS є успадкування властивостей.
Перший оператор скидає відступи для всіх елементів сторінки.
Другий - встановлює відступи в 10 пікселів для всіх параграфів.
Якщо для якихось параграфів буде поставлено class = "class», то їх відступи поміняються на 5 пікселів.
І якщо серед цих все параграфів з'явиться один з id = "id", то його відступи будуть шириною 6 пікселів.
Таким чином основні правила успадкування такі:
Правила розташовані нижче перекривають ті, що знаходяться в файлі вище.
Більш приватні правила перекривають більш загальні. Наприклад p перекриє *. Або «.class p» перекриє просте «p».
Правило з класом важливіше правила без оного. А ID важливіше класу.
об'єднання властивостей
Для збільшення компактності таблиць стилів застосовується оператор кома. наприклад:
Означатиме, що всі посилання і жирний текст будуть червоного кольору. Таким чином ми можемо уникнути дублювання коду і скоротити розмір наших таблиць стилів, поєднуючи відразу кілька селекторів в одному правилі.