Rambler's Top100

ТИПЫ СЕЛЕКТОРОВ В CSS

ПСЕВДОКЛАССЫ

Селекторы типа "Псевдоклассы" обычно применяются к тем элементам страницы которые должны изменяться под воздействием пользователя, например ссылки могут иметь четыре состояния - ссылка при открытии страницы (a:link), ссылка при наведении на неё курсора мыши (a:hover), ссылка в момент щелчка по ней (a:active ), и ссылка посещённая (a:visited ). Подробно об оформлении ссылок с помощью псевдоклассов описано в теме ОФОРМЛЕНИЕ ССЫЛОК в CSS

Ещё одно свойство псевдоклассов это - first-child и last-child.

Например есть какой-то текст и нужно чтобы первый абзац текста был определённого цвета, размера шрифта,и так далее, то есть отличался от других абзацев, а последний абзац, был уже другого цвета и тоже отличался от общего текста, пишем в файле CSS следующий код:

div p:first-child {color: red;
font-size:18px;
font-variant:small-caps;
font-weight: bold; }


div p:last-child { color: green; }

В результате получится такой вот вид текста, первый и последний абзацы будут выделены по заданным параметрам, а абзацы между ними будут черного цвета

Сегодня почти в каждом доме пылятся в шкафах и ящиках столов видеокассеты с многочасовыми записями, а ведь этот материал можно переписать на компьютер, обработать и даже опубликовать в интернете. Говорят, что лучше один раз увидеть, чем сто раз услышать.

Лучше всего это выражение подходит к видео. Фильмы, которые снимаются для домашнего кино, обычно очень трогательны, однако при этом полны маленьких ошибок: то обрезаны силуэты людей, то масштабирование не получилось, эпизоды нечеткие, а многие вообще неинтересны. Это всегда расстраивает, ведь хорошо снятое и чисто смонтированное видео может быть не только трогательным, но и интересным.

Теоретически все это просто. Неудачная сцена вырезается и оставляется лишь ,самая удачная, которая затем копируется на другую видеокассету. Однако на практике это означало следующее: перемотка назад, быстрая перемотка вперед, пауза - и так часами

Компьютер может значительно упростить эту работу и не только эту: современная программа видеомонтажа предоставляет целый ряд специальных эффектов, с помощью которых можно получить почти профессиональные результаты. Обработанные таким образом фильмы можно использовать для мультимедийных приложений для вашего сайта

Это значит, что на всех страницах, все первые и последние абзацы заключённые в теги <p> внутри тега <div> будут выглядеть так же, а если нужно выделить таким образом не все обзацы, а только определённые фрагменты текста, то можно присвоить любой класс, например block

.block p:first-child {color: red;
font-size:18px;
font-variant:small-caps;
font-weight: bold; }


.block p:last-child { color: green; }

А в html-коде нужный отрывок заключить в тег div, с обозначением класса так:

<div class="block">
<p> Текст первого абзаца будет красного цвета</p>
<p> Текст второго абзаца</p>
<p> Текст третьего абзаца</p>
<p> Текст последнего абзаца будет зелёного цвета</p>
</div>

И ещё пример применения псевдокласса :hover, вы уже знаете, что при наведении курсора на ссылку, она подсвечивается другим цветом, можно подсветку при наведении мыши сделать на любой текст, который не является ссылкой. Для этого применяется тот же :hover, например если в файле CSS прописать p:hover { color: red; }, то весь текст заключённый в теги <p>, при наведении на него курсора, будет подсвечиваться красным цветом.

А чтобы не все абзацы заключенные в теги <p>, а только некоторые подсвечивались, создаем класс например по имени цвета которым будет подсвечиваться текст при наведении на него курсора

В файле CSS пишем:
.lime:hover { color: lime; }

В html-файле:
<p class="lime">Этот текст, при наведении на него курсора будет подсвечен салатовым цветом</p>

Результат ниже

Этот текст, при наведении на него курсора будет подсвечен салатовым цветом

 

 

Rambler's Top100 Яндекс цитирования