Stiluri de decorare a textului în CSS

Specifică un stil pentru linia de decorare

Proprietatea text-decoration-style setează stilul liniei de decorare. Poate avea una dintre aceste valori:

solid — implicit, o linie simplă.
double — o linie dublă.
dotted — o linie punctată.
dashed — o linie întreruptă.
wavy — o linie ondulată.

Exemplu

Fiecare element arată un stil diferit de subliniere.

O pagină HTML care arată proprietatea text-decoration-style.

Într-un bloc intern `<style>`, subliniază mai multe elemente cu stiluri diferite: solid, double, dotted, dashed, wavy și unul roșu ondulat. Folosește h1, h2, h3 și clase de paragraf. Adaugă un element pentru fiecare.

> Output: pagină HTML completă

Prompt

O pagină HTML care arată proprietatea text-decoration-style. Într-un bloc intern <style>, subliniază mai multe elemente cu stiluri diferite: solid, double, dotted, dashed, wavy și unul roșu ondulat. Folosește h1, h2, h3 și clase de paragraf. Adaugă un element pentru fiecare.

Output: pagină HTML completă

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
  text-decoration-line: underline;
  text-decoration-style: solid;
}

h2 {
  text-decoration-line: underline;
  text-decoration-style: double;
}

h3 {
  text-decoration-line: underline;
  text-decoration-style: dotted;
}

p.ex1 {
  text-decoration-line: underline;
  text-decoration-style: dashed;
}

p.ex2 {
  text-decoration-line: underline;
  text-decoration-style: wavy;
}

p.ex3 {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: wavy;
}
</style>
</head>
<body>

<h1>Solid underline</h1>
<h2>Double underline</h2>
<h3>Dotted underline</h3>
<p class="ex1">Dashed underline.</p>
<p class="ex2">Wavy underline.</p>
<p class="ex3">Red wavy underline.</p>

</body>
</html>

Specifică grosimea pentru linia de decorare

Proprietatea text-decoration-thickness setează grosimea liniei de decorare.

Exemplu

Fiecare element arată o grosime diferită de subliniere: auto, 5px, 25% și o linie dublă groasă.

O pagină HTML care arată proprietatea text-decoration-thickness.

Într-un bloc intern `<style>`, subliniază elemente cu grosimi diferite: auto, 5px, 25% și un paragraf care combină o subliniere dublă roșie cu grosime de 5px. Folosește h1, h2, h3 și un paragraf. Adaugă un element pentru fiecare.

> Output: pagină HTML completă

Prompt

O pagină HTML care arată proprietatea text-decoration-thickness. Într-un bloc intern <style>, subliniază elemente cu grosimi diferite: auto, 5px, 25% și un paragraf care combină o subliniere dublă roșie cu grosime de 5px. Folosește h1, h2, h3 și un paragraf. Adaugă un element pentru fiecare.

Output: pagină HTML completă

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
  text-decoration-line: underline;
  text-decoration-thickness: auto;
}

h2 {
  text-decoration-line: underline;
  text-decoration-thickness: 5px;
}

h3 {
  text-decoration-line: underline;
  text-decoration-thickness: 25%;
}

p {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: double;
  text-decoration-thickness: 5px;
}
</style>
</head>
<body>

<h1>Auto thickness</h1>
<h2>5px thickness</h2>
<h3>25% thickness</h3>
<p>A red double underline that is 5px thick.</p>

</body>
</html>

Proprietatea prescurtată

Proprietatea text-decoration este o prescurtare pentru: text-decoration-line (obligatoriu), text-decoration-color (opțional), text-decoration-style (opțional) și text-decoration-thickness (opțional).

Exemplu

Forma prescurtată setează linia, culoarea, stilul și grosimea într-o singură declarație.

O pagină HTML care arată proprietatea prescurtată text-decoration.

Într-un bloc intern `<style>`, folosește forma prescurtată pe patru elemente: underline; underline red; underline red double; și underline red double 5px. Folosește h1, h2, h3 și un paragraf. Adaugă un element pentru fiecare.

> Output: pagină HTML completă

Prompt

O pagină HTML care arată proprietatea prescurtată text-decoration. Într-un bloc intern <style>, folosește forma prescurtată pe patru elemente: underline; underline red; underline red double; și underline red double 5px. Folosește h1, h2, h3 și un paragraf. Adaugă un element pentru fiecare.

Output: pagină HTML completă

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
  text-decoration: underline;
}

h2 {
  text-decoration: underline red;
}

h3 {
  text-decoration: underline red double;
}

p {
  text-decoration: underline red double 5px;
}
</style>
</head>
<body>

<h1>underline</h1>
<h2>underline red</h2>
<h3>underline red double</h3>
<p>underline red double 5px</p>

</body>
</html>

Un mic sfat despre linkuri

Toate linkurile sunt subliniate implicit. Uneori vezi linkuri fără subliniere. Folosește text-decoration: none pentru a elimina sublinierea linkurilor.

Exemplu

Sublinierea este eliminată de la linkuri.

O pagină HTML care elimină sublinierea implicită a linkurilor.

Într-un bloc intern `<style>`, setează `a { text-decoration: none; }` astfel încât linkurile să nu fie subliniate. Adaugă câteva linkuri.

> Output: pagină HTML completă

Prompt

O pagină HTML care elimină sublinierea implicită a linkurilor. Într-un bloc intern <style>, setează a { text-decoration: none; } astfel încât linkurile să nu fie subliniate. Adaugă câteva linkuri.

Output: pagină HTML completă

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
a {
  text-decoration: none;
}
</style>
</head>
<body>

<p>These links have no underline:</p>
<a href="https://prompt-cookbook.com">PromptCookbook</a>
<a href="https://www.example.com">Example</a>

</body>
</html>