Зачеркнутый текст css: text-decoration-color

Содержание

Работа с текстом в CSS. Декорирование, выравнивание и интервалы

Последние:

Оглавление:

Подчеркнутый или зачеркнутый текст “text-decoration”
Выравнивание текста по краям “text-align”
Красная строка “text-indent”
Высота строки “line-height”
Междустрочный интервал “word-spacing”
Регистр текста “text-transform”

Подчеркнутый или зачеркнутый текст

“text-decoration”

Здравствуйте, уважаемые читатели сайта Uspei.com. На прошлом уроке мы успели изучить с Вами шрифты в css, а теперь перейдем к декорированию текста. И следующее свойство, которое мы изучим это “text-decoration”. Оно позволяет подчеркивать текст снизу или даже сверху (!), а также зачеркнуть текст. Кроме того, данное свойство можно использовать для того, что бы убрать подчеркивание у ссылок, которое браузер ставит по умолчанию.

Эти четыре его свойства позволяют сделать это.

“underline” – подчеркивает текст, “overline” – “надчеркивает” текст, “through” – делает текст перечеркнутым, а значение “none” убирает какое-либо за- над- подчеркивание.

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

a {
 text-decoration: none;
 }

К оглавлению ↑

Выравнивание текста по краям

“text-align”

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

В CSS есть такое уже знакомое нам свойство и пишется оно так: “text-align”.

Соответственно его значения выравнивают текст по левому краю, по центру, по правому краю и по обеим сторонам.

К оглавлению ↑

Красная строка

“text-indent”

Еще одно полезное свойство, которое мы рассмотрим – красная строка. Это придает тексту красоту и упорядоченность (если он у вас еще и оптимизирован как надо, то вообще супер). Называется “text-indent”. Для демонстрации именно этот урок я сделал с использованием этого свойства.

Его можно задать в разных единицах, и в “px” и в “em” и в “%”. Но мне кажется удобнее всего в пикселях “px”.

К оглавлению ↑

Высота строки

“line-height”

Следующее свойство в CSS отвечает за межстрочный интервал “line-height”.

Изначально браузер использует значение “normal”, однако мы можем изменить это расстояние, указав необходимое нам.

Например, давайте зададим принудительное межстрочное расстояние в 20px:

p {
 line-height: 20px;
 }

Мы видим, что расстояние немного увеличилось.

К оглавлению ↑

Междустрочный интервал

“word-spacing”

Да, и это можно делать в CSS))).

С помощью свойства “word-spacing”, базовое значение браузера которого также “normal”.

Увеличим расстояние между нашими словами на 12px.

p {
 word-spacing: 12px;
 }

Для расстояния между буквами по аналогии используется свойство “letter-spacing”.

К оглавлению ↑

Регистр текста

“text-transform”

И последнее, что мы изучим на сегодня это какими буквами мы хотим отразить наш текст, как обычно, или все заглавными. Отвечает за это свойство “text-transform” и его значение “uppercase” (верхний регистр).

p {
 text-transform: uppercase;
 }

Свидетельство о регистрации СМИ в РКН: ЭЛ № ФС77-83818 от 29.08.2022

— РЕКЛАМА —

Сейчас:

— РЕКЛАМА —

Стилизация текста — Как создать сайт

Дек,2017

Стилизация текста

Здравствуйте! Продолжаем разбираться с CSS стилями. Мы уже разобралтсь со стилями шрифтов и высотой шрифта, а сегодня мы разберем стили для текста.

text-transform

Свойство text-transform изменяет регистр текста. Оно может принимать следующие значения:

capitalize: делает первую букву слова заглавной
uppercase: все слово переводится в верхний регистр
lowercase: все слово переводится в нижний регистр
none: регистр символов слова никак не изменяется

Например:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Шрифты в CSS3</title>
         
        <style>
            p.lowercase {text-transform: lowercase;}
            p.uppercase {text-transform: uppercase;}
            p.capitalize { text-transform: capitalize;}
        </style>
    </head>
    <body>
    <div>
        <p>Текст использует значение capitalize</p>
        <p>Текст использует значение lowercase</p>
        <p>Текст использует значение uppercase</p>
    </div>
    </body>
</html>

Просмотреть пример

Свойство text-decoration

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

underline: подчеркивает текст
overline: надчеркивает текст, проводит верхнюю линию
line-through: зачеркивает текст
none: к тексту не применяется декорирование

Например:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Шрифты в CSS3</title>
         
        <style>
            p.under {
                text-decoration: underline;
            }
            p.over {
                text-decoration: overline;
            }
            p.line {
                text-decoration: line-through;
            }
            p.mixed {
                text-decoration: underline line-through;
            }
            a.none {
                text-decoration: none;
            }
        </style>
    </head>
    <body>
    <div>
        <p>Это подчеркнутый текст.
 </p>
        <p>Это надчеркнутый текст</p>
        <p>Это зачеркнутый текст</p>
        <p>Это подчеркнутый и зачеркнутый текст</p>
        <p>Не подчеркнутая <a href="index.php">ссылка<a></p>
    </div>
    </body>
</html>

Просмотреть пример

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

p.mixed { text-decoration: underline line-through; }

Межсимвольный интервал

Два свойства CSS позволяют управлять интервалом между символами и словами текста. Для межсимвольного интервала применяется атрибут letter-spacing, а для интервала между словами — word-spacing:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Шрифты в CSS3</title>
         
        <style>
            p. smallLetterSpace {
                letter-spacing: -1px;
            }
            p.bigLetterSpace {
                letter-spacing: 1px;
            }
            p.smallWordSpace{
                word-spacing: -1px;
            }
            p.bidWordSpace{
                word-spacing: 1px;
            }
        </style>
    </head>
    <body>
    <div>
        <h4>Обычный текст</h4>
        <p>Над ним не было ничего уже, кроме неба...</p>
        <h4>letter-spacing: -1px;</h4>
        <p>Над ним не было ничего уже, кроме неба...</p>
        <h4>letter-spacing: 1px;</h4>
        <p>Над ним не было ничего уже, кроме неба...</p>
        <h4>word-spacing: -1px</h4>
        <p>Над ним не было ничего уже, кроме неба...</p>
        <h4>word-spacing: 1px</h4>
        <p>Над ним не было ничего уже, кроме неба.

 ..</p>
    </div>
    </body>
</html>

Просмотреть пример

text-shadow

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

h2{
    text-shadow: 5px 4px 3px #999;
}

В данном случае горизонтальное смещение тени относительно букв составляет 5 пикселей, а вертикальное смещение вниз — 4 пикселя. Степень размытости — 3 пикселя, и для тени используется цвет #999.

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

h2{
    text-shadow: -5px -4px 3px #999;
}

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Твитнуть

(Visited 102 times, 1 visits today)

Какое свойство используется для подчеркивания, зачеркивания и зачеркивания текста с помощью CSS?

Улучшить статью

Сохранить статью

Последнее обновление: 20 июн, 2022

Читать

Обсудить

Улучшить статью

Сохранить статью

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

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

Синтаксис:

 оформление текста: строка оформления текста | стиль оформления текста
    | цвет оформления текста | толщина оформления текста | начальная | наследовать;

Значения свойств:

text-decoration-line: это свойство используется для указания вида оформления текста, например подчеркивания, надчеркивания и т. д.
text-decoration-color: это свойство используется для указания цвет для оформления текста.
text-decoration-style: Это свойство используется для указания стиля оформления текста, например, пунктирного, волнистого и т. д.
text-decoration-thickness: это свойство используется для указания толщины декорированной линии.

Свойство text-decoration имеет другое значение свойства для украшения текста, т. е.

подчеркивание , надчеркивание и сквозное .

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

HTML

< html >

< head >

< title >

text-decoration Property

title > 0 8 067

0067 < стиль >

h3 {

text-decoration;

}

B {

Текстовая декорация: обшивка;

}

p {

оформление текста: сквозное;

}

style >

     head   >  
        
   <   body   >  
          <   центр  >  
     <  H3  > Добро пожаловать в Geeksforgeeks   H3  >  
    >  
    9007-1
79668       .  >  
             <   p   >  
                                             , , 
003 
                 применяется к тексту.  
                p   >  
            center   >  
     body   >  
     html   >

Вывод:

Пример 2: В этом примере описывается свойство Text-decoration.

HTML

< html >

< head >

< title >text-decoration Property title >

          <   стиль   >  
              h2 {  
                 цвет: 900;  
    }  
    
     UL LI { 
     MARGIN-TOP: 15PX;  
              }  
                
              #example1 {  
                  text-decoration: подчеркивание волнистым зеленым цветом;  
    }  
    
     #Пример 2 { 
     Текстовая дата: Line-Detrough Red;  
              }  
                
             9006 {0068 
                  text-decoration: обводка синего цвета;  
              }  
            style   >  
     head   >  
        
   <   body   >  
          <   h2   >Гики для гиков  h2   >  
          <   h3   >text-decoration Property  h3   >  
          <   ul   >  
              <   LI   ID   =   "Пример1"  >  
     Подчеркивает Wavy Green  
   0068    li   >  
              <   li   id   =   "example2"   >  
                  line-through red  
                LI  >  
     <  LI   ID   =   "Пример 3"  >   "Пример 3"  >  9008 9007 "0003 
                 overline blue  
                li   >  
            ul   >  
     body   >  
     html   >

Вывод:

0 Статьи по теме

CSS: свойство text-decoration

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

Описание

Свойство CSS text-decoration определяет форматирование текста элемента, такое как подчеркивание, надчеркивание, сквозная линия и мерцание.

Синтаксис

Синтаксис свойства CSS text-decoration:

 text-decoration: value;

Параметры или аргументы

значение

Форматирование текста. Это может быть одно из следующих значений:

Значение	Описание
подчеркивание	В тексте есть подчеркивание div { text-decoration: underline; }
над чертой	Над текстом отображается строка div { text-decoration: overline; }
проходной	В середине текста есть линия div { text-decoration: line-through; }
мигает	Текст мигает div { text-decoration: blink; }
нет	Текстовое оформление не применяется к тексту div { text-decoration: none; }
унаследовать	Элемент унаследует оформление текста от своего родительского элемента div { text-decoration: inherit; }

Примечание

Некоторые браузеры могут игнорировать мерцание оформления текста.

Совместимость с браузерами

Свойство CSS text-decoration имеет базовую поддержку в следующих браузерах:

Chrome
Андроид
Firefox (Геккон)
Firefox Mobile (Геккон)
Internet Explorer (IE)
Интернет-телефон
Опера
Опера Мобайл
Сафари (веб-кит)
Сафари Мобильный

Пример

Мы обсудим свойство text-decoration ниже, исследуя примеры использования этого свойства в CSS.

Использование подчеркивания

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

 a: hover { color: #4A6593; оформление текста: подчеркивание; }

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

Использование сквозной строки

Далее, давайте рассмотрим пример оформления текста CSS, в котором применено оформление строки через строку .

Штирлиц — Сеть печатных салонов в Перми

Зачеркнутый текст css: text-decoration-color | htmlbook.ru

Работа с текстом в CSS. Декорирование, выравнивание и интервалы

Подчеркнутый или зачеркнутый текст

Выравнивание текста по краям

Красная строка

Высота строки

Междустрочный интервал

Регистр текста

Свидетельство о регистрации СМИ в РКН: ЭЛ № ФС77-83818 от 29.08.2022

Стилизация текста — Как создать сайт

Стилизация текста

text-transform

Какое свойство используется для подчеркивания, зачеркивания и зачеркивания текста с помощью CSS?

HTML

003

HTML

CSS: свойство text-decoration

Описание

Синтаксис

Параметры или аргументы

Примечание

Совместимость с браузерами

Пример

Использование подчеркивания

Использование сквозной строки

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