Tekst w CSS

Karta pracy 2014/2015

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

Formatowanie tekstu

Czynności wstępne

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

<!DOCTYPE html>
<html>
 <head>
  <title>Tekst w CSS</title>
  <meta charset="utf-8"/>
  <style>

  </style>
 </head>
 <body>

 </body>
</html>

Wyrównywanie tekstu1

W elemencie style dodaj kod.

h1 {
text-align: right;
}
h2 {
text-align: center;
}
h3 {
text-align: left;
}
p {
text-align: justify;
}

W elemencie body dodaj kod.

<h1>tekst wyrównany do prawej</h1>
<h2>tekst wyśrodkowany</h2>
<h3>tekst wyrównany do lewej</h3>
<p>
tekst wyjustowany tekst wyjustowany tekst wyjustowany
tekst wyjustowany tekst wyjustowany tekst wyjustowany
tekst wyjustowany tekst wyjustowany tekst wyjustowany
tekst wyjustowany tekst wyjustowany tekst wyjustowany
</p>

Zapisz zmiany i odśwież podgląd.

Wcięcie specjalne pierwszego wiersza2

W elemencie style dodaj kod.

h4 {
text-indent: 30px;
}

W elemencie body dodaj kod.

<h4>
Wcięcie specjalne pierwszego wiersza akapitu
Wcięcie specjalne pierwszego wiersza akapitu
</h4>

Zapisz zmiany i odśwież podgląd.

Spacje międzyliterowe3 i międzywyrazowe4

W elemencie style dodaj kod.

h5 {
letter-spacing: 5px;
word-spacing: 20px;
}

W elemencie body dodaj kod.

<h5>
Powiększone spacje międzyliterowe i międzywyrazowe
</h5>

Zapisz zmiany i odśwież podgląd.

Transformacja tekstu5

W elemencie style dodaj kod.

h6 {
text-transform: capitalize;
}

W elemencie body dodaj kod.

<h6>
Tranformacja tekstu
</h6>

Zapisz zmiany i odśwież podgląd.

Znaki specjalne6

W elemencie style dodaj kod. Przetestuj wartości stylu.

div {
white-space: pre;
}

W elemencie body dodaj kod.

<div>
Znaki
specjalne
</div>

Zapisz zmiany i odśwież podgląd.

Wgrywanie plików na serwer

Umieść plik css3-text.html na serwerze po sprawdzeniu poprawności kodu.

  1. Styl {text-align:} – definiuje wyrównywanie tekstu. Wartość może być równa: left (do lewej), center (do środka), right (do prawej), justify (wyjustowanie - do prawej i lewej).
  2. Styl {text-indent:} – definiuje wielkość wcięcia (wysunięcia) pierwszego wiersza akapitu.
  3. Styl {letter-spacing:} – definiuje odstępy międzyliterowe. Wartością jest liczba z jednostką.
  4. Styl {word-spacing:} – definiuje odstępy międzywyrazowe. Wartością jest liczba z jednostką.
  5. Styl {text-transform:} – definiuje transformacje tekstu. Wartość może być równa: none (brak transformacji), capitalize (kapitaliki), uppercase (wersaliki, duże litery).
  6. Styl {white-space:} – definiuje sposób prezentacji znaków specjalnych. Wartość może być równa: pre (jak w elemencie pre), nowrap (uniemożliwia automatyczny podział wiersza), pre-wrap (dopuszcza automatyczny podział wiersza), pre-line(uniemożliwia łamanie linii), normal (standardowe formatowanie).