Embedded Files
Псевдокласи в CSS
Псевдокласи в CSS
Ми бачили в основному три типи селекторів CSS:
звичайні, де р в CSS націлюється на HTML-елементи <p>;
класи, де .intro в CSS націлюється на елементи з атрибутом class = "intro";
ідентифікатори, де #logo в CSS націлюється на елемент з атрибутом id = "logo".
До всіх цих селекторів можуть прикріплятися псевдокласи.
Псевдокласи визначають динамічний стан елементів, який змінюється за допомогою дій користувача, а також положення в дереві документа.
Прикладом такого стану служить текстове посилання, яка змінює свій колір при наведенні на неї курсора миші. При використанні псевдокласів браузер не перевантажує поточний документ, тому за допомогою псевдокласів можна отримати різні динамічні ефекти на сторінці.
Синтаксис
Синтаксис
Синтаксис виглядає наступним чином:
селектор:псевдоклас {}
Спочатку вказується селектор, до якого додається псевдоклас, потім слідує двокрапка, після якого йде ім'я псевдокласу. Допускається застосовувати псевдокласи до імен ідентифікаторів або класів (A.menu:hover {color: green}), а також до контекстних селекторів (.menu A: hover {background: # fc0}). Якщо псевдоклас вказується без селектора попереду (: hover), то він буде застосовуватися до всіх елементів документа.
Пробілу між селектором і псевдоклас немає, щоб показати, що вони пов'язані один з одним.
Умовно всі псевдокласи діляться на три групи:
що визначають стан елементів;
що мають відношення до дерева елементів;
вказують мову тексту.
Псевдокласи, що визначають стан елементів
Псевдокласи, що визначають стан елементів
До цієї групи належать псевдокласи, які розпізнають поточний стан елемента і застосовують стиль тільки для цього стану.
:active
:active
Відбувається при активації користувачем елементу. Наприклад, посилання стає активним, якщо навести на нього курсор і клацнути мишкою. Незважаючи на те, що активним може стати практично будь-який елемент веб-сторінки, псевдоклас :active використовується переважно для посилань.
:link
:link
Застосовується до невідвідуваних посилань, тобто таких посилань, на які користувач ще не натискав. Браузер деякий час зберігає історію відвідувань, тому посилання може бути позначена як відвідане хоча б тому, що по нього був зафіксований перехід раніше.
Запис A {...} і A:link {...} за своїм результатом рівноцінний, оскільки в браузері дає один і той же ефект, тому псевдоклас :link можна не вказувати. Винятком є якоря, на них дія :link не поширюється.
:focus
:focus
Застосовується до елемента при отриманні ним фокусу. Наприклад, для текстового поля форми отримання фокусу означає, що курсор встановлений в поле, і за допомогою клавіатури можна вводити в нього текст.
Приклад 1 (розгорніть, щоб переглянути код)
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.form-input {
border: 2px solid grey;
padding: 5px;
}
.form-input:focus {
background: lightyellow;
border-color: blue;
outline: none;
}
</style>
</head>
<body>
<P>
<Input class = "form-input" placeholder = "Введіть ім'я">
</Input>
</P>
</body>
</html>
В даному прикладі в текстовому полі міститься попередній текст, він визначається значенням атрибута placeholder тега <input>. При клацанні по елементу форми відбувається отримання полем фокусу, і колір фону та рамки змінюється. Досить клацнути в будь-якому місці сторінки (крім текстового поля, звичайно), як відбудеться втрата фокусу і фон та рамка повернуться до первісного кольору.
Результат буде видно тільки для тих елементів, які можуть отримати фокус. Зокрема, це теги <a>, <input>, <select> і <textarea>.
:hover
:hover
Псевдоклас :hover активізується, коли курсор миші знаходиться в межах елемента, але клацання по ньому не відбувається.
Приклад 2 (розгорніть, щоб переглянути код)
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
p {
background-color: blue;
padding: 10px;
color: white;
}
p:hover {
background-color: green;
}
</style>
</head>
<body>
<p>Зміна кольору фону при наведенні вказівника миші</p>
</body>
</html>
:visited
:visited
Даний псевдоклас застосовується до відвіданих посилань. Зазвичай таке посилання змінює свій колір за замовчуванням на фіолетовий, але за допомогою стилів колір і інші параметри можна задати самостійно.
Приклад 3 (розгорніть, щоб переглянути код)
<!DOCTYPE HTML>
<Html>
<Head>
<Meta charset = "utf-8">
<Title> Псевдокласи </title>
<Style>
a:link {
color: #036; /* Колір невідвіданих посилань */
}
a:visited {
color: #606; /* Колір відвіданих посилань */
}
a:hover {
color: #f00; /* Колір посилань при наведенні на них курсора миші */
}
a:active {
color: #ff0; /* Колір активних посилань */
}
</Style>
</Head>
<Body>
<P>
<a href="1.html"> Посилання 1 </a>
<a href="2.html"> Посилання 2 </a>
<a href="3.html"> Посилання 3 </a>
</p>
</Body>
</Html>
В даному прикладі показано використання псевдокласів спільно з посиланнями. При цьому має значення порядок проходження псевдокласів. Спочатку вказується :visited, а потім йде :hover, в іншому випадку відвідані посилання не будуть змінювати свій колір при наведенні на них курсору.
Селектори можуть містити більше одного псевдокласу, які перераховуються поспіль через двокрапку, але тільки в тому випадку, якщо їх дії не суперечать один одному. Так, запис а:visited:hover є коректним, а запис а:link:visited - ні. Втім, якщо підходити формально, то валідатор CSS вважає правильним будь-яке поєднання псевдокласів.
Браузер Internet Explorer 6 і молодше дозволяє використовувати псевдокласи :active і :hover лише для посилань. Починаючи з версії 7.0 псевдокласи в цьому браузері працюють і для інших елементів.
Псевдокласи, що мають відношення до дерева документа
Псевдокласи, що мають відношення до дерева документа
До цієї групи належать псевдокласи, які визначають положення елемента в дереві документа і застосовують до нього стиль в залежності від його статусу.
:first-child
:first-child
Застосовується до першого дочірнього елементу селектора, який розташований в дереві елементів документа.
Приклад 4 (розгорніть, щоб переглянути код)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
B:first-child {
color: red; /* Червоний колір тексту */
}
</style>
</head>
<body>
<p><b>Веб-дизайн</b> (англ. web design) — галузь веб-розробки, що охоплює цілий ряд напрямів і дисциплін із створення та супроводу сайтів або <b>веб-застосунків</b>, таких як графічний <b>веб-дизайн</b>, проектування інтерфейсів, <b>авторинг</b> (у тому числі стандартизований код і власницьке програмне забезпечення), використовність та оптимізація для пошукових систем.</p>
<p>Найчастіше виконання різних етапів процесу <b>веб-дизайну</b> забезпечують відповідні спеціалісти (менеджер проекту, дизайнер, веб-програміст, веб-майстер тощо), хоча деякі <b>веб-дизайнери</b> можуть виконувати усе самостійно.</p>
<p>Термін <b>веб-дизайн</b> зазвичай використовують для опису проектування й реалізації клієнтської частини <b>веб-сайт</b>, включаючи верстку.</p>
</body>
</html>
В даному прикладі псевдоклас :first-child додається до селектора b і встановлює для нього червоний колір тексту. Хоча контейнер <b> зустрічається в першому абзаці чотири рази, червоним кольором буде виділено лише перша згадка. В інших випадках вміст контейнера <b> відображається чорним кольором. З наступним абзацом все починається знову, оскільки батьківський елемент помінявся.
Примітка. Браузер Internet Explorer підтримує псевдоклас :first-child починаючи з версії 7.0.
Псевдоклас :first-child найзручніше використовувати в тих випадках, коли потрібно задати різний стиль для першого і інших однотипних елементів.
Псевдокласи, що задають мову тексту
Псевдокласи, що задають мову тексту
Для документів, які одночасно містять тексти на декількох мовах має значення дотримання правил синтаксису, характерні для тієї чи іншої мови. За допомогою псевдокласів можна змінювати стиль оформлення іншомовних текстів, а також деякі налаштування.
:lang
:lang
Визначає мову, яка використовується в документі або його фрагменті. У коді HTML мова встановлюється через атрибут lang, він зазвичай додається до тегу <html>. За допомогою псевдокласу :lang можна задавати певні налаштування, характерні для різних мов, наприклад, вид лапок в цитатах.
Синтаксис наступний:
Елемент:lang(мова) {...}
В якості мови можуть виступати наступні значення: ru - російська; en - англійська; de - німецька; fr - французька; it - італійська.
Приклад 5 (розгорніть, щоб переглянути код)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>lang</title>
<style>
P {
font-size: 150%; /* Розмір тексту */
}
q:lang(de) {
quotes: "\201E" "\201C"; /* Вигляд лапок для німецької мови */
}
q:lang(en) {
quotes: "\201C" "\201D"; /* Вигляд лапок для англійської мови */
}
q:lang(fr), q:lang(ru) { /* Вигляд лапок для російської і французької мови */
quotes: "\00AB" "\00BB";
}
</style>
</head>
<body>
<p>Цитата французькою мовою: <q lang="fr">Ce que femme veut, Dieu le veut</q>.</p>
<p>Цитата німецькою: <q lang="de">Der Mensch, versuche die Gotter nicht</q>.</p>
<p>Цитата англійською: <q lang="en">То be or not to be</q>.</p>
</body>
</html>
Для відображення типових лапок в прикладі використовується стильова властивість quotes, а саме перемикання мови і відповідного виду лапок відбувається через атрибут lang, що додається до тегу <q>.
Практична частина
Практична частина
Вправа
Вправа
Виконайте завдання по інструкції за зразком, використовуючи псевдокласи:
Інструкція для роботи за посиланням: Google-диск
Приклад.mp4Page updated
Google Sites
Report abuse