Style formatowania tekstu

Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 5136 razy

font-weight

Styl ten służy do określenia stylu pogrubienia, dopuszczalne są wartości liczbowe: 100, 200, 300, 400, 500, 600, 700, 800, 900 lub tekstowe: normal - normalny, bold - pogrubiony, bolder - grubszy, thinker - cieńszy. Możliwe jest również zastosowanie styli: initial - by przywrócić standardowe ustawienie tego parametru lub inherit - by ustawić wartość tego parametru taką samą jak elementu nadrzędnego.

font-size

Styl ten umożliwia ustawienie rozmiaru czcionki. Istnieje możliwość użycia jednostek bezwzględnych (absolutnych):

oraz jednostek względnych (relatywnych):

Przykład zastosowanie tego stylu:

<p style="font-size: 24px">Tekst wysokości 24px <span style="font-size:0.5em">a tu tekst wysokości 24 * 0,5 px</span> i powrót do poprzedniego rozmiaru czcionki.</p>

Rezultat:

Tekst wysokości 24px a tu tekst wysokości 24 * 0,5 px i powrót do poprzedniego rozmiaru czcionki.

color

Zmiana koloru czcionki. Możliwe jest użycie kolorów nazwanych:

Kolor może być również wprowadzony za pomocą kodu szesnastkowego w formacie #ffffff.

white-space

Styl ten określa sposób traktowania przez przeglądarkę białych znaków. Oto lista możliwych ustawień:

font-family

Umożliwia ustawienie kroju czcionki, można wymienić kilka krojów, jeżeli pierwszy nie będzie dostępny na danym komputerze wykorzystana zostanie kolejna na liście czcionka, która jest dostępna. Na końcu można określić, jaki typ czcionki powinien zostać użyty w przypadku, gdy żadna z domyślnych nie jest dostępna. Kroje czcionek mają różne właściwości w zależności od ich przeznaczenia dostępne są następujące typy: serif, sans-serif, cursive, fantasy, monospace. Oto przykład:

p{ font-family: "Times New Roman", Georgia, Serif; }

Można tutaj również użyć inherit oraz initial.

Formatowanie koloru i ustawienia grafiki tła

background

Ten styl umożliwia ustawienie koloru, grafiki oraz sposobu jej wyrównywania.

body { background: #ffffff url("background.png") no-repeat right top; }

Style powtarzania:

Style wyrównania w poziomie:

Style wyrównania w pionie:

background-attachment

Określa sposób zachowania grafiki tła, gdy element jest przewijany. Dostępne opcje:

background-color

Styl ten umożliwia ustawienie koloru tła. Format koloru jak w przypadku wcześniej omawianego stylu color.

background-image

Styl ten umożliwia ustawienie grafiki tła.

background-image

Styl ten umożliwia ustawienie grafiki tła.

background-position

Ustawienie położenia grafiki tła (dostępne opcje zostały opisane przy stylu background.

background-repeat

Sterowanie kierunkiem powtarzania grafiki tła (dostępne opcje zostały opisane przy stylu background.

Style pozycjonujące i wyrównujące zawartość znaczników

text-align

Wyrównywanie zawartości danego elementu. Dostępne są następujące style:

padding

Określa odsunięcie zawartości danego znacznika od jego krawędzi. Podawane są wartości w jednostkach względnych lub bezwzględnych dla poszczególnych krawędzi w kolejności: góra, prawa, dolna, lewa. Pomijając ostatni parametr ustawia się odsunięcie dla pozostałych krawędzi. Gdy wprowadzona zostanie jedna wartość to ustawione zostanie jednakowe podane odsunięcie dla wszystkich krawędzi.

Przykład:

<p style="padding: 10px; background: yellow">Odsunięcie 10px z każdej strony</p> <p style="padding: 10px 20px 30px 40px; background: yellow">Odsunięcie 10px od góry, 20px od prawej, 30px od dolnej i 40px lewej krawędzi.</p>

Rezultat:

Odsunięcie 10px z każdej strony

Odsunięcie 10px od góry, 20px od prawej, 30px od dolnej i 40px lewej krawędzi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifend ipsum ut felis consectetur, eget cursus nulla ultricies. Suspendisse id orci efficitur, tristique risus vitae, aliquam odio. Proin ante orci, fermentum a sodales sit amet, tempor at felis. Etiam venenatis magna eu erat interdum, id porta nibh consectetur. Praesent ac felis elementum tortor pellentesque commodo. Pellentesque luctus, ipsum vulputate placerat porta, diam libero hendrerit lacus, et congue elit libero nec orci. Sed sem ex, cursus at neque et, auctor tincidunt nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec sit amet porttitor augue. Mauris augue risus, efficitur in tortor non, blandit dapibus nisi. Duis semper enim in ipsum eleifend imperdiet. Sed hendrerit tortor vel arcu egestas dictum. Sed faucibus metus quis quam euismod varius.

padding-left

Styl pochodny od padding dotyczący odsunięcia zawartości znacznika od lewej krawędzi.

padding-right

Styl pochodny od padding dotyczący odsunięcia zawartości znacznika od prawej krawędzi.

padding-top

Styl pochodny od padding dotyczący odsunięcia zawartości znacznika od górnej krawędzi.

padding-bottom

Styl pochodny od padding dotyczący odsunięcia zawartości znacznika od dolnej krawędzi.

margin

Określa odsunięcie krawędzi znacznika od pozostałych elementów strony. Podawane są wartości w jednostkach względnych lub bezwzględnych dla poszczególnych krawędzi w kolejności: góra, prawa, dolna, lewa. Pomijając ostatni parametr ustawia się odsunięcie dla pozostałych krawędzi. Gdy wprowadzona zostanie jedna wartość to ustawione zostanie jednakowe podane odsunięcie dla wszystkich krawędzi.

Przykład:

<p style="margin: 10px; background: yellow">Odsunięcie 10px z każdej strony</p> <p style="margin: 10px 20px 30px 40px; background: yellow">Odsunięcie 10px od góry, 20px od prawej, 30px od dolnej i 40px lewej krawędzi.</p>

Rezultat:

Odsunięcie 10px z każdej strony

Odsunięcie 10px od góry, 20px od prawej, 30px od dolnej i 40px lewej krawędzi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifend ipsum ut felis consectetur, eget cursus nulla ultricies. Suspendisse id orci efficitur, tristique risus vitae, aliquam odio. Proin ante orci, fermentum a sodales sit amet, tempor at felis. Etiam venenatis magna eu erat interdum, id porta nibh consectetur. Praesent ac felis elementum tortor pellentesque commodo. Pellentesque luctus, ipsum vulputate placerat porta, diam libero hendrerit lacus, et congue elit libero nec orci. Sed sem ex, cursus at neque et, auctor tincidunt nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec sit amet porttitor augue. Mauris augue risus, efficitur in tortor non, blandit dapibus nisi. Duis semper enim in ipsum eleifend imperdiet. Sed hendrerit tortor vel arcu egestas dictum. Sed faucibus metus quis quam euismod varius.

margin-left

Styl pochodny od margin dotyczący odsunięcia od lewej krawędzi.

margin-right

Styl pochodny od margin dotyczący odsunięcia od prawej krawędzi.

margin-top

Styl pochodny od margin dotyczący odsunięcia od górnej krawędzi.

margin-bottom

Styl pochodny od margin dotyczący odsunięcia od dolnej krawędzi.