·ð http://www.signs.pl/html/index.php
·ð http://xhtml.miniserwis.pl/naglowek-html.html
przykladowa strona html/css
·ð http://stackoverflow.com/questions/2229094/css-is-it-possible-to-split-up-a-li-element
·ð http://htmldog.com/articles/suckerfish/dropdowns/
Komentarze
·ð HTML

·ð CSS
/* komentarz wieloliniowy */
// komentarz jednoliniowy








Polskie znaki :

Link do stylu css:





IMG


Selektor wszystkich znacznikow:
*
{
margin: 0;
padding: 0;
}
Selektor potomka
przodek1 przodek2 potomek { cecha: wartość }
p b { color: red }

to jestczerwony napis w akapicie

=> to jest czerwony napis w akapicie
Grupowanie selektorow
selektor1, selektor2, selektor3... { cecha: wartość }
h1, h2, h3 {color: #c00000;}
Taka deklaracja stylu pozwala nadać te same wartości atrybutów kilku różnym selektorom jednocześnie (bez względu na ich położenie
w hierarchii drzewa dokumentu).
CSS w html u
·ð

...

·ð

Body selektor:
body
{
margin: 0;
padding: 0;
background: #CCC;
color: #000;
font-size: 80%;
font-family: "arial";
}
padding: 18px 0 0 25px;
Deklaracja ta odpowiada regule określania odstępów zgodnie z ruchem wskazówek
.myclass {
padding: 20px; } //wszystkie strony(gora, dol , lewa ,prawa) majÄ… 20px
.myclass {
padding: 20px 10px; } //20 px ma gora i dół, 10px lewa i prawa
.myclass {
padding: 5px 0 10px 15px; } 5px- gora, 0 px-prawa, 10px-dol, 15px lewa
Hyperlink - przyklady
a {
color: #c00000;
text-decoration: underline;
font-weight: bold;}
a:visited {
color: #c0c0c0;
text-decoration: none;
font-weight: bold;}
#sidebar a {
color: #4baee9;
text-decoration: none;
font-weight: bold;}
#sidebar a:hover {
color: #f8c032;
text-decoration: underline;
font-weight: bold;}
#footer a {
color: #ff4040;
text-decoration: none;
 font-weight: normal;}
#footer a:hover {
color: #4040ff;
text-decoration: none;
font-weight: normal;}
Czcionka
h1 {
font-weight: bold;
font-size: 22px;
font-family: Georgia, "Times New Roman", serif; }
p {
font: 12px/20px Verdana, Arial, sans-serif; }
font-family : Określa typ czcionki
{font-family: Arial}
p
{
font-family:"Times New Roman",Georgia,Serif;
}
font-style Określa styl czcionki
normal,
italic,
oblique
p{font-style: italic}
font-variant
normal,
small-caps
font-weight Określa grubość czcionki
normal,
bold,
bolder,
lighter,
100, 200, 300, 400, 500, 600, 700, 800, 900
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)
font Zawiera w sobie wszystkie właściwości dotyczące czcionki
font-family,
font-size,
font-variant,
font-weight,
font-size
{font: 12pt sans-serif bold italic}
Kolor i tło
color Określa kolor czcionki
nazwa koloru,
wartość hex wszystkie elementy
{color: red}
background-color Określa kolor tła
nazwa koloru,
wartość hex
{background-color: #FF5500}
background-image Określa grafikę pełniąca rolę tła
none,
adres URL
{background-image: url(tlo.gif)}
background-repeat Określa powtrzalność tła
repeat,
repeat-x,
repeat-y,
no-repeat
{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
{background-attachment: scroll}
background-position Określa pozycję początkową tła elementy będące blokiem
[top, center, bottom],
[left, center, right],
procent,
punkt (pt),
inch (in),
centymetr (cm),
piksel (px)
{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
{background: red url(tlo.jpg) left top no-repeat}
background: #FFF url('../images/background-main.png') repeat-y;
Tekst
word-spacing Określa odległość między wyrazami
normal,
punkt (pt),
inch (in),
centymetr (cm),
względem (em),
piksel (px)
{word-spacing: 1.2em}
letter-spacing Określa odległość między literami
normal,
punkt (pt),
inch (in),
centymetr (cm),
względem (em),
piksel (px)
{letter-spacing: 0.2em}
letter-spacing: -2px;
text-decoration Określa czy tekst ma być podkreślony, przekreślony, itd.
none,
underline,
overline,
line-through,
blink
{text-decoration: line-through}
vertical-align Określa położenie tekstu w pionie względem elementu poprzedzającego (elementy wewnętrzne)
baseline,
sub,
super,
top,
text-top,
middle,
bottom,
procent
{vertical-align: top}
text-transform Określa sposób przemiany tekstu
capitalize,
uppercase,
lowercase,
none
{text-transform: uppercase}
text-align Określa położenie tekstu wewnątrz elementu - elementy będące blokiem
left,
right,
center,
justify
{text-align: center}
text-indent Określa odległość od lewego marginesu - elementy będące blokiem
procent,
punkt (pt),
inch (in),
centymetr (cm),
względem (em),
piksel (px)
{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)
{line-height: 120%}
Elementy kwadratowe
Przykłady
#wrapper {
width: 900px;
text-align: left;
margin: 0 auto;}
#sidebar {
font-size: 85%;
float: left;
width: 270px;
padding: 10px 30px 0 0;}
#content {
float: right;
width: 600px;
line-height: 1.5em;
padding: 10px 0 0 0;}
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)
{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)
{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)
{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)
{margin-left: 4em}
margin Określa odległość od krawędzi strony według kolejności: górna, prawa, dolna, lewa
przykład
.blok{ margin: 18px 0 0 25px;) 18 gora , 0 prawa, 0 dolna, 25 lewa
Jeśli są podane 2 wartosci to 1sza okresla :gora ,dol a 2ga okresla : lewa ,prawa.
Przykład
.blok{ margin: 18px 0;) 18 gora i dol, 0 prawa i lewa
auto,
procent,
punkt (pt),
inch (in),
centymetr (cm),
względem (em),
piksel (px)
{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)
{padding-top: 0.2em}
padding-right Określa prawy odstęp elementu
procent,
punkt (pt),
inch (in),
centymetr (cm),
względem (em),
piksel (px)
{padding-right: 12px}
padding-bottom Określa dolny odstęp elementu
procent,
punkt (pt),
inch (in),
centymetr (cm),
względem (em),
piksel (px)
{padding-bottom: 0.4em}
padding-left Określa lewy odstęp elementu
procent,
punkt (pt),
inch (in),
centymetr (cm),
względem (em),
piksel (px)
{padding-left: 7%}
padding Określa odstęp elementu według kolejności: górna, prawa, dolna, lewa
przykład
{padding: 2em 1em 3em 4em}
.blok{ padding: 18px 0 0 25px;) 18 gora , 0 prawa, 0 dolna, 25 lewa
Jeśli są podane 2 wartosci to 1sza okresla :gora ,dol a 2ga okresla : lewa ,prawa.
Przykład
.blok{ padding: 18px 0;) 18 gora i dol, 0 prawa i lewa
procent,
punkt (pt),
inch (in),
centymetr (cm),
względem (em),
piksel (px)
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)
przykład
{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)
przykład
{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)
przykład
{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)
przykład
{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)
przykład
{border-width: thin thick medium thick}
border-color Określa kolor granicy (ramki) elementu
nazwa koloru,
wartość hex
przykład
{border-color: red}
border-style Określa styl granicy (ramki) elementu
none,
dotted,
dashed,
solid,
double,
groove,
ridge,
inset,
outset
przykład
{border-style: double}
border-top Określa szerokość, kolor i styl górnej granicy (ramki) elementu
border-top-width,
border-style,
color
{border-top: thin blue solid}
border-right Określa szerokość, kolor i styl prawej granicy (ramki) elementu
border-right-width,
border-style,
color
{border-right: }
border-bottom Określa szerokość, kolor i styl dolnej granicy (ramki) elementu
border-bottom-width,
border-style,
color
{border-bottom: }
border-left Określa szerokość, kolor i styl lewej granicy (ramki) elementu
border-left-width,
border-style,
color
{ border-left: 3px solid #FC0;}
border Określa szerokość, kolor i styl granicy (ramki) elementu według kolejności: górna, prawa, dolna, lewa
border-width,
border-style,
color
{border: 1px solid #CCC;}
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}
Klasyfikacja
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}