Text-decoration-thickness
Содержание:
- Ссылки
- Три фона
- Рисунки возле внешних ссылок
- Использование border-bottom
- Другие способы подчеркивания в CSS
- Переход для background-position
- Применение фона
- Resumo
- border-bottom
- border-bottom
- CSS Свойства
- Выравнивание текста в CSS
- Ссылки без подчёркивания
- CSS Reference
- CSS Properties
- Использование text-decoration
- Выводы
Ссылки
Чаще всего селекторы псевдо-классов можно встретить, когда они применяются к ссылкам. Каждая ссылка может находиться в одном из четырех состояний: непосещённая, посещенная, активная (находящаяся под курсором мыши) и нажатая (удерживаемая кнопкой мыши). В CSS есть возможность стилизовать ссылку в каждом ее состоянии:
a:link { color: #0000ff; }
a:visited { color: #ff00ff; }
a:hover { color: #00ccff; }
a:active { color: #ff0000; }
Попробовать »
Примечание: :hover, помимо ссылок, можно использовать и с другими элементами, что позволяет создавать эффекты вроде подсветки строки таблицы при наведении на нее курсора мыши. Однако браузер IE6 и более ранние версии поддерживают использование данного псевдо-класса исключительно с элементами <a>.
Три фона
Задача почти выполнена — осталось добавить промежуток между подчеркиваниями. Пробел между линиями можно имитировать, передвигая разделительный блок, цвет которого совпадает с фоновым. Что собой представляет подобный цветной разделитель? Верно, еще один фон. Что может быть лучше, чем два фона? Только три фона.
Этот фон я размещу поверх двух первых, указывая его первым в списке свойств для background-image. Не забудьте, что первое значение в списке свойств background-* теперь также относится к новому фону background-image. Высоту и ширину задаем с помощью background-size. Высота идентична параметрам предыдущих фонов (2px в нашем случае), а ширина установлена небольшая — 20px.
Рисунки возле внешних ссылок
Внешней называется такая ссылка, которая указывает на другой сайт. Подобная ссылка никак не отличается от локальных ссылок внутри сайта, определить, куда она ведёт, можно только посмотрев строку состояния браузера. Но в эту строку заглядывают не все и не всегда. Чтобы пользователи отличали внешние ссылки от обычных, их следует выделять каким-либо способом. Например, поставить возле ссылки маленький рисунок, который показывает, что статус ссылки иной (рис. 3).
Рис. 3. Выделение ссылки с помощью рисунка
Использование рисунков возле внешних ссылок хорошо тем, что оформленная таким образом ссылка однозначно отличается от обычных ссылок внутри сайта, а правильно подобранный рисунок говорит посетителю, что ссылка ведёт на другой сайт. Чтобы разделить стиль для локальных и внешних ссылок воспользуемся селектором атрибута. Поскольку все ссылки на другие сайты пишутся с указанием протокола, например http, то достаточно задать стиль для тех ссылок, у которых значение атрибута href начинается на http://. Это делается с помощью конструкции a[href^=»http://»] {…}, как показано в примере 7.
Пример 7. Рисунок возле ссылки
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Ссылки</title>
<style>
a[href^=»http://»] {
background: url(/example/image/blank.png) 100% 5px no-repeat; /* Рисунок */
padding-right: 18px; /* Отступ справа */
}
</style>
</head>
<body>
<p><a href=»1.html»>Обычная ссылка</a></p>
<p><a href=»http://htmlbook.ru»>Ссылка на сайт htmlbook.ru</a></p>
</body>
</html>
Фоновая картинка располагается справа от ссылки, а чтобы текст не накладывался поверх рисунка добавлено поле справа через свойство padding-right. Если потребуется добавить рисунок слева, то 100% заменяем на 0, а padding-right на padding-left.
Протокол может быть не только http, но и ftp и https, для них данный рецепт перестаёт работать. Так что для универсальности лучше изменить селектор на a[href*=»//»], он сообщает что стиль надо применять ко всем ссылкам, в адресе которых встречается //.
ссылки
Использование border-bottom
Свойство border-bottom добавляет к элементу снизу линию заданной толщины, цвета и стиля. Такая линия занимает всю доступную ширину, несмотря на длину текста заголовка (рис. 2).
Рис. 2. Вид линии, созданной с помощью border-bottom
Расстояние от линии до текста можно регулировать с помощью свойства padding-bottom, как показано в примере 2.
Пример 2. Использование border-bottom
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Подчёркивание</title>
<style>
h2 {
border-bottom: 2px solid red; /* Добавляем подчёркивание */
padding-bottom: 5px; /* Расстояние от текста до линии */
}
</style>
</head>
<body>
<section>
<h2>Культурный речевой акт в XXI веке</h2>
<p>Действительно, мифопорождающее текстовое устройство
иллюстрирует дискурс, и это придает ему свое звучание,
свой характер.</p>
</section>
</body>
</html>
Чтобы линия была на ширину текста, достаточно заголовок превратить в строчно-блочный элемент, добавив к селектору h2 свойство display со значением inline-block.
Другие способы подчеркивания в CSS
Стандартный метод хорош, но лишь для ограниченного количества возможностей. Так, с помощью этого метода невозможно изменять стиль линии. Также такое подчеркивание плохо выглядит на большом размере шрифта. Кроме этого, он не пропускает нижние выносные элементы почти в любом браузере (исключение – Safari для Mac и iOS).
border-bottom
Это старое свойство, позволяющее изменять нижнюю границу текста. Это свойство css подчеркивает текст пунктиром, сплошной линией и как душе угодно. Также метод позволяет регулировать толщину подчеркивания. Пример кода с использованием свойства border-bottom у строчных элементов.
<html>
<head>
<title>Подчеркивание текста</title>
<style>
.underline {
border-bottom: 2px solid; /* сплошное (solid) нижнее подчеркивание шириной в 2 пикселя */
}
.underline--blue {
border-bottom-color: blue; /* подчеркивание синим цветом */
}
.underline--dotted {
border-bottom: 3px red dashed; /* За пунктирное подчеркивание отвечает значение dashed */
}
</style>
</head>
<body>
<p>
<span class="underline">Сплошное подчеркивание</span>
</p>
<p>
<span class="underline underline--dotted">Пунктирное подчеркивание</span>
</p>
<p>
<span class="underline underline--blue">Реализация подчеркивания синим цветом </span>
</p>
</body>
</html>
Результат интерпретации браузером этого кода.
Недостаток способа – подчеркивание осуществляется слишком низко по сравнению с текстом, поэтому линия (или пунктир) появляются уже под выносными элементами. Чтобы исправить это, можно использовать свойство text-shadow, использовав цвет фона в качестве цвета тени. Но выделение будет очень уродливым.
Также верстальщик имеет возможность применять переходы и анимации к подстрочной линии. Например, можно реализовать изменение цвета в течение какого-то времени. Если не использовать для пропуска выносных элементов свойство text-shadow, свойство может работать на любом фоне.
box-shadow
Это свойство использует две внутренние тени: первая рисует прямоугольник, а вторая прячет его часть. Метод может использоваться только на однотонном фоне. К этому свойству также можно добавить text-shadow для пропуска выносных элементов. Плюсы метода:
- Возможность позиционировать подчеркивание ниже базовой линии.
- Возможность изменять цвет и толщину линии.
- Можно использовать вместе с многострочным текстом.
Но у этого способа есть недостатки. Прежде всего, ограниченность в фоне. Также невозможно регулировать стиль подчеркивания.
Пример кода:
.underline {
background-size: 1px 1em;
box-shadow:
inset 0 -0.175em white,
inset 0 -0.2em #000;
display: inline;
}
background-image
Этот метод почти не имеет недостатков, а его потенциал воистину огромен. Идея проста – создание радиального градиента совместно со свойством background-position. Это позволит создать изображение, которое будет находиться под текстом и повторяться по всей длине строчки.
Чтобы реализовать работу данного подхода, необходимо прописать режим отображения display: inline;
Выглядит это так.
.dashed {
background-image: linear-gradient(to right, blue 75%, transparent 75%);
background-position: 0 1.04em;
background-repeat: repeat-x;
background-size: 8px 3px;
}
Этот код, примененный к элементу, реализует подчеркивание длинным пунктиром. Если же точки остановки градиента установить в 50%, а не 75, то подчеркивание будет квадратиками. Свойство background-position в этом случае размещает фон под текстом, а background-repeat заставляет его повторяться.
Вместо градиента можно использовать готовое фоновое изображение и реализовать, например, подчеркивание звездочками.
Единственный недостаток – размер подчеркивания может отличаться в зависимости от используемого браузера, разрешения экрана и масштабирования.
Переход для background-position
Разделительный фрагмент должен быть невидимым до наведения курсора, поэтому позиция фона background-position установлена отрицательной — это разместит разделитель слева от анкора, и таким образом полностью его скроет. В момент наведения курсора разделитель должен сдвинуться по подчеркиванию в противоположном направлении — и снова исчезнуть из вида.
Для вычисления обеих позиций воспользуемся функцией calc():
a {
color: #dfe5f3;
text-decoration: none;
background-image: linear-gradient(#222b40, #222b40), linear-gradient(
rgb(176, 251, 188),
rgb(176, 251, 188)
), linear-gradient(#feb2b2, #feb2b2);
background-size: 20px 2px, 100% 2px, 0 2px;
background-position: calc(20px * -1) 100%, 100% 100%, 0 100%;
background-repeat: no-repeat;
transition: background-size 2s linear, background-position 2s linear;
}
a:hover {
background-size: 20px 2px, 0 2px, 100% 2px;
background-position: calc(100% + 20px) 100%, 100% 100%, 0 100%;
}
Теперь анимированное подчеркивание работает так, как и требовалось. Мы благодарим Джея Томпкинса — настоящего волшебника в сфере CSS анимации. Именно он предложил метод анимации, основанный на манипуляции со свойством background-position.
Применение фона
Существует сразу несколько различных способов подчеркнуть текстовый фрагмент. Я остановился на методе, который удовлетворяет всем критериям, и использует CSS свойство background-image. Фон background-image можно залить сплошным цветом, применяя функцию linear-gradient так, чтобы первый цвет перетекал во второй такой же.
Зачем использовать background-image, а не background-color, если предполагается заливка сплошным цветом? Дело в том, что background-image предоставляет больше свойств для манипуляций с фоном.
Размер фона ограничен по высоте и ширине и полностью заполняет ширину элемента ссылки — с помощью указания параметров background-size 2px и 100% соответственно. Это приводит к сплошному заполнению фона, поэтому я установил no-repeat для background-repeat.
Подчеркивание окажется сверху ссылки. Расположение линии меняем на нижнюю левую границу, устанавливая 0 100% для background-position — тогда она окажется внизу, под текстом ссылки.
Resumo
A propriedade do CSS é usada para definir a formatação de , , ou . As decorações underline e overline são posicionadas abaixo e acima do texto (respectivamente), e line-through cortando-o.
A propriedade text-decoration desenha em elementos descendentes. Isso significa que não é possivel desabilitar em um descendente uma decoração que foi especificada em um de seus antecessores. Por exemplo, no markup , a regra de estilo faria com que todo o parágrafo fosse sublinhado. A regra não causaria qualquer mudanca; o parágrafo inteiro ainda estaria sublinhado. Entretanto, a regra iria decorar o trecho «alguns elementos enfatizados».
Nota: CSS 3 transformou a propriedade Text-Decoration para forma reduzida, usando as seguintes propriedades: (en-US), (en-US), e . Como em outras propriedades reduzidas, isso significa que ele reseta o valor de cada uma para padrão se não for explicitamente especificada na forma reduzida.
| Initial value | as each of the properties of the shorthand:
|
|---|---|
| Aplica-se a | all elements. It also applies to and . |
| Inherited | não |
| Computed value | as each of the properties of the shorthand:
|
| Animation type | as each of the properties of the shorthand:
|
border-bottom
border-bottom — отличается простотой использования и настраиваемостью. Свойство позволяет довольно просто изменять цвет, толщину и стиль линии подчеркивания текста CSS.
Результат применения border-bottom к строчным элементам:
Обратите внимание, что линия подчеркивания размещается под частями букв, выступающими ниже базовой линии. Это можно изменить, задав для элемента свойство inline-block и уменьшив значение line-height
Но в этом случае вы теряете возможность переносить текст. Подходит для однострочного текста.
Можно использовать свойство text-shadow, чтобы скрыть часть линии подчеркивания, выступающей ниже базовой линии. При этом необходимо использовать цвет фона. Данный подход работает только со сплошными цветами фона, но не с градиентной заливкой или изображениями.
Чтобы задать одно подчеркивание, нужно применить четыре свойства стилей. Это больше, чем для text-decoration.
Преимущества
- С помощью text-shadow можно задать отступы от частей букв, выступающих ниже базовой линии;
- Можно изменить цвет, толщину и стиль линии CSS подчеркивания;
- Можно задать переходы и анимацию для цвета и толщины линии подчеркивания;
- Переносится по умолчанию, если это не inline-block;
- Работает на любом фоне, если не используется text-shadow.
Недостатки
- Размещается далеко от текста, это положение трудно изменить;
- Нужно использовать много дополнительных свойств;
- Странное выделение текста при использовании свойства text-shadow.
border-bottom
Этот метод тоже можно отнести к стандартному. Многие его применяют, когда хотят отделить подчеркивание от текста. Наглядный пример:
Подчеркнутый текст и дополнительные содержание
Что нужно сделать?
HTML:
<a href="javascript::">Подчеркнутый текст</a>
CSS:
a {
border-bottom: 1px solid #268ccc;
}
Однако рассмотренные методы имеют 2 минуса:
- в первом случае: подчеркивающая линия находится слишком близко к нужному тексту;
- во втором случае: подчеркивающая линия находится слишком далеко от нужного текста.
Чтобы решить эти проблемы Вы можете воспользоваться двумя оставшимися методами. Применяйте тот, который больше нравится Вам.
CSS Свойства
align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingcaption-sidecaret-color@charsetclearclipcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerighttab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index
Выравнивание текста в CSS
Выравнивание текста по горизонтали задаётся свойством text-align, которое может принимать следующие значения:
- left — выравнивание по левому краю;
- right — выравнивание по правому краю;
- center — выравнивание по центру;
- justify — выравнивание по всей ширине.
С помощью свойства vertical-align выполняется выравнивание текста по вертикали.
Данное свойство может принимать следующие значения:
- baseline — выравнивание линии элемента по базовой линии родительского элемента;
- middle — выравнивание средней элементной точки по базовой линии родительского элемента;
- text-top — выравнивание верхней части элемента по верху шрифта родительского элемента;
- top — выравнивание верха элемента по верхней части самого высокого элемента строки;
- sub, super — отображение элемента в виде нижнего и верхнего индексов соответственно.
Пример:
<title>Выравнивание текста по вертикали</title> </head> <body> <table height="80" cellpadding="10" border="1"> <tr> <td style="vertical-align:top">Текст 1</td> <td style="vertical-align:bottom">Текст 2</td> <td style="vertical-align:middle">Текст 3</td> </tr> </table>
Таким образом, возможности CSS позволяют произвести практически любые манипуляции с оформлением текста на веб-сайте для улучшения его восприятия пользователями.
Желаем удачи в изучении веб-дизайна!
Ссылки без подчёркивания
Подчёркивание текстовых ссылок уже стало определённым стандартом и сигналом о том, что это не просто текст, а именно ссылка. Это, кстати, является одной из причин, по которой не следует применять подчёркивание к обычному тексту, — пользователи будут считать, что имеют дело со ссылкой. Наряду с использованием подчёркивания благодаря CSS у разработчиков сайтов появился и альтернативный вариант — создание ссылок без подчёркивания. При правильном применении такое оформление ссылок даже может придать сайту определённый эффект. Только надо обязательно дать понять пользователю, что является ссылкой, а что обычным текстом, разграничивая их, например, цветом. Ещё можно сделать так что при наведении курсора ссылка становится подчёркнутой, меняет свой цвет или используется и тот, и другой эффект одновременно.
Чтобы убрать подчёркивание у ссылки, следует в стилях для селектора a добавить text-decoration со значение none (пример 1).
Пример 1. Отсутствие подчёркивания у ссылок
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Ссылки</title>
<style>
a {
text-decoration: none; /* Убираем подчёркивание */
}
</style>
</head>
<body>
<p><a href=»link.html»>Ссылка без подчёркивания</a>
</body>
</html>
Для псевдоклассов :hover и :visited нет необходимости добавлять text-decoration, они наследуют свойства селектора a.
CSS Reference
CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS Font FallbacksCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities
CSS Properties
align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside
caption-side
caret-color
@charset
clear
clip
clip-path
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor
direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-variant-caps
font-weight
gap
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows
hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode
object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y
padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes
resize
right
row-gap
scroll-behavior
tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top
transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function
unicode-bidi
user-select
vertical-align
visibility
white-space
width
word-break
word-spacing
word-wrap
writing-mode
z-index
Использование text-decoration
Свойство text-decoration со значением underline добавляет подчёркивание к тексту; такого рода подчёркивание можно наблюдать для ссылок по умолчанию. Созданная таким образом линия равна ширине текста и будет такого же цвета, что и сам заголовок. Изменить цвет линии можно через свойство text-decoration-color. В примере 1 показано применение text-decoration к элементу <h2>.
Пример 1. Использование text-decoration
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Подчёркивание</title>
<style>
h2 {
text-decoration: underline; /* Добавляем подчёркивание */
text-decoration-color: red; /* Цвет линии */
}
</style>
</head>
<body>
<section>
<h2>Культурный речевой акт в XXI веке</h2>
<p>Действительно, мифопорождающее текстовое устройство
иллюстрирует дискурс, и это придает ему свое звучание,
свой характер.</p>
</section>
</body>
</html>
Результат данного примера показан на рис. 1.
Рис. 1. Вид линии, созданной через text-decoration
Браузеры IE и Edge не поддерживают свойство text-decoration-color.
Выводы
Так какой же способ подчеркивания лучший?
Для небольшого текста я рекомендую использовать text-decoration с оптимистичным добавлением text-decoration-skip . Это выглядит немного безвкусно в большинстве браузеров, но подчеркивание в браузерах было таким всегда и люди просто не обратят внимания. Плюс всегда есть шанс, что при наличии у вас терпения, это подчеркивание когда-нибудь будет выглядеть хорошо без необходимости для вас что-то менять, так как это сделают в браузерах.
Для основного текста имеет смысл использовать background-image . Этот подход работает, выглядит замечательно и для него есть миксины Sass . Вы, в принципе, можете пропустить text-shadow , если подчеркивание тонкое или отличается цветом от текста.
Для отдельных строк текста используйте border-bottom вместе с любыми дополнительными свойствами.
А если вам нужен пропуск выносных элементов на фоне градиента или изображения, попробуйте использовать фильтры SVG. Или просто избегайте использовать подчеркивание.
В будущем, когда поддержка в браузерах станет лучше, единственным ответом будет набор свойств text-decoration-* .
Также рекомендую обратить внимание на статью Бенджамина Вудроффа CSS Underlines Suck , в которой рассматриваются те же вопросы
