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}

Autor:
Krzysztof Stelmach
stelmi@priv2.onet.pl

Kurs udostępnił :
http://stelmik.prv.pl

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ść

{font-family: Arial}
Przykład: Tekst

normal,
italic,
oblique

{font-style: italic}
Przykład: Tekst

normal,
small-caps

{font-variant: small-caps}
Przykład: Tekst

normal,
bold,
bolder,
lighter,
100, 200, 300, 400, 500, 600, 700, 800, 900

{font-weight: bolder}
Przykład: Tekst

xx-small, x-small, small, medium, large, x-large, xx-large,
larger, smaller,
punkt (pt),
inch (in),
centymetr (cm),
piksel (px)

{font-size: 20px}
Przykład: Tekst

font-family,
font-size,
font-variant,
font-weight,
font-size

{font: 12pt sans-serif bold italic}
Przykład: Tekst

nazwa koloru,
wartość hex

{color: red}
Przykład: Tekst
{color: rgb(0,0,255)}
Przykład: Tekst

nazwa koloru,
wartość hex

none,
adres URL

repeat,
repeat-x,
repeat-y,
no-repeat

scroll,
fixed

[top, center, bottom],
[left, center, right],
procent,
punkt (pt),
inch (in),
centymetr (cm),
piksel (px)

background-color,
background-image,
background-repeat,
background-attachment,
background-position

normal,
punkt (pt),
inch (in),
centymetr (cm),
względem (em),
piksel (px)

{word-spacing: 1.2em}
Przykład: Tekst

normal,
punkt (pt),
inch (in),
centymetr (cm),
względem (em),
piksel (px)

{letter-spacing: 0.2em}
Przykład: Tekst

none,
underline,
overline,
line-through,
blink

{text-decoration: line-through}
Przykład: Tekst

baseline,
sub,
super,
top,
text-top,
middle,
bottom,
procent

capitalize,
uppercase,
lowercase,
none

{text-transform: uppercase}
Przykład: Tekst

left,
right,
center,
justify

procent,
punkt (pt),
inch (in),
centymetr (cm),
względem (em),
piksel (px)

normal,
liczba,
procent,
punkt (pt),
inch (in),
centymetr (cm),
względem (em),
piksel (px)

auto,
procent,
punkt (pt),
inch (in),
centymetr (cm),
względem (em),
piksel (px)

auto,
procent,
punkt (pt),
inch (in),
centymetr (cm),
względem (em),
piksel (px)

auto,
procent,
punkt (pt),
inch (in),
centymetr (cm),
względem (em),
piksel (px)

auto,
procent,
punkt (pt),
inch (in),
centymetr (cm),
względem (em),
piksel (px)