Оформление текста и другие базовые возможности

---

Присваивание первому элементу в списке отличного от последующих элементов стиля

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

Использование селектора псевдокласса first-child

С помощью селектора псевдокласса first-child можно изменить стиль первого пункта списка, не повлияв при этом на оформление соседних элементов. Он позволяет применить стиль к первому элементу внутри контейнера ul, как показано на рис. 1:

li:first-child {
  color: red;
}

Рис. 1. Первый пункт списка отображается красным цветом

Создание цветного фона для заголовка

Средствами CSS можно задать цвет фона для любого элемента, в том числе и для заголовка.

Ниже приведено правило CSS, применяемое по отношению ко всем заголовкам первого уровня в документе:

h1 {
  background-color: #ADD8E6;
  color: #256579;
  font: 1.6em Verdana, Geneva, Arial, Helvetica, sans-serif;
  padding: 0.2em;
}

Результат выполнения данного кода представлен ниже.

Подчеркивание заголовков

Существует два способа добавления эффекта подчеркивания для текста. Самым простым является использование свойства text-decoration, о котором мы уже говорили в разделе «Удаление подчеркивания ссылок». Такой метод позволяет добавить подчеркивание того же цвета, что и сам текст, как видно из следующего кода:

h1 {
 font: 1.6em Verdana, Geneva, Arial, Helvetica, sans-serif;
 text-decoration: underline;
}

Результат выполнения данного кода представлен ниже.

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

Кроме того, вероятность спутать заголовок с эффектом подчеркивания, созданным описанным выше методом, со ссылкой гораздо ниже, чем при использовании свойства text-decoration. Однако внешний вид данного эффекта может варьироваться в зависимости от используемого броузера, поэтому необходимо тщательно протестировать его во всех броузерах, которыми могут пользоваться потенциальные посетители вашего сайта. Ниже представлено необходимое правило стиля:

h1 {
 font: 1.6em Verdana, Geneva, Arial, Helvetica, sans-serif;
 padding: 0.2em;
 border-bottom: 1px solid #aaaaaa;
}

Результат выполнения данного кода представлен ниже.

Устранение отступа между элементом h1 и следующим за ним абзацем

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

Пример 4. Пустое пространство между заголовком и абзацем, возникающее по умолчанию

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

h1 {
 font: 1.6em Verdana, Geneva, Arial, Helvetica, sans-serif;
 margin-bottom: 0;

h1+p {
 margin-top: 0;
}

В примере 5 показано, как будет отображаться страница после применения данного правила.

Пример 5. Использование смежного селектора для изменения стиля отображения заголовка.

Как видите, первый следующий за элементом h1 абзац отображается без отступа сверху; при этом все последующие абзацы отображаются с отступами.

Выделение текста на странице

Если отрывок текста обрамлен тегами <span> с атрибутом class, для данного класса можно добавить правило стиля с помощью CSS. Например, в следующем абзаце фраза «(www.symbol.ru/library/css-101-tips)» расположена между тегами <span> с атрибутом класса hilite.

<p>C сайта издательства <span class="hilite">(www.symbol.ru/library/css-101-tips)</span> можно скачать цветные версии тех иллюстраций, где наличие цвета может помочь лучше разобраться в предлагаемом материале.</p>

Ниже приведено правило стиля для класса hilite; отображение выделенного текста показано в примере 6. В данном примере слова «цветного фона» отображаются красными буквами на желтом фоне.

.hilite {
 background-color: #FFFFCC;
 color: #B22222;
}

Пример 6. Выделение текста с помощью CSS.

---

Создание цветного фона для заголовка

Подчеркивание заголовков

Устранение отступа между элементом h1 и следующим за ним абзацем

Выделение текста на странице