В този последен туториал за селектори ще ви представя един много специален вид селектори - псевдокласове и псевдоелементи. Тези селектори не се отнасят до конкретни HTML елементи, а се генерират от устройството за извеждане.
С псевдокласовете и псевдоелементите могат да бъдат дефинирани стилове за части от HTML компонентите, които не могат бързо и лесно да бъдат описани чрез HTML елементи. Типични примери включват препратки, които са били кликнати или още не са били посетени.
Стилизиране на хипервръзки
Много често искаме да стилизираме хипервръзките на страницата. За целта CSS предоставя множество възможности, чрез които може да се насочат различните състояния на хипервръзките и да се приспособят оптически.
Ако искате да зададете червен цвят на една хипервръзка, това би изглеждало по следния начин:
a:link {
color: червен;
}
С a:visited се отбелязват вече посетените хипервръзки. Чрез следния синтаксис можем да представим такива хипервръзки, които вече са били кликнати, в син цвят.
a:visited {
color: син;
text-decoration: няма;
}В браузъра то изглежда така:
Ако искате да стилизирате хипервръзките, които в момента се кликват, това също е възможно.
a:active {
font-weight: bold;
color: син;
text-decoration: няма;
}
За целта се използва синтаксисът a:active.
Синтаксисът a:hover се отнася до състоянието, в което мишката се преминава през хипервръзката. Освен това съществува и a:focus като още един псевдоелемент. Той описва момента, в който хипервръзката получава фокуса.
Други псевдоелементи
Има псевдоелементи, които позволяват да се насочат части от други елементи. Типичен пример за това е ::first-letter. Този псевдоелемент избира първия символ на текущия елемент. Той може да се използва за всички елементи, които съдържат текст. Но внимание: псевдоелементите трябва да се посочат само в края на всички селектори. Те трябва да бъдат пред отварящата фигурна скоба.
h1::first-letter {
color: син;
}
С помощта на ::first-line може да се насочи първият ред на един елемент. Този псевдоелемент се прилага само за блок-елементи. Едно пример:
p::first-line {
background-blue;
}
И тук е резултатът в браузъра:
едно
С помощта на псевдоелементите :after и :before могат да се вмъкват допълнителни съдържания преди и след един елемент. С content се задава какво трябва да се изведе.
• нормално - не се генерира установеният обикновено псевдоелемент.
• няма - псевдоелементът не се генерира.
• <string> - изведен е указаният тук низ. Низовете се задават в единични или двойни кавички.
• <uri> - вмъква се ресурсът, указан под URI.
• <counter> - дефинира брояч или обръща специфичен брояч.
• attr(<identifier>) - вмъква стойността на атрибута, посочен в скобите.
• close-quote - вмъква затварящо кавичке.
• no-close-quote - не се вмъква затварящо кавичке, но влошава нивото на влагане с едно.
• no-open-quote - не се вмъква отварящо кавичке, но влошава нивото на влагане с едно.
• open-quote - вмъква отварящо кавичке.
Един пример:
ul li:before {
content: uri("bullet.gif");
}Още псевдоелементи
С CSS3 се въвежда псевдоселекторът :not. Чрез него могат да се избират целенасочено съдържания. Първият пример ще покаже на какво точно е способен този псевдоселектор. Нека предположим, че искаме да изберем всички хипервръзки, които нямат атрибут href. Съответният синтаксис би изглеждал по следния начин:
a:not([href])
Нормалните хипервръзки ще останат непокътнати от този синтаксис. Но с него ще се постигне достъп до дефинициите за якори.
<a name="top">Начало на страницата</a>
По-подробен пример ще демонстрира мощта на :not. В рамките на един документ са дефинирани разни абзаци с текст.
<body> <h1>PSD-Tutorials.de</h1> <p>Това е абзац.</p> <p>Това е още един абзац.</p> <div>Това е текстова област.</div> <a href="http://www.psd-tutorials.de" target="_blank">PSD-Tutorials.de</a> </body>
Освен текстовите абзаци, маркирани с п, има и div област и хипервръзка. Сега трябва да се случи следното:
• Всички абзаци, маркирани с п, да получат черен цвят на шрифта.
• Напротив, където няма абзаци п, се използва червен цвят на шрифта.
Съответният CSS синтаксис изглежда по следния начин:
p {
color:#000;
}
:not(p) {
color:#ff0000;
}Принципът на наследяването
Едно от най-важните неща, когато става дума за разбиране на дефинициите на CSS, е наследяването. Фактически в CSS стиловите свойства се наследяват от един елемент на друг. Пример:
html {
color: red
}С тази дефиниция цвета на текста за елемента html се задава на червено.
Поради принципа на наследяването този цветови дефиниция действа само за съдържанието на div. Абзацът p, от своя страна, се показва с черен шрифт.
В CSS има различни начини за дефиниране на стиловите характеристики. Затова може да има противоречиви инструкции за един елемент. За такива случаи CSS предвижда принцип на тежест. Чрез този принцип е ясно определено коя от инструкциите има предимство за един елемент. Не бих искал тук да влизам до последната детайлност относно този принцип. Но може да откриете подробна информация по този въпрос например на страницата http://wiki.selfhtml.org/wiki/CSS/Kaskade или също така на http://www.thestyleworks.de/basics/cascade.shtml.
Моята цел е да ви покажа на какво трябва да обърнете внимание, когато дефинирате CSS свойства. За целта е предоставен следния пример:
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
body {
font-family:Arial, Helvetica, sans-serif;
font-size: 90%;
}
p {
color: #000;
}
h1 {
font-size: 120%;
font-weight: normal;
}
strong {
color:#CCCCCC;
}
h2 strong {
color: red;
}
</style>
</head>
<body>
<div>
<h1>PSD-Tutorials.de</h1>
<p>Das ist ein Absatz mit einem <strong>fetten Wort</strong>.</p>
<h2>Das ist eine Überschrift mit einem <strong>fetten Wort</strong>.</h2>
</div>
</body>
</html>В браузъра изглежда така:
Както виждате, например думите, маркирани с strong, се форматират по различен начин. Кой вид форматиране ще се приложи зависи от последователността на дефинициите.
Алтернативно, има и ключовата дума !important, чрез която може да отбележите една CSS инструкция като особено важна.
<style>
body {
font-family:Arial, Helvetica, sans-serif;
font-size: 90%;
}
p {
color: #000;
}
h1 {
font-size: 120%;
font-weight: normal;
}
strong {
color:#CCCCCC !important;
}
h2 strong {
color: red;
}
</style>Освен това един поглед на резултата:
Нужно е да прочетете отново цитираните източници в този урок. (Въпреки че за начало вероятно не е нужно толкова дълбоко да заровяте в тази тематика).
