3. Одно из нескольких значений атрибута

Некоторые значения атрибутов могут перечисляться через пробел, например имена классов. Чтобы задать правило стиля при наличии в списке значений атрибутов требуемого значения применяется следующий селектор:

[<имя атрибута тега>~=<значение>] { <стиль> }
<основной селектор>[<имя атрибута тега>~=<значение>] { <стиль> }

Стиль применяется в том случае, если у атрибута имеется требуемое значение или оно входит в список значений, разделенных пробелами. Например:

{
color:red;
font-size:150%;
}
...

Наш телефон: 777-77-77

Наш адрес: Москва ул. Советская 5

Получиться следующий результат:

Правило применяется к элементу, у которого среди значений атрибута class имеется значение tel .

4. Дефис в значении атрибута

В значениях идентификаторов и классов допускается использовать дефис. Для привязки стиля к элементам, значения атрибутов которых могут содержать дефис можно воспользоваться следующей конструкцией:

[атрибут|="значение"] { стиль }
Селектор[атрибут|="значение"] { стиль }

Стиль применяется к тем элементам, у которых значение атрибута начинается с указанного значения после, которого идет дефис. Например:

{
color:red;
font-size:150%;
}
...

• Пункт 1


• Пункт 2


• Пункт 3


• Пункт 4

Результат:

В примере правило стиля применяется только к тем элементам списка, у которых имя класса начинается со значения «menu- „ .

5. Значение атрибута начинается с определенного текста

Данный селектор устанавливает стиль для элемента, если значение атрибута тега начинается с определенного значения. Может быть два варианта:

[<имя атрибута тега>^=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>^=<подстрока>] { <стиль> }

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

a{
color:green;
font-weight:bold;
}
...

Результат:

В примере показано, как по разному отобразить внешние ссылки и внутренние ссылки. Внешние ссылки всегда начинаются со строки «http://». Поэтому в селекторе указываем, что стиль применять только к ссылкам, у которых атрибут href начинается со значения http:// .

6. Значение атрибута заканчивается определенным текстом

Привязывает стиль к элементам, у которых значение атрибута заканчивается указанным текстом. Имеет следующий синтаксис:

[<имя атрибута тега>$=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>$=<подстрока>] { <стиль> }

В первом случае стиль применяется ко всем элементам, у которых имеется атрибут с указанным именем и имеет значение оканчивающееся указанной подстрокой . Во втором случае тоже самое, только к указанным селекторам . Таким способом, например, можно по разному отображать различные форматы графических изображений. Например:

IMG {
border: 5px solid red;
}
...

Картинка формата gif

Картинка формата png

Результат:

В примере все картинки с расширением gif будут отображаться с красной рамкой толщиной пять пикселей.

7. Значение атрибута содержит указанную строку

Этот селектор привязывает стиль к тегам, значение атрибута которых содержат определенный текст. Синтаксис:

[<имя атрибута тега>*=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>*=<подстрока>] { <стиль> }

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

IMG {
border: 5px solid red;
}
...

Картинка из папки gallery

Картинка из другой папки

Результат:

В примере стиль применяется к картинкам, которые загружены из папки «gallery» .

На этом об селекторах атрибутов все. Все перечисленные методы можно комбинировать между собой:

Селектор[атрибут1="значение1"][атрибут2="значение2"] { стиль }

Кроме того напомню о специальных селекторах CSS:

• с помощью символов «+» и «~» формируются ;
• символ «>» привязывает css стили к дочерним тегам;
• символ <пробел> формирует контекстные селекторы.

В следующих статьях мы рассмотрим также псевдоэлементы и псевдоклассы, которые предоставляют мощный инструмент управления стилями.

На этом все, до новых встреч.

Сегодня мы рассмотрим такое понятие как селекторы CSS и как с их помощью мы можем сократить нашу разметку HTML, сделав её чище.

Селектор CSS – это тот элемент, к которому мы собираемся применять CSS свойства. Слово «селектор» говорит само за себя, оно обозначает выбор.

P {color: red} div span {background: green} ul li {list-style: none}

Селекторы class и id

В примере выше мы имеем 3 селектора – это p, div span, ul li. То есть весь наш файл стилей состоит из селекторов и их свойств. Наиболее удобно и наглядно, особенно новичкам, брать за селектор имя класса (class) тега или уникальный идентификатор (id) тега. Чтобы присвоить класс или идентификатор какому-либо тегу, мы должны указать их среди атрибутов этого тега. У конкретного тега может быть максимум 1 идентификатор и бесконечное число классов. Пример:

На что стоит обратить внимание:

• Классы и идентификаторы можно присваивать любым (всем) тегам.
• Каждый id уникален и не может повторяться в пределах одной страницы, в отличие от классов!
• Один и тот же класс может быть присвоен любым тегам и может повторяться любое количество раз на странице.
• Если мы хотим задать конкретному тегу несколько классов, мы просто задаём их через пробел.
• Имена классов и идентификаторов могут совпадать, при этом кроме имени, ничего общего между ними не будет.

Как обратиться к классу или id в файле стилей (CSS)?

Смотрим пример:

#first {color: red;} /* обращаемся к id с именем first */ .second {color: blue;} /* обращаемся к классу с именем second */ #first .second {color: orange;} /* обращаемся к классу с именем second, ТОЛЬКО если он находится ВНУТРИ тега с идентификатором first */ .first .third {color: grey;} /* обращаемся к классу с именем third, ТОЛЬКО если он находится ВНУТРИ тега с классом first */

В нашем случае последние две инструкции не сработают, так как у нас нет классов, вложенных внутрь тегов с заданными атрибутами. Как вы могли заметить, чтобы обозначить, что мы обращаемся именно к id, нужно перед его именем без пробелов поставить знак решётки (#), если мы обращаемся к классу, то перед именем класса должны поставить точку (.).

Использование классов и идентификаторов очень удобно, но оно увеличивает нашу HTML разметку, в идеале (которого никогда нет) мы вовсе не должны их использовать, вместо них мы будем использовать комбинации и группировки селекторов, о них и будет вся остальная часть статьи, но! Но это совсем не означает, что вы должны полностью отказаться от использования классов и идентификаторов, просто вы должны иметь ввиду, что очень часто вместо создания нового class или id можно обойтись приёмами, описанными ниже и они также могут быть вполне удобны.

В чём различие class и id?

Кроме приведённых выше различий, стоит ещё отметить, что у свойств заданных id приоритет выше, чем у свойств, заданных классу. То есть, если мы напишем:

То цвет текста станет красным, несмотря на то, что класс находится ниже по коду и если бы у них был равный приоритет текст стал бы синим.

По синтаксису: в случаи с классом мы можем выбрать, у какого именно тега должен находиться данный класс, для этого после имени тега БЕЗ пробела мы должны обратиться к классу. Пример:

Myclass {свойства} /* применятся ко всем тегам, которые содержат класс myclass */ div.myclass {свойства} /* применятся только к тегам div, которые содержат класс myclass */

Для id это тоже будет работать, но такая запись лишена всякого смысла, так как id не может повторяться на странице, а значит достаточно просто объявлять id, без тега к которому оно относится:

Вроде бы осталось только одно неоговорённое отличие, и оно касается темы, которую в ближайшем будущем я не планировал затрагивать на этом блоге – Javascript. Но всё же обязан доложить вам о нём: если вы хотите обратиться к элементу с помощью Javascript, то для этой цели очень удобным будет наличие id у этого элемента. Чтобы обратиться к элементу по его классу в Javascript нет такой встроенной возможности, вам придётся использовать вспомогательные функции + это не всегда кроссбраузерно.

Итог: id и class используем, но в меру, при этом всегда спрашивая себя, а можно ли здесь обойтись без них и насколько это целесообразно.

Родственный селектор

Div p {color: green;} /* Селектор по потомку */ p {color: red;} /* селектор по тегу */

Но как я уже писал в предыдущей статье, в первом случае CSS свойства применятся ко всем тегам p вложенным на ЛЮБУЮ глубину тега div. А что если мы хотим применить свойства только к прямым наследникам, то есть к первому уровню вложенности:

В таком случае мы должны использовать так называемый родственный селектор, для его обозначения используется угловая скобка, пробелы можете ставить, можете не ставить, я бы не советовал:

Div>p {color: blue;} /* только первый уровень вложенности */ div p {color: blue;} /* абсолютно все параграфы внутри div */

Универсальный селектор

С этим разобрались, у нас на вооружении уже 3 вида селекторов, теперь хочу вам рассказать о весьма необычном селекторе, который выделяется среди всех остальных – это так называемый универсальный селектор, который обозначается звёздочкой (*):

* {margin: 0; padding: 0;}

Кстати говоря, при работе с селекторами, как и при любой работе связанной с вёрсткой макета очень удобно использовать просмотр элементов страницы. Если вы ещё не в курсе таких вещей как Opera Dragonfly, Firebug и веб-инспекторы в целом, то вам без преувеличений срочно нужно прочесть статью по ссылке выше! А кто уже использовал подобные вещи, прошу дальше за мной.

Псевдо-классы

В отличие от классов, псевдо-классы не нужно указывать в HTML разметке, они сами вычисляются браузером. У нас есть 4 статических псевдо-класса и 3 динамических псевдо-класса, без учёта CSS 3, о нём ближе к концу. К статическим относятся (:first-child, :link, :visited, : lang()):

Результат:

Естественно можно комбинировать селекторы как захотим, например:

Div>span p:first-child {color: green;} /*сработает, если p является первым ребёнком своего родителя и находится внутри тега span, который является прямым потомком тега div */

Название представленного выше псевдо-класса говорит само за себя first-child - первый ребёнок.

Следующие два статических псевдо-класса применяются только к тегу гиперссылки (:link, :visited), они применяют CSS свойства в зависимости от того, посещалась данная ссылка конкретным пользователем или нет:

A:link {color: blue;} /* у не посещённых ссылок задаём синий цвет, и по умолчанию они подчёркнуты */ a:visited {color: green; text-decoration: none;} /* у посещённых ссылок текст будет красным, убираем подчёркивание */

Псевдо-класс:lang() используется для задания разного стиля оформления в зависимости от языка. В скобочках указывается язык, к которому нужно применить оформление. Это можно использовать, например, для задания разных стилей кавычек в цитатах:

Q:lang(de) {quotes: "\201E" "\201C";} /* кавычки для немецкого языка */ q:lang(en) {quotes: "\201C" "\201D";} /* кавычки для английского языка */ q:lang(ru) {quotes: "\00AB" "\00BB";} /* кавычки для русского языка */

Это, пожалуй, единственный из всех возможных видов селекторов, который я никогда не использовал.

Динамические псевдо-классы

Динамические псевдо-классы – это:active, :hover, :focus. Динамические псевдо-классы срабатывают по определённому действию на странице, они работают для всех тегов, а не только для ссылок как многие думают и даже утверждают в своих блогах! Рассмотрим их применение:

P:active {background: red;} /* стиль, который применится к тегу по нажатию на него (клику мышью) */ input:focus {width: 400px;} /* стиль, который применится к элементу, на котором в данный момент фокус (работает, к примеру, для текстовых полей ввода: textarea, input). В данном случае по взятию в фокус, ширина input станет равна 400 пикселей, удобно использовать для красивого эффекта удлинения поля по клику. */ div:hover {background: green;} /* срабатывает по наведению курсора на элемент, в основном применяется для создания красивого эффекта при наведении на ссылки. */

Примените данные стили к нашему примеру выше, и вы сами всё увидите.

Смежные селекторы

Смежные селекторы – это ближайший сосед ниже по коду, не ребёнок! Очень удобный селектор:

текст в параграфе ВНЕ div

снова параграф вне div

Результат:

Обобщённые смежные селекторы

Обобщённые смежные селекторы действуют точно также как и обычные смежные селекторы, за исключением того, что свойства применяются не только к первому соседу ниже, а ко всем заданным соседям ниже:

параграф

параграф

параграф

параграф

параграф

параграф

Результат:

Селекторы атрибутов

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

P {свойства} /* применить ко всем тегам p, у которых есть атрибут align */ p {свойства} /* где значение атрибута align равно center */ p {свойства} /* где значение атрибута align начинается на center */ p {свойства} /* где значение атрибута align содержит center */ p {свойства} /* где site может находиться среди других слов, отделенных пробелами () */ p {свойства} /* где значение атрибута class состоит только из слова site или начинается им, после чего ставится дефис и пишется остальная часть значения ( или ) */ p {свойства} /* где значение атрибута align заканчивается на center */

CSS 3 псевдо-классы

Вы уже ознакомились со всеми основными селекторами и вам на первых парах этого должно хватить с горкой. Однако в CSS 3 появилось множество новых псевдо-классов, теперь мы можем брать не только первого ребёнка, но и любого другого по счёту, можем идти от обратного, брать не первого, а последнего ребёнка и так далее и тому подобное. Всё это очень удобно и практично, разве что у вас могут возникнуть проблемы со старыми версиями IE. Давайте соберём все силы в кулак и пробежимся по всем оставшимся селекторам, чтобы потом уже вы могли иметь их ввиду при вёрстке собственного макета.

:last-child – аналог:first-child, только берёт не первого, а последнего ребёнка.

:only-child – сработает, если элемент (тег) является единственным ребёнком.

:only-of-type - сработает, если элемент (тег) является единственным ребёнком своего типа.

:nth-child() – обращается к потомкам по их порядковым номерам, можно обращаться ко всем чётным или нечётным (even или odd) числам. Например:

Результат:

:nth-last-child – работает также как и предыдущий, но отчёт начинается с конца.

:first-of-type – первый ребёнок своего типа в рамках прямого родителя.

:last-of-type – последний ребёнок своего типа в рамках прямого родителя.

:empty – сработает для тех тегов, внутри которых нет ни одного символа (без текста).

:not() – делает исключение для заданных элементов. Пример:

параграф с классом roll

параграф

параграф

параграф с классом roll

Результат:

Управление полями, формами, переключателями и флажками в CSS

:enabled - применяется к доступным элементам интерфейса как формы, кнопки, переключатели и тд. По умолчанию все элементы интерфейса являются доступными.

:disabled - применяется к заблокированным элементам интерфейса как кнопки, формы и так далее. Элементы интерфейса являются заблокированными, если к ним в HTML добавить атрибут disabled или в XHTML disabled=”disabled”.

:checked – применяется к элементам интерфейса типа флажки (radio) и переключатели (checkbox), когда они находятся во включённом положении.

Псевдо-элементы

Псевдо-элементы, аналогично псевдо-классам вычисляются браузером автоматически, нам об этом заботиться не нужно. Чтобы не путать псевдо-элементы с псевдо-классами в спецификации CSS 3 было решено использовать двойное двоеточие, вместо одинарного, как было в CSS 2. Поэтому в Интернете вы можете встретить псевдо-элементы как с одинарным двоеточием так и с двойным – и тот и тот вариант верен. Однако для лучшей совместимости с IE рекомендуют использовать одинарное двоеточие.

:first-line – первая строка внутри блочного или табличного элемента.

:first-letter – первая буква внутри блочного элемента.

Итоги: теперь вы знаете и можете использовать всю мощь каскадных таблиц стилей, однако это не значит, что нужно сразу ринуться верстать макеты сайтов, используя как можно больше изученных сегодня селекторов, псевдо-классов и псевдо-элементов. Я перечислил все возможные инструменты, а вы должны выбрать лишь самое нужное для себя.

Преимущества оптимизации HTML за счёт CSS

Суть всего написанного выше отчасти заключается в том, чтобы отказаться от повсеместного использования атрибутов class и id в HTML, тем самым возложив всё на плечи могучих таблиц стилей.

Внешние файлы стилей, как и внешние файлы Javascript отлично кэшируются, а это значит, что зайдя первый раз на любую страницу вашего сайта, браузер пользователя запоминает эти файлы и более их не скачивает, в отличие от самой страницы сайта, то есть вашей HTML разметки, картинок и текста, которую браузер загружает снова и снова. Тоже самое касается и поисковых систем, им вообще нет дела до ваших внешних файлов, но вот до объёма и содержания вашей HTML разметки им дело есть. Поисковым системам приходится сканировать всю структуру страницы и в ваших же интересах помочь им в этом, сосредоточить их усилия на контенте, а не на громоздкой стене разметки состоящей из кучи классов и идентификаторов или того хуже – Javascript обработчиков событий и CSS стилей прямо в атрибутах тегов (и такое до сих пор бывает).

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

Подытожим: благодаря оптимизации и сокращению HTML мы имеем совсем небольшой выигрыш в скорости загрузки сайта и в SEO (поисковой оптимизации), а также более чистый код.

Игорь . Обновление:Октябрь 30, 2018 .

В стартовой статье данного раздела была дана общая информация, касающаяся , включая описание способов подключения стилей к HTML-коду страницы вебсайта (документа), который определяет наличие тех или иных элементов на вебстранице.

В этой публикации мы рассмотрим, как правильно составлять и прописывать свойства CSS для всех элементов, чтобы браузер смог их идентифицировать и корректно отобразить на странице.

В частности, разберем, что представляет из себя в общем виде отдельно взятое стилевое правило, которое включает в себя селектор, а также свойства и их значения.

Синтаксис и варианты записи правил CSS

Поскольку каскадные таблицы стилей представляют из себя, пусть и специализированный, но все же язык, допустимо провести аналогию совокупности правил CSS с простым текстом, где каждое слово состоит из букв, предложение — из слов, а сам текстовый фрагмент — из предложений.

Учитывая эту наглядную ассоциацию, можно вывести логическую последовательность, которая касается структуры CSS (она является максимально оптимальной, на мой скромный взгляд):

• значения (или параметры) , которые выражается в числах, коде цвета, названии шрифта и т.п., в соответствии с нашей аналогий можно считать буквами;
• структурной единицей CSS является свойство , определяющее свою часть внешнего вида элемента на странице (его цвет, шрифт текста, размеры, отступы, позицию и т.д.), которому соответствуют конкретные значения (одно или несколько). Здесь совокупность названия свойства и его параметра можно сравнить со словом (которое также может состоять из одной или более букв) в стандартном текстовом фрагменте;
• правило CSS — селектор (наименование стиля) вместе с набором свойств CSS для каждого элемента полностью определяет его оформление и местоположения на странице. Структурно ассоциируется с предложением (совокупностью отдельно взятых слов в обычном тексте);
• полное собрание всех правил CSS для конкретного документа (веб-страницы) обеспечивает его корректное отображение в браузере. Сравним это с завершенным отрывком текста.

Возможно, предложенная мною ассоциация немного притянута за уши, однако, мне кажется, она все-таки поможет начинающим понять общую структуру языка CSS.

Итак, каждому свойству присваивается конкретное значение (параметр), причем, их может быть несколько. Соответствующий набор свойств (правило) применяется к определенному селектору. Схематически правило CSS можно отобразить так :

Впереди помещается селектор, затем ставятся фигурные скобки (открывающая и закрывающая), между которыми и находятся свойства CSS с присвоенными им значениями, название каждого свойства отделяется от соответствующего ему параметра двоеточием. Все свойства вместе со значениями разделяются между собой точкой с запятой. Посмотрим на живой пример:

Body { font-size: 14px; background: #00ff00 url("west.png") repeat-x; }

Обратите внимание на то, что свойство background имеет сразу несколько значений: цвет фона (#00ff00), путь до фонового изображения ("west.png") и разрешение на его повторение по горизонтали (repeat-x). Наверное, вы заметили, что подобный вариант записи несколько отличается от схемы, представленной чуть выше.

На самом деле никакого несоответствия здесь нет. Поскольку CSS не чувствителен к пробелам, переносам строк, символам табуляции, стилевые правила могут быть записаны самыми разными способами, которые используются в конкретных ситуациях.

Скажем, расширенная запись правила, образец которой только что был представлен, наиболее удобна для восприятия, а потому применяется обычно для изучения стилей, ну или в "сыром" файле style.css, который создан для нового сайта, а потому еще не доведен до ума. Есть и другая разновидность этого же самого варианта записи CSS правила:

Body { font-size: 14px; } body { background: #00ff00 url("west.png") repeat-x; }

Как видите, здесь для каждого свойства повторяется один и тот же селектор. Это не является ошибкой по причинам, упомянутым выше, однако такой формат записи правила засоряет код и усложняет его восприятие, а потому практически не используется.

Расширенный вариант записи можно представить и без переносов:

Body { font-size: 14px; background: #00ff00 url("west.png") repeat-x; }

Но это не все. Все пробелы, как и разделительный символ (точку с запятой) после последнего свойства (перед закрывающей фигурной скобкой), можно опустить. Это также вполне легитимная форма CSS правила, менее объемная, что хорошо для оптимизации сайта, но менее читабельная:

Body{font-size:14px;background:#00ff00 url("west.png") repeat-x}

После того, как дизайн сайта готов и внесены все необходимые изменения в файлы стилей CSS, их соответствующим образом в целях оптимизации веб-ресурса, при этом автоматически удаляются все пробелы. Это можно сделать и вручную, но для чего тратить драгоценное время настолько нерационально? Ведь даже для небольшого сайта файл style.css может содержать немало стилевых правил.

Селекторы, свойства и применение стилей

Я уже отмечал, что с течением времени происходит все более тесное сближение HTML и CSS. Если на заре зарождения интернета в его сегодняшнем виде внешний вид элементов на веб-странице описывался с помощью атрибутов тегов гипертекстовой разметки, то в наши дни слишком частое использование такого метода считается , поскольку перегруженный ХТМЛ-код часто не способствует должной оптимизации страниц сайта, что в том числе вредит его SEO продвижению.

CSS (перед идентификатором ставится значок решетки):

#area {color: green; border: 2px solid #d6c99a}

Последующие ниже варианты могут содержать как селекторы тегов, так и классы с идентификаторами.

Для чего нужны такие варианты задания размеров? Дело в том, что далеко не всегда наилучшим решением является использование стандартных относительных величин, включая проценты. Порой выгоднее связать величину шрифта с высотой и шириной окна браузера. Скажем, ежели область просмотра по высоте равна 800px, то 1vh = 8px, а при ширине 1500px — 1vw = 15px.

Единицы vmin и vmax определяются соответственно минимальными и максимальными размерами области по высоте и ширине. Образец: высота окна браузера 700px, а ширина — 1300px. В этом случае vmin = 7px, а vmax = 13px.

При установке размеров нужно обязательно указывать единицы (например, height: 55px), иначе браузер некорректно будет отображать соответствующие элементы. Значения, равные нулю, к данному правилу не относятся, их можно обозначать двумя способами (padding: 0 или padding: 0px), по понятным причинам с подавляющим преимуществом лидирует первый вариант.

Проценты

Этот вид единиц я решил упомянуть отдельно. Выше я уже сказал о преимуществе использования относительных значений при задании свойств. Это в полной мере относится и к процентам.

Table {width: 100%; /* Ширина таблицы в процентах */}

Записи в процентах применяются довольно часто, особенно тогда, когда необходимо установить значение относительно родителя или когда размеры находятся в зависимости от неких внешних обстоятельств. К примеру, ширина элемента, равная 100%, будет подстраиваться под экраны самых разных устройств и корректно там отображаться.

Ключевые слова

Разберем некоторые слова, которые играют роль параметров свойств и определяют то или иное положение либо внешний вид элемента. Вот несколько наглядных примеров.

1. Значения свойства text-align , которые способствуют выравниванию текста по горизонтали: center | justify | left | right | start | end. Вот пример c параметром justify :

P {text-align: justify}

Эта запись означает, что текст абзаца выравнивается одновременно по левому и правому краю :

2. CurrentColor — соответствует значению свойства color текущего элемента и указывает цвет для областей, которые по умолчанию его не получают. Допустим, контейнер с классом «bl-2» вложен в «bl-1»:

И для обоих прописаны стили:

Bl-1 { padding: 10px; /* Поля вокруг внутреннего контейнера */ background: currentColor; /* Цвет фона */ } .bl-2 { color: blue; /* Цвет текста */ padding: 10px; /* Поля вокруг текста */ background: #ccc; /* Цвет фона */ }