alt

Когда человеку тяжело,
это часто означает,
что он идёт к успеху.

alt


Оформление текста text-decoration средствами CSS .

Категория: Уроки CSS Просмотров: 3254 Коментариев: 0 Дата: 2017-12-10 Добавил: admin

 Оформление текста text-decoration средствами CSS

Продолжаем работу с текстом. Давайте рассмотрим еще одно свойство - text-decoration: ;. Для чего оно нужно? Бывают моменты, когда нужно сделать текст подчеркнутым или сделать линию над текстом или вовсе его зачеркнуть. Так вот, используя данное свойство, и меняя только его значения можно удовлетворить все выше заявленные требования.

  • text-decoration: underline ;- Устанавливает подчеркнутый текст
  • text-decoration: overline ; - Линия проходит над текстом
  • text-decoration: line-through ; - Создает перечеркнутый текст
  • text-decoration: none ; - Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию

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

Ссылка

Но давайте все по порядку и для начала научимся подчеркивать текст.

Подчеркнуть текст CSS

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

HTML
<!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 зададим еще одно свойство подчеркивания.

CSS
.bold{
    font-weight: bold;
    text-decoration: underline;
}


Теперь жирный текст стал еще и подчеркнутым.

Надчеркутый текст CSS

Теперь давайте расположим линию над текстом для этого в свойстве text-decoration: ; меняем значение на overline и линия появятся над текстом.

CSS
.bold{
    font-weight: bold;
    text-decoration: overline;
}

Зачеркнутый текст CSS

Для того чтобы перечеркнуть текст то вновь нужно изменить значение в свойстве text-decoration: ; на line-through после чего у нас появится перечеркнутый текст.

CSS
.bold{
    font-weight: bold;
    text-decoration: line-through;
}

Такое свойство также частенько используется, когда нужно отобразить какое-то отрицание

Удаление лини подчеркивания

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

CSS
a{
    text-decoration: none;
}

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

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


Просмотреть демо: Демо

Скачать исходник: Скачать



Добавить комментарий:


Ваше имя

Текст комментария


Введите буквы с учетом регистра:





Апдейты

Популярное Свежие записи

Облако тегов