Inne działy

 

 

Manipulowanie tekstem za pomocą CSS

 

 Ten poradnik nauczy Cię, jak manipulować tekstem przy użyciu właściwości CSS. Można ustawić następujące właściwości elementu tekstu:

  • Właściwość color jest używana do ustawienia koloru tekstu.
  • Właściwość direction jest używana do ustalania kierunku tekstu.
  • Właściwość letter-spacing jest używana, aby powiększyć lub zmniejszyć odstępy między literami, które tworzą słowo.
  • Właściwość word-spacing jest używana do dodania lub odjęcia odstępów między wyrazami w zdaniu.
  • Właściwość text-indent  jest używana do wcięcia tekstu akapitu.
  • Właściwość text-align  jest używana, aby wyrównać tekst dokumentu.
  • Właściwość text-decoration jest używana do podkreślenia, nadkreślenia i przekreślenia tekstu.
  • Właściwość text-transform jest używana, aby przekonwertować tekst na wielkie lub małe litery.
  • Właściwość white-space  jest używana do kontroli przepływu i formatowania tekstu.
  • Właściwość text-shadow jest używana do zastosowania cieniu wokół tekstu.

Kolor tekstu:

Oto przykład, który pokazuje, jak ustawić kolor tekstu. Możliwa wartość może być dowolną nazwą koloru w dowolnym prawidłowym formacie.

 

<p style="color:red;">
Ten tekst będzie napisany na czerwono.
</p>

 Poniżej wynik działania kodu:

Ten tekst będzie napisany na czerwono.

 

Ustawienie kierunku tekstu:

Oto przykład, który pokazuje, jak ustawić kierunek tekstu. Możliwe wartości to ltr, lub rtl.

<p style="direction:rtl;">
Ten tekst będzie wyświetlany od prawej do lewej 
</p>

 Poniżej wynik działania kodu:

Ten tekst będzie wyświetlany od prawej do lewej

 

Ustawienie odstępów między znakami:

Oto przykład, który pokazuje, jak ustawić odstępy między znakami. Możliwe wartości to normal lub number:

<p style="letter-spacing:5px;">
Ten tekst wstawia odstępy między literami.
</p>

 Poniżej wynik działania kodu:

Ten tekst wstawia odstępy między literami.

 

Umieszczanie odstępów między wyrazami:

Oto przykład, który pokazuje, jak ustawić odstępy między wyrazami. Możliwe wartości to normal lub number:

<p style="word-spacing:5px;">
Ten tekst ma odstępy między wyrazami.
</p>

 Poniżej wynik działania kodu:

Ten tekst ma odstępy między wyrazami.

 

Ustawienie wcięcia tekstu (text-indent):

Oto przykład, który pokazuje, jak zastosować wcięcie pierwszego wiersza akapitu. Możliwe wartości to: % lub określanie liczby dla wielkości wcięcia...

<p style="text-indent:1cm;">
Oto przykład, który pokazuje, jak zastosować wcięcie pierwszego wiersza akapitu.
Możliwe wartości to: % lub określanie liczby dla wielkości wcięcia. </p>

 Poniżej wynik działania kodu:

Oto przykład, który pokazuje, jak zastosować wcięcie pierwszego wiersza akapitu. Możliwe wartości to: % lub określanie liczby dla wielkości wcięcia.

 

Wyrównanie tekstu:

Oto przykład, który pokazuje sposób wyrównania tekstu. Możliwe wartości to: left, right, center, justify...

<p style="text-align:right;">
Ten akapit będzie wyrównany do prawa.
</p>
<p style="text-align:center;">
Ten akapit będzie wyśrodkowany.
</p>
<p style="text-align:left;">
Ten akapit będzie wyrównany do lewa.
</p>

 Poniżej wynik działania kodu:

Ten akapit będzie wyrównany do prawa.

Ten akapit będzie wyśrodkowany.

Ten akapit będzie wyrównany do lewa.

 

Dekorowanie tekstu:

Oto przykład, który pokazuje, jak stosować dekorację tekstu. Możliwe wartości to: none, underline, overline, line-through, blink.

<p style="text-decoration:underline;">
To będzie podkreślony tekst 
</p>
<p style="text-decoration:line-through;">
To będzie przekreślony tekst.
</p>
<p style="text-decoration:overline;">
Nad tekstem będzie wyświetlona linia.
</p>
<p style="text-decoration:blink;">
Ten tekst będzie miał efekt migotania
</p>

 Poniżej wynik działania kodu:

To będzie podkreślony tekst

To będzie przekreślony tekst.

Nad tekstem będzie wyświetlona linia.

Ten tekst będzie miał efekt migotania

 

Ustawienie wielkości liter:

Oto przykład, który pokazuje, jak ustawić właściwości dla tekstu. Możliwe wartości to none, capitalize, uppercase, lowercase:

<p style="text-transform:capitalize;">
Wyrazy zaczynają się dużą literą
</p>
<p style="text-transform:uppercase;">
Wyrazy będzą pisane wielkimi literami 
</p>
<p style="text-transform:lowercase;">
WYRAZY BĘDĄ PISANE MAŁYMI LITERAMI
</p>

 Poniżej wynik działania kodu:

Wyrazy zaczynają się dużą literą

Wyrazy będzą pisane wielkimi literami

WYRAZY BĘDĄ PISANE MAŁYMI LITERAMI

 

Ustawienie odstępu (białe spacje) między tekstem:

Oto przykład, który pokazuje, jak spacje (białe znaki) wewnątrz elementu są obsługiwane. Możliwe wartości to: normal, pre, nowrap

<p style="white-space:pre;">
Ten tekst ma podział wiersza i ustawienie odstępu pre, które 
odpowiada w przeglądarce, tak samo jak tag HTML pre. </p>

 Poniżej wynik działania kodu:

Ten tekst ma podział wiersza i ustawienie odstępu pre,

które opowiada w przeglądarce, tak samo jak tag HTML pre.

 

Ustawienie cienia tekstu:

Oto przykład, który pokazuje, jak ustawić cień wokół tekstu. To może nie być obsługiwane przez wszystkie przeglądarki.

<p style="text-shadow:4px 4px 8px blue;">
Jeśli Twoja przeglądarka obsługuje właściwość CSS text-shadow, to ten tekst
będzie miał niebieski cień.</p>

 Poniżej wynik działania kodu:

Jeśli Twoja przeglądarka obsługuje właściwość CSS text-shadow, to ten tekst będzie miał niebieski cień.

 

Zobacz nasze wszystkie kursy

WWW


HTML
HTML - Znaczniki
CSS - Tutorial
CSS - Selektory
PHP
JavaScript

XML

XSLT

Bazy danych


SQL
SQLite
MySQL
PostgreSQL

 

 

Programowanie


C
C++
C#
Java
VisualBasic
Python

Linux


Podstawy Linuxa
Bash
Linuks artykuły

Windows


Excel funkcje
Windows wskazówki
Outlook

Pozotałe działy


Programy
Rozrywka

 

 

 

This email address is being protected from spambots. You need JavaScript enabled to view it.