обучение html, css
РЈСЂРѕРєРё РљРЅРёРіРё вопросы и ответы Помочь сайту
Главная страница > FAQ > контент > Как добавляем нижняя полоска в контенте к титл?

Справочник по CSS (ЦСС) и ШТМЛ

Как добавляем нижняя полоска в контенте к титл?

нижняя полоска в контенте для блочных элементов вроде тега <H1> можно проводить двояко. Например, линию под контентом устанавливать на всю ширину блока, независимо от объема контента. А также нижняя полоска в контенте делать только у контента. Далее просмотрим оба варианта.

Линия под контентом на всю ширину блока

Чтобы создать линию РїРѕРґ контентом, следует добавляем Рє элементу стилевой параметр border-bottom, его значением выступает одновременно толщина линии, ее стиль Рё цвет (пример 1).

Пример 1

Валидный HTML
Валидный CSS

<!DOCTYPE РЁРўРњР› PUBLIC "-//W3C//DTD РЁРўРњР› 4.01//EN" "http://www.w3.org/TR/РЁРўРњР›4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Линия под заголовком</title>
<style type="text/CSS (ЦСС)">
h1 {
 font-size: 200%; /* Размер шрифта */
 border-bottom: 2px solid maroon; /* Параметры линии РїРѕРґ контентом */
 font-weight: normal; /* Убираем жирное начертание */
 padding-bottom: 5px; /* Расстояние РѕС‚ контента РґРѕ линии */
}
</style>
</head>
<body>
<h1>Пример контента</h1>
<p>Черный заголовок привлекает к себе внимание, несмотря на то, что он черный, а не белый.</p>
</body>
</html>

Расстояние РѕС‚ линии РґРѕ контента можно регулировать параметром padding-bottom, добавляя его Рє селектору H1. Результат данного примера показан РЅР° СЂРёСЃ. 1.

Линия под заголовком

Рис. 1. Линия под заголовком

нижняя полоска в контенте контента

Чтобы подчеркнуть только контент, необходимо применить тегом text-decoration СЃРѕ значением underline, опять же, добавляя его Рє селектору H1 (пример 2).

Пример 2

Валидный HTML
Валидный CSS

<!DOCTYPE РЁРўРњР› PUBLIC "-//W3C//DTD РЁРўРњР› 4.01//EN" "http://www.w3.org/TR/РЁРўРњР›4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>нижняя полоска в контенте заголовка</title>
<style type="text/CSS (ЦСС)">
h1 {
 text-decoration: underline; /* нижняя полоска РІ контенте заголовка */
}
</style>
</head>
<body>
<h1>Пример контента</h1>
<p>Черный заголовок привлекает к себе внимание, несмотря на то, что он черный, а не белый.</p>
</body>
</html>

Результат данного примера показан РЅР° СЂРёСЃ. 2.

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

Рис. 2. нижняя полоска в контенте заголовка

В случае использования параметра text-decoration линия жестко привязана к контенту, поэтому определить ее положение и стиль не удастся.

Узнали для себя что-то новое из данного рецепта?