Выделение первой буквы в тексте с помощью CSS

Давно хотел выделить первые буквы в абзацах красным цветом и сделать их жирными. Но, честно говоря, долго думал, что такие вещи реализуются только на JavaScript-е. Оказалось, заблуждался :-)

Чтобы выделить первый символ в тексте, можно воспользоваться псевдоэлементом first-letter языка CSS.

Для примера выделим первый символ у всех параграфов на странице...

Код HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Как выделить первый символ в тексте?</title> <style type="text/css"> p:first-letter{ font-weight:bold; color:#F00; } </style> </head> <body> <p>Параграф №1.</p> <p>Параграф №2.</p> <p>Параграф №3.</p> </body> </html>

или

Код HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Как выделить первый символ в тексте?</title> <style type="text/css"> p::first-letter{ font-weight:bold; color:#F00; } </style> </head> <body> <p>Параграф №1.</p> <p>Параграф №2.</p> <p>Параграф №3.</p> </body> </html>

Вот здесь вы можете посмотреть пример страницы, для выделения первых символов параграфов которой используется first-letter.

Чем отличаются между собою два приведённых выше примера? Отличие имеется. Дело в том, что "правильнее" писать псевдоэлемент с двумя двоеточиями, но такой синтаксис не поддерживается браузерами Internet Explorer. Поэтому и используется "неправильный" синтаксис с одним двоеточием (этот синтаксис поддерживается не только IE, но и многими другими браузерами).

Во внешнем css-файле first-letter используется точно также...

Код CSS:

p:first-letter{ font-weight:bold; color:#F00; }

или

Код CSS:

p::first-letter{ font-weight:bold; color:#F00; }

По моему субъективному мнению, выделение первого символа делает текст веб-страницы более удобным для чтения. По такому тексту легче ориентироваться. Хотя, конечно, это спорное мнение.

Автор: admin

Дата добавления: 2012-02-06

Просмотров: 5416

Рейтинг поста: +5-

Правила перепечатки

Социальные закладки:
Комментарии:
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2012-04-28
Эмм... Не совсем понимаю, почему комментарий оставлен именно к этому посту, но если вас интересует встраивание шрифтов именно в флеш-ролики, то про это я уже писал - Встраивание шрифтов в Adobe Flash / ActionScript 3.0 приложения . Но учтите, что некоторые шрифты, будучи встроенными, могут сильно увеличить размеры конечного SWF-файла.
Комментатор
Комментарий добавил(а): veeground
Дата добавления: 2012-04-28
Скажите пожалуйста как сделать так, чтобы шрифты которые я использовал во флеш, работали на других компьютерах, дома то всё работает, а в техникуме нет.

можно как нибудь поподробней и именно для моего случая и пошагово ))
я создал текстовые поля, и разными шрифтами скачанными делал заголовки, в техникуме всё отображается одним стандартным шрифтом (

заранее спасибо! клёвый сайт!

ISQ: 628-621-330
Добавить комментарий:







[ + ] помощь по форматирование текста

Идиот-тест

Если все обязательные поля (отмечены * ) заполнены необходимой информацией, то нажимаем кнопку Добавить комментарий.

Меню
Подписка
Рубрики
Метки
Последние комментарии
Рейтинг постов
Реклама
Друзья
География гостей
Статистика
Яндекс.Метрика