Хочу изменить цвет первой буквы в каждом абзаце. Что мне для этого надо сделать?
Выделить другим цветом первую букву в каждом абзаце текста.
Решение
Удобнее всего воспользоваться стилевым псевдоэлементом :first-letter , добавляя его к селектору p . В стилях вначале указывается селектор, затем :first-letter , после чего в фигурных скобках пишется свойство color и его значение, как показано в примере 1.
Пример 1. Применение псевдоэлемента first-letter
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан ниже.
Рис. 1. Вид текста, у которого изменен цвет первых букв в каждом абзаце
В данном примере псевдоэлемент :first-letter применяется для изменения цвета первой буквы. Аналогично можно изменить размер символа и гарнитуру шрифта.
Изменение внешнего вида первой буквы
Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье вы узнали, что такое псевдоселекторы в CSS. В данной короткой статье (но от этого не менее важной) я хотел рассказать, как с помощью CSS изменить внешний вид первой буквы . Давайте разберем, как это сделать. А делается это с помощью псевдоэлемента first-letter. Допустим мы хотим сделать, чтобы первые буквы всех элементов списка имели красный цвет и размер шрифта в 30px. Давайте напишем пример и используем внедренный стиль <style> :
Обязательно наберите данный пример и посмотрите результат его работы.
В принципе, вы могли и не использовать данный псевдоэлемент, а применить inline-стиль, который можно применить к любой букве (или символу). Давайте приведу пример кода:
На самом деле это издевательство над кодом, и так лучше не делать.
В данной статье вы узнали, как изменить внешний вид первой буквы через CSS.
На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.
Css первая буква другим цветом. Делаем заглавные буквы css стилями с использованием псевдоэлементов
Псевдоэлемент ::first-letter определяет стиль первого символа в тексте элемента, к которому добавляется. К этому псевдоэлементу могут применяться только стилевые свойства, связанные со свойствами шрифта, полями, отступами, границами, цветом и фоном.
Обозначения
| Описание | Пример | |
|---|---|---|
| Указывает тип значения. | ||
| A && B | Значения должны выводиться в указанном порядке. | && |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| Группирует значения. | [ crop || cross ] | |
| * | Повторять ноль или больше раз. | [, ]* |
| + | Повторять один или больше раз. | + |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| Повторять не менее A, но не более B раз. | ||
| # | Повторять один или больше раз через запятую. | # |
×
Пример
Луч фонарика высветил старые скрипучие ступени, по которым не далее как пять минут назад в дом поднялся Паша. Оля осторожно приоткрыла дверь и посветила внутрь дома. Луч света, словно нехотя, пробивался сквозь тугую завесу из мрака и пыли.
Взгляд Оли опустился на пол, и она вскрикнула. В пустом помещении никого не было, и лишь на полу валялась порванная туфля Паши.
Как сделать первую букву другого цвета css
Давно хотел выделить первые буквы в абзацах красным цветом и сделать их жирными. Но, честно говоря, долго думал, что такие вещи реализуются только на JavaScript-е. Оказалось, заблуждался 🙂
Чтобы выделить первый символ в тексте, можно воспользоваться псевдоэлементом first-letter языка CSS.
Для примера выделим первый символ у всех параграфов на странице.
<!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>
<!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 используется точно также.
По моему субъективному мнению, выделение первого символа делает текст веб-страницы более удобным для чтения. По такому тексту легче ориентироваться. Хотя, конечно, это спорное мнение.
Дата добавления: 2012-02-06
Рейтинг поста: 
5 