Просто про складне або вивчаємо CSS3. Частина 2. Типи селекторів CSS

Привіт, шановні читачі сайту remontcompa.ru! Мене звати Роман нахватом і я представляю вашій увазі другу частину з циклу статей з мови стилів CSS. У першій частині ми з вами розглянули три способи додавання стилів на веб-сторінку, а саме вивчили внутрішні стилі, які є розширенням для одиночного тега HTML-документа, глобальні стилі, при використанні яких стильові властивості прописуються між тегами і, а також пов'язані стилі, які визначаються в окремому від HTML-документа файлі з розширенням .css Дуже важливим поняттям в мові CSS є селектор. Селектор визначає, до якого саме елементу (або елементів) в HTML-документі буде застосований стиль. У CSS існує кілька типів селектор, які ми розглянемо в даній статті.

Просто про складне або вивчаємо CSS3. Частина 2. Типи селекторів CSS


Створимо наступну структуру HTML-документа, до якого вже підключений файл стилів selector_type.css ()

Збережемо даний документ як selecror.html на флеш накопичувачі в папці CSS

Таким же чином створимо і збережемо файл selector_type.css на флеш накопичувачі в папці CSS

Додамо на веб-сторінку selecror.html заголовок "селектори в CSS" і абзац "Селектор є ...."

Також додамо на веб-сторінку selecror.html таблицю, для цього пропишемо теги і

Створювану таблицю вирівняємо по центру веб-сторінки (атрибут align із значенням center), а також задамо товщину рамки таблиці в 1 піксель (border = "1")

Між тегами і вкажемо назву таблиці (Типи селекторів CSS)

між тегами і
пропишемо теги і , цим ми створимо один рядок таблиці

між тегами і пропишемо два рази теги ... , цією дією створимо два стовпці в таблиці. Назви стовпців вкажемо як "Селектор" і "Приклад використання"

Аналогічним чином додамо в таблицю ще сім рядків (теги і ), А в кожному рядку створимо по два стовпці (теги і )

В результаті веб-сторінка selector.html прийме наступний вигляд

З створеної таблиці видно, що існують такі типи CSS селекторів: Селектор типу Селектор ідентифікатора Селектор класу Універсальний селектор Селектор нащадка Селектор сестринського елемента Селектор узагальнених родинних елементів Розглянемо кожен тип селектора на прикладі веб-сторінки selector.html Селектор типу відповідає якомусь імені елемента в HTML-документі. Наприклад, на веб-сторінці selector.html є заголовок "селектори в CSS", який заданий тегами

...

. Вирівняємо текст заголовка по центру веб-сторінки і задамо йому червоний колір

У файлі стилів selector_type.css як селектор типу вказуємо тег заголовка

, далі в фігурних дужках вказуємо стильова властивість і його значення, яке хочемо застосувати до заголовку з текстом "селектори в CSS"

Як бачимо, текст заголовка розташувався по центру веб-сторінки і має червоний колір

Селектор сестринського елемента відповідає елементу, що є сестринським по відношенню до іншого елементу. Наприклад, тег

(Абзац "Селектор є ....") Є сестринським по відношенню до тегу

(Заголовок "селектори в CSS").

Змінимо колір тексту абзацу ( "Селектор є ..."), наступного за заголовком ( "селектори в CSS") на blueviolet, використовуючи селектор сестринського елемента. У файлі стилів selector_type.css дописуємо рядок h1 + p color: blueviolet

Як бачимо, колір тексту абзацу змінився на blueviolet

Додамо на веб-сторінку ще два однакових абзацу після заголовка "селектори в CSS"

Отримуємо наступне: текст першого абзацу має колір blueviolet, а колір тексту інших двох абзаців залишився за замовчуванням.

Змінимо колір тексту всіх трьох абзаців, наступних за заголовком "селектори в CSS" на blueviolet, використовуючи селектор узагальнених родинних елементів. Селектор узагальнених родинних елементів відповідає елементу, що є сестринським по відношенню до іншого елементу. Наприклад, кілька тегів

(Три абзаци "Селектор є ....") Є сестринськими по відношенню до тегу

(Заголовок "селектори в CSS"). У файлі selector_type.css пропишемо наступний рядок h1 ~ p color: blueviolet

В результаті застосування селектора узагальнених родинних елементів колір тексту всіх трьох абзаців після заголовка "селектори в CSS" змінився на blueviolet

Розглянемо ще один тип селектора CSS, такий як селектор ідентифікатора. Селектор ідентифікатора відповідає елементу, чий атрибут id має значення, що збігається з зазначеним після символу # Збільшимо розмір шрифту і змінимо колір тексту в назві таблиці (теги ...), використовуючи селектор ідентифікатора. Усередині тега пропишемо ідентифікатор з назвою "capt", як показано нижче ()

У файлі selector_type.css додамо наступний рядок #capt color: red; font-size: 20px, де після символу # вказано ідентифікатор "capt"

Як бачимо, розмір шрифту і колір тексту в назві таблиці змінився відповідно до стильовим властивістю, прописаним в файлі selector_type.css

У HTML-документі можна створювати безліч ідентифікаторів, але тільки з умовою, щоб їх назви ніколи не повторювалися. Пропишемо ще один ідентифікатор з назвою "tr1" всередині тега , як показано нижче ()

Використовуючи ідентифікатор "tr1", вирівняємо текст в назвах стовпців таблиці по центру, задамо їм зелений колір, а також зробимо шрифт в назві стовпців жирним У файлі selector_type.css пишемо # tr1 text-align: center; font-weight: bold; color: green

отримуємо наступне

Наступним розглянутим нами типом селектора є селектор класу. Селектор класу відповідає елементу, чий атрибут class має значення, що збігається з зазначеним після точки. Поміняємо колір рамки таблиці на веб-сторінці selector.html на синій з допомогою селектора класу. Для цього всередині тега пропишемо назва класу наступним чином: table, де class1 - це назва класу

У файлі стилів selector_type.css допишемо наступний рядок .class1 border-color: blue

Як бачимо, колір рамки таблиці змінився на синій

Змінимо колір тексту в таблиці на зелений. У файлі selector_type.css пишемо рядок .class1 color: green

Бачимо, що колір тексту в таблиці змінився на зелений

Додамо на веб-сторінку якусь фонове зображення, використовуючи універсальний селектор. На флеш накопичувачі в папці CSS у нас є файл зображення з ім'ям image і розширенням .jpg

У файлі стилів selector_type.css допишемо рядок * background-image: url (image.jpg)

В результаті веб-сторінка прийме наступний вигляд

Розглянемо останній вид селектора, такий як селектор нащадка. Селектор нащадка відповідає елементу, що є нащадком іншого елемента. Наприклад, у всіх трьох абзацах (теги

і

) Укладемо словосполучення "HTML-документа" і "CSS-правила" між тегами ... , як це показано нижче. В цьому випадку тег буде нащадком тега

. тег змінить шрифт словосполучень "HTML-документа" і "CSS-правила" на курсивний

Словосполучення "HTML-документа" і "CSS-правила" в курсивном шрифті

Змінимо колір тексту словосполучень "HTML-документа" і "CSS-правила" на червоний за допомогою селектора нащадка. Для цього в файлі стилів selector_type.css допишемо рядок p I color: red

В результаті веб-сторінка прийме наступний вигляд

Продовження в статті: Просто про складне або вивчаємо CSS3. Частина 3. Способи завдання кольору в CSS. Завдання прозорості елементу в HTML-документі

Категорія