 |
Pe│ny kurs HTML 4.01, XHTML 1.0 i CSS 2 z przyk│adami
autor: Dariusz Majgier •
ostatnia modyfikacja: 2002.06.10 • wersja kursu: 1.1
|
[0-9]
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
[g│≤wne menu] -
[elementy HTML] -
[atrybuty HTML] -
[style CSS] -
[artyku│y]
tabele •
listy •
formularze •
multimedia •
el. strukturalne •
el. blokowe •
el. liniowe
Kolory na stronie WWW
Ka┐da przegl▒darka stron WWW pozwala uzyskaµ na ekranie jednocze╢nie 256 r≤┐nych kolor≤w, jednak tylko 216 z nich poprawnie wy╢wietlaj▒ wszystkie przegl▒darki internetowe. U┐ywaj▒c "bezpiecznego" zestawu barw masz pewno╢µ, ┐e kolor zostanie pokazany tak samo w ka┐dym systemie operacyjnym (paleta 256 kolor≤w w systemie Windows nie odpowiada tym samym kolorom systemowym w komputerze Macintosh). Je┐eli u┐yjesz wiΩkszej ilo╢ci kolor≤w, mog▒ one zostaµ zamienione do podobnych kolor≤w z podstawowego zestawu barw, czyli wspomnianych, bezpiecznych 216 kolor≤w.
Dowolny kolor sk│ada siΩ z trzech kolor≤w podstawowych: czerwonego, zielonego i niebieskigo (red, green, blue - czyli RGB). Do dyspozycji mamy 256 odcieni ka┐dego z tych kolor≤w i poprzez ich mieszanie otrzymujemy dowolny inny kolor.
Kolor RGB zapisywany jest w postaci #RRGGBB, gdzie RR to zapisany szesnastkowo (heksadecymalnie) kolor czerwony (red), GG to kolor zielony (green), a BB to kolor niebieski (blue). Oznacza to, ┐e ka┐dy kolor mo┐e przyjmowaµ warto╢ci od 00 do FF. W stylach CSS pojawia siΩ jeszcze zapis dziesiΩtny koloru RGB w postaci rgb(RR,GG,BB), gdzie ka┐da sk│adowa mo┐e przyjmowaµ warto╢ci od 0 do 255. Bezpieczne kolory operuj▒ wielokrotno╢ci▒ liczby 33 w systemie szesnastkowym (00, 33, 66, 99, CC, FF) i 51 w systemie dziesiΩtnym (0, 51, 102, 153, 204, 255).
Mo┐na te┐ u┐ywaµ nazw kolor≤w. Podstawowe 16 okre╢le± pochodzi od nazw kolor≤w, kt≤re mo┐na by│o uzyskaµ na komputerach z kart▒ graficzn▒ VGA (komputery pokazywa│y kiedy╢ tylko 16 kolor≤w): white (kolor bia│y - #FFFFFF), black (kolor czarny - #000000), green, blue, fuchsia, yellow, lime, olive, purple, teal, silver, red, navy, maroon, gray, aqua.
Ostatecznie zwiΩkszono jednak liczbΩ dostΩpnych nazw kolor≤w do 140. Tabela na ko±cu tekstu prezentuje wszystkie dostΩpne nazwy. Nale┐y jednak pamiΩtaµ, ┐e nie w pe│ni odpowiadaj▒ one bezpiecznej palecie, np. zapis szesnastkowy koloru maroon to #800000 (nie ma takiego w tablicy bezpiecznych kolor≤w!).
Mo┐na nie zwracaµ uwagi na t▒ r≤┐nicΩ je╢li umieszczamy tylko zielony napis lub zielon▒ tabelΩ. Wtedy nawet lepiej jest stosowaµ nazwy, bo nie trzeba zastanawiaµ siΩ, jak zapisaµ kolor zielony za pomoc▒ #RRGGBB. Informacja ta zaczyna nabieraµ znaczenia wy│▒cznie przy │▒czeniu bitmapy (GIF, JPEG) z kolorami na stronie WWW wprowadzonymi np. takimi instrukcjami:
color:#00ff66; - ustala kolor czcionki za pomoc▒ stylu
background-color:#00ff66; - ustala kolor t│a za pomoc▒ stylu
<font color="#33ff22"> - ustala kolor czcionki
<tr bgcolor="blue"> - ustawia kolor rzΩdu kom≤rek w tabeli
<td bgcolor="#cc9966"> - ustawia kolor kom≤rki w tabeli
<body bgcolor="white"> - ustawia kolor t│a strony
Grupa element≤w wykorzystuj▒cych kolory:
BASEFONT,
BODY,
FONT,
TABLE,
TD,
TH,
TR
Grupa atrybut≤w wykorzystuj▒cych kolory:
alink,
bgcolor,
color,
link,
text,
vlink
Grupa styl≤w wykorzystuj▒cych kolory:
active,
background-color,
border-bottom-color,
border-color,
border-left-color,
border-right-color,
border-top-color,
color,
link,
outline,
visited
Obecnie nie zaleca siΩ stosowania atrybut≤w HTML. Powinno siΩ je zamieniaµ na style CSS. W stylach, w miejsce #RRGGBB mo┐na wpisaµ kolor w postaci szesnastkowej (np. #CCFFCC), nazwy angielskiej (np. maroon) lub warto╢ci RGB - rgb(20,20,99). Oto odpowiedniki:
• alink - A:active {color:#RRGGBB;}
• bgcolor - background-color:#RRGGBB;
• color - color:#RRGGBB;
• link - A:link {color:#RRGGBB;}
• text - color:#RRGGBB;
• vlink - A:visited {color:#RRGGBB;}
Projektuj▒c wygl▒d strony, warto zwr≤ciµ uwagΩ na dob≤r kolor≤w. W Internecie dostΩpne s▒ serwisy wspomagaj▒ce dobieranie kolor≤w i projektowanie bezpiecznych zestaw≤w barwnych dla tabel, link≤w, tekstu czy t│a. Szczeg≤lnie polecam dwa: WebReporter Kolory - rozbudowany kreator kolor≤w i ColorSchemer - do dob≤ru kolor≤w wsp≤│graj▒cych ze sob▒.
zestawienie 216 "bezpiecznych" kolor≤w (HEX/RGB)
#FF0000
255 0 0 | #FF0033
255 0 51 |
#FF0066
255 0 102 | #FF0099
255 0 153 |
#FF00CC
255 0 204 | #FF00FF
255 0 155 |
#FF3300
255 51 0 | #FF3333
255 51 51 |
#FF3366
255 51 102 | #FF3399
255 51 153 |
#FF33CC
255 51 204 | #FF33FF
255 51 255 |
#FF6600
255 102 0 | #FF6633
255 102 51 |
#FF6666
255 102 102 | #FF6699
255 102 153 |
#FF66CC
255 102 204 | #FF66FF
255 102 255 |
#FF9900
255 153 0 | #FF9933
255 153 51 |
#FF9966
255 153 102 | #FF9999
255 153 153 |
#FF99CC
255 153 204 | #FF99FF
255 153 255 |
#FFCC00
255 204 0 | #FFCC33
255 204 51 |
#FFCC66
255 204 102 | #FFCC99
255 204 153 |
#FFCCCC
255 204 204 | #FFCCFF
255 204 255 |
#FFFF00
255 255 0 | #FFFF33
255 255 51 |
#FFFF66
255 255 102 | #FFFF99
255 255 153 |
#FFFFCC
255 255 204 | #FFFFFF
255 255 255 |
#CC0000
204 0 0 | #CC0033
204 0 51 |
#CC0066
204 0 102 | #CC0099
204 0 153 |
#CC00CC
204 0 204 | #CC00FF
204 0 255 |
#CC3300
204 51 0 | #CC3333
204 51 51 |
#CC3366
204 51 102 | #CC3399
204 51 153 |
#CC33CC
204 51 204 | #CC33FF
204 51 255 |
#CC6600
204 102 0 | #CC6633
204 102 51 |
#CC6666
204 102 102 | #CC6699
204 102 153 |
#CC66CC
204 102 204 | #CC66FF
204 102 255 |
#CC9900
204 153 0 | #CC9933
204 153 0 |
#CC9966
204 153 102 | #CC9999
204 153 153 |
#CC99CC
204 153 204 | #CC99FF
204 153 255 |
#CCCC00
204 204 0 | #CCCC33
204 204 51 |
#CCCC66
204 204 102 | #CCCC99
204 204 153 |
#CCCCCC
204 204 204 | #CCCCFF
204 204 255 |
#CCFF00
204 255 0 | #CCFF33
204 255 51 |
#CCFF66
204 255 102 | #CCFF99
204 255 153 |
#CCFFCC
204 255 204 | #CCFFFF
204 255 255 |
#990000
153 0 0 | #990033
153 0 51 |
#990066
153 0 102 | #990099
153 0 153 |
#9900CC
153 0 204 | #9900FF
153 0 255 |
#993300
153 51 0 | #993333
153 51 51 |
#993366
153 51 102 | #993399
153 51 153 |
#9933CC
153 51 204 | #9933FF
153 51 255 |
#996600
153 102 0 | #996633
153 102 51 |
#996666
153 102 102 | #996699
153 102 153 |
#9966CC
153 102 204 | #9966FF
153 102 255 |
#999900
153 153 0 | #999933
153 153 51 |
#999966
153 153 102 | #999999
153 153 153 |
#9999CC
153 153 204 | #9999FF
153 153 255 |
#99CC00
153 204 0 | #99CC33
153 204 51 |
#99CC66
153 204 102 | #99CC99
153 204 153 |
#99CCCC
153 204 204 | #99CCFF
153 204 255 |
#99FF00
153 255 0 | #99FF33
153 255 51 |
#99FF66
153 255 102 | #99FF99
153 255 153 |
#99FFCC
153 255 204 | #99FFFF
153 255 255 |
#660000
102 0 0 | #660033
102 0 51 |
#660066
102 0 102 | #660099
102 0 153 |
#6600CC
102 0 204 | #6600FF
102 0 255 |
#663300
102 51 0 | #663333
102 51 51 |
#663366
102 51 102 | #663399
102 51 153 |
#6633CC
102 51 204 | #6633FF
102 51 255 |
#666600
102 102 0 | #666633
102 102 51 |
#666666
102 102 102 | #666699
102 102 153 |
#6666CC
102 102 204 | #6666FF
102 102 255 |
#669900
102 153 0 | #669933
102 153 51 |
#669966
102 153 102 | #669999
102 153 153 |
#6699CC
102 153 204 | #6699FF
102 153 255 |
#66CC00
102 204 0 | #66CC33
102 204 51 |
#66CC66
102 204 102 | #66CC99
102 204 153 |
#66CCCC
102 204 204 | #66CCFF
102 204 255 |
#66FF00
102 255 0 | #66FF33
102 255 51 |
#66FF66
102 255 102 | #66FF99
102 255 153 |
#66FFCC
102 255 204 | #66FFFF
102 255 255 |
#330000
51 0 0 |
#330033
51 0 51 |
#330066
51 0 102 |
#330099
51 0 153 |
#3300CC
51 0 204 |
#3300FF
51 0 255 |
#333300
51 51 0 | #333333
51 51 51 |
#333366
51 51 102 | #333399
51 51 153 |
#3333CC
51 51 204 | #3333FF
51 51 255 |
#336600
51 102 0 | #336633
51 102 51 |
#336666
51 102 102 | #336699
51 102 153 |
#3366CC
51 102 204 | #3366FF
51 102 255 |
#339900
51 153 0 | #339933
51 153 51 |
#339966
51 153 102 | #339999
51 153 153 |
#3399CC
51 153 204 | #3399FF
51 153 255 |
#33CC00
51 204 0 | #33CC33
51 204 51 |
#33CC66
51 204 102 | #33CC99
51 204 153 |
#33CCCC
51 204 204 | #33CCFF
51 204 255 |
#33FF00
51 255 0 | #33FF33
51 255 51 |
#33FF66
51 255 102 | #33FF99
51 255 153 |
#33FFCC
51 255 204 | #33FFFF
51 255 255 |
#000000
0 0 0 |
#000033
0 0 51 |
#000066
0 0 102 |
#000099
0 0 153 |
#0000CC
0 0 204 |
#0000FF
0 0 255 |
#003300
0 51 0 | #003333
0 51 51 |
#003366
0 51 102 | #003399
0 51 153 |
#0033CC
0 51 204 | #0033FF
0 51 255 |
#006600
0 102 0 | #006633
0 102 51 |
#006666
0 102 102 | #006699
0 102 153 |
#0066CC
0 102 204 | #0066FF
0 102 255 |
#009900
0 153 0 | #009933
0 153 51 |
#009966
0 153 102 | #009999
0 153 153 |
#0099CC
0 153 204 | #0099FF
0 153 255 |
#00CC00
0 204 0 | #00CC33
0 204 51 |
#00CC66
0 204 102 | #00CC99
0 204 153 |
#00CCCC
0 204 204 | #00CCFF
0 204 255 |
#00FF00
0 255 0 | #00FF33
0 255 51 |
#00FF66
0 255 102 | #00FF99
0 255 153 |
#00FFCC
0 255 204 | #00FFFF
0 255 255 |
zestawienie nazw kolor≤w (nie s▒ to kolory "bezpieczne"):
(pogrubionych zosta│o 16 podstawowych nazw)
| nazwa koloru | HEX | RGB | kolor |
| AliceBlue | #F0F8FF | rgb(240,248,255) | |
| AntiqueWhite | #FAEBD7 | rgb(250,235,215) | |
| Aqua | #00FFFF | rgb(0,255,255) | |
| Aquamarine | #7FFFD4 | rgb(127,255,212) | |
| Azure | #F0FFFF | rgb(240,255,255) | |
| Beige | #F5F5DC | rgb(245,245,220) | |
| Bisque | #FFE4C4 | rgb(255,228,196) | |
| Black | #000000 | rgb(0,0,0) | |
| BlanchedAlmond | #FFEBCD | rgb(255,235,205) | |
| Blue | #0000FF | rgb(0,0,255) | |
| BlueViolet | #8A2BE2 | rgb(138,43,226) | |
| Brown | #A52A2A | rgb(165,42,42) | |
| Burlywood | #DEB887 | rgb(222,184,135) | |
| CadetBlue | #5F9EA0 | rgb(95,158,160) | |
| Chartreuse | #7FFF00 | rgb(127,255,0) | |
| Chocolate | #D2691E | rgb(210,105,30) | |
| Coral | #FF7F50 | rgb(255,127,80) | |
| CornflowerBlue | #6495ED | rgb(100,149,237) | |
| Cornsilk | #FFF8DC | rgb(255,248,220) | |
| Crimson | #DC143C | rgb(220,20,60) | |
| Cyan | #00FFFF | rgb(0,255,255) | |
| DarkBlue | #00008B | rgb(0,0,139) | |
| DarkCyan | #008B8B | rgb(0,139,139) | |
| DarkGoldenrod | #B8860B | rgb(184,134,11) | |
| DarkGray | #A9A9A9 | rgb(169,169,169) | |
| DarkGreen | #006400 | rgb(0,100,0) | |
| DarkKhaki | #BDB76B | rgb(189,183,107) | |
| DarkMagenta | #8B008B | rgb(139,0,139) | |
| DarkOliveGreen | #556B2F | rgb(85,107,47) | |
| DarkOrange | #FF8C00 | rgb(255,140,0) | |
| DarkOrchid | #9932CC | rgb(153,50,204) | |
| DarkRed | #8B0000 | rgb(139,0,0) | |
| DarkSalmon | #E9967A | rgb(233,150,122) | |
| DarkSeaGreen | #8FBC8F | rgb(143,188,143) | |
| DarkSlateBlue | #483D8B | rgb(72,61,139) | |
| DarkSlateGray | #2F4F4F | rgb(47,79,79) | |
| DarkTurquoise | #00CED1 | rgb(0,206,209) | |
| DarkViolet | #9400D3 | rgb(148,0,211) | |
| DeepPink | #FF1493 | rgb(255,20,147) | |
| DeepSkyBlue | #00BFBF | rgb(0,191,191) | |
| DimGrey | #696969 | rgb(105,105,105) | |
| DodgerBlue | #1E90FF | rgb(30,144,255) | |
| Firebrick | #B22222 | rgb(178,34,34) | |
| FloralWhite | #FFFAF0 | rgb(255,250,240) | |
| ForestGreen | #228B22 | rgb(34,139,34) | |
| Fuchsia | #FF00FF | rgb(255,0,255) | |
| Gainsboro | #DCDCDC | rgb(220,220,220) | |
| GhostWhite | #F8F8FF | rgb(248,248,255) | |
| Gold | #FFD700 | rgb(255,215,0) | |
| Goldenrod | #DAA520 | rgb(218,165,32) | |
| Green | #008000 | rgb(0,128,0) | |
| GreenYellow | #ADFF2F | rgb(173,255,47) | |
| Gray | #808080 | rgb(128,128,128) | |
| Honeydew | #F0FFF0 | rgb(240,255,240) | |
| HotPink | #FF69B4 | rgb(255,105,180) | |
| IndianRed | #CD5C5C | rgb(205,92,92) | |
| Indigo | #4B0082 | rgb(75,0,130) | |
| Ivory | #FFFFF0 | rgb(255,255,240) | |
| Khaki | #F0E68C | rgb(240,230,140) | |
| Lavender | #E6E6FA | rgb(230,230,250) | |
| LavenderBlush | #FFF0F5 | rgb(255,240,245) | |
| LawnGreen | #7CFC00 | rgb(124,252,0) | |
| LemonChiffon | #FFFACD | rgb(255,250,205) | |
| LightBlue | #ADD8E6 | rgb(173,216,230) | |
| LightCoral | #F08080 | rgb(240,128,128) | |
| LightCyan | #E0FFFF | rgb(224,255,255) | |
| LightGoldenrodYellow | #FAFAD2 | rgb(250,250,210) | |
| LightGreen | #90EE90 | rgb(144,238,144) | |
| LightGray | #D3D3D3 | rgb(211,211,211) | |
| LightPink | #FFB6C1 | rgb(255,182,193) | |
| LightSalmon | #FFA07A | rgb(255,160,122) | |
| LightSeaGreen | #20B2AA | rgb(32,178,170) | |
| LightSkyBlue | #87CEFA | rgb(135,206,250) | |
| LightSlateGray | #778899 | rgb(119,136,153) | |
| LightSteelBlue | #B0C4DE | rgb(176,196,222) | |
| LightYellow | #FFFFE0 | rgb(255,255,224) | |
| Lime | #00FF00 | rgb(0,255,0) | |
| LimeGreen | #32CD32 | rgb(50,205,50) | |
| Linen | #FAF0E6 | rgb(250,240,230) | |
| Magenta | #FF00FF | rgb(255,0,255) | |
| Maroon | #800000 | rgb(128,0,0) | |
| MediumAquamarine | #66CDAA | rgb(102,205,170) | |
| MediumBlue | #0000CD | rgb(0,0,205) | |
| MediumOrchid | #BA55D3 | rgb(186,85,211) | |
| MediumPurple | #9370DB | rgb(147,112,219) | |
| MediumSeaGreen | #3CB371 | rgb(60,179,113) | |
| MediumSlateBlue | #7B68EE | rgb(123,104,238) | |
| MediumSpringGreen | #00FA9A | rgb(0,250,154) | |
| MediumTurquoise | #48D1CC | rgb(72,209,204) | |
| MediumVioletRed | #C71585 | rgb(199,21,133) | |
| MidnightBlue | #191970 | rgb(25,25,112) | |
| MintCream | #F5FFFA | rgb(245,255,250) | |
| MistyRose | #FFE4E1 | rgb(255,228,225) | |
| Moccasin | #FFE4B5 | rgb(255,228,181) | |
| NavajoWhite | #FFDEAD | rgb(255,222,173) | |
| Navy | #000080 | rgb(0,0,128) | |
| OldLace | #FDF5E6 | rgb(253,245,230) | |
| Olive | #808000 | rgb(128,128,0) | |
| OliveDrab | #6B8E23 | rgb(107,142,35) | |
| Orange | #FFA500 | rgb(255,165,0) | |
| OrangeRed | #FF4500 | rgb(255,69,0) | |
| Orchid | #DA70D6 | rgb(218,112,214) | |
| PaleGoldenrod | #EEE8AA | rgb(238,232,170) | |
| PaleGreen | #98FB98 | rgb(152,251,152) | |
| PaleTurquoise | #AFEEEE | rgb(175,238,238) | |
| PaleVioletRed | #DB7093 | rgb(219,112,147) | |
| PapayaWhip | #FFEFD5 | rgb(255,239,213) | |
| PeachPuff | #FFDAB9 | rgb(255,218,185) | |
| Peru | #CD853F | rgb(205,133,63) | |
| Pink | #FFC0CB | rgb(255,192,203) | |
| Plum | #DDA0DD | rgb(221,160,221) | |
| PowderBlue | #B0E0E6 | rgb(176,224,230) | |
| Purple | #800080 | rgb(128,0,0) | |
| Red | #FF0000 | rgb(255,0,0) | |
| RosyBrown | #BC8F8F | rgb(188,143,143) | |
| RoyalBlue | #4169E1 | rgb(65,105,225) | |
| SaddleBrown | #8B4513 | rgb(139,69,19) | |
| Salmon | #FA8072 | rgb(250,128,114) | |
| SandyBrown | #F4A460 | rgb(244,164,96) | |
| SeaGreen | #2E8B57 | rgb(46,139,87) | |
| Seashell | #FFF5EE | rgb(255,245,238) | |
| Sienna | #A0522D | rgb(160,82,45) | |
| Silver | #C0C0C0 | rgb(192,192,192) | |
| SkyBlue | #87CEEB | rgb(135,206,235) | |
| SlateBlue | #6A5ACD | rgb(106,90,205) | |
| SlateGrey | #708090 | rgb(112,128,144) | |
| Snow | #FFFAFA | rgb(255,250,250) | |
| SpringGreen | #00FF7F | rgb(0,255,127) | |
| SteelBlue | #4682B4 | rgb(70,130,180) | |
| Tan | #D2B48C | rgb(210,180,140) | |
| Teal | #008080 | rgb(0,128,128) | |
| Thistle | #D8BFD8 | rgb(216,191,216) | |
| Tomato | #FF6347 | rgb(255,99,71) | |
| Turquoise | #40E0D0 | rgb(64,224,208) | |
| Violet | #EE82EE | rgb(238,130,238) | |
| Wheat | #F5DEB3 | rgb(245,222,179) | |
| White | #FFFFFF | rgb(255,255,255) | |
| WhiteSmoke | #F5F5F5 | rgb(245,245,245) | |
| Yellow | #FFFF00 | rgb(255,255,0) | |
| YellowGreen | #9ACD32 | rgb(154,205,50) | |
• • •
Masz jakie╢ pytania? Podyskutuj na forum dyskusyjnym o HTML i CSS!
|
