Css - урок 3

Попередня ◈ Наступна

Давайте спробуємо на практиці. Відкрийте html-сторінку і css-сторінку, створені в минулому уроці. Давайте задамо нашій сторінці блакитний фон. Як ви пам'ятаєте, за це відповідає тег . значить йдемо на сторінку style.css і пишемо наступний код:

Відкрийте вашу html-сторінку в браузері і переконайтеся, що її фон став синім. Тепер, давайте зробимо текст на сторінці білим кольором:

Оновлення html-сторінку в браузері (Ctrl + F5) і переконайтеся, що тепер весь текст білого кольору. Тепер зробимо кольору заголовків червоним (для h1) і жовтим (для h2):

Знову поновіть сторінку в браузері і переконайтеся, що всі так, як і було задумано.

Думаю, принцип вже зрозумілий: ми вказуємо селектор, тобто елемент, до якого застосовується стиль, а в фігурних дужках - його властивості та їх значення. Властивостями і значенням будуть присвячені окремі уроки, поки ж ми розглядаємо загальний принцип складання таблиці стилів.

селектори CSS

Селектори за ідентифікатором

У нашому прикладі в якості селекторів використовувалися елементи сторінки: body, h1, h2. Але що робити, якщо в нашій html-сторінці є кілька однакових елементів (наприклад, параграфів), і ми хочемо, щоб текст всіх параграфів був чорним, а одного з них - рожевим кольором. Тоді нам знадобиться вказати унікальний ідентифікатор для цього параграфа і створити для нього стиль.

В HTML ідентифікатор елемента задається за допомогою параметра id. в якості значення якого вказується унікальне ім'я. наприклад:

Текст параграфа з ідентифікатором (id).

Імена можна давати будь-які, крім зарезервованих слів (до них відносяться імена тегів і параметрів елементів HTML і CSS), наприклад, не можна ідентифікатором дати ім'я body. Давайте додамо в нашу html-сторінку пару параграфів і одному з них дамо ідентифікатор:

Тут просто текст

Це заголовок другого рівня

Тут просто текст

Абзац з ідентифікатором (id)

Якщо подивитися зараз на нашу сторінку в браузері, то наші абзаци обидва білого кольору. Додамо в таблицю стилів (style.css) стилі для наших абзаців:

Ми спочатку вказали зробити текст всіх параграфів чорним, а текст параграфа з id "pink" зробити рожевим. Наш селектор складається в даному випадку з елемента (p), роздільник (#) і ім'я ідентифікатора (pink).

Важливо запам'ятати, що на сторінці може бути лише один код (id). Тобто для нашого прикладу можна створити два параграфа з id "pink". параграф з таким id може бути тільки один. Але кожен параграф може мати свій ідентифікатор, наприклад, можна створити параграф з id = "green" і задати стиль для цього параграфа в таблиці стилів.

Селектори по класу

В наведеному вище прикладі ми створили параграф з рожевим кольором тексту і вказали, що такий id може бути тільки один. Але, що робити, якщо ми хочемо, щоб рожевий колір тексту був у двох або трьох параграфів. Для цього в HTML існує параметр class. в якості значення якого вказується його ім'я.

Давайте додамо в нашу html-сторінку ще пару параграфів і дамо їм class = "pink".

Тут просто текст

Це заголовок другого рівня

Тут просто текст

Абзац з ідентифікатором

Абзац з класом (class) pink

Для того, щоб вказати стиль для цього класу, в таблиці стилів напишемо правило, де в якості селектора знову буде використовуватися елемент p і ім'я pink. але в даному випадку це ім'я класу, тому як роздільник буде використовуватися точка (.):

Абзаців з таким класом може бути скільки завгодно.

Давайте підіб'ємо проміжні підсумки:

якщо всі подібні елементи (наприклад, всі заголовки h1) повинні мати один стиль, то селектор складається тільки з цього елемента (наприклад, p)

якщо елемент (будь-: абзац, заголовок.) повинен відрізнятися від всіх інших, то йому присвоюється ідентифікатор (id) і роздільником в таблиці стилів є знак решітки (#), наприклад, p # pink.

якщо ж на сторінці буде кілька елементів з однаковим стилем, то їм присвоюється клас (class) і роздільником в таблиці стилів є знак точки (.), наприклад, p.pink.

ідентифікатор має більш високий пріоритет, ніж клас. Тому, якщо для будь-якого елемента буде вказано і клас, і ідентифікатор (що суперечить принципам CSS), то застосований буде стиль ідентифікатора.

Як уже згадувалося ідентифікатори і класи можна задавати будь-якими елементами html. Але часто буває так, що ми хочемо кілька різних елементів виділити одним стилем, наприклад, зеленим кольором. У такому випадку можна скористатися уніфікованим селектором. У таких селекторах ім'я елемента не вказується, вказуються точка або решітка, як ознака класу або ідентифікатора і ім'я. наприклад:

Таким чином, яким би елементу ми не задали class = "red" (заголовку, параграфу або посиланням), колір тексту у нього стане червоним. Одному елементу на сторінці (будь-якого) ми можемо поставити id = "yellow" і колір тексту цього елемента стане жовтим.

Нехай у нас є html-сторінка ось з таким кодом:

Селектори по елементу

Цей текст знаходиться в параграфі

Це просто текст. Цей текст виділений курсивом

Цей текст знаходиться в параграфі, але ця частина виділена курсивом

Ми хочемо, щоб курсив був виділений ще й зеленим кольором. Тоді в таблицю стилів ми запишемо селектор по елементу, тобто

Зараз наша сторінка в браузері виглядає так:

Але що, якщо ми захочемо, щоб не весь курсивний текст виділявся зеленим, а лише той, який знаходиться в параграфах. Для цього ми внесемо зміни в таблицю стилів:

Так ми вказали, застосовувати даний стиль до елементів i. які знаходяться в елементах p. Назви елементів при цьому відокремлюються пропуском. Такі селектори називають контекстними. Тепер наша сторінка в браузері виглядає так:

Припустимо, що крім кольору, ми хочемо задати нашим заголовкам розмір. Тоді ми можемо просто дописати в нашу таблицю стилів:

У наших заголовків буде вказаний розмір, але всі вони будуть зеленого кольору.

Взагалі-то, щодо угруповань є розбіжності. Одні вважають правильним вищенаведений код, тому що угруповання допомогла уникнути повтору однакового властивості для трьох елементів, це скорочує код.

Інші вважають, що таким чином, погіршується логічність коду. Так як, знайшовши селектор для заголовка h3, не відразу зрозуміло, чому текст в ньому зеленого кольору. Прихильники логіки рекомендують групувати тільки елементи, у яких блоки описів повністю збігаються.

На цьому урок, присвячений селекторам, закінчений. У наступному уроці познайомимося з такими поняттями, як псевдоелементи і псевдокласи.

Якщо цей сайт виявився вам корисний, ви можете допомогти в його розвитку, поставивши одну з цих посилань на свій сайт.

Схожі статті

Попередня ◈ Наступна