Dashed text decoration: text-decoration-style | htmlbook.ru


17.07.2021 Facebook Twitter LinkedIn Google+ Π Π°Π·Π½ΠΎΠ΅


Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

Бвойство text-decoration-style | CSS справочник

CSS свойства

ΠžΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅

CSS свойство text-decoration-style устанавливаСт ΡΡ‚ΠΈΠ»ΡŒ Π΄Π΅ΠΊΠΎΡ€Π°Ρ‚ΠΈΠ²Π½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ, которая добавляСтся Ρ‡Π΅Ρ€Π΅Π· свойство text-decoration.

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ

CSS синтаксис:

text-decoration-style:"solid | double | dotted | dashed | wavy | initial | inherit";

JavaScript синтаксис:

object.style.textDecorationStyle = "double"

ЗначСния свойства

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠžΠΏΠΈΡΠ°Π½ΠΈΠ΅
solidБплошная дСкоративная линия. Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.
doubleДвойная дСкоративная линия.
dottedВочСчная дСкоративная линия.
dashedΠŸΡƒΠ½ΠΊΡ‚ΠΈΡ€Π½Π°Ρ дСкоративная линия.
wavyВолнистая дСкоративная линия.
initialУстанавливаСт свойство Π² Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.
inheritΠ£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ наслСдуСтся ΠΎΡ‚ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта.

ВСрсия CSS

CSS3

НаслСдуСтся

НСт.

АнимируСмоС

НСт.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ использования

ΠžΠ±Ρ€Π°Ρ‰Π°ΡŽ Π’Π°ΡˆΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ свойство ΠΈΠΌΠ΅Π΅Ρ‚ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½ΡƒΡŽ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ.

<!DOCTYPE html>
<html>
<head>
<title>ΠŸΡ€ΠΈΠΌΠ΅Ρ€ использования свойства text-decoration-style</title>
<style> 
p {
text-decoration : underline; /* добавляСм Π΄Π΅ΠΊΠΎΡ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ тСкста для Π°Π±Π·Π°Ρ†Π΅Π² (линия снизу) */
font-size : 24px; /* устанавливаСм Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° для Π°Π±Π·Π°Ρ†Π΅Π² */
}
.test {
-webkit-text-decoration-style : solid; /* добавляСм ΡΡ‚ΠΈΠ»ΡŒ Π΄Π΅ΠΊΠΎΡ€Π°Ρ‚ΠΈΠ²Π½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ (с прСфиксом производитСля)*/
-moz-text-decoration-style : solid; /* добавляСм ΡΡ‚ΠΈΠ»ΡŒ Π΄Π΅ΠΊΠΎΡ€Π°Ρ‚ΠΈΠ²Π½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ (с прСфиксом производитСля) */
text-decoration-style : solid; /* добавляСм ΡΡ‚ΠΈΠ»ΡŒ Π΄Π΅ΠΊΠΎΡ€Π°Ρ‚ΠΈΠ²Π½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ - сплошная */
}
.test2 {
-webkit-text-decoration-style : double; /* добавляСм ΡΡ‚ΠΈΠ»ΡŒ Π΄Π΅ΠΊΠΎΡ€Π°Ρ‚ΠΈΠ²Π½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ (с прСфиксом производитСля)*/
-moz-text-decoration-style : double; /* добавляСм ΡΡ‚ΠΈΠ»ΡŒ Π΄Π΅ΠΊΠΎΡ€Π°Ρ‚ΠΈΠ²Π½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ (с прСфиксом производитСля) */
text-decoration-style : double; /* добавляСм ΡΡ‚ΠΈΠ»ΡŒ Π΄Π΅ΠΊΠΎΡ€Π°Ρ‚ΠΈΠ²Π½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ - двойная */
}
.test3
{ -webkit-text-decoration-style : dotted; /* добавляСм ΡΡ‚ΠΈΠ»ΡŒ Π΄Π΅ΠΊΠΎΡ€Π°Ρ‚ΠΈΠ²Π½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ (с прСфиксом производитСля)*/ -moz-text-decoration-style : dotted; /* добавляСм ΡΡ‚ΠΈΠ»ΡŒ Π΄Π΅ΠΊΠΎΡ€Π°Ρ‚ΠΈΠ²Π½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ (с прСфиксом производитСля) */ text-decoration-style : dotted; /* добавляСм ΡΡ‚ΠΈΠ»ΡŒ Π΄Π΅ΠΊΠΎΡ€Π°Ρ‚ΠΈΠ²Π½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ - точСчная */ } .test4 { -webkit-text-decoration-style : dashed; /* добавляСм ΡΡ‚ΠΈΠ»ΡŒ Π΄Π΅ΠΊΠΎΡ€Π°Ρ‚ΠΈΠ²Π½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ (с прСфиксом производитСля)*/ -moz-text-decoration-style : dashed; /* добавляСм ΡΡ‚ΠΈΠ»ΡŒ Π΄Π΅ΠΊΠΎΡ€Π°Ρ‚ΠΈΠ²Π½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ (с прСфиксом производитСля) */ text-decoration-style : dashed; /* добавляСм ΡΡ‚ΠΈΠ»ΡŒ Π΄Π΅ΠΊΠΎΡ€Π°Ρ‚ΠΈΠ²Π½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ - пунктирная */ } .test5 { -webkit-text-decoration-style : wavy; /* добавляСм ΡΡ‚ΠΈΠ»ΡŒ Π΄Π΅ΠΊΠΎΡ€Π°Ρ‚ΠΈΠ²Π½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ (с прСфиксом производитСля)*/ -moz-text-decoration-style : wavy; /* добавляСм ΡΡ‚ΠΈΠ»ΡŒ Π΄Π΅ΠΊΠΎΡ€Π°Ρ‚ΠΈΠ²Π½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ (с прСфиксом производитСля) */ text-decoration-style : wavy; /* добавляСм ΡΡ‚ΠΈΠ»ΡŒ Π΄Π΅ΠΊΠΎΡ€Π°Ρ‚ΠΈΠ²Π½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ - волнистая */ } </style> </head> <body> <p class = "test">text-decoration-style: solid ;</p> <p class = "test2">text-decoration-style: double ;</p> <p class = "test3">text-decoration-style: dotted ;</p> <p class = "test4">text-decoration-style: dashed ;</p> <p class = "test5">text-decoration-style: wavy ;</p> </body> </html>

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ нашСго ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°:

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ использования свойства text-decoration-style(устанавливаСт ΡΡ‚ΠΈΠ»ΡŒ Π΄Π΅ΠΊΠΎΡ€Π°Ρ‚ΠΈΠ²Π½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ).CSS свойства

CSS — text-decoration-style — text-decoration-style CSS свойство Π·Π°Π΄Π°Π΅Ρ‚ ΡΡ‚ΠΈΠ»ΡŒ Π»ΠΈΠ½ΠΈΠΉ , ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹Ρ… text-decoratio

text-decoration-style CSS свойство Π·Π°Π΄Π°Π΅Ρ‚ ΡΡ‚ΠΈΠ»ΡŒ Π»ΠΈΠ½ΠΈΠΉ , ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹Ρ… text-decoration-line . Π‘Ρ‚ΠΈΠ»ΡŒ примСняСтся ΠΊΠΎ всСм строкам, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ установлСны с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ text-decoration-line .

Если ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠ΅ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ΅ сСмантичСскоС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, Ρ‚Π°ΠΊΠΎΠ΅ ΠΊΠ°ΠΊ прямая линия, ΠΎΠ·Π½Π°Ρ‡Π°ΡŽΡ‰Π°Ρ, Ρ‡Ρ‚ΠΎ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ тСкст Π±Ρ‹Π» ΡƒΠ΄Π°Π»Π΅Π½, Π°Π²Ρ‚ΠΎΡ€Π°ΠΌ рСкомСндуСтся ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π°Ρ‚ΡŒ это Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ HTML-Ρ‚Π΅Π³Π°, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€

<del> ΠΈΠ»ΠΈ <s> . Π’Π°ΠΊ ΠΊΠ°ΠΊ Π² Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… случаях Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΡΡ‚ΠΈΠ»ΠΈΠ·Π°Ρ†ΠΈΡŽ, сСмантичСскоС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π½Π΅ исчСзнСт Π² Ρ‚Π°ΠΊΠΎΠΉ ситуации.

ΠŸΡ€ΠΈ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠΉ установкС Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… свойств дСкорирования Π»ΠΈΠ½ΠΈΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΡƒΠ΄ΠΎΠ±Π½Π΅Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ вмСсто этого свойство сокращСния text-decoration .




Syntax

text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;


text-decoration-style: inherit;
text-decoration-style: initial;
text-decoration-style: unset;

Values

solid
РисуСт ΠΎΠ΄Π½Ρƒ линию.
double
РисуСт Π΄Π²ΠΎΠΉΠ½ΡƒΡŽ линию.
dotted
РисуСт ΠΏΡƒΠ½ΠΊΡ‚ΠΈΡ€Π½ΡƒΡŽ линию.
dashed
РисуСт ΠΏΡƒΠ½ΠΊΡ‚ΠΈΡ€Π½ΡƒΡŽ линию.
wavy
РисуСт Π²ΠΎΠ»Π½ΠΈΡΡ‚ΡƒΡŽ линию.
-moz-none
НС рисуСт Π»ΠΈΠ½ΠΈΠΈ. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ text-decoration-line : none .

Formal definition

Π€ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ синтаксис

solid | double | dotted | dashed | wavy

Examples

Setting a wavy underline

.example {    
       -moz-text-decoration-line: underline;
       -moz-text-decoration-style: wavy;
       -moz-text-decoration-color: red;    
    -webkit-text-decoration-line: underline;
    -webkit-text-decoration-style: wavy;
    -webkit-text-decoration-color: red;
}
CSS
.wavy { text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red; }
HTML
<p>This text has a wavy red line beneath it.</p>
Results

Specifications

Desktop
ChromeEdgeFirefoxInternet ExplorerOperaSafari
text-decoration-style577936
36
6 — 39

Prefixed

ΠŸΡ€Π΅Ρ„ΠΈΠΊΡ Π Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ΠΎ с прСфиксом производитСля:-moz-
No4412.1
12.1
8

Prefixed

ΠŸΡ€Π΅Ρ„ΠΈΠΊΡ Π Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ΠΎ с прСфиксом производитСля:-webkit-
wavy57796No448
Mobile
Android Π²Π΅Π±-просмотрΠ₯Ρ€ΠΎΠΌ для Android
Firefox для Android
ΠžΠΏΠ΅Ρ€Π° для AndroidSafari on iOSSamsung Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚
text-decoration-style575736
36
6 — 39

Prefixed

ΠŸΡ€Π΅Ρ„ΠΈΠΊΡ Π Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ΠΎ с прСфиксом производитСля:-moz-
4312.2
12.2
8

Prefixed

ΠŸΡ€Π΅Ρ„ΠΈΠΊΡ Π Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ΠΎ с прСфиксом производитСля:-webkit-
7.0
wavy575764387.0

Π‘ΠΌ.Ρ‚Π°ΠΊΠΆΠ΅

  • ΠŸΡ€ΠΈ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠΉ установкС Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… свойств дСкорирования Π»ΠΈΠ½ΠΈΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΡƒΠ΄ΠΎΠ±Π½Π΅Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ вмСсто этого свойство сокращСния text-decoration .

Бвойство text-decoration-style — Ρ‚ΠΈΠΏ Π»ΠΈΠ½ΠΈΠΈ Ρƒ тСкста

Бвойство text-decoration-style мСняСт Ρ‚ΠΈΠΏ Π»ΠΈΠ½ΠΈΠΈ Π½Π°Π΄ тСкстом: одиночная линия, двойная, Π² Π²ΠΈΠ΄Π΅ Ρ‚ΠΎΡ‡Π΅ΠΊ, Π² Π²ΠΈΠ΄Π΅ Ρ‚ΠΈΡ€Π΅, волнистая линия.

Бвойство слСдуСт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ совмСстно со свойствами text-decoration-line ΠΈ text-decoration-color. Π­Ρ‚ΠΈ свойства Ρ€Π°ΡΡˆΠΈΡ€ΡΡŽΡ‚ дСйствиС свойства text-decoration, являясь Π±ΠΎΠ»Π΅Π΅ ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚Ρ‹ΠΌΠΈ Π°Π½Π°Π»ΠΎΠ³Π°ΠΌΠΈ.

Бинтаксис

сСлСктор { text-decoration-line: solid | double | dotted | dashed | wavy; }

ЗначСния

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠžΠΏΠΈΡΠ°Π½ΠΈΠ΅
solidБплошная линия.
doubleДвойная линия.
dottedЛиния Π² Π²ΠΈΠ΄Π΅ Ρ‚ΠΎΡ‡Π΅ΠΊ.
dashedЛиния Π² Π²ΠΈΠ΄Π΅ Ρ‚ΠΈΡ€Π΅.
wavyВолнистая линия.

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: solid.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ . Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ wavy

БСйчас тСкст станСт ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠ½ΡƒΡ‚Ρ‹ΠΌ красной волнистой Π»ΠΈΠ½ΠΈΠ΅ΠΉ:

<div> Lorem ipsum dolor sit amet. </div> #elem { text-decoration-style: wavy; text-decoration-color: red; text-decoration-line: underline; }

:

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ . Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ dotted

БСйчас тСкст станСт ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠ½ΡƒΡ‚Ρ‹ΠΌ красной Π»ΠΈΠ½ΠΈΠ΅ΠΉ Π² Π²ΠΈΠ΄Π΅ Ρ‚ΠΎΡ‡Π΅ΠΊ:

<div> Lorem ipsum dolor sit amet. </div> #elem { text-decoration-style: dotted; text-decoration-color: red; text-decoration-line: underline; }

:

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ . Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ double

БСйчас тСкст станСт ΠΏΠ΅Ρ€Π΅Ρ‡Π΅Ρ€ΠΊΠ½ΡƒΡ‚Ρ‹ΠΌ красной Π΄Π²ΠΎΠΉΠ½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠ΅ΠΉ:

<div> Lorem ipsum dolor sit amet. </div> #elem { text-decoration-style: double; text-decoration-color: red; text-decoration-line: line-through; }

:

ΠŸΠΎΠ΄Ρ‡Ρ‘Ρ€ΠΊΠ½ΡƒΡ‚Ρ‹ΠΉ тСкст (свойство text-decoration) | CSS ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹

ΠžΡ‚ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΏΠΎΠ΄Ρ‡Ρ‘Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ Ρƒ ссылки

Π‘Ρ‚ΠΈΠ»ΡŒ ссылки CSS
<style>
.raz {
  text-decoration: none;
  border: none; 
}
</style>

<a href="http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#stil">Π‘Ρ‚ΠΈΠ»ΡŒ ссылки CSS</a>

Часто примСняСтся ΠΏΡ€ΠΈ создании ссылок Π² Π²ΠΈΠ΄Π΅ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈΠ»ΠΈ Π² Π²ΠΈΠ΄Π΅ ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² мСню, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ тСкстовыС ссылки Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ… ΠΏΠΎΠ΄Ρ‡Ρ‘Ρ€ΠΊΠΈΠ²Π°ΡŽΡ‚ΡΡ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ (Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ†Π²Π΅Ρ‚ΠΎΠΌ создаёт нСудобство Π΄Π°Π»ΡŒΡ‚ΠΎΠ½ΠΈΠΊΠ°ΠΌ).

Бсылка подчёркиваСтся ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

Π‘Ρ‚ΠΈΠ»ΡŒ ссылки CSS
<style>
.raz:not(:hover) {
  text-decoration: none;
}
</style>

<a href="http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#stil">Π‘Ρ‚ΠΈΠ»ΡŒ ссылки CSS</a>

ΠŸΡƒΠ½ΠΊΡ‚ΠΈΡ€Π½ΠΎΠ΅ ΠΏΠΎΠ΄Ρ‡Ρ‘Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅

Π‘Ρ‚ΠΈΠ»ΡŒ тСкста CSS
<style>
.raz {
  text-decoration: underline; 
  text-decoration-style: dashed; 
  cursor: pointer; 
}
</style>

<span>Π‘Ρ‚ΠΈΠ»ΡŒ тСкста CSS</span>

Π‘Π΄Π΅Π»Π°Ρ‚ΡŒ линию Π½Π°Π΄ ΠΈ ΠΏΠΎΠ΄ тСкстом

Π‘Ρ‚ΠΈΠ»ΡŒ тСкста CSS
<style> .raz { text-decoration-line: underline overline; } </style> <span>Π‘Ρ‚ΠΈΠ»ΡŒ тСкста CSS</span>

text-decoration-color
currentcolor
Ρ†Π²Π΅Ρ‚ Ρ‡Π΅Ρ€Ρ‚Ρ‹ Ρ‡Ρ‚ΠΎ Ρƒ тСкста
transparent
Ρ‡Π΅Ρ€Ρ‚Π° ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ прозрачная (нСвидимая)
red
Ρ†Π²Π΅Ρ‚ Ρ‡Π΅Ρ€Ρ‚Ρ‹ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹ΠΌ словом
#ff0000 ΠΈΠ»ΠΈ #ff0000ff
Ρ†Π²Π΅Ρ‚ Ρ‡Π΅Ρ€Ρ‚Ρ‹ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ HEX
rgb(255,0,0) ΠΈΠ»ΠΈ rgba(255,0,0,1)
Ρ†Π²Π΅Ρ‚ Ρ‡Π΅Ρ€Ρ‚Ρ‹ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ RGB ΠΈΠ»ΠΈ RGBA
hsl(0,100%,50%) ΠΈΠ»ΠΈ hsla(0,100%,50%,1)
Ρ†Π²Π΅Ρ‚ Ρ‡Π΅Ρ€Ρ‚Ρ‹ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ HSL() ΠΈΠ»ΠΈ HSLA()
initial
currentcolor
inherit
наслСдуСт Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ родитСля
unset
currentcolor

Бвойство text-decoration-color Π½Π΅ наслСдуСтся, примСняСтся ΠΊΠΎ всСм элСмСнтам

<style>
div {
  text-decoration: underline;
  text-decoration-color: currentcolor;
}
</style>

<div>Бвойство <code>text-decoration-color</code> Π½Π΅ наслСдуСтся, примСняСтся ΠΊΠΎ всСм элСмСнтам</div>

Π’ΠΠ˜ΠœΠΠΠ˜Π•! НиТСстоящиС свойства ΠΈΠΌΠ΅ΡŽΡ‚ ΠΏΠ»ΠΎΡ…ΡƒΡŽ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ. Бвойства text-underline-offset ΠΈ text-decoration-width Π½Π΅ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Ρ‹ вовсС ΠΈ ΠΏΠΎΡ‚ΠΎΠΌΡƒ ΠΏΠΎΠΊΠ° Π½Π΅ рассмотрСны Π² ΡΡ‚Π°Ρ‚ΡŒΠ΅.

ΠŸΡ€ΠΎΠΏΡƒΡΠΊ выносных частСй символов Π² ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π΅ΠΌΠΎΠΌ тСкстС Π² Google Chrome

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΏΠΎΠ΄Ρ‡Ρ‘Ρ€ΠΊΠ½ΡƒΡ‚ΠΎΠ³ΠΎ тСкста
<style>
.raz {
  text-decoration: underline;
  text-decoration-skip: ink;
}
</style>

<span>ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΏΠΎΠ΄Ρ‡Ρ‘Ρ€ΠΊΠ½ΡƒΡ‚ΠΎΠ³ΠΎ тСкста</span>

ΠŸΠΎΠ΄Ρ‡Ρ‘Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ Π±Π΅Π· пропусков выносных частСй символов Π² Safari

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΏΠΎΠ΄Ρ‡Ρ‘Ρ€ΠΊΠ½ΡƒΡ‚ΠΎΠ³ΠΎ тСкста
<style>
.raz {
  text-decoration: underline;
  -webkit-text-decoration-skip: none;
}
</style>

<span>ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΏΠΎΠ΄Ρ‡Ρ‘Ρ€ΠΊΠ½ΡƒΡ‚ΠΎΠ³ΠΎ тСкста</span>

Π Π°Π·Π½ΠΈΡ†Π°

text-decoration ΠΈ border
НиТнСС ΠΏΠΎΠ΄Ρ‡Ρ‘Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅, сдСланноС text-decoration: underline; НиТнСС ΠΏΠΎΠ΄Ρ‡Ρ‘Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅, сдСланноС border-bottom: 1px solid;
<table>
  <tr>
    <tdvydelit">text-decoration: underline;">НиТнСС ΠΏΠΎΠ΄Ρ‡Ρ‘Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅, сдСланноС <code>text-decoration: underline;</code>
    <td><spanvydelit">border-bottom: 1px solid;">НиТнСС ΠΏΠΎΠ΄Ρ‡Ρ‘Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅, сдСланноС <code>border-bottom: 1px solid;</code></span>
</table>

Бвойство text-decoration ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ Π»ΡƒΡ‡ΡˆΠ΅ для подчёркивания многострочного тСкста (ΠΏΡ€ΠΈ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΠΈ экрана Π΄Π»ΠΈΠ½Π½ΠΎΠ΅ слово Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚ Π½Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΡƒΡŽ строку ΠΏΡ€ΠΈ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²ΠΎΠΉ вёрсткС). Бвойство border Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎ использовали, ΠΊΠΎΠ³Π΄Π° Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π»ΠΈΡΡŒ свойства text-decoration-line, text-decoration-style ΠΈ text-decoration-color.

Π’ΠΎΠ½ΠΊΠΎΠ΅ ΡƒΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ свойством text-decoration

ΠžΡ‚ Π°Π²Ρ‚ΠΎΡ€Π°: Π‘ΠΊΠΎΡ€Π΅Π΅ всСго, Π²Ρ‹ ΡƒΠΆΠ΅ Π·Π½Π°ΠΊΠΎΠΌΡ‹ с Π΄Π°Π½Π½Ρ‹ΠΌ свойством. НапримСр, Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ², ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, Π·Π°Π΄Π°ΡŽΡ‚ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π΄Π°Π½Π½ΠΎΠ³ΠΎ свойства ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ Ρƒ ссылок (text-decoration: underline;), ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΎΡ‚ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π²ΠΎΡ‚ Ρ‚Π°ΠΊ: text-decoration: none;.

Но Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π²Ρ‹ Π½Π΅ Π·Π½Π°Π΅Ρ‚Π΅ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄Π΅Π»Π°Ρ‚ΡŒ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ это с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π΄Π°Π½Π½ΠΎΠ³ΠΎ свойства, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ свойства, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ Π²Π°ΠΌ большС возмоТностСй для управлСния ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ΠΌ тСкста.

Для Π΄Π°Π½Π½ΠΎΠ³ΠΎ свойства ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ нСсколько Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ

НапримСр:

a { text-decoration: underline overline; }

a {

Β Β text-decoration: underline overline;

}

ΠŸΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΠΈΠΉ курс ΠΏΠΎ вСрсткС Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ сайта с нуля!

Π˜Π·ΡƒΡ‡ΠΈΡ‚Π΅ курс ΠΈ ΡƒΠ·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ соврСмСнныС сайты Π½Π° HTML5 ΠΈ CSS3

Π£Π·Π½Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ описаниС Π΄Π°Π½Π½ΠΎΠΉ возмоТности Π² ΠΠ»ΡŒΠΌΠ°Π½Π°Ρ…Π΅. Если Π±Ρ‹Ρ‚ΡŒ Ρ‚ΠΎΡ‡Π½Π΅Π΅, Ρ‚ΠΎ Π² Π΄Π°Π½Π½ΠΎΠΌ случаС происходит Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ для Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ свойства text-decoration-line.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ΠΎΠΌ Π΄Π°Π½Π½ΠΎΠ³ΠΎ свойства

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ для Π΄Π°Π½Π½ΠΎΠ³ΠΎ свойства задаСтся Ρ†Π²Π΅Ρ‚, ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹ΠΉ для тСкста (Π² свойствС color). Но Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ это:

a { text-decoration-color: #f06d06; }

a {

Β Β text-decoration-color: #f06d06;

}

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ описаниС Π΄Π°Π½Π½ΠΎΠΉ возмоТности Π² ΠΠ»ΡŒΠΌΠ°Π½Π°Ρ…Π΅.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€Π½Ρ‹ΠΉ Β«Π΄Π²ΠΈΠΆΠΎΠΊΒ» Gecko ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎΠ΄ Π½ΠΈΠΆΠ½ΠΈΠΌ выносным элСмСнтом Π±ΡƒΠΊΠ² (подстрочным элСмСнтом Π»ΠΈΡ‚Π΅Ρ€Ρ‹), Π° WebKit/Blink – Π½Π°Π΄:

Π‘Π»Π΅Π²Π° ΠΏΠΎΠΊΠ°Π·Π°Π½ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ Chrome, справа – Π² Firefox.

ΠžΠ±Ρ‹Ρ‡Π½ΠΎ Ρ†Π²Π΅Ρ‚Π½Ρ‹Π΅ подчСркивания Ρ€Π΅Π°Π»ΠΈΠ·ΡƒΡŽΡ‚ΡΡ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойства border, Π° Π½Π΅ text-decoration. Для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΈΠ· Π³Ρ€Π°Π½ΠΈΡ† элСмСнта ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΡƒΠΊΠ°Π·Π°Π½ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚, Ρ‚ΠΎΠ»Ρ‰ΠΈΠ½Π°, ΠΈ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΡƒΡŽΡ‚ΡΡ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π»ΡƒΡ‡ΡˆΠ΅.

Но Π΅ΡΡ‚ΡŒ Π²Π΅Ρ‰ΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ нСльзя ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π³Ρ€Π°Π½ΠΈΡ†, напримСр…

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΌΠ΅Π½ΡΡ‚ΡŒ ΡΡ‚ΠΈΠ»ΡŒ Π΄Π°Π½Π½ΠΎΠ³ΠΎ свойства

Π’Ρ‹ просто Π½Π΅ смоТСтС ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π°ΠΊΠΆΠ΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π³Ρ€Π°Π½ΠΈΡ†!

ΠŸΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΠΈΠΉ курс ΠΏΠΎ вСрсткС Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ сайта с нуля!

Π˜Π·ΡƒΡ‡ΠΈΡ‚Π΅ курс ΠΈ ΡƒΠ·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ соврСмСнныС сайты Π½Π° HTML5 ΠΈ CSS3

Π£Π·Π½Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅

a { text-decoration-style: wavy; }

a {

Β Β text-decoration-style: wavy;

}

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ описаниС Π΄Π°Π½Π½ΠΎΠΉ возмоТности Π² ΠΠ»ΡŒΠΌΠ°Π½Π°Ρ…Π΅.

А ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΈ Π΅Ρ‰Π΅ Π»ΡƒΡ‡ΡˆΠ΅

Π•ΡΡ‚ΡŒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ΅ ΠΆΠ΅Π»Π°Π½ΠΈΠ΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ тСкста Π»ΡƒΡ‡ΡˆΠ΅. НапримСр, ΠΏΡ€ΠΎΠΏΡƒΡΠΊΠ°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ Π½ΠΈΠΆΠ½ΠΈΡ… выносных элСмСнтов Ρƒ Π±ΡƒΠΊΠ² для ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ Ρ‡ΠΈΡ‚Π°Π±Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠ½ΡƒΡ‚ΠΎΠ³ΠΎ тСкста:

Вакая Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π±ΡƒΠ΄Π΅Ρ‚ доступна благодаря свойству text-decoration-skip, хотя ΠΎΠ½Π° ΠΏΠΎΠΊΠ° Π½Π΅ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π° Π½ΠΈ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΈΠ· Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ². А ΠΏΠΎΠΊΠ° ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ для подчСркивания Π±ΠΎΠ»Π΅Π΅ мягкий ΠΈ ΠΌΠ΅Π½Π΅Π΅ контрастный Ρ†Π²Π΅Ρ‚. Π—Π΄Π΅ΡΡŒ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ rgba():

И, кстати, пропуск Π½ΠΈΠΆΠ½ΠΈΡ… выносных элСмСнтов Ρƒ Π±ΡƒΠΊΠ² – это всСго лишь ΠΎΠ΄Π½Π° ΠΈΠ· возмоТностСй. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ смоТСтС ΠΏΡ€ΠΎΠΏΡƒΡΠΊΠ°Ρ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ строчныС элСмСнты, ΠΏΡ€ΠΎΠ±Π΅Π»Ρ‹ ΠΈ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΏΠΎ краям тСкста.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: ΠŸΠΎΡ…ΠΎΠΆΠ΅, Ρ‡Ρ‚ΠΎ Π² Safari/iOS пропуск Π½ΠΈΠΆΠ½ΠΈΡ… выносных элСмСнтов Ρƒ Π±ΡƒΠΊΠ² Π·Π°Π΄Π°Π½ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΎΡ‚ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π΄Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅, Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ΡΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΉ записью: -webkit-text-decoration-skip: none;.

ВСстированиС

Из-Π·Π° Ρ€Π°Π·Π½ΠΎΠΉ стСпСни Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π½ΠΎΠΉ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ, Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ (ΠΈΠ»ΠΈ всС) Π΄Π΅ΠΌΠΎ-ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ Π½Π΅ ΡΡ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π² вашСм Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅.

Π’Π°ΠΊ Ρ‡Ρ‚ΠΎ Π΄Π°! Π”Π°ΠΆΠ΅ Ρ‚Π°ΠΊΠΈΠ΅ простыС Π²Π΅Ρ‰ΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΡ‹ воспринимаСм, ΠΊΠ°ΠΊ Π΄ΠΎΠ»ΠΆΠ½ΠΎΠ΅, ΠΌΠΎΠ³ΡƒΡ‚ со Π²Ρ€Π΅ΠΌΠ΅Π½Π΅ΠΌ ΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ Π² CSS царствС.

Автор: Chris Coyier

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: //css-tricks.com/

РСдакция: Команда webformyself.

ΠŸΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΠΈΠΉ курс ΠΏΠΎ вСрсткС Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ сайта с нуля!

Π˜Π·ΡƒΡ‡ΠΈΡ‚Π΅ курс ΠΈ ΡƒΠ·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ соврСмСнныС сайты Π½Π° HTML5 ΠΈ CSS3

Π£Π·Π½Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅

PSD to HTML

ВСрстка сайта Π½Π° HTML5 ΠΈ CSS3 с нуля

Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ

Как Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΏΡƒΠ½ΠΊΡ‚ΠΈΡ€Π½ΠΎΠ΅ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎΠ΄ тСкстом HTML



Как Π²Ρ‹ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π΅Ρ‚Π΅ тСкст html Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ линия ΠΏΠΎΠ΄ тСкстом Π±Ρ‹Π»Π° ΠΏΡƒΠ½ΠΊΡ‚ΠΈΡ€Π½ΠΎΠΉ, Π° Π½Π΅ стандартной? ΠŸΡ€Π΅Π΄ΠΏΠΎΡ‡Ρ‚ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ, я Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ это Π±Π΅Π· использования ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ Ρ„Π°ΠΉΠ»Π° CSS. Π― Π½ΠΎΠ²ΠΈΡ‡ΠΎΠΊ Π² html.

html underline
ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ parap Β  Β  06 ΠΌΠ°Ρ€Ρ‚Π° 2013 Π² 16:19

9 ΠΎΡ‚Π²Π΅Ρ‚ΠΎΠ²




137

Π­Ρ‚ΠΎ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π±Π΅Π· CSS. На самом Π΄Π΅Π»Π΅ Ρ‚Π΅Π³ <u> просто добавляСт text-decoration:underline ΠΊ тСксту с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ встроСнного Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ CSS.

Π’ΠΎΡ‚ Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ:

<html>
<head>
<!-- Other head stuff here, like title or meta -->

<style type="text/css">
u {    
    border-bottom: 1px dotted #000;
    text-decoration: none;
}
</style>
</head>
<!-- Body, content here -->
</html>

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ Alfred Xing Β  Β  06 ΠΌΠ°Ρ€Ρ‚Π° 2013 Π² 16:24



30

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ ΠΊΠΎΠ΄Ρ‹ CSS…

text-decoration:underline;
text-decoration-style: dotted;

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ Shakeel Ahmed Β  Β  13 июля 2016 Π² 07:53



15

Π‘Π΅Π· CSS Π²Ρ‹ Π² основном застряли с использованиСм Ρ‚Π΅Π³Π° изобраТСния. Π’ основном сдСлайтС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ тСкста ΠΈ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅. Π­Ρ‚ΠΎ Π² основном ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ваша страница бСсполСзна для чтСния с экрана.

Π‘ CSS всС просто.

HTML:

<u>I like cheese</u>

CSS:

u.dotted{
  border-bottom: 1px dashed #999;
  text-decoration: none; 
}

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ страницы

<!DOCTYPE HTML>
<html>
<head>
    <style>
        u.dotted{
          border-bottom: 1px dashed #999;
          text-decoration: none; 
        }
    </style>
</head>
<body>
    <u>I like cheese</u>
</body>
</html>

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ epascarello Β  Β  06 ΠΌΠ°Ρ€Ρ‚Π° 2013 Π² 16:25




9

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ HTML5 ΠΌΠΎΠΆΠ΅Ρ‚ Π΄Π°Π²Π°Ρ‚ΡŒ ΠΏΡƒΠ½ΠΊΡ‚ΠΈΡ€Π½ΠΎΠ΅ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅, поэтому НиТний тСкст Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΏΡƒΠ½ΠΊΡ‚ΠΈΡ€Π½ΡƒΡŽ линию, Π° Π½Π΅ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠ΅ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅. А Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ title создаСт подсказку для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора Π½Π° элСмСнт:

NOTE: пунктирная Π³Ρ€Π°Π½ΠΈΡ†Π° / ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ отобраТаСтся Π² Firefox ΠΈ Opera, Π½ΠΎ IE8, Safari ΠΈ Chrome Π½ΡƒΠΆΠ΄Π°ΡŽΡ‚ΡΡ Π² строкС CSS:

<abbr title="Hyper Text Markup Language">HTML</abbr>

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ Fatima Waheed Β  Β  11 июля 2016 Π² 14:14



4

Если содСрТимоС содСрТит Π±ΠΎΠ»Π΅Π΅ 1 строки, Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π½ΠΈΠΆΠ½Π΅ΠΉ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ Π½Π΅ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚. Π’ этом случаС Π²Π°ΠΌ придСтся ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ,

text-decoration: underline;
text-decoration-style: dotted;

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ большС ΠΏΠ΅Ρ€Π΅Π΄Ρ‹ΡˆΠΊΠΈ ΠΌΠ΅ΠΆΠ΄Ρƒ тСкстом ΠΈ строкой, просто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅,

text-underline-position: under;

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ Darshana Gunawardana Β  Β  09 октября 2018 Π² 10:12



3

ΠŸΠ΅Ρ€Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π» ΠΎΡ‚Π²Π΅Ρ‚ Π½Π° @epascarello :

u.dotted {
  border-bottom: 1px dashed #999;
  text-decoration: none;
}
<!DOCTYPE html>
<u>I like cheese</u>

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ anatoly techtonik Β  Β  26 дСкабря 2015 Π² 06:54



0

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ border bottom с ΠΎΠΏΡ†ΠΈΠ΅ΠΉ dotted .

border-bottom: 1px dotted #807f80;

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ Neel Β  Β  24 января 2020 Π² 07:16



0

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ этот ΠΌΠ΅Ρ‚ΠΎΠ΄:

<h3>Hello World!</h3>

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Π±Π΅Π· text-underline-position: under; Ρƒ вас всС Ρ€Π°Π²Π½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡƒΠ½ΠΊΡ‚ΠΈΡ€Π½ΠΎΠ΅ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅, Π½ΠΎ это свойство даст Π΅ΠΌΡƒ большС ΠΏΠ΅Ρ€Π΅Π΄Ρ‹ΡˆΠΊΠΈ.

Π­Ρ‚ΠΎ ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π²ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ всС Π² Ρ„Π°ΠΉΠ» HTML с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ встроСнного стиля, Π° Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ Ρ„Π°ΠΉΠ» CSS ΠΈΠ»ΠΈ Ρ‚Π΅Π³.

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ Mona Jalal Β  Β  05 фСвраля 2020 Π² 00:12



-2

Π­Ρ‚ΠΎ Π½Π΅ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π±Π΅Π· CSS. НапримСр, ΠΊΠ°ΠΊ элСмСнт списка:

<li><!--content --></li>

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ Davington III Β  Β  30 апрСля 2015 Π² 09:03


ΠŸΠΎΡ…ΠΎΠΆΠΈΠ΅ вопросы:


Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π΄Π²ΠΎΠΉΠ½ΠΎΠ΅ ΠΏΡƒΠ½ΠΊΡ‚ΠΈΡ€Π½ΠΎΠ΅ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ для тСкста Π² css

Как ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π΄Π²ΠΎΠΉΠ½ΠΎΠ΅ ΠΏΡƒΠ½ΠΊΡ‚ΠΈΡ€Π½ΠΎΠ΅ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ Π² CSS ? Π― ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ свойство border-bottom. border-bottom: 1px dotted #oof Но появляСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½ΠΎ ΠΏΡƒΠ½ΠΊΡ‚ΠΈΡ€Π½ΠΎΠ΅ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅. Как ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ…


IE7 Nivo Slideshow странноС ΠΏΡƒΠ½ΠΊΡ‚ΠΈΡ€Π½ΠΎΠ΅ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ Π½Π° подписи

Π£ мСня Π΅ΡΡ‚ΡŒ слайд-ΡˆΠΎΡƒ Nivo, Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‰Π΅Π΅ Π½Π° сайтС. Когда я Ρ‚Π΅ΡΡ‚ΠΈΡ€ΡƒΡŽ Π² ΡΡ‚Ρ€Π°ΡˆΠ½ΠΎΠΌ IE7, ΠΎΠ½ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΏΡƒΠ½ΠΊΡ‚ΠΈΡ€Π½ΠΎΠ΅ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ Π½Π° подписях. Π― устал ΠΈΡΠΊΠ°Ρ‚ΡŒ прСступника Π² своСй стихии, Π½ΠΎ ΠΏΠΎΠΊΠ° ΠΌΠ½Π΅ Π½Π΅ Π²Π΅Π·Π΅Ρ‚….


Как ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ синСС ΠΏΡƒΠ½ΠΊΡ‚ΠΈΡ€Π½ΠΎΠ΅ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ прСдлоТСния Π² TextView ΠΈΠ· Apple keyboard dictation?

Если ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Apple dictation с мягкой ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹, Ρ‚ΠΎ послС Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΡ ΠΈΡ… voice input. Он ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ синСС ΠΏΡƒΠ½ΠΊΡ‚ΠΈΡ€Π½ΠΎΠ΅ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ прСдлоТСния для ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ†ΠΈΠΈ голоса. Но я Π½Π΅ ΠΌΠΎΠ³Ρƒ ΠΎΡ‚…


CSS эффСкт ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора (ΠΏΡƒΠ½ΠΊΡ‚ΠΈΡ€Π½ΠΎΠ΅ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ + ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π° тСкста)

Π― ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½ CSS Π½ΡƒΠ± НС ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹ Π²Ρ‹ ΡƒΠ΄Π΅Π»ΠΈΡ‚ΡŒ ΠΌΠ½Π΅ ΠΌΠΈΠ½ΡƒΡ‚ΠΊΡƒ ΠΈ ΠΏΠΎΠΌΠΎΡ‡ΡŒ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΏΡƒΠ½ΠΊΡ‚ΠΈΡ€Π½ΠΎΠ΅ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ (с ΠΏΡ€ΠΎΠ±Π΅Π»ΠΎΠΌ) с ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ Ρ†Π²Π΅Ρ‚Π° тСкста ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΌΡ‹ΡˆΠΈ? Π― Π±Ρ‹Π» Π±Ρ‹ ΠΎΡ‡Π΅Π½ΡŒ ΠΏΡ€ΠΈΠ·Π½Π°Ρ‚Π΅Π»Π΅Π½ Π²Π°ΠΌ Π·Π° ΠΏΠΎΠΌΠΎΡ‰ΡŒ!…


Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ строку ΠΏΠΎΠ΄ тСкстом Π±Π΅Π· тСкстового оформлСния: ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅?

МнС Π½ΡƒΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ строку ΠΏΠΎΠ΄ тСкстом, Π±Π΅Π· тСкстового оформлСния: ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅; ΠΈΠ½Π°Ρ‡Π΅ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ΅ пространство ΠΌΠ΅ΠΆΠ΄Ρƒ тСкстом ΠΈ строкой. Π§Ρ‚ΠΎ ΠΌΡ‹ Π΄Π΅Π»Π°Π΅ΠΌ


ΠŸΡƒΠ½ΠΊΡ‚ΠΈΡ€Π½ΠΎΠ΅ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ Π² TextView с использованиСм SpannableString Π² Android

Π― Ρ…ΠΎΡ‡Ρƒ ΠΏΡƒΠ½ΠΊΡ‚ΠΈΡ€Π½ΠΎΠ΅ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ Π½ΠΈΠΆΠ΅ SpannableString НапримСр Π²ΠΎΡ‚ моя струна Hello, How are you? Π― Ρ…ΠΎΡ‡Ρƒ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΏΡƒΠ½ΠΊΡ‚ΠΈΡ€Π½ΠΎΠ΅ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ Π½ΠΈΠΆΠ΅ How слова, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΆΠ΅ Π΅Π³ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ? Если я добавлю…


Android ΠΏΡƒΠ½ΠΊΡ‚ΠΈΡ€Π½ΠΎΠ΅ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ остаСтся Π² сСрСдинС textview

Π― Ρ…ΠΎΡ‡Ρƒ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΏΡƒΠ½ΠΊΡ‚ΠΈΡ€Π½ΠΎΠ΅ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎΠ΄ textview, Π½ΠΈΠΆΠ΅ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Ρ‹ ΠΌΠΎΠΈ ΠΊΠΎΠ΄Ρ‹ <TextView android:id=@+id/contact_num android:layout_width=wrap_content android:layout_height=wrap_content…


ΠŸΡƒΠ½ΠΊΡ‚ΠΈΡ€Π½ΠΎΠ΅ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ TextView Π½Π΅ пСрСносится Π½Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΡƒΡŽ строку с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ SpannableString Π² Android

Π― сдСлал ΠΏΡƒΠ½ΠΊΡ‚ΠΈΡ€Π½ΠΎΠ΅ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ textview, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ это ΠΏΡƒΠ½ΠΊΡ‚ΠΈΡ€Π½ΠΎΠ΅ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ Π² TextView, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ SpannableString Π² Android . Но ΠΏΡƒΠ½ΠΊΡ‚ΠΈΡ€Π½ΠΎΠ΅ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ textview Π½Π΅ пСрСносится Π½Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΡƒΡŽ…


ΠŸΠΎΠ»ΡƒΡ‡Π΅Π½ΠΈΠ΅: послС Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎΠ΄ тСкстом, Π° Π½Π΅ вСсь ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€

Π― Ρ…ΠΎΡ‡Ρƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π»ΠΈΡΡŒ ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠΌ :after . Π― Π·Π°ΡΡ‚Π°Π²Π»ΡΡŽ Π΅Π³ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ частично. Π§Π΅Π³ΠΎ я Π½Π΅ ΠΌΠΎΠ³Ρƒ ΠΏΠΎΠ½ΡΡ‚ΡŒ, Ρ‚Π°ΠΊ это ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ( after ) Π½Π°Ρ…ΠΎΠ΄ΠΈΠ»ΠΎΡΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎΠ΄ тСкстом…


CSS ΠΊΠ°ΠΊ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π°Π²Ρ‚ΠΎΠΌΠ°Ρ‚ΠΈΡ‡Π΅ΡΠΊΡƒΡŽ Π΄Π»ΠΈΠ½Ρƒ подчСркивания doth ΠΏΠΎΠ΄ тСкстом

Π² CSS я Ρ…ΠΎΡ‡Ρƒ ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ΠΊΠ°ΠΊ ΠΏΡƒΠ½ΠΊΡ‚ΠΈΡ€Π½ΠΎΠ΅ ΠΏΠΎΠ΄ ΠΌΠΎΠΈΠΌ тСкстом, Π½ΠΎ тСкст ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΈΠΌ ΠΈΠ»ΠΈ Π΄Π»ΠΈΠ½Π½Ρ‹ΠΌ ΠΏΠΎ Π²Π²ΠΎΠ΄Ρƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, Π° ΠΏΡƒΠ½ΠΊΡ‚ΠΈΡ€Π½ΠΎΠ΅ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ нарисовано Π΄ΠΎ ΠΊΠΎΠ½Ρ†Π° строки…

Как ΡƒΠ±Ρ€Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ссылки Π² HTML ΠΈ CSS

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ Π½Π°Π±ΠΎΡ€Ρ‹ стилСй CSS ΠΊ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΌ HTML-элСмСнтам. Для гипСрссылок эти стили ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚, Ρ‡Ρ‚ΠΎ любой тСкст ссылки отобраТаСтся синим Ρ†Π²Π΅Ρ‚ΠΎΠΌ с CSS underline. Π­Ρ‚ΠΎ дСлаСтся для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ посСтитСли сайта ΠΌΠΎΠ³Π»ΠΈ Π»Π΅Π³ΠΊΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π΄Π°Π½Π½Ρ‹ΠΉ тСкст прСдставляСт собой ссылку. МногиС Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ Π½Π΅ ΡƒΠ΄Π΅Π»ΡΡŽΡ‚ внимания этим стилям ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, особСнно это касаСтся подчСркивания. К ΡΡ‡Π°ΡΡ‚ΡŒΡŽ, CSS позволяСт Π»Π΅Π³ΠΊΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ внСшний Π²ΠΈΠ΄ гипСрссылок.

ΠŸΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠ½ΡƒΡ‚Ρ‹ΠΉ тСкст ΠΌΠΎΠΆΠ΅Ρ‚ слоТнСС Ρ‡ΠΈΡ‚Π°Ρ‚ΡŒΡΡ, Ρ‡Π΅ΠΌ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ. МногиС Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ просто Π½Π΅ ΡƒΠ΄Π΅Π»ΡΡŽΡ‚ этому Π΄ΠΎΠ»ΠΆΠ½ΠΎΠ³ΠΎ внимания. Но ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅. Для этого ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ свойство CSS text-decoration. Π’ΠΎΡ‚ CSS-ΠΊΠΎΠ΄, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ это ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ:

a { text-decoration: none; }

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ этой строки ΠΊΠΎΠ΄Π° ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ CSS underline style всСх ссылок.

Нравится Π²Π°ΠΌ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈΠ»ΠΈ Π½Π΅Ρ‚, нСльзя ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚ΡŒ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΎ позволяСт ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π½Π° связь тСкста со ссылкой. Если ΡƒΠ±Ρ€Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈΠ»ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ синий Ρ†Π²Π΅Ρ‚ ссылок, Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π²Π·Π°ΠΌΠ΅Π½ стили, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ тСкст ссылок. Π­Ρ‚ΠΎ сдСлаСт взаимодСйствиС посСтитСлСй с сайтом ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½Ρ‹ΠΌ.

НС ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°ΠΉΡ‚Π΅ тСкст, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π΅ являСтся ссылкой. Π›ΡŽΠ΄ΠΈ ΠΏΡ€ΠΈΠ²Ρ‹ΠΊΠ»ΠΈ ΠΊ Ρ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠ½ΡƒΡ‚Ρ‹ΠΉ тСкст (с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS underline color) являСтся ссылкой. Если Π²Ρ‹ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π΅Ρ‚Π΅ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π°ΠΊΡ†Π΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° Π½Π΅ΠΌ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ (вмСсто Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ вывСсти Π΅Π³ΠΎ ΠΏΠΎΠ»ΡƒΠΆΠΈΡ€Π½Ρ‹ΠΌ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠΌ ΠΈΠ»ΠΈ курсивом), Π²Ρ‹ Π²Π²ΠΎΠ΄ΠΈΡ‚Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ сайта Π² Π·Π°Π±Π»ΡƒΠΆΠ΄Π΅Π½ΠΈΠ΅.

Если Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΏΠΎΠ΄Ρ‡Ρ‘Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ссылок, Π½ΠΎ ΠΏΡ€ΠΈ этом ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΡΡ‚ΠΈΠ»ΡŒ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ (линия Β«solidΒ«), это ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ. ВмСсто сплошной Π»ΠΈΠ½ΠΈΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Ρ‚ΠΎΡ‡ΠΊΠΈ. Для этого Π½ΡƒΠΆΠ½ΠΎ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π΅Π³ΠΎ свойством border-bottom:

a { text-decoration: none; border-bottom:1px dotted; }

Π’Π°ΠΊ ΠΊΠ°ΠΊ стандартноС CSS text decoration underline ΠΌΡ‹ ΡƒΠ΄Π°Π»ΠΈΠ»ΠΈ, Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ линия ΠΈΠ· Ρ‚ΠΎΡ‡Π΅ΠΊ:


Π’ΠΎ ΠΆΠ΅ самоС ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΏΡƒΠ½ΠΊΡ‚ΠΈΡ€Π½ΠΎΠ΅ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅. ΠŸΡ€ΠΎΡΡ‚ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ border-bottom Π½Π° dashed:
a { text-decoration: none; border-bottom:1px dashed; }

Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ способ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ Π½Π° ссылки β€” ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ подчСркивания. Н Π·Π°Π±ΡƒΠ΄ΡŒΡ‚Π΅, Ρ‡Ρ‚ΠΎ Ρ†Π²Π΅Ρ‚ text underline CSS Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΠΎΠΉ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ схСмС:

a { text-decoration: none; border-bottom:1px solid red; }

Π₯ΠΈΡ‚Ρ€ΠΎΡΡ‚ΡŒ Π² создании Π΄Π²ΠΎΠΉΠ½ΠΎΠ³ΠΎ подчСркивания Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Ρ€Π°ΠΌΠΊΠΈ. Если ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ€Π°ΠΌΠΊΡƒ ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ Π² 1 пиксСль, Π² Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ получится Π΄Π²Π° подчСркивания, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ выглядят ΠΊΠ°ΠΊ ΠΎΠ΄Π½ΠΎ:

a { text-decoration: none; border-bottom:3px double; }

Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½ΠΎΠ΅ Π΄Π²ΠΎΠΉΠ½ΠΎΠ΅ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅. НапримСр, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ΄Π½Π° ΠΈΠ· Π»ΠΈΠ½ΠΈΠΉ Π±Ρ‹Π»Π° Π΄Π²ΠΎΠΉΠ½ΠΎΠΉ:
a { border-bottom:1px double; }

Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ border-bottom для Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… состояний ссылок. ИспользованиС псСвдокласса :hover ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ ΠΎΠΏΡ‹Ρ‚ взаимодСйствия ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ. Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π²Ρ‚ΠΎΡ€ΠΎΠ΅ Ρ‚ΠΎΡ‡Π΅Ρ‡Π½ΠΎΠ΅ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅, Π²Ρ‹Π²ΠΎΠ΄ΠΈΠΌΠΎΠ΅ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ссылку курсора ΠΌΡ‹ΡˆΠΈ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅Π°ΠΊΡ‚ΠΈΠ²Π°Ρ†ΠΈΡŽ CSS text decoration underline:

a { text-decoration: none; } 
a:hover { border-bottom:1px dotted; }

Данная публикация являСтся ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄ΠΎΠΌ ΡΡ‚Π°Ρ‚ΡŒΠΈ Β«How to Change Link Underlines on a WebpageΒ» , подготовлСнная Ρ€Π΅Π΄Π°ΠΊΡ†ΠΈΠ΅ΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.

CSS свойство стиля оформлСния тСкста


ΠŸΡ€ΠΈΠΌΠ΅Ρ€

Π£ΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Ρ‚ΠΈΠΏΡ‹ стилСй оформлСния тСкста:

Π΄ΠΈΠ²Π° {
тСкст-ΡƒΠΊΡ€Π°ΡˆΠ΅Π½ΠΈΠ΅-строка: ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅;
ΡΡ‚ΠΈΠ»ΡŒ оформлСния тСкста: сплошной;
}

div.b {
тСкст-ΡƒΠΊΡ€Π°ΡˆΠ΅Π½ΠΈΠ΅-строка: ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅;
ΡΡ‚ΠΈΠ»ΡŒ оформлСния тСкста: волнистый;
}

div.c {
тСкст-ΡƒΠΊΡ€Π°ΡˆΠ΅Π½ΠΈΠ΅-строка: ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅;
ΡΡ‚ΠΈΠ»ΡŒ оформлСния тСкста: Π΄Π²ΠΎΠΉΠ½ΠΎΠΉ;
}

Π΄Π΅Π».d {
тСкст-ΡƒΠΊΡ€Π°ΡˆΠ΅Π½ΠΈΠ΅-строка: ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ подчСркивания;
ΡΡ‚ΠΈΠ»ΡŒ оформлСния тСкста: волнистый;
}

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам »

ΠžΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΈ использованиС

Бвойство text-decoration-style устанавливаСт ΡΡ‚ΠΈΠ»ΡŒ оформлСния тСкста. (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, сплошная, волнистая, пунктирная, пунктирная, двойная).

Π‘ΠΎΠ²Π΅Ρ‚: Π’Π°ΠΊΠΆΠ΅ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° свойство text-decoration, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ являСтся сокращСнным свойством для text-decoration-line, text-decoration-style ΠΈ тСкст-ΡƒΠΊΡ€Π°ΡˆΠ΅Π½ΠΈΠ΅-Ρ†Π²Π΅Ρ‚.

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: Ρ†Π΅Π»ΡŒΠ½Ρ‹ΠΉ
УнаслСдовано: Π½Π΅Ρ‚
АнимируСмый: Π½Π΅Ρ‚. ΠŸΡ€ΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ ΠΎ animatable
ВСрсия: CSS3
Бинтаксис JavaScript: ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ .style.textDecorationStyle = «Π²ΠΎΠ»Π½ΠΈΡΡ‚Ρ‹ΠΉ» ΠŸΠΎΠΏΡ‹Ρ‚Π°ΠΉΡΡ

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°

Числа Π² Ρ‚Π°Π±Π»ΠΈΡ†Π΅ ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ ΠΏΠ΅Ρ€Π²ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‰ΡƒΡŽ свойство.

Числа, Π·Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ слСдуСт -moz-, ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ ΠΏΠ΅Ρ€Π²ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ, которая Ρ€Π°Π±ΠΎΡ‚Π°Π»Π° с прСфиксом.

ΠžΠ±ΡŠΠ΅ΠΊΡ‚
ΡΡ‚ΠΈΠ»ΡŒ оформлСния тСкста 57,0 79,0 36,0
6,0 -ΠΌΠΎΠ·-
12,1 44,0


Бинтаксис CSS

ΡΡ‚ΠΈΠ»ΡŒ оформлСния тСкста: сплошной | Π΄Π²ΠΎΠΉΠ½ΠΎΠΉ | ΠΏΡƒΠ½ΠΊΡ‚ΠΈΡ€Π½Ρ‹ΠΉ | ΠΏΡƒΠ½ΠΊΡ‚ΠΈΡ€Π½Ρ‹ΠΉ | волнистый | Π½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹ΠΉ | наслСдованиС;

Π‘Ρ‚ΠΎΠΈΠΌΠΎΡΡ‚ΡŒ нСдвиТимости


БвязанныС страницы

Π£Ρ‡Π΅Π±Π½ΠΈΠΊ

CSS: ВСкст CSS

Бсылка Π½Π° HTML DOM: свойство textDecorationStyle



Как Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΏΡƒΠ½ΠΊΡ‚ΠΈΡ€Π½ΠΎΠ΅ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎΠ΄ HTML-тСкстом

Как Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΏΡƒΠ½ΠΊΡ‚ΠΈΡ€Π½ΠΎΠ΅ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎΠ΄ HTML-тСкстом — qaru

ΠŸΡ€ΠΈΡΠΎΠ΅Π΄ΠΈΠ½ΡΠΉΡ‚Π΅ΡΡŒ ΠΊ Stack Overflow , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ, Π΄Π΅Π»ΠΈΡ‚ΡŒΡΡ знаниями ΠΈ ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ свою ΠΊΠ°Ρ€ΡŒΠ΅Ρ€Ρƒ.

Бпросил

ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Π½ΠΎ 138k Ρ€Π°Π·

Как Π²Ρ‹ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π΅Ρ‚Π΅ html-тСкст, Ρ‡Ρ‚ΠΎΠ±Ρ‹ линия ΠΏΠΎΠ΄ тСкстом Π±Ρ‹Π»Π° ΠΏΡƒΠ½ΠΊΡ‚ΠΈΡ€Π½ΠΎΠΉ, Π° Π½Π΅ стандартным ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ? Π–Π΅Π»Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ это Π±Ρ‹Π»ΠΎ сдСлано Π±Π΅Π· использования ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ Ρ„Π°ΠΉΠ»Π° CSS.Π― Π½ΠΎΠ²ΠΈΡ‡ΠΎΠΊ Π² html.

Π‘ΠΎΠ·Π΄Π°Π½ 06 ΠΌΠ°Ρ€.

ΠΏΠ°Ρ€Π°ΠΏΠΏΠ°Ρ€Π°ΠΏ

1,944 44 Π·ΠΎΠ»ΠΎΡ‚Ρ‹Ρ… Π·Π½Π°ΠΊΠ°1515 сСрСбряных Π·Π½Π°ΠΊΠΎΠ²2727 Π±Ρ€ΠΎΠ½Π·ΠΎΠ²Ρ‹Ρ… Π·Π½Π°ΠΊΠΎΠ²

4

Π‘Π΅Π· CSS это Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ.ЀактичСски, Ρ‚Π΅Π³ просто добавляСт text-decoration: ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ΠΊ тСксту с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ встроСнного Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ CSS.

Π’ΠΎΡ‚ Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ:

  







  
Comments