:first-letter | Псевдоэлемент CSS - Справочник CSS3 | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Четверг, 08.12.2016
Главная » Справочник CSS3 » Псевдоэлементы


2D & 3D ТрансформацияСвойства контента
Свойства импортаСвойства углов
Свойства границСвойства анимации
ПсевдоклассыПсевдоэлементы
Свойства размераСвойства контура
Свойства переходаСвойства печати
Свойства тениСвойства отступов
Свойства текстаСвойства колонок
Свойства полейПозиционирование
Свойства интерфейсаТипы значений
Полезные статьиСвойства списка
Свойства шрифтаСвойства таблицы
Свойства фонаВендорные префиксы



Адаптивный сайт - aTmpl


:first-letter | Псевдоэлемент CSS

Псевдоэлемент :first-letter устанавливает стиль для первой буквы.




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





Свойство работает в браузерах



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


<!DOCTYPE html>
<html lang="ru">
<head>
<title>Псевдоэлемент :first-letter</title>
<style type="text/css">
<!--
p {
font-weight:bold;
color:#636363;
}
p#color:first-letter {
color:green;
}
p#fon:first-letter {
background:blue;
}
p#razmer:first-letter {
font-size:200%;
}
-->
</style>
</head>
<body>
<p>Просто текст</p>
<p id="color">Первая буква зелёная</p>
<p id="fon">Первая буква с голубым фоном</p>
<p id="razmer">Первая буква большая</p>
</body>
</html>


Пример в действии



Поэкспериментируйте сами




Русские шрифты






Источник: http://www.w3.org/TR/CSS21/selector.html#first-letter
Категория: Псевдоэлементы | Добавил: IZOTOP (30.05.2012) | Автор: Меренков Михаил W
Просмотров: 590 | Теги: css, буквы, стиль, :first-letter, пример, style | Рейтинг: 0.0/0

Вопросов / Советов / Предложений - относящихся к материалу: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]