Pozycjonowanie i porady dla początkujących webmasterów

lomil · 2010-04-11 21:58:51

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2">
<meta http-equiv="Content-Language" content="pl">
<link rel="stylesheet" href="../kurs.css" type="text/css">
</head>
<body>
<center>Cascading Style Sheet 1.</center>Poniżej
znajduje się krótki opis wła¶ciwo¶ci CSS1. 
2.1. Czionka 
<table rules="all" cellspacing="0" cellpadding="3" width="100%">
<tbody>
<tr style="color: #FFFFFF; background: #A90605; text-align: center">
<td>Wła¶ciwo¶ć</td>
<td>Opis</td>
<td>Warto¶ć</td>
<td>Odnosi się do</td>
<td>Przykład</td>
</tr>
<tr>
<td valign="top">
font-family
</td>
<td valign="top">
Okre¶la
typ czcionki
</td>
<td valign="top">
nazwa
czcionki
</td>
<td valign="top">
wszystkie
elementy
</td>
<td valign="top">
{font-family:
Arial} 
Przykład: Tekst
</td>
</tr>
<tr>
<td valign="top">
font-style
</td>
<td valign="top">
Okre¶la
styl czcionki
</td>
<td valign="top">
normal, 
italic, 
oblique
</td>
<td valign="top">
wszystkie
elementy
</td>
<td valign="top">
{font-style:
italic} 
Przykład: Tekst
</td>
</tr>
<tr>
<td valign="top">
font-variant
</td>
<td valign="top">

</td>
<td valign="top">
normal, 
small-caps
</td>
<td valign="top">
wszystkie
elementy
</td>
<td valign="top">
{font-variant:
small-caps} 
Przykład: Tekst
</td>
</tr>
<tr>
<td valign="top">
font-weight
</td>
<td valign="top">
Okre¶la
grubo¶ć czcionki
</td>
<td valign="top">
normal, 
bold, 
bolder, 
lighter, 
100, 200, 300, 400,
500, 600, 700, 800,
900
</td>
<td valign="top">
wszystkie
elementy
</td>
<td valign="top">
{font-weight:
bolder} 
Przykład: Tekst
</td>
</tr>
<tr>
<td valign="top">
font-size
</td>
<td valign="top">
Okre¶la
rozmiar czcionki
</td>
<td valign="top">
xx-small,
x-small, small, medium,
large, x-large, xx-large, 
larger, smaller, 
punkt (pt), 
inch (in), 
centymetr (cm), 
piksel (px)
</td>
<td valign="top">
wszystkie
elementy
</td>
<td valign="top">
{font-size:
20px} 
Przykład: Tekst
</td>
</tr>
<tr>
<td valign="top">
font
</td>
<td valign="top">
Zawiera
w sobie wszystkie wła¶ciwo¶ci dotycz±ce czcionki
</td>
<td valign="top">
font-family, 
font-size, 
font-variant, 
font-weight, 
font-size
</td>
<td valign="top">
wszystkie
elementy
</td>
<td valign="top">
{font:
12pt sans-serif bold italic} 
Przykład: Tekst
</td>
</tr>
</tbody>
</table> 
 
2.2. Kolor i tło 
 
<table rules="all" cellspacing="0" cellpadding="3" width="100%">
<tbody>
<tr style="color: #FFFFFF; background: #A90605; text-align: center">
<td>Wła¶ciwo¶ć</td>
<td>Opis</td>
<td>Warto¶ć</td>
<td>Odnosi się do</td>
<td>Przykład</td>
</tr>
<tr>
<td valign="top">
color
</td>
<td valign="top">
Okre¶la
kolor czcionki
</td>
<td valign="top">
nazwa
koloru, 
warto¶ć hex
</td>
<td valign="top">
wszystkie
elementy
</td>
<td valign="top">
{color:
red} 
Przykład: Tekst 
{color: rgb(0,0,255)} 
Przykład: Tekst
</td>
</tr>
<tr>
<td valign="top">
background-color
</td>
<td valign="top">
Okre¶la
kolor tła
</td>
<td valign="top">
nazwa
koloru, 
warto¶ć hex
</td>
<td valign="top">
wszystkie
elementy
</td>
<td valign="top">
{background-color:
#FF5500}
</td>
</tr>
<tr>
<td valign="top">
background-image
</td>
<td valign="top">
Okre¶la
grafikę pełni±ca rolę tła
</td>
<td valign="top">
none, 
adres URL
</td>
<td valign="top">
wszystkie
elementy
</td>
<td valign="top">
{background-image:
url(tlo.gif)}
</td>
</tr>
<tr>
<td valign="top">
background-repeat
</td>
<td valign="top">
Okre¶la
powtrzalno¶ć tła
</td>
<td valign="top">
repeat, 
repeat-x, 
repeat-y, 
no-repeat
</td>
<td valign="top">
wszystkie
elementy
</td>
<td valign="top">
{background-repeat:
repeat-x}
</td>
</tr>
<tr>
<td valign="top">
background-attachment
</td>
<td valign="top">
Okre¶la
czy tło ma się przesuwać wraz z zawarto¶ci± (scroll) czy
ma być stałe (fixed)
</td>
<td valign="top">
scroll, 
fixed
</td>
<td valign="top">
wszystkie
elementy
</td>
<td valign="top">
{background-attachment:
scroll}
</td>
</tr>
<tr>
<td valign="top">
background-position
</td>
<td valign="top">
Okre¶la
pozycję pocz±tkow± tła
</td>
<td valign="top">
[top,
center, bottom], 
[left, center, right], 
procent, 
punkt (pt), 
inch (in), 
centymetr (cm), 
piksel (px)
</td>
<td valign="top">
elementy
będ±ce blokiem
</td>
<td valign="top">
{background-position:
100% 30%}
</td>
</tr>
<tr>
<td valign="top">
background
</td>
<td valign="top">
Zawiera
w sobie wszystkie wła¶ciwo¶ci dotycz±ce tła
</td>
<td valign="top">
background-color, 
background-image, 
background-repeat, 
background-attachment, 
background-position
</td>
<td valign="top">
wszystkie
elementy
</td>
<td valign="top">
{background:
red url(tlo.jpg) left top no-repeat}
</td>
</tr>
</tbody>
</table> 
 
2.3. Tekst 
 
<table rules="all" cellspacing="0" cellpadding="3" width="100%">
<tbody>
<tr style="color: #FFFFFF; background: #A90605; text-align: center">
<td>Wła¶ciwo¶ć</td>
<td>Opis</td>
<td>Warto¶ć</td>
<td>Odnosi się do</td>
<td>Przykład</td>
</tr>
<tr>
<td valign="top">
word-spacing
</td>
<td valign="top">
Okre¶la
odległo¶ć między wyrazami
</td>
<td valign="top">
normal, 
punkt (pt), 
inch (in), 
centymetr (cm), 
względem (em), 
piksel (px)
</td>
<td valign="top">
wszystkie
elementy
</td>
<td valign="top">
{word-spacing:
1.2em} 
Przykład: Tekst
</td>
</tr>
<tr>
<td valign="top">
letter-spacing
</td>
<td valign="top">
Okre¶la
odległo¶ć między literami
</td>
<td valign="top">
normal, 
punkt (pt), 
inch (in), 
centymetr (cm), 
względem (em), 
piksel (px)
</td>
<td valign="top">
wszystkie
elementy
</td>
<td valign="top">
{letter-spacing:
0.2em} 
Przykład: Tekst
</td>
</tr>
<tr>
<td valign="top">
text-decoration
</td>
<td valign="top">
Okre¶la
czy tekst ma być podkre¶lony, przekre¶lony, itd.
</td>
<td valign="top">
none, 
underline, 
overline, 
line-through, 
blink
</td>
<td valign="top">
wszystkie
elementy
</td>
<td valign="top">
{text-decoration:
line-through} 
Przykład: Tekst
</td>
</tr>
<tr>
<td valign="top">
vertical-align
</td>
<td valign="top">
Okre¶la
położenie tekstu w pionie względem elementu poprzedzaj±cego
</td>
<td valign="top">
baseline, 
sub, 
super, 
top, 
text-top, 
middle, 
bottom, 
procent
</td>
<td valign="top">
elementy
wewnętrzne
</td>
<td valign="top">
{vertical-align:
top}
</td>
</tr>
<tr>
<td valign="top">
text-transform
</td>
<td valign="top">
Okre¶la
sposób przemiany tekstu
</td>
<td valign="top">
capitalize, 
uppercase, 
lowercase, 
none
</td>
<td valign="top">
wszystkie
elementy
</td>
<td valign="top">
{text-transform:
uppercase} 
Przykład: Tekst
</td>
</tr>
<tr>
<td valign="top">
text-align
</td>
<td valign="top">
Okre¶la
położenie tekstu wewn±trz elementu
</td>
<td valign="top">
left, 
right, 
center, 
justify
</td>
<td valign="top">
elementy
będ±ce blokiem
</td>
<td valign="top">
{text-align:
center}
</td>
</tr>
<tr>
<td valign="top">
text-indent
</td>
<td valign="top">
Okre¶la
odległo¶ć od lewego marginesu
</td>
<td valign="top">
procent, 
punkt (pt), 
inch (in), 
centymetr (cm), 
względem (em), 
piksel (px)
</td>
<td valign="top">
elementy
będ±ce blokiem
</td>
<td valign="top">
{text-indent:
20%}
</td>
</tr>
<tr>
<td valign="top">
line-height
</td>
<td valign="top">
Okre¶la
odległo¶ć między dwoma s±siednimi liniami
</td>
<td valign="top">
normal, 
liczba, 
procent, 
punkt (pt), 
inch (in), 
centymetr (cm), 
względem (em), 
piksel (px)
</td>
<td valign="top">
wszystkie
elementy
</td>
<td valign="top">
{line-height:
120%}
</td>
</tr>
</tbody>
</table> 
 
2.4. Elementy kwadratowe 
 
<table rules="all" cellspacing="0" cellpadding="3" width="100%">
<tbody>
<tr style="color: #FFFFFF; background: #A90605; text-align: center">
<td>Wła¶ciwo¶ć</td>
<td>Opis</td>
<td>Warto¶ć</td>
<td>Odnosi się do</td>
<td>Przykład</td>
</tr>
<tr>
<td valign="top">
margin-top
</td>
<td valign="top">
Okre¶la
odległo¶ć od górnej krawędzi strony
</td>
<td valign="top">
auto, 
procent, 
punkt (pt), 
inch (in), 
centymetr (cm), 
względem (em), 
piksel (px)
</td>
<td valign="top">
wszystkie
elementy
</td>
<td valign="top">
{margin-top:
3em}
</td>
</tr>
<tr>
<td valign="top">
margin-right
</td>
<td valign="top">
Okre¶la
odległo¶ć od prawej krawędzi strony
</td>
<td valign="top">
auto, 
procent, 
punkt (pt), 
inch (in), 
centymetr (cm), 
względem (em), 
piksel (px)
</td>
<td valign="top">
wszystkie
elementy
</td>
<td valign="top">
{margin-right:
4px}
</td>
</tr>
<tr>
<td valign="top">
margin-bottom
</td>
<td valign="top">
Okre¶la
odległo¶ć od dolnej krawędzi strony
</td>
<td valign="top">
auto, 
procent, 
punkt (pt), 
inch (in), 
centymetr (cm), 
względem (em), 
piksel (px)
</td>
<td class="LEFT" valign="top">
wszystkie
elementy
</td>
<td valign="top">
{margin-bottom:
13%}
</td>
</tr>
<tr>
<td valign="top">
margin-left
</td>
<td valign="top">
Okre¶la
odległo¶ć od lewej krawędzi strony
</td>
<td valign="top">
auto, 
procent, 
punkt (pt), 
inch (in), 
centymetr (cm), 
względem (em), 
piksel (px)
</td>
<td valign="top">
wszystkie
elementy
</td>
<td valign="top">
{margin-left:
4em}
</td>
</tr>
<tr>
<td valign="top">
margin
</td>
<td valign="top">
Okre¶la
odległo¶ć od krawędzi strony według kolejno¶ci: górna, prawa,
dolna, lewa
</td>
<td valign="top">
auto, 
procent, 
punkt (pt), 
inch (in), 
centymetr (cm), 
względem (em), 
piksel (px)
</td>
<td valign="top">
wszystkie
elementy
</td>
<td valign="top">
{margin:
2em 3em 1em 4em}
</td>
</tr>
<tr>
<td valign="top">
padding-top
</td>
<td valign="top">
Okre¶la
górny odstęp elementu
</td>
<td valign="top">
procent, 
punkt (pt), 
inch (in), 
centymetr (cm), 
względem (em), 
piksel (px)
</td>
<td valign="top">
wszystkie
elementy
</td>
<td valign="top">
{padding-top:
0.2em}
</td>
</tr>
<tr>
<td valign="top">
padding-right
</td>
<td valign="top">
Okre¶la
prawy odstęp elementu
</td>
<td valign="top">
procent, 
punkt (pt), 
inch (in), 
centymetr (cm), 
względem (em), 
piksel (px)
</td>
<td valign="top">
wszystkie
elementy
</td>
<td valign="top">
{padding-right:
12px}
</td>
</tr>
<tr>
<td valign="top">
padding-bottom
</td>
<td valign="top">
Okre¶la
dolny odstęp elementu
</td>
<td valign="top">
procent, 
punkt (pt), 
inch (in), 
centymetr (cm), 
względem (em), 
piksel (px)
</td>
<td valign="top">
wszystkie
elementy
</td>
<td valign="top">
{padding-bottom:
0.4em}
</td>
</tr>
<tr>
<td valign="top">
padding-left
</td>
<td valign="top">
Okre¶la
lewy odstęp elementu
</td>
<td valign="top">
procent, 
punkt (pt), 
inch (in), 
centymetr (cm), 
względem (em), 
piksel (px)
</td>
<td valign="top">
wszystkie
elementy
</td>
<td valign="top">
{padding-left:
7%}
</td>
</tr>
<tr>
<td valign="top">
padding
</td>
<td valign="top">
Okre¶la
odstęp elementu według kolejno¶ci: górna, prawa, dolna, lewa
</td>
<td valign="top">
procent, 
punkt (pt), 
inch (in), 
centymetr (cm), 
względem (em), 
piksel (px)
</td>
<td valign="top">
wszystkie
elementy
</td>
<td valign="top">
{padding:
2em 1em 3em 4em}
</td>
</tr>
<tr>
<td valign="top">
border-top-width
</td>
<td valign="top">
Okre¶la
szeroko¶ć górnej granicy (ramki) elementu
</td>
<td valign="top">
thin, 
medium, 
thick, 
punkt (pt), 
inch (in), 
centymetr (cm), 
względem (em), 
piksel (px)
</td>
<td valign="top">
wszystkie
elementy
</td>
<td valign="top">
{border-top-width:
thin}
</td>
</tr>
<tr>
<td valign="top">
border-right-width
</td>
<td valign="top">
Okre¶la
szeroko¶ć prawej granicy (ramki) elementu
</td>
<td valign="top">
thin, 
medium, 
thick, 
punkt (pt), 
inch (in), 
centymetr (cm), 
względem (em), 
piksel (px)
</td>
<td valign="top">
wszystkie
elementy
</td>
<td valign="top">
{border-right-width:
medium}
</td>
</tr>
<tr>
<td valign="top">
border-bottom-width
</td>
<td valign="top">
Okre¶la
szeroko¶ć dolnej granicy (ramki) elementu
</td>
<td valign="top">
thin, 
medium, 
thick, 
punkt (pt), 
inch (in), 
centymetr (cm), 
względem (em), 
piksel (px)
</td>
<td valign="top">
wszystkie
elementy
</td>
<td valign="top">
{border-bottom-width:
thick}
</td>
</tr>
<tr>
<td valign="top">
border-left-width
</td>
<td valign="top">
Okre¶la
szeroko¶ć lewej granicy (ramki) elementu
</td>
<td valign="top">
thin, 
medium, 
thick, 
punkt (pt), 
inch (in), 
centymetr (cm), 
względem (em), 
piksel (px)
</td>
<td valign="top">
wszystkie
elementy
</td>
<td valign="top">
{border-left-width:
3px}
</td>
</tr>
<tr>
<td valign="top">
border-width
</td>
<td valign="top">
Okre¶la
szeroko¶ć granicy (ramki) elementu według kolejno¶ci: górna, prawa,
dolna, lewa
</td>
<td valign="top">
thin, 
medium, 
thick, 
punkt (pt), 
inch (in), 
centymetr (cm), 
względem (em), 
piksel (px)
</td>
<td valign="top">
wszystkie
elementy
</td>
<td valign="top">
{border-width:
thin thick medium thick}
</td>
</tr>
<tr>
<td valign="top">
border-color
</td>
<td valign="top">
Okre¶la
kolor granicy (ramki) elementu
</td>
<td valign="top">
nazwa
koloru, 
warto¶ć hex
</td>
<td valign="top">
wszystkie
elementy
</td>
<td valign="top">
{border-color:
red}
</td>
</tr>
<tr>
<td valign="top">
border-style
</td>
<td valign="top">
Okre¶la
styl granicy (ramki) elementu
</td>
<td valign="top">
none, 
dotted, 
dashed, 
solid, 
double, 
groove, 
ridge, 
inset, 
outset
</td>
<td valign="top">
wszystkie
elementy
</td>
<td valign="top">
{border-style:
double}
</td>
</tr>
<tr>
<td valign="top">
border-top
</td>
<td valign="top">
Okre¶la
szeroko¶ć, kolor i styl górnej granicy (ramki) elementu
</td>
<td valign="top">
border-top-width, 
border-style, 
color
</td>
<td valign="top">
wszystkie
elementy
</td>
<td valign="top">
{border-top:
thin blue solid}
</td>
</tr>
<tr>
<td valign="top">
border-right
</td>
<td valign="top">
Okre¶la
szeroko¶ć, kolor i styl prawej granicy (ramki) elementu
</td>
<td valign="top">
border-right-width, 
border-style, 
color
</td>
<td valign="top">
wszystkie
elementy
</td>
<td valign="top">
{border-right:
}
</td>
</tr>
<tr>
<td valign="top">
border-bottom
</td>
<td valign="top">
Okre¶la
szeroko¶ć, kolor i styl dolnej granicy (ramki) elementu
</td>
<td valign="top">
border-bottom-width, 
border-style, 
color
</td>
<td valign="top">
wszystkie
elementy
</td>
<td valign="top">
{border-bottom:
}
</td>
</tr>
<tr>
<td valign="top">
border-left
</td>
<td valign="top">
Okre¶la
szeroko¶ć, kolor i styl lewej granicy (ramki) elementu
</td>
<td valign="top">
border-left-width, 
border-style, 
color
</td>
<td valign="top">
wszystkie
elementy
</td>
<td valign="top">
{border-left:}
</td>
</tr>
<tr>
<td valign="top">
border
</td>
<td valign="top">
Okre¶la
szeroko¶ć, kolor i styl granicy (ramki) elementu według kolejno¶ci:
górna, prawa, dolna, lewa
</td>
<td valign="top">
border-width, 
border-style, 
color
</td>
<td valign="top">
wszystkie
elementy
</td>
<td valign="top">
{border:
}
</td>
</tr>
<tr>
<td valign="top">
width
</td>
<td valign="top">
Okre¶la
szeroko¶ć elementu (np. grafiki)
</td>
<td valign="top">
auto, 
procent, 
punkt (pt), 
inch (in), 
centymetr (cm), 
względem (em), 
piksel (px)
</td>
<td valign="top">
elementy
będ±ce blokiem
</td>
<td valign="top">
{width:
80px}
</td>
</tr>
<tr>
<td valign="top">
height
</td>
<td valign="top">
Okre¶la
wysoko¶ć elementu (np. grafiki)
</td>
<td valign="top">
auto, 
punkt (pt), 
inch (in), 
centymetr (cm), 
względem (em), 
piksel (px)
</td>
<td valign="top">
elementy
będ±ce blokiem
</td>
<td valign="top">
{height:
170px}
</td>
</tr>
<tr>
<td valign="top">
float
</td>
<td valign="top">

</td>
<td valign="top">
left, 
right, 
none
</td>
<td valign="top">
wszystkie
elementy
</td>
<td valign="top">
{float:
left}
</td>
</tr>
<tr>
<td valign="top">
clear
</td>
<td valign="top">

</td>
<td valign="top">
none, 
left, 
right, 
both
</td>
<td valign="top">
wszystkie
elementy
</td>
<td valign="top">
{clear:
right}
</td>
</tr>
</tbody>
</table> 
 
2.5. Klasyfikacja 
 
<table rules="all" cellspacing="0" cellpadding="3" width="100%">
<tbody>
<tr style="color: #FFFFFF; background: #A90605; text-align: center">
<td>Wła¶ciwo¶ć</td>
<td>Opis</td>
<td>Warto¶ć</td>
<td>Odnosi się do</td>
<td>Przykład</td>
</tr>
<tr>
<td valign="top">
display
</td>
<td valign="top">
Okre¶la
w jaki sposób dany element ma być wy¶wietlony
</td>
<td valign="top">
block, 
inline, 
list-item, 
none
</td>
<td valign="top">
wszystkie
elementy
</td>
<td valign="top">
{display:
none}
</td>
</tr>
<tr>
<td valign="top">
white-space
</td>
<td valign="top">
Okre¶la
w jaki sposób należy obchodzić się z odstępami wewn±trz elementu
</td>
<td valign="top">
normal, 
pre, 
nowarp
</td>
<td valign="top">
elementy
będ±ce blokiem
</td>
<td valign="top">
{white-space:
pre}
</td>
</tr>
<tr>
<td valign="top">
list-style-type
</td>
<td valign="top">

</td>
<td valign="top">
disc, 
circle, 
square, 
decimal, 
lower-roman, 
upper-roman, 
lower-alpha, 
upper-alpha, 
none
</td>
<td valign="top">
elementy
z display = list-item
</td>
<td valign="top">
{list-style-type:
lower-roman}
</td>
</tr>
<tr>
<td valign="top">
list-style-image
</td>
<td valign="top">

</td>
<td valign="top">
adres
URL, 
none
</td>
<td valign="top">
elementy
z display = list-item
</td>
<td valign="top">
{list-style-image:
url(rysunek.gif)}
</td>
</tr>
<tr>
<td valign="top">
list-style-position
</td>
<td valign="top">

</td>
<td valign="top">
inside, 
outside
</td>
<td valign="top">
elementy
z display = list-item
</td>
<td valign="top">
{list-style-position:
outside}
</td>
</tr>
<tr>
<td valign="top">
list-style
</td>
<td valign="top">

</td>
<td valign="top">
disc, 
circle, 
square, 
decimal, 
lower-roman, 
upper-roman, 
lower-alpha, 
upper-alpha, 
none, 
inside, 
outside, 
adres URL, 
none
</td>
<td valign="top">
elementy
z display = list-item
</td>
<td valign="top">
{list-style:
circle outside}
</td>
</tr>
</tbody>
</table>
</body>
</html>

Pozycjonowanie i porady dla początkujących webmasterów

#1 2010-04-11 21:58:51

Tabela cmsow

Stopka forum