CSS - kaskadowe arkusze stylu - właściwości elementów
Czcionki
WłaściwośćWartośćPrzykład
rodzaj czcionki
font-family nazwy czcionek oddzielone przecinkiem body {font-family: Georgia, 'Times New Roman', Times, serif;}
Tekst napisany czcionką pierwszą z dostępnych w systemie użytkownika.
rozmiar czcionki
font-size Według słów kluczowych (od najmniejszych):
  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large
Za pomocą wartości względnych (wartość ustalana jest na podstawie wielkości czcionki elementu nardzędnego):
  • smaller - mniejsza od bieżącej
  • larger - większa od bieżącej
Za pomocą jednostek względnych i bezwzględnych opisanych w zakładce jednostki 		div {font-size: 25px}
przykładowy tekst 25px
div {font-size: xx-small}
przykładowy tekst xx-small
styl czcionki
font-style Dostępne są trzy style:
  • normal - czcionka podstawowa
  • italic - czcionka pochylona
  • oblique - czcionka pochylona, stosowana gdy italic jest niedostępny
 div {font-style:italic}
Tekst pochylony
wariant czcionki
font-variant Dostępne są dwa warianty:
  • normal - czcionka normalna
  • small-caps - kapitaliki
 div {font-variant: small-caps}
Tekst wyświetlony kapitalikami.
waga czcionki
font-weight

Waga czcionki określana jest następującymi wartościami:

  • normal
  • bold
  • 100, 200, 400 (równoważna z normal),
    500, 600, 700 (równoważna z bold),
    800, 900
    Uwaga: Nie każda czcionka ma wszystkie dziewiść stopni grubości

Można również używać wartości względnych:

  • lighter - mniej wytłuszczona od przypisanej domyślnie
  • bolder - bardziej wytłuszczona od przypisanej domyślnie

 div {font-weight: 100}
Czcionka "cieniutka".
div {font-weight: normal}
Czcionka normalna.
div {font-weight: bold}
Czcionka pogrubiona.
div {font-weight: bolder}
Czcionka pogrubiona wzglęnie.
div {font-weight: 900}
Czcionka najbardziej pogrubiona.
atrybuty czcionki
font

Często czcionce przypisywanych jest wiele atrybutów jednocześnie.
W takim przypaku można użyć wspólnego polecenia zawierającego wszystkie atrybuty dotyczące czcionek.

selektor {font: lista atrybutów}

Jako listy atrybutów możemy użyć:

  • font-style,
  • font-variant,
  • font-weight,
  • font-size,
  • font-family

Atrybuty należy oddzielić spacjami i wpisać w podajej wyżej kolejności.
Niektóre z wartości mogą być pominięte, ale wartości: font-size i font-family są wymagane.

div {font: italic 22px Georgia, 'Times New Roman', Times, serif}
Jednoczesne formatowanie tekstu.
WłaściwośćWartośćPrzykład
wcięcie tekstu
text-indent selektor {text-indent: wartość;} Wartość określa się za pomocą jednostek względnych i bezwzględnych opisanych w zakładce jednostki div {text-indent:20%}
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis ducimus quaerat, laborum, ex, reprehenderit recusandae harum quod placeat adipisci excepturi dolore? Quisquam quas nam hic delectus ipsa saepe ea iste.
wyrównanie tekstu
text-align

selektor {text-align: wartość;}

Wyrównanie określa się za pomocą wartości:

  • left - wyrównanie do lewego marginesu
  • right - wyrównanie do prawego marginesu
  • center - wyśrodkowanie tekstu
  • justify - równomierne rozłożenie tekstu między marginesami
 div {text-align:justify}
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis ducimus quaerat, laborum, ex, reprehenderit recusandae harum quod placeat adipisci excepturi dolore? Quisquam quas nam hic delectus ipsa saepe ea iste.
odstęp między wierszami tekstu

selektor {line-height: odstep;}

Odstęp możemy podać jako:

  • normal - odległość 1
  • liczba - określa odległość jako wielokrotność aktualnego rozmiaru czcionki
  • wyskość - wartość w jednostkach względnych lub bezwzględnych
 div {line-height:0.5}
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis ducimus quaerat, laborum, ex, reprehenderit recusandae harum quod placeat adipisci excepturi dolore? Quisquam quas nam hic delectus ipsa saepe ea iste.
dekoracja tekstu
text-decoration

selektor {text-decoration: wartość;}

Rodzaj efektu określa się za pomocą wartości:

  • none - brak efektu
  • underline - podkreślenie
  • overline - linia nad tekstem
  • line-through - przekreślenie
 div {text-decoration: line-through}
Przekreślona linia tekstu.
div {text-decoration: overline}
Tekst nadkreślony.
odległość między wyrazami
word-spacing

selektor {word-spacing: wartość;}

Wartość wprowadzamy jako:

  • normal - brak efektu
  • liczba - px, em, rem, %
 div {word-spacing: 1.5em}
To jest zdanie, w którym słowa oddalone są o 1.5em
odległość między literami
letter-spacing

selektor {letter-spacing: wartość;}

Wartość wprowadzamy jako:

  • normal - brak efektu
  • liczba - px, em, rem, %
 div {letter-spacing: 1.5em}
To jest zdanie, w którym litery oddalone są o 1.5em
transformacja tekstu
text-transform

selektor {text-transform: wartość;}

Atrybut może mieć wartość:

  • capitalize - zmienia na wielkie litery wszystkie pierwsze
  • uppercase - zmienia wszystkie litery na wielkie
  • lowercase - zmienia wszystkie litery na małe
  • none - bez transformacji
 div {text-transform:capitalize}
To jest zdanie, w którym wszystkie pierwsze litery zmieniono na wielkie.
białe znaki
white-space

selektor {white-space: wartość;}

Przy użyciu tego atrybutu można sterować wyświetlaniem na stronie spacji i innych białych znaków. Może np. umożliwić wyświetlenie kilku spacji obok siebie

Atrybut może przyjmować wartość:

  • normal - zmienia kilka spacji w jedną, wiersze przełamywane są automatycznie,
  • pre - umożliwia wyświetlenie kilku spacji obok siebie. Wiersze tekstu są przełamywane w miejscu wystąpienia znaku nowej linii Enter,
  • nowrap - zmienia kilka spacji w jedną. Wiersze przełamywane są w miejscu wystąpienia znacznika <br>
  • pre-wrap - umożliwia wyświetlenie kilku spacji obok siebie. Wiersze tekstu są przełamywane w miejscu wystąpienia znaku nowej linii Enter oraz automatycznie na końcu szerokości strony.
  • pre-line - zmienia kilka spacji w jedną. Wiersze tekstu są przełamywane w miejscu wystąpienia znaku nowej linii Enter oraz automatycznie na końcu szerokości strony.
Tekst wyjściowy:

Lorem ipsum. Nulla dolore, similique, voluptatibus deserunt. ipsum cupiditate dolorem enim? Culpa exercitationem, rerum eius minus tempora accusamus iure.

div {white-space: pre}

Lorem ipsum. Nulla dolore, similique, voluptatibus deserunt. ipsum cupiditate dolorem enim? Culpa exercitationem.
Tekst jest wyświetlany identycznie, jak przy zastosowaniu znacznika <pre>.

położenie tekstu w pionie dla komórek tabeli
vertical-align

selektor {vertical-align: tryb;}

Parametr tryb może przyjmować wartości:

  • baseline
  • sub
  • super
  • top
  • text-top
  • middle
  • bottom
  • procent
 td {vertical-align:top}
pionowy układ tekstu
writing-mode

selektor {writing-mode: tryb;}

Tryb może przyjmować wartości:

  • horizontal-tb - linijki tekstu ułożone poziomo jedna pod drugą (domyślnie)
  • vertical-rl - linijki tekstu ułożone pionowo obok siebie od prawej do lewej strony
  • vertical-lr - linijki tekstu ułożone pionowo obok siebie od lewej do prawej strony
div {writing-mode: vertical-rl}
Lorem ipsum dolor sit amet consectetur adipisicing elit.

div {writing-mode: vertical-lr}
Lorem ipsum dolor sit amet consectetur adipisicing elit.
ustawienie liter

Dla selektorów z ustawionym pionowym trybem pisania, tzn.
"writing-mode: vertical-lr"
lub
"writing-mode: vertical-rl"
możemy ustawić:

text-orientation

selektor {text-orientation: wartość;}

Atrybu może przyjmować wartość:

  • mixed - znaki tekstu ułożone pionowo na boku czyli obrócone o kąt 90° (domyślnie), chyba że użyta czcionka obsługuje pionową orientację
  • upright - znaki tekstu ułożone pionowo zawsze jeden pod drugim
  • sideways - znaki tekstu ułożone pionowo zawsze na boku czyli obrócone o kąt 90°, bez względu czy czcionka obsługuje pionową orientację
Znaki tekstu ułożone w pionie w domyślnej orientacji:
div {writing-mode:vertical-rl; text-orientation: mixed}

z tekstu:

To jest pierwsza linijka, to jest druga linijka, a to jest kolejna linijka.

otrzymujemy:

To jest pierwsza linijka, to jest druga linijka, a to jest kolejna linijka.
Znaki tekstu ułożone w pionie zawsze jeden pod drugim:
div {writing-mode:vertical-lr; text-orientation: upright}

z tekstu:

Kolejne słowa jednego wiersza

otrzymujemy:

Kolejne słowa jednego wiersza
Znaki tekstu ułożone w pionie zawsze na boku:
div {writing-mode:vertical-rl; text-orientation: sideways}

z tekstu:

Kolejne słowa jednego wiersza

otrzymujemy:

Kolejne słowa jednego wiersza
Właściwość Opis Wartość Odnosi się do Przykład
color Określa kolor czcionki nazwa koloru,
wartość hex 		wszystkie elementy {color: red}
Przykład: Tekst
{color: rgb(0,0,255)}
Przykład: Tekst
background-color Określa kolor tła nazwa koloru,
wartość hex 		wszystkie elementy {background-color: #FF5500}
background-image Określa grafikę pełniąca rolę tła none,
adres URL 		wszystkie elementy {background-image: url(tlo.gif)}
background-repeat Określa powtrzalność tła repeat,
repeat-x,
repeat-y,
no-repeat 		wszystkie elementy {background-repeat: repeat-x}
background-attachment Określa czy tło ma się przesuwać wraz z zawartością (scroll) czy ma być stałe (fixed) scroll,
fixed 		wszystkie elementy {background-attachment: scroll}
background-position Określa pozycję początkową tła [top, center, bottom],
[left, center, right],
procent,
punkt (pt),
inch (in),
centymetr (cm),
piksel (px) 		elementy będące blokiem {background-position: 100% 30%}
background Zawiera w sobie wszystkie właściwości dotyczące tła background-color,
background-image,
background-repeat,
background-attachment,
background-position 		wszystkie elementy {background: red url(tlo.jpg) left top no-repeat}
Właściwość Opis Wartość Odnosi się do Przykład
margin-top Określa odległość od górnej krawędzi strony auto,
procent,
punkt (pt),
inch (in),
centymetr (cm),
względem (em),
piksel (px) 		wszystkie elementy {margin-top: 3em}
margin-right Określa odległość od prawej krawędzi strony auto,
procent,
punkt (pt),
inch (in),
centymetr (cm),
względem (em),
piksel (px) 		wszystkie elementy {margin-right: 4px}
margin-bottom Określa odległość od dolnej krawędzi strony auto,
procent,
punkt (pt),
inch (in),
centymetr (cm),
względem (em),
piksel (px) 		wszystkie elementy {margin-bottom: 13%}
margin-left Określa odległość od lewej krawędzi strony auto,
procent,
punkt (pt),
inch (in),
centymetr (cm),
względem (em),
piksel (px) 		wszystkie elementy {margin-left: 4em}
margin Określa odległość od krawędzi strony według kolejności: górna, prawa, dolna, lewa auto,
procent,
punkt (pt),
inch (in),
centymetr (cm),
względem (em),
piksel (px) 		wszystkie elementy {margin: 2em 3em 1em 4em}
padding-top Określa górny odstęp elementu procent,
punkt (pt),
inch (in),
centymetr (cm),
względem (em),
piksel (px) 		wszystkie elementy {padding-top: 0.2em}
padding-right Określa prawy odstęp elementu procent,
punkt (pt),
inch (in),
centymetr (cm),
względem (em),
piksel (px) 		wszystkie elementy {padding-right: 12px}
padding-bottom Określa dolny odstęp elementu procent,
punkt (pt),
inch (in),
centymetr (cm),
względem (em),
piksel (px) 		wszystkie elementy {padding-bottom: 0.4em}
padding-left Określa lewy odstęp elementu procent,
punkt (pt),
inch (in),
centymetr (cm),
względem (em),
piksel (px) 		wszystkie elementy {padding-left: 7%}
padding Określa odstęp elementu według kolejności: górna, prawa, dolna, lewa procent,
punkt (pt),
inch (in),
centymetr (cm),
względem (em),
piksel (px) 		wszystkie elementy {padding: 2em 1em 3em 4em}
border-top-width Określa szerokość górnej granicy (ramki) elementu thin,
medium,
thick,
punkt (pt),
inch (in),
centymetr (cm),
względem (em),
piksel (px) 		wszystkie elementy {border-top-width: thin}
border-right-width Określa szerokość prawej granicy (ramki) elementu thin,
medium,
thick,
punkt (pt),
inch (in),
centymetr (cm),
względem (em),
piksel (px) 		wszystkie elementy {border-right-width: medium}
border-bottom-width Określa szerokość dolnej granicy (ramki) elementu thin,
medium,
thick,
punkt (pt),
inch (in),
centymetr (cm),
względem (em),
piksel (px) 		wszystkie elementy {border-bottom-width: thick}
border-left-width Określa szerokość lewej granicy (ramki) elementu thin,
medium,
thick,
punkt (pt),
inch (in),
centymetr (cm),
względem (em),
piksel (px) 		wszystkie elementy {border-left-width: 3px}
border-width Określa szerokość granicy (ramki) elementu według kolejności: górna, prawa, dolna, lewa thin,
medium,
thick,
punkt (pt),
inch (in),
centymetr (cm),
względem (em),
piksel (px) 		wszystkie elementy {border-width: thin thick medium thick}
border-color Określa kolor granicy (ramki) elementu nazwa koloru,
wartość hex 		wszystkie elementy {border-color: red}
border-style Określa styl granicy (ramki) elementu none,
dotted,
dashed,
solid,
double,
groove,
ridge,
inset,
outset 		wszystkie elementy {border-style: double}
border-top Określa szerokość, kolor i styl górnej granicy (ramki) elementu border-top-width,
border-style,
color 		wszystkie elementy {border-top: thin blue solid}
border-right Określa szerokość, kolor i styl prawej granicy (ramki) elementu border-right-width,
border-style,
color 		wszystkie elementy {border-right: }
border-bottom Określa szerokość, kolor i styl dolnej granicy (ramki) elementu border-bottom-width,
border-style,
color 		wszystkie elementy {border-bottom: }
border-left Określa szerokość, kolor i styl lewej granicy (ramki) elementu border-left-width,
border-style,
color 		wszystkie elementy {border-left:}
border Określa szerokość, kolor i styl granicy (ramki) elementu według kolejności: górna, prawa, dolna, lewa border-width,
border-style,
color 		wszystkie elementy {border: }
width Określa szerokość elementu (np. grafiki) auto,
procent,
punkt (pt),
inch (in),
centymetr (cm),
względem (em),
piksel (px) 		elementy będące blokiem {width: 80px}
max-width Określa maksymalną szerokość elementu (np. grafiki) procent,
punkt (pt),
inch (in),
centymetr (cm),
względem (em),
piksel (px) 		elementy będące blokiem {max-width:800px;}
height Określa wysokość elementu (np. grafiki) auto,
punkt (pt),
inch (in),
centymetr (cm),
względem (em),
piksel (px) 		elementy będące blokiem {height: 170px}
float   left,
right,
none 		wszystkie elementy {float: left}
clear   none,
left,
right,
both 		wszystkie elementy {clear: right}
Właściwość Opis Wartość Odnosi się do Przykład
display Określa w jaki sposób dany element ma być wyświetlony block,
inline,
inline-block,
list-item,
none 		wszystkie elementy {display: none}
white-space Określa w jaki sposób należy obchodzić się z odstępami wewnątrz elementu normal,
pre,
nowarp 		elementy będące blokiem {white-space: pre}
list-style-type   disc,
circle,
square,
decimal,
lower-roman,
upper-roman,
lower-alpha,
upper-alpha,
none 		elementy z display = list-item {list-style-type: lower-roman}
list-style-image   adres URL,
none 		elementy z display = list-item {list-style-image: url(rysunek.gif)}
list-style-position   inside,
outside 		elementy z display = list-item {list-style-position: outside}
list-style   disc,
circle,
square,
decimal,
lower-roman,
upper-roman,
lower-alpha,
upper-alpha,
none,
inside,
outside,
adres URL,
none 		elementy z display = list-item {list-style: circle outside}
Szczegółowy opis i przykłady znajdują sie pod adresem:
https://www.w3schools.com/css/default.asp
Ćwiczenia css:
https://www.w3schools.com/css/exercise.asp
Projekt i wykonanie: Ryszard Rogacz© 1999−2024