Kurs CSS
Cascading Style Sheet 1.
Poniżej znajduje się krótki opis właściwości CSS1.
2.1. Czionka
| Właściwość |
Opis |
Wartość |
Odnosi się do |
Przykład |
| font-family |
Określa typ czcionki |
nazwa czcionki |
wszystkie elementy |
{font-family: Arial}
Przykład: Tekst |
| font-style |
Określa styl czcionki |
normal,
italic,
oblique |
wszystkie elementy |
{font-style: italic}
Przykład: Tekst |
| font-variant |
|
normal,
small-caps |
wszystkie elementy |
{font-variant: small-caps}
Przykład: Tekst |
| font-weight |
Określa grubość czcionki |
normal,
bold,
bolder,
lighter,
100, 200, 300, 400, 500,
600, 700, 800, 900 |
wszystkie elementy |
{font-weight: bolder}
Przykład: Tekst |
| font-size |
Określa rozmiar czcionki |
xx-small, x-small, small,
medium, large, x-large, xx-large,
larger, smaller,
punkt (pt),
inch (in),
centymetr (cm),
piksel (px) |
wszystkie elementy |
{font-size: 20px}
Przykład: Tekst |
| font |
Zawiera w sobie wszystkie właściwości dotyczące czcionki |
font-family,
font-size,
font-variant,
font-weight,
font-size |
wszystkie elementy |
{font: 12pt sans-serif bold italic}
Przykład: Tekst |
2.2. Kolor i tło
| 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} |
2.3. Tekst
| Właściwość |
Opis |
Wartość |
Odnosi się do |
Przykład |
| word-spacing |
Określa odległość między wyrazami |
normal,
punkt (pt),
inch (in),
centymetr (cm),
względem (em),
piksel (px) |
wszystkie elementy |
{word-spacing: 1.2em}
Przykład: Tekst |
| letter-spacing |
Określa odległość między literami |
normal,
punkt (pt),
inch (in),
centymetr (cm),
względem (em),
piksel (px) |
wszystkie elementy |
{letter-spacing: 0.2em}
Przykład: Tekst |
| text-decoration |
Określa czy tekst ma być podkreślony, przekreślony, itd. |
none,
underline,
overline,
line-through,
blink |
wszystkie elementy |
{text-decoration: line-through}
Przykład: Tekst |
| vertical-align |
Określa położenie tekstu w pionie względem elementu
poprzedzającego |
baseline,
sub,
super,
top,
text-top,
middle,
bottom,
procent |
elementy wewnętrzne |
{vertical-align: top} |
| text-transform |
Określa sposób przemiany tekstu |
capitalize,
uppercase,
lowercase,
none |
wszystkie elementy |
{text-transform: uppercase}
Przykład: Tekst |
| text-align |
Określa położenie tekstu wewnątrz elementu |
left,
right,
center,
justify |
elementy będące blokiem |
{text-align: center} |
| text-indent |
Określa odległość od lewego marginesu |
procent,
punkt (pt),
inch (in),
centymetr (cm),
względem (em),
piksel (px) |
elementy będące blokiem |
{text-indent: 20%} |
| line-height |
Określa odległość między dwoma sąsiednimi liniami |
normal,
liczba,
procent,
punkt (pt),
inch (in),
centymetr (cm),
względem (em),
piksel (px) |
wszystkie elementy |
{line-height: 120%} |
2.4. Elementy kwadratowe
| 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} |
| 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} |
2.5. Klasyfikacja
| 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,
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} |
Wstęp |
Cascading Style |
Składnia,
Jednostski,
Czcionka,
Tekst,
Kolor / tło,
Scrollbar,
Outline,
Listy,
Tabele
|
Dziedziczenie |
Selektory
|
FAQ