Możecie formatować akapity lub treści z komórek tabel zgodnie z waszymi życzeniami za pomocą następujących właściwości. Te właściwości można zastosować również do wszystkich innych elementów, którym można przypisać zdefiniowaną lub obliczoną wysokość lub szerokość.
Wcięcie pierwszej linii
Zaczynamy od właściwości text-indent. Ustala, jak pierwsza linijka akapitu ma być wcięta. Możliwe jest również "odcięcie" w lewo. W tym celu należy użyć wartości ujemnej dla text-indent. (Szczegółowe informacje o tym, kiedy ekstremalne odcięcie może być sensowne, znajdziecie później). Oczekiwana jest liczba.
Przykład:
.absatz { text-indent: 2em; }
W przeglądarce wygląda to następująco:
Jeśli użyjesz ujemnej wartości, wystąpi odcięcie tekstu w pierwszej linijce.
.absatz {
text-indent: -2em;
}
I oczywiście znowu zobaczmy efekt w przeglądarce:
To także jest możliwe. Przy definiowaniu odcięć zwróć uwagę, czy treści są nadal czytelne, jeśli to zamierzasz. W rzeczywistości text-indent może być również interesujący z punktu widzenia optymalizacji pod kątem wyszukiwarek. Czasem chciałbyś pokazywać grafiki zamiast tekstu.
Ale chcesz, żeby tekst był wciąż dostępny dla wyszukiwarek, staniesz przed dylematem. Ten dylemat można rozwiązać poprzez użycie text-indent. Ponieważ ta właściwość pozwala przesuwać teksty. W ten sposób możesz ukryć tekst przed widzami.
Korzyść z wariantu text-indent: Tekst, który ma zostać zastąpiony grafiką, pozostaje niezmieniony w kodzie źródłowym.
<h1>PSD-Tutorials.de</h1>
...
h1 {
background: url(logo.png) 0 0 no-repeat;
text-indent: -99999px;
height:200px;
}
Poprzez tę składnię elementowi h1 przypisywany jest obraz tła. (Właściwość background została już przedstawiona w tej sekwencji). Poprzez text-indent: -99999px tekst nagłówka jest przesunięty o 99999 pikseli w lewo. Tekst jest niewidoczny. Teraz wyświetlany jest tylko obraz.
Po wyłączeniu arkusza stylów tekst ponownie będzie widoczny.
Ustalenie wysokości wiersza
O wysokości wiersza wspomniałem już wcześniej w kontekście ogólnej właściwości font. Teraz przyjrzymy się temu tematowi bardziej szczegółowo. Definiowanie wysokości wiersza w połączeniu ze wielkością czcionki (font-size) jest interesujące.
Wysokość wiersza można ustawić za pomocą właściwości line-height. Dozwolone są wartości liczbowe. Możliwe są także wartości procentowe. Odwołują się one do wielkości czcionki elementu, dla którego określono wysokość wiersza. Przed zdefiniowaniem wysokości wiersza zwróć uwagę na to, że przeglądarka/urządzenie może nadać pierwszeństwo wysokości wiersza nad innymi właściwościami, co może skutkować obcięciem elementów, gdy są one wyższe. Może to być irytujące zwłaszcza w przypadku grafik. Sprawdź więc rezultaty przed opublikowaniem strony online.
Poniższy przykład pokazuje, jak używać line-height.
<p style="line-height:1.4em; font-size:1em;">Czasami stworzysz świetny układ, ale brakuje zdjęć, a jeśli używasz tylko pustych ramek, układ wygląda dość łysy. To można zrobić lepiej:<br /> W tym filmie instruktażowym pokażę wam najlepsze adresy internetowe, gdzie można szybko znaleźć darmowe wskaźniki dobrane do zdjęć. Genialną listę można znaleźć np. <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">tutaj</a>.</p> <p style="line-height:2em;font-size:1em;">Czasami stworzysz świetny układ, ale brakuje zdjęć, a jeśli używasz tylko pustych ramek, układ wygląda dość łysy. To można zrobić lepiej:<br /> W tym filmie instruktażowym pokażę wam najlepsze adresy internetowe, gdzie można szybko znaleźć darmowe wskaźniki dobrane do zdjęć. Genialną listę można znaleźć np. <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">tutaj</a>.</p> <p style="line-height:1em; font-size:1em;">Czasami stworzysz świetny układ, ale brakuje zdjęć, a jeśli używasz tylko pustych ramek, układ wygląda dość łysy. To można zrobić lepiej:<br /> W tym filmie instruktażowym pokażę wam najlepsze adresy internetowe, gdzie można szybko znaleźć darmowe wskaźniki dobrane do zdjęć. Genialną listę można znaleźć np. <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">tutaj</a>.</p>
Tutaj zdefiniowano trzy akapity, którym przypisano różne wysokości wierszy.
Jak widać, wysokość wiersza może znacząco wpłynąć na czytelność tekstu. Dlatego ostrożnie korzystajcie z line-height.
Ostatecznie pojawia się pytanie, jaką wysokość wiersza należy wybrać. Zazwyczaj stosuje się wysokości wierszy między 130 a 150 procent.
p {
line-height: 150%;
}
Jednakowe czytanie zależy przede wszystkim od szerokości tekstu. Tutaj obowiązuje zasada: Im dłuższe są linie tekstu, tym większa powinna być wysokość wiersza. Dlatego koniecznie przetestujcie stronę pod kątem zachowania czytelności.
Wyrównanie tekstu
Za pomocą właściwości text-align określa się wyrównanie poziome akapitów i innych tekstu przepływowego lub elementów inline zawartych w elementach blokowych. Poniższe wartości można ustawić dla text-align:
• left – wyrównanie do lewej
• right – wyrównanie do prawej
• center – wyśrodkowanie
• justify – wyrównanie do bloków
Tutaj również przykład:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}
</style>
</head>
<body>
<h1>PSD-Tutorials.de</h1>
<h2>PSD-Tutorials.de</h2>
<h3>PSD-Tutorials.de</h3>
</body>
</html>I tak wygląda to w przeglądarce:
Zauważcie, że właściwość text-align odnosi się nie tylko do treści tekstowej. Ta właściwość obejmuje faktycznie wszystkie elementy inline. Dlatego, gdy dodawany jest obraz, definicja text-align również dotyczy tego elementu.
Jeszcze jedno ostrzeżenie: text-align – przynajmniej zgodnie z oficjalną specyfikacją CSS – nie powinno mieć wpływu na elementy blokowe. (Chociaż istnieją przeglądarki, które stosują to również do elementów blokowych). Jeśli chcecie wyrównać elementy blokowe, w takich przypadkach stosujcie już wcześniej omówione właściwości margin.
