Lekcje >> Podstawy HTML 5
Polimax

Drukarnia w Warszawie realizująca druk wizytówek, plakatów jak również fotoksiążki, fotoobrazy i fotokalendarze - z wysyłką na terenie całego kraju.

Właściwości tekstu

Wyrównanie tekstu w poziomie text-align

Możliwe wartości:

  • left - wyrównanie tekstu do lewego marginesu (domyślnie),
  • right - wyrównanie do prawego marginesu,
  • center - do środka (wyśrodkowanie),
  • justify - do obu marginesów jednocześnie (justowanie).

Wyrównanie tekstu w poziomie - ćwiczenie 3_2_9_1

Stosując style lokalne, napisz kilka akapitów tekstu, prezentując poziome wyrównanie.

<body>
  <p style="text-align:left;">
    Wyrównanie tekstu <i>left</i>
  </p>
  <p style="text-align:right;">
    Wyrównanie tekstu <i>right</i>
  </p>
  <p style="text-align:center;">
    Wyrównanie tekstu <i>center</i>
  </p>
  <p style="text-align:justify;">
    Wyrównanie tekstu <i>justify</i>. Tekst nie może być
    zbyt krótki, bo będzie wyrównany do lewej. 
    Dopóty, dopóki długość tekstu nie przekroczy jednego 
    wiersza tekst nie będzie justowany. Inaczej mówiąc, 
    ostatni wiersz tekstu, jest wyrównany do lewej.
  </p>
</body>

Wyrównanie tekstu w pionie vertical-align

Dostępne wartości vertical-align:

  • baseline (wartość domyślna) - wyrównanie do lini bazowej;
  • sub - indeks dolny;
  • super - indeks górny;
  • top - wyrównanie do górnej części elementów;
  • text-top - wyrównanie do górnej lini tekstu;
  • text-bottom - wyrównanie do dolnej lini tekstu;
  • middle - wyrównanie do środkowej części elementów;
  • bottom - wyrównanie do dolej części elementów;
  • procenty - wartość wyrażona w procentach - dodatnie przesuwają element w górę, ujemne w dół;
  • długość wyrażona w bezwzględnych hednostkach długości (np. px) - wartość dodatnia (ponad linię bazową) lub ujemna (poniżej lini bazowej);
  • inherit - przejęcie wartości rodzica.

Aby wyrównania top, middle, bottom miały sens, musimy najpierw określić wysokość elementu height, oraz za pomocą właściwości display:table-cell; sprawić, aby przeglądarka potraktowała element jak komórkę tabeli.

Wyrównanie tekstu w pionie, przykład 1 - ćwiczenie 3_2_9_2

<body>
  <p style="border:1px solid black;height:120px;display:table-cell;vertical-align:top;">
    Wyrównanie w pionie <i>top</i>
  </p>
  <p style="border:1px solid black;height:120px;display:table-cell;vertical-align:middle;">
    Wyrównanie w pionie <i>middle</i>
  </p>
  <p style="border:1px solid black;height:120px;display:table-cell;vertical-align:bottom;">
    Wyrównanie w pionie <i>bottom</i>
  </p>
</body>

Kilka innych wartości przetestujemy w następnym ćwiczeniu:

Wyrównanie tekstu w pionie, przykład 2 - ćwiczenie 3_2_9_3

<body>
  <p>
    Przykładowy tekst, gdzie 
    <span style="vertical-align:super;">
    część wyrazów obejmuje</span> wartość <i>super</i>    
  </p>
  <p>
    Przykładowy tekst, gdzie 
    <span style="vertical-align:sub;">
    część wyrazów obejmuje</span> wartość <i>sub</i>    
  </p>
  <p>
    Przykładowy tekst 
    <span style="vertical-align:70%;">
    z zastosowaniem <i>procentów</i></span>    
    dla części tekstu
  </p>
  <p>
    Przykładowy tekst 
    <span style="vertical-align:-70%;">
    z zastosowaniem <i>procentów</i></span>
    dla części tekstu
  </p>
</body>

Wcięcie pierwszego wiersza bloku tekstu text-indent

Wartość należy podać w jednostkach długości, np. px:

Wcięcie pierwszego wiersza bloku tekstu - ćwiczenie 3_2_9_4

<body>
  <p style="text-indent:60px;">
    Tekst tego akapitu ma wcięcie pierwszego wiersza <i>60px</i>, 
    a więc pierwszy wiersz będzie odsunięty w prawo względem pozostałych wierszy 
    o 60 pikseli
  </p>
  <p style="text-indent:-60px;padding-left:60px;">
    Tekst tego akapitu ma wcięcie pierwszego wiersza <i>-60px</i>, a więc 
    pierwszy wiersz będzie odsunięty w lewo względem pozostałych wierszy 
    o 60 pikseli
  </p>
</body>

Wysokość linii tekstu line-height

Wielkość ta, ustala jednocześnie odstęp między wierszami. Wartość należy podać w jednostkach długości, np. px:

Wysokość linii tekstu - ćwiczenie 3_2_9_5

<body>
  <p style="line-height:30px; background-color:yellow;">
    <i>line-height:30px;</i> 
  </p>
  <p style="line-height:60px; background-color:red;">
    <i>line-height:60px;</i> 
  </p>
</body>

Odstęp między wyrazami word-spacing

Wartość należy podać w jednostkach długości, np. px. Wartość normal przywraca ustawienia domyślne przeglądarki.

Odstęp między wyrazami - ćwiczenie 3_2_9_6

<body>
  <p style="word-spacing:5px;">
    To jest akapit tekstu, dla którego <i>word-spacing:5px;</i> 
  </p>
  <p style="word-spacing:50px;">
    To jest akapit tekstu, dla którego <i>word-spacing:50px;</i> 
  </p>
  <p style="word-spacing:normal;">
    To jest akapit tekstu, dla którego <i>word-spacing:normal;</i> 
  </p>
</body>

Odstęp między literami letter-spacing

Wartość należy podać w jednostkach długości, np. px. Wartość normal przywraca ustawienia domyślne przeglądarki.

Odstęp między literami - ćwiczenie 3_2_9_7

<body>
  <p style="letter-spacing:5px;">
    To jest akapit tekstu, dla którego <i>letter-spacing:5px;</i> 
  </p>
  <p style="letter-spacing:10px;">
    To jest akapit tekstu, dla którego <i>letter-spacing:10px;</i> 
  </p>
  <p style="letter-spacing:normal;">
    To jest akapit tekstu, dla którego <i>letter-spacing:normal;</i> 
  </p>
</body>

Tekst odwrócony o dany kąt, właściwość transform

Właściwość transform wchodzi w skład najnowszej specyfikacji CSS3, jej wartość jest określana poprzez funkcję rotate(). Poddajemy transformacji element w którym znajduje się tekst.

Tekst odwrócony o dany kąt - ćwiczenie 3_2_9_8

<!doctype html>
<html>
  <head>
    <title>Tekst odwrócony o dany kątg</title>
    <meta charset="utf-8" />
    <meta name="description" content="Tekst odwrócony o dany kąt" /> 
    <style>
      div
      {
        display:inline-block;
        margin:30px;
        width:150px;
        height:50px;
        border:1px solid red;
      }
    </style>
  </head>
  <body>
    Element <i>div</i> odwrócony o:<br />
    <div>
      0 stopni
    </div>
    <div style="transform:rotate(45deg);">
      45 stopni
    </div>
    <div style="transform:rotate(90deg);">
      90 stopni
    </div>
    <div style="transform:rotate(-90deg);">
      -90 stopni
    </div>
  </body>
</html>