Введите ваш адрес почты


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Главная » Css » Psevdoelementy-v-css

Применение псевдоэлементов

Псевдоэлементы позволяют применить стили к определенным участкам внутри элементов HTML. Порой это бывает очень удобно. Я например применял псевдоэлементы на этом сайте для выделения первой буквы в абзаце текста. Синтаксис написания аналогичен псевдоклассам:

селектор:псевдоэлемент { свойство1: значение; ... свойствоN: значение}

Далее я просто перечислю некоторые псевдоэлементы и кратко опишу их свойства:

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; 
charset=utf-8">
  <title>Псевдоэлементы в CSS</title>
<style type="text/css">
p.posle:after {
content:" - Не ожидали такого текста?";
 /* Добавляем после текста абзаца */
}
p.pered:before {
content: "Маленький текст к - ";
 /* Добавляем текст перед абзацем */
}
p.bykva:first-letter {
font-family: 'Times New Roman', Times, serif; 
/* Шрифт первой буквы абзаца */
font-size: 180%; /* Размер шрифта первого символа */  
color: navy; /* Цвет первой буквы */  
}
p.lins:first-line {
color: red; /* Красный цвет текста */
font-style: italic; /* Курсивное начертание */
}
  </style>
 </head>
 <body>
  <p class="posle">После этого текста вы увидите продолжение.</p>
  <p class="pered">БОЛЬШОМУ ТЕКСТУ</p>
  <p class="lins">В абзаце этого текста вы можете увидеть,
 что первая строчка текста имеет курсивное начертание красного
 цвета</p>
  <p class="bykva">В этом тексте мы выделили первую букву в 
абзаце.</p>
 </body>
</html>

В результате должно получиться следующее:

Применение псевдоэлементов в css

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



наверх