Псевдоклассы и счетчики

День первый. Псевдоклассы и ссылки.

Псевдоклассы задаются рез знак : , который идет сразу после селектора, БЕЗ ПРОБЕЛОВ!

Псевдоклассы для ссылок:

Псевдоклассы для ссылок и селекторов:

Псевдокласс :active – необходимо размешать после всех остальных псевдоклассов, иначе он не будет работать!

День второй. Псевдокласси first – child и focus

first – child – стили селектора с этим псевдоклассом будет применены только к первому такому селектору в своем родители.

Пример применения данного псевдокласса на тексте с тегам b. Данный текст будет темно красного цвета, остальные теги b будут просто жирными, и не будут окрашиваться в другой цвет.

focus – он определяет стиль селектора получающего фокус.

Пример будем рассматривать на странице контактов, так как этот псевдокласс работает только с полями.форма обратной связи


День третий. Псевдоэлементы first-letter и first-line.

Псевдоэлементы – задаются точно так же, как и псевдоклассы, но влияют на элементы селектора

Можно задавать стили полей, отступов, цвета, фона, шрифта и границ

Первая буква должна быть красной, жирной и большой!
color:#900;font-weight:bold;font-size:16px;


first-line – определяет стиль первой строки в селекторе.

Можно задавать стили цвета, фона и шрифта.

Первая строка должна быть красно,
остальные строчки будет нормальные


День четвертый. Псевдоэлементы after и before.

  • after – вывод заданного контента ПОСЛЕ селектора к которому он указан
  • before – вывод заданного контента ДО селектора к которому он указан

Эти два псевдоэлемента работаю только в паре со свойством CSS – conent


Значения свойства content:

  • Строка – в нее вводится текстовое значение, которое нам надо вывести до или после элементов селектора. Значение строки берется в одинарные или двойные кавычка.

    Красный текст перед этим абзацем выводится при помощи псевдоэлемента before и свойства content строкой.
    content:"Привет! ";color:#900;

  • attr(параметр) – выводит значение атрибутов селекторам.

    Синий текст в конце этого абзаца выводится при помощи псевдокласса atter, и это текст является атрибутом alt этого селектора

  • url(значение) – выводиться отображение файла, Если браузера файл не может отобразить – он его игнорирует.

    Маленькая картинка оправленного письма в конце это текста отображается при помощи свойства content (атрибут url ).
    content:url(../images/mail_back.png);

  • open-quote и close-quote – вставляет открывающихся и закрывающихся кавычек

    Это текст обрамлен кавычками при помощи свойства content и его значений – open-quote и close-quote
    span.quote:before{content:open-quote;}
    span.quote:after{content:close-quote;}

  • no-open-quote и no-close-quote – отменяет действие предыдущих значение (пишется после open-quote и close-quote)


Тег q – обрамляет включенный в него текст – кавычками

Этот текст обрамлен в тег q


quotes – это свойство css указывает на вид кавычек. Кавычки можно задать своего вида.

Этот текст обрамлен в нестандартные кавычки, которые мы указали при помощи свойства quotes
p.Quotes{ quotes: "<<< " " >>>";}

День пятый. Счетчики

    Атрибуты counter -reset:

  • none – запрещает создание счетчика.
    селектор{ counter -reset:none;}
  • идентификатор – задает название счетчика ( произвольное название).
    селектор{ counter -reset:schetchik ;}
  • число – задает число, с которого начнется отсчет.
    селектор{ counter -reset:schetchik:7;}

    Атрибуты counter- increment:

  • none – запрещает увеличение счетчика.
    селектор{ counter- increment:none;}
  • идентификатор – указывает счетчик, значение которого необходимо увеличить.
    селектор{ counter- increment: schetchik;}
  • число – задается интервал.
    { counter- increment: schetchik;}

Практические примеры работы счетчиков:

Это текст создан только для примера, на котором мы будем рассматривать работу счетчиков.

Никакой смысловой нагрузки и полезной информации в этих абзацах, окаймленных оранжевой полосой, вы не найдете.

Да блин, елки –палки –моталки, на дворе трава на траве дядька в «дрова» :)

Еще читаете – ну и что же, тогда читайте ВНИМАТЕЛЬНО – обратите внимание на последний абзац, там представлен код для счетчиков.

Задан счетчик – начальное значение 0, интервал – 1. Код:
div#count{ counter-reset:k1}
div#count p:before { content: counter(k1) ". ";}


Это текст создан только для примера, на котором мы будем рассматривать работу счетчиков.

Никакой смысловой нагрузки и полезной информации в этих абзацах, окаймленных оранжевой полосой, вы не найдете.

Да блин, елки –палки –моталки, на дворе трава на траве дядька в «дрова» :)

Еще читаете – ну и что же, тогда читайте ВНИМАТЕЛЬНО – обратите внимание на последний абзац, там представлен код для счетчиков.

Задан счетчик – начальное значение 4, интервал – 2. Код:
div#count2{ counter-reset:k2 2}
div#count2 p:before {counter-increment:k2 2 ; content: counter(k2) ". ";}


Это текст создан только для примера, на котором мы будем рассматривать работу счетчиков.

Никакой смысловой нагрузки и полезной информации в этих абзацах, окаймленных оранжевой полосой, вы не найдете.

Да блин, елки –палки –моталки, на дворе трава на траве дядька в «дрова» :)

Еще читаете – ну и что же, тогда читайте ВНИМАТЕЛЬНО – обратите внимание на последний абзац, там представлен код для счетчиков.

Задан счетчик – начальное значение -1, интервал – 2. Код:
div#count2{ counter-reset:k2 -1}
div#count2 p:before {counter-increment:k2 2 ; content: counter(k2) ". ";}