Продолжаем работу с текстом. Давайте рассмотрим еще одно свойство - text-decoration: ;. Для чего оно нужно? Бывают моменты, когда нужно сделать текст подчеркнутым или сделать линию над текстом или вовсе его зачеркнуть. Так вот, используя данное свойство, и меняя только его значения можно удовлетворить все выше заявленные требования.
- text-decoration: underline ;- Устанавливает подчеркнутый текст
- text-decoration: overline ; - Линия проходит над текстом
- text-decoration: line-through ; - Создает перечеркнутый текст
- text-decoration: none ; - Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию
Свойство text-decoration: ; очень часто используется при работе с ссылками. Так у браузера есть свой встроенный стиль, который изначально выделяет все ссылки подчёркиванием. Очень много сайтов страниц, где по дизайну идут ссылки без подчеркивания и нам нужно удалять такие подчеркивания. И делается это как раз с помощью свойства text-decoration: ;
Но давайте все по порядку и для начала научимся подчеркивать текст.
Подчеркнуть текст CSS
Возьмем пример из прошлого урока, и в четвертом и пятом абзаце подчеркнем жирную область. Там уже использовался класс, когда задавалось свойство жирного и курсивного шрифта, а теперь к нему еще и добавим свойство для подчеркивания. Для подчеркивания используется значение underline
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML страница</title>
<link href="css/fonts.css" type="text/css" rel="stylesheet">
</head>
<body>
Первый абзац Первый абзац Первый абзац Первый абзац
Второй абзац Второй абзац Второй абзац Второй абзац
Третий абзац Третий абзац Третий абзац Третий абзац
Четвертый абзац Четвертый абзац Четвертый абзац
Пятый абзац Пятый абзац Пятый абзац Пятый абзац
</body>
</html>
И для класса .bold зададим еще одно свойство подчеркивания.
.bold{
font-weight: bold;
text-decoration: underline;
}
Теперь жирный текст стал еще и подчеркнутым.
Надчеркутый текст CSS
Теперь давайте расположим линию над текстом для этого в свойстве text-decoration: ; меняем значение на overline и линия появятся над текстом.
.bold{
font-weight: bold;
text-decoration: overline;
}
Зачеркнутый текст CSS
Для того чтобы перечеркнуть текст то вновь нужно изменить значение в свойстве text-decoration: ; на line-through после чего у нас появится перечеркнутый текст.
.bold{
font-weight: bold;
text-decoration: line-through;
}
Такое свойство также частенько используется, когда нужно отобразить какое-то отрицание
Удаление лини подчеркивания
И снова мы возвращаемся к ссылке, у которой нужно удалить линию подчеркивания. Используется все тоже свойство, только значение устанавливается в none. И предположи, что Вы у всех ссылок на странице хотите убрать подчеркивание. Для этого используется такая структура кода.
a{
text-decoration: none;
}
Теперь создано общее правило для всех ссылок, которые теперь все будут отображается без подчеркивающей линии.
В Демо можно просмотреть пример работы данного свойства с каждым из значений в отдельности. На этом с оформлением текста все, а мы движемся дальше.
CSS