htmlbook.ru - Для тех, кто делает сайты
Статьи Книги Шаг за шагом Рецепты Форум
Главная страница > Свойства CSS > :first-letter
Свойства CSS
!important
@charset
@import
@font-face
@media
@page
active
after
background
background-attachment
background-color
background-image
background-position
background-repeat
before
border
border-bottom
border-bottom-color
border-bottom-style
border-bottom-width
border-collapse
border-color
border-left
border-left-color
border-left-style
border-left-width
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-style
border-top-width
border-width
bottom
caption-side
clear
clip
color
content
cursor
counter-increment
counter-reset
direction
display
empty-cells
first-child
first-letter
first-line
float
focus
font
font-family
font-size
font-style
font-variant
font-weight
height
hover
lang
left
letter-spacing
line-height
link
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
min-height
min-width
orphans
outline
outline-color
outline-style
outline-width
overflow
padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
position
quotes
right
table-layout
text-align
text-decoration
text-indent
text-shadow
text-transform
top
unicode-bidi
vertical-align
visibility
visited
white-space
widows
width
word-spacing
z-index
CSS по типам
@-правила
Цвет и фон
Границы
Позиционирование
Размеры
Форматирование
Шрифт
Текст
Список
Отступы
Поля
Таблица
Интерфейс
Контент
Печать
Псевдоклассы
Псевдоэлементы
CSS 3
background-size
border-bottom-left-radius
border-bottom-right-radius
border-radius
border-top-left-radius
border-top-right-radius
box-sizing
opacity
overflow-x
overflow-y
text-overflow
word-wrap
writing-mode
:empty
:first-of-type
:last-child
:last-of-type
:not
:nth-child
:nth-last-child
:nth-of-type
:only-of-type
:root
:target

:first-letter

Internet ExplorerInternet Explorer ChromeChrome OperaOpera SafariSafari FirefoxFirefox
6.0 7.0 8.0 2.0 3.0 4.0 9.2 9.6 10 2.0 3.1 4.0 2.0 3.0 3.6
Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Ошибки Да Да

Краткая информация

Применяется К блочным элементам
Ссылка на спецификацию http://www.w3.org/TR/CSS21/selector.html#first-letter

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3
Да Да Да Да

Описание

Псевдоэлемент :first-letter определяет стиль первого символа в тексте элемента, к которому добавляется. К этому псевдоэлементу могут применяться только стилевые свойства, связанные со свойствами шрифта, полями, отступами, границами, цветом и фоном.

Синтаксис

элемент:first-letter { ... }

Значения

Нет.

Пример

HTML 4.01CSS 2.1CSS 3IE 6IE 7IE 8Op 9.6Op 10Sa 3.1Sa 4Cr 3Ff 3.0

<!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>first-letter</title>
  <style type="text/css">
   P {
    font-family: Arial, Helvetica, sans-serif; /* Гарнитура шрифта основного текста */
    font-size: 90%; /* Размер шрифта */
   }
   P:first-letter {
    font-family: "Times New Roman", Times, serif; /* Гарнитура шрифта первой буквы */
    font-size: 200%; /* Размер шрифта первого символа */
    color: red; /* Красный цвет текста */
   }
  </style>
 </head>
 <body>

   <p>Луч фонарика высветил старые скрипучие ступени, по которым не далее 
   как пять минут назад в дом поднялся Паша. Оля осторожно приоткрыла дверь и посветила
   внутрь дома. Луч света, словно нехотя, пробивался сквозь тугую 
   завесу из мрака и пыли. </p>
   <p>Взгляд Оли опустился на пол, и она вскрикнула. В пустом помещении никого
   не было, и лишь на полу валялась порванная туфля Паши.</p>

 </body>
</html>

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

Рис. 1

Рис. 1. Результат использования псевдоэлемента :first-letter

Браузеры

Internet Explorer до версии 7 включительно, Firefox до версии 2.0 включительно игнорируют свойство letter-spacing, когда оно применяется к псевдоэлементу :first-letter.

Copyright 2002–2010 Влад Мержевич, по всем вопросам пишите по адресу vlad@htmlbook.ru

О сайте | Планы на будущее | Использование сайта | Борьба с ошибками | Технологии | Поддержать проект