|
|
 |
Kurs CSS |  |
|
Cascading Style Sheet 1.
Poniżej
znajduje się krótki opis właściwości CSS1.
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
|
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
|
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%}
|
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}
|
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}
|
| | |
|
|
|
