Podstawowe style CSS

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

Style formatowania tekstu

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):

  • in - cale;
  • cm - centymetry;
  • mm - milimetry;
  • pt - punkty topograficzne (używana jednostka w drukarstwie;
  • pc - pika (1pc = 12pt)

oraz jednostek względnych (relatywnych):

  • em - określa zmianę wymiaru względem elementu nadrzędnego strony;
  • % - określa procentową wartość wymiaru względem szerokości okna przeglądarki lub elementu nadrzędnego;
  • ex - jednostka określana względem wysokości litery x;
  • px - piksele, określające wymiar względem rozdzielczości ekranu.

Przykład zastosowanie tego stylu:

Listing 1
  1. <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:

NazwaKolor
black
silver
gray
white
maroon
red
purple
fuchsia
green
lime
olive
yellow
navy
blue
teal
aqua

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ń:

  • normal - sekwencja białych znaków zamieniana jest na pojedynczy biały znak, a tekst będzie zwijany, gdy jest to konieczne (domyślna wartość);
  • nowrap - sekwencja białych znaków zamieniana jest na pojedynczy biały znak a tekst nigdy nie będzie zwijany do następnej linii.
  • pre - białe znaki są zachowywane a tekst będzie zwijany w miejscu wystąpienia znaku nowej linii;
  • pre-line - sekwencja białych znaków zamieniana jest na pojedynczy biały znak, tekst będzie zwijany gdy zajdzie taka konieczność (pomija znak nowej linii \n);
  • pre-wrap - białe znaki są zachowywane przez przeglądarkę, tekst będzie zwijany gdy zajdzie taka konieczność i w miejscu wystąpienia znaku nowej linii \n;
  • initial - ustawia domyślną wartość dla tego elementu;
  • inherit - ustawia wartość, jaką przyjmuje rodzic tego elementu.

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:

Listing 2
  1. p{
  2. font-family: "Times New Roman", Georgia, Serif;
  3. }

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.

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

Style powtarzania:

  • no-repeat - brak powtarzania;
  • repeat-x - powtarzanie w poziomie;
  • repeat-y - powtarzanie w pionie;
  • repeat - powtarzanie w obu kierunkach;

Style wyrównania w poziomie:

  • left - wyrównanie do lewej krawędzi obszaru znacznika, którego styl ten dotyczy;
  • center - wyrównanie do środka obszaru znacznika, którego styl ten dotyczy;
  • right - wyrównanie do prawej krawędzi obszaru znacznika, którego styl ten dotyczy;
  • x - położenie na osi x, gdzie za x powinno podać położenie w jednostkach względnych lub bezwzględnych

Style wyrównania w pionie:

  • top - wyrównanie do górnej krawędzi obszaru znacznika, którego styl ten dotyczy;
  • center - wyrównanie do środka obszaru znacznika, którego styl ten dotyczy;
  • bottom - wyrównanie do dolnej krawędzi obszaru znacznika, którego styl ten dotyczy;
  • y - położenie na osi y, gdzie za y powinno podać położenie w jednostkach względnych lub bezwzględnych

background-attachment

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

  • scroll - tło jest przewijane wraz z zawartością elementu;
  • fixed - tło nie przewija się wraz z zawartością elementu;
  • local - tło przewija się wzdłuż wraz z zawartością elementu;

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:

  • left - wyrównanie do lewej (domyślne);
  • center - wyrównanie do środka;
  • right - wyrównanie do prawej;
  • justify - wyrównywanie do obu stron (wyjustowanie tekstu).

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:

Listing 4
  1. <p style="padding: 10px; background: yellow">Odsunięcie 10px z każdej strony</p>
  2. <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:

Listing 5
  1. <p style="margin: 10px; background: yellow">Odsunięcie 10px z każdej strony</p>
  2. <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.

Komentarze