-
Перейдімо від пончиків до моркви, одного
з найкорисніших продуктів у світі,
-
а також найулюбленішої їжі кроликів.
-
Чи знаєте ви, що морква буває не
лише помаранчевою?
-
Спочатку вона була фіолетовою. І деяка
морква досі є такою.
-
Ми тут маємо коротку сторінку, що містить
список кольорів моркви
-
і речення про те, що перша морква була
фіолетовою.
-
Ми використали стилі, щоб зафарбувати
назви кольорів у відповідний колір.
-
Мені подобається, як стилі виглядають зі
списком, але я не впевнена, що мені
-
подобається, як стиль "purple" (фіолетовий)
виглядає в тексті.
-
Я думаю, мені краще не використовувати там
колір фону, а вибрати якесь менш нав'язливе
-
кольорове оформлення.
-
Як я можу сказати браузеру оформити
фіолетовий текст там по-іншому, ніж тут?
-
Що ж, вони мають однаковий клас, тому ми
не можемо використати ім'я класу,
-
доки не створимо новий клас.
-
Вони також мають однакову назву тега —
.
-
Тому ми не можемо використати селектор
елемент-плюс-клас, який ми щойно вивчили.
-
Є ще щось, що їх відрізняє?
-
Єдина відмінність — це те, що цей тег
знаходиться всередині тега ,
-
в той час як цей тег —
всередині тега .
-
Тобто є відмінність в батьківських тегах —
тегах, які є над ними.
-
За допомогою цієї інформації, ми можемо
створити правило CSS, використавши
-
"селектор нащадка" — спосіб вибрати елемент
залежно від його розташування в документі.
-
Наприклад, щоб вибрати фіолетовий тег
всередині абзацу,
-
ми напишемо "р", пробіл (він є дуже
важливим!)
-
і потім ім'я класу — ".purple".
-
Тепер ми додамо властивості, які
будуть менш помітними —
-
колір фону "transparent" змінить те,
що було раніше.
-
Чудово. Ми змінили цей фіолетовий текст,
не змінивши цей.
-
І тепер щоразу, коли ми матимемо клас
" purple" всередині параграфа, як тут,
-
застосовуватиметься саме цей новий стиль.
-
Ми можемо використовувати пробіл, щоб
пробратись ще глибше в наш документ.
-
Скажімо, ми хочемо застосувати стиль лише
до тих тегів , які є в тегах .
-
Ми починаємо з батьківського тега ,
потім ставимо пробіл та .
-
І, можливо, ми дамо їм іншу висоту рядка,
щоб розділити їх ще більше.
-
Чудово. Ми можемо навіть додати
перед , якщо ми хочемо впевнетись,
-
що це правило не буде застосоване до тегів
в тегах та .
-
Бачите, для того щоб використовувати
селектор нащадка, ми маємо добре знати
-
структуру документа і які теги є
всередині інших.
-
Якщо ви робите правильні відступи,
це буде просто,
-
тому що ваші відступи відображатимуть
ієрархію тегів.
-
Бачите, ось тут є тег , далі в ньому
є тег ,
-
а всередині тега є тег .
-
Якщо ж ви не використовуєте
відступів, краще виправте це зараз,
-
бо це значно полегшить ваше розуміння
структури сторінки
-
та селекторів CSS, які базуються на цій
структурі.
-
Ви можете використовувати пробіл
між будь-якими селекторами.
-
Наприклад, дістатись до певного тега за
елементом з конкретним ID
-
чи дістатись до елемента з ID, вказавши
перед тим назву класу,
-
ви можете використовувати
будь-які поєднання.
-
Єдине, що ви маєте пам'ятати — це те, що
коли структура вашої сторінки зміниться,
-
ваше старе правило CSS вже не діятиме.
-
Тому добре думайте про майбутні зміни вашої
сторінки, коли використовуєте ці селектори.
-
Ви завжди можете використовувати класи,
якщо ви хочете бути менш залежними
-
від структури вашої сторінки.
-
Погляньмо на правила, які я створила,
і обдумаймо їх.
-
Це перше правило оформлює певним
способом всі елементи класу "purple",
-
які є всередині абзаців.
-
Якщо я додам в майбутньому нові абзаци з
елементами класу "purple",
-
чи захочу я, щоб вони мали
цю властивість?
-
Так, тому що я думаю, що ця властивість
завжди добре виглядатиме в абзаці.
-
Чи потрібне мені конкретніше правило?
-
Можливо, якби ці абзаци були завжди cеред
елементів класу "article",
-
я б могла додати це до правила.
-
Але зараз це правило є найбільш конкретним.
-
Друге правило дає всім тегам
всередині елементів списку певну висоту рядка.
-
Чи хочу я, щоб теги всередині
списків завжди мали більшу висоту рядка?
-
Хм... мабуть, ні. Це правило, мабуть,
надто загальне.
-
Оскільки я не дуже впевнена, я додам клас
до тега
-
і потім зміню це правило на "ul.spacey",
-
щоб воно було більш конкретним.
-
В майбутньому, коли моя сторінка
розширюватиметься, я, можливо, робитиму
-
правила менш чи більш конкретними.
-
Додайте цей засіб до свого все більшого
набору засобів СSS і попрацюйте з ним,
-
щоб ви могли використати його,
коли буде така потреба.
-
Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "MagneticOne.org"
