Formatowanie treści

Wpisany przez Patryk yarpo Jar

piątek, 18 września 2009 02:43

Udało się nam już trochę poukładać elementy na stronie. Pojawiły się też jakieś kolory. Jednak nadal tekst na stronie jest taki... domyślny :)
Zmieńmy to. Na tej lekcji pokażę jak w ąłtwy sposób zmienić wygląd tekstu na stronie. Zacznijmy zatem :)

Na początek, dodamy obramowanie oraz dodamy trochę odstępu między akapitami:

* { margin: 0; padding: 0; }

body { background: #fff url(img/background.png) 0 0 repeat-x; }

#wrapper { width: 1000px; margin: 10px auto; }

#menu { width: 200px; float: left; }

#content { width: 800px; float: left; background: red;}

p { border: 1px solid #000; margin: 12px; padding: 8px; text-align: justify; }

Jak widzisz, po raz kolejny - zmiana w pliku `arkusz.css' zmiania wygląd `index.htm' (a jeśli załączyłeś ten plik css do `kontakt.htm' to także wygląd tego pliku w przeglądarce ulega zmianie).
Co dodalismy? Odstęp między tekstem a obramowaniem o wielkości 8px, samo obramowanie 1px w kolorze czarnym (#000 = black) oraz margines o wielkości 12px. Cały tekst będzie wyjustowany.

Teraz powiększmy pierwszą literę każdego akapitu:

/* tu cały początek pliku arkus.css */

p { border: 1px solid #000; margin: 10px; padding: 10px; }

p:first-letter { font-size: 20px; color: #333; }

Ta nowa linia definiuje regułę dla pseudo elementu :first-letter (pierwsza litera). Pierwsza litera tekstu umieszczonego w znaczniku p będzie powiększona i wyświetlona w innym kolorze.

Co jednak, gdybyśmy chcieli wyróżnić jakiś drobny fragment tekstu? Dawniej używało się znacznika <font>. Dzisiaj jednak _NIE_ należy go używać. Znacznikiem zalecanym jest <span>.

Tags:

html

Zobacz podobne artykuły

< Poprzednia		Następna >