Efekty tekstu

Karta pracy 2016/2017

Adres:
http://plotkarka.eu/KP/css-text-decor-3.html
Autor:
Radosław Kowaluk

Formatowanie tekstu

Czynności wstępne

Utwórz plik css-text-decor-3.html z podstawową strukturą strony WWW w standardzie HTML5.

<!DOCTYPE html>
<html>
 <head>
  <title>Efekty tekstu</title>
  <meta charset="utf-8"/>
  <style>

  </style>
 </head>
 <body>

 </body>
</html>

Podkreślenie, przekreślenie, nadkreślenie, brak podkreślenia tekstu1

W elemencie style dodaj kod.

h1 {
text-decoration: underline;
}
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through;
}
h4 {
text-decoration: underline overline;
}
a {
text-decoration: none;
}

W elemencie body dodaj kod.

<h1>tekst podkreślony</h1>
<h2>tekst nadkreślony</h2>
<h3>tekst przekreślony</h3>
<h4>tekst wyróżniony</h4>
<a href="#">brak wyróżnienia</a>

Zapisz zmiany i odśwież podgląd.

Cień tekstu2

W elemencie style dodaj kod.

h5 {
text-shadow: 2px 2px 2px silver;
}
h6 {
text-shadow: 1px 1px 1px, -1px -1px 1px;
}

W elemencie body dodaj kod.

<h5>cień tekstu</h5>
<h6>multicień tekstu</h6>

Zapisz zmiany i odśwież podgląd.

Wgrywanie plików na serwer

Umieść plik css-text-decor-3.htmlna serwerze po sprawdzeniu poprawności.

Zadanie

Zastosuj poznane wiadomości w swojej witrynie.

  1. Reguła {text-decoration:} – definiuje wyróżnienie tekstu. Wartość wyróżnienie może być równa: underline (tekst podkreślony), overline (tekst nadkreślony), line-through (tekst przekreślony), blink (tekst migający) i none (brak wyróżnienia).
    Można użyć jednocześnie kilku wartości.
  2. Reguła {text-shadow:} – definiuje cień tekstu. Wartościami są liczby całkowite określający przesunięcie poziomo, pionowo, rozmycie i kolor (pominięcie wartości koloru doda efekt czarnego cienia).
    Można zdefiniować kilka cieni, ich określenia oddzielamy przecinkiem.
    Reguła znajduje się w rekomendacji CSS2.