Kurs HTML i CSS.
Formatowanie tekstu przy pomocy CSS.
Dołożyłem wszelkich starań, aby strona nie zawierała błędów,
ale nikt nie jest nieomylny...
 

Lekcja 4 - Formatowanie tekstu przy pomocy CSS

Poniższy schemat przedstawia możliwe sposoby "dekoracji" tekstu:

<html>
<head>
<title>Zapraszam na moją wspaniałą stronę!</title>
<style type="text/css">
body{
background-color: silver;
text-align: left;
}
h4{ text-decoration: line-through; } 
h5{ text-decoration: overline; } 
h6{ text-decoration: underline; } 
p { text-decoration: none; } 
</style>
</head>
<body>

<h4>Tu mamy tekst przekreślony</h4>


<h5>Tu mamy linię nad tekstem</h5>


<h6>Tu mamy podkreślenie</h6>


<p>Tu mamy tekst bez "dekoracji"</p>

</body>
</html>

Poniższy schemat pokazuje użycie atrybutów: text-indent (wcięcie pierwszego wiersza akapitu) oraz text-align (sposób wyrównywania akapitów tekstu)

<html>
<head>
<title>Zapraszam na moją wspaniałą stronę!</title>
<style type="text/css">
body{
background-color: silver;
text-align: left;
}
p { text-indent: 30px;
text-align: justify;
}
h3 { text-indent: 20px; 
text-align: right;
}
h1 { text-indent: 10px; 
text-align: center;
}
</style>
</head>
<body>

<p>Tu wcięcie pierwszego wiersza wynosi 30px, 
a tekst jest justowany czyli dosuwany do lewego i prawego marginesu.</p>


<h3>Wcięcie pierwszego wiersza wynosi tu 20px, 
a akapit jest wyrównywany do prawego marginesu.</h3>


<h1>Wcięcie pierwszego wiersza wynosi tu 10px, a akapit jest centrowany.</h1>

</body>
</html>

Ten schemat pokazuje użycie atrybutu text-transform, który dokonuje konwersji wszystkich lub tylko wyróżnionych znaków w tekście

<html>
<head>
<title>Zapraszam na moją wspaniałą stronę!</title>
<style type="text/css">
body{
background-color: silver;
text-align: left;
}
p { text-transform: capitalize; } 
h2{ text-transform: uppercase; } 
h3{ text-transform: lowercase; }
</style>
</head>
<body>

<p>Pierwsza litera każdego słowa jest wielka.</p>


<h2>Wszystkie litery zamieniane są na duże</h2>


<h3>Mamy tu zamianę liter wielkich na małe</h3>

</body>
</html>

ćwiczenie 1

Przekopiuj drugi schemat z tej lekcji do Notatnika. Dodaj do stylu CSS polecenie określające wcięcie pierwszego wiersza akapitu tekstu w znaczniku <h2> na 50px, a wyrównanie tekstu do prawego marginesu.
Plik zapisz na Pulpicie pod nazwą akapit.html

ćwiczenie 2

Do czego służą atrybuty letter-spacing oraz word-spacing. Informacji poszukaj w kursie Kokłowskiego.
Jeśli potrafisz, to zapisz polecenie CSS pokazujące zastosowanie tych dwóch atrybutów.

lekcja 3 na początek strony lekcja 5

Ostatnia aktualizacja: 16 listopada, 2008
Copyright © 2010 by Jerzy Grabek, kontakt: fizyka4you@wp.pl