: Home / HTML / CSS / kurs HTML / Formatowanie treści

Warning: file_get_contents(http://graph.facebook.com/http://youthcoders.net/html-css/kurs-html/23-formatowanie-tresci.html): failed to open stream: HTTP request failed! HTTP/1.0 403 Forbidden in /var/www/old-yc/plugins/content/addthis.php on line 38
Formatowanie treści
Ocena użytkowników: / 0
SłabyŚwietny 
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:

Zobacz podobne artykuły

< Poprzednia   Następna >
 

Dodaj komentarz


Kod antysapmowy
Odśwież