Wykaz tabel CSS
W tym rozdziale znajdziesz wykaz wszystkich tabel znajdujących się w kategorii CSS. Aby sprawdzić bardziej szczegółowy opis, kliknij odnośnik "Zobacz więcej..." pod wybraną grupą tabel.
Selektory pseudoelementów CSS
Znaki cudzysłowów {content: open-quote close-quote}
| Znak | Kod | Nazwa |
|---|---|---|
| " | "\0022" | Cudzysłów (podwójny znak cudzysłowu ASCII) |
| ' | "\0027" | Apostrof (pojedynczy znak cudzysłowu ASCII) |
| ‹ | "\2039" | Pojedynczy lewy cudzysłów ostrokątny |
| › | "\203A" | Pojedynczy prawy cudzysłów ostrokątny |
| « | "\00AB" | Podwójny lewy cudzysłów ostrokątny |
| » | "\00BB" | Podwójny prawy cudzysłów ostrokątny |
| ‘ | "\2018" | Lewy pojedynczy cudzysłów (górne "6") |
| ’ | "\2019" | Prawy pojedynczy cudzysłów (górne "9") |
| “ | "\201C" | Lewy podwójny cudzysłów (górne "66") |
| ” | "\201D" | Prawy podwójny cudzysłów (górne "99") |
| „ | "\201E" | Podwójny dolny cudzysłów (dolne "99") |
| ‚ | "\201A" | Pojedynczy dolny cudzysłów (dolne "9") |
Źródło: Cascading Style Sheets, Level 2
Czcionki CSS
Czcionki osadzone @font-face
| Format | Opis | Rozszerzenie |
|---|---|---|
| "truedoc-pfr" | TrueDoc™ Portable Font Resource | *.pfr |
| "embedded-opentype" | Embedded OpenType | *.eot |
| "type-1" | PostScript™ Type 1 | *.pfb, *.pfa |
| "truetype" | TrueType | *.ttf |
| "opentype" | OpenType, włącznie z TrueType Open | *.ttf |
| "truetype-gx" | TrueType z rozszerzeniem GX | |
| "speedo" | Speedo | |
| "intellifont" | Intellifont |
Źródło: Cascading Style Sheets, Level 2
Drukowanie CSS
Rozmiar papieru @page {size}
| Format | Szerokość | Wysokość |
|---|---|---|
| A5 | 148mm | 210mm |
| A4 | 210mm | 297mm |
| A3 | 297mm | 420mm |
| B5 | 176mm | 250mm |
| B4 | 250mm | 353mm |
| JIS-B5 | 82mm | 257mm |
| JIS-B4 | 257mm | 364mm |
| letter | 8.5in | 11in |
| legal | 8.5in | 14in |
| ledger | 11in | 17in |
Media CSS
Grupy mediów
| Typy mediów | Grupy mediów | |||
|---|---|---|---|---|
| continuous / paged | visual / aural / tactile | grid / bitmap | interactive / static | |
| aural | continuous | aural | - | + |
| braille | continuous | tactile | grid | + |
| emboss | paged | tactile | grid | + |
| handheld | + | visual | + | + |
| paged | visual | bitmap | static | |
| projection | paged | visual | bitmap | static |
| screen | continuous | visual | bitmap | + |
| tty | continuous | visual | grid | + |
| tv | + | visual, aural | bitmap | + |
Źródło: Cascading Style Sheets, Level 2
Kolory CSS
Wykaz kolorów systemowych
| Kolor | Definicja | Nazwa | Objaśnienie |
|---|---|---|---|
| ActiveBorder | Active window border | Obramowanie aktywnego okna | |
| ActiveCaption | Active window caption | Nagłówek aktywnego okna | |
| AppWorkspace | Background color of multiple document interface | Kolor tła wielodokumentowego interfejsu (MDI) | |
| Background | Desktop background | Tło pulpitu | |
| ButtonFace | Face color for three-dimensional display elements | Powierzchnia czołowa trójwymiarowych elementów | |
| ButtonHighlight | Dark shadow for three-dimensional display elements (for edges facing away from the light source). Shadow color for three-dimensional display elements | Cień trójwymiarowych elementów (krawędzie oddalone od światła) | |
| ButtonShadow | Shadow color for three-dimensional display elements | Kolor cienia trójwymiarowych elementów | |
| ButtonText | Text on push buttons | Tekst na przyciskach | |
| CaptionText | Text in caption, size box, and scroll bar arrow box | Tekst w nagłówkach, polach zmiany rozmiaru i polach przewijania zawartości | |
| GrayText | Grayed (disabled) text. This color is set to #000 if the current display driver does not support a solid gray color | Kolor tekstu na zablokowanych elementach | |
| Highlight | Item(s) selected in a control | Wybrana pozycja | |
| HighlightText | Text of item(s) selected in a control | Tekst wybranej pozycji | |
| InactiveBorder | Inactive window border | Obramowanie nieaktywnego okna | |
| InactiveCaption | Inactive window caption | Nagłówek nieaktywnego okna | |
| InactiveCaptionText | Color of text in an inactive caption | Kolor tekstu w nagłówku nieaktywnego okna | |
| InfoBackground | Background color for tooltip controls | Tło w informacji narzędziowej ("dymku", który pojawia się po wskazaniu elementu myszką) | |
| InfoText | Text color for tooltip controls | Tekst w informacji narzędziowej ("dymku", który pojawia się po wskazaniu elementu myszką) | |
| Menu | Menu background | Tło menu | |
| MenuText | Text in menus | Tekst w menu | |
| Scrollbar | Scroll bar gray area | Szara powierzchnia w suwaku do przewijania zawartości | |
| ThreeDDarkShadow | Dark shadow for three-dimensional display elements | Cień trójwymiarowych elementów | |
| ThreeDFace | Face color for three-dimensional display elements | Powierzchnia czołowa trójwymiarowych elementów | |
| ThreeDHighlight | Highlight color for three-dimensional display elements | Kolor podświetlenia dla trójwymiarowych elementów | |
| ThreeDLightShadow | Light color for three-dimensional display elements (for edges facing the light source) | Kolor oświetlenia trójwymiarowych elementów (krawędzie od strony światła) | |
| ThreeDShadow | Dark shadow for three-dimensional display elements | Cień trójwymiarowych elementów | |
| Window | Window background | Tło okna | |
| WindowFrame | Window frame | Ramka okna | |
| WindowText | Text in windows | Tekst w oknach |
Źródło: Cascading Style Sheets, Level 2
Wykaz kolorów rozszerzonych
| Definicja | HEX | Kolor |
|---|---|---|
| aliceblue | #F0F8FF | |
| antiquewhite | #FAEBD7 | antyczny biały (antyczna biel) |
| aquamarine | #7FFFD4 | akwamarynowy (akwamaryna) |
| azure | #F0FFFF | lazurowy (lazur) |
| beige | #F5F5DC | beżowy (beż) |
| bisque | #FFE4C4 | |
| blanchedalmond | #FFEBCD | blanszowanego migdała (blanszowany migdał) |
| blueviolet | #8A2BE2 | niebieskofioletowy (niebieski fiolet) |
| brown | #A52A2A | brązowy (brąz) |
| burlywood | #DEB887 | |
| cadetblue | #5F9EA0 | kadeckoniebieski (kadet niebieski) |
| chartreuse | #7FFF00 | |
| chocolate | #D2691E | czekoladowy (czekolada) |
| coral | #FF7F50 | koralowy (koral) |
| cornflowerblue | #6495ED | chabrowy (chaber) |
| cornsilk | #FFF8DC | wąsów kukurydzy (wąsy kukurydzy) |
| crimson | #DC143C | karmazynowy (karmazyn) |
| cyan | #00FFFF | cyjanowy (cyjan) |
| darkblue | #00008B | ciemnoniebieski (ciemny niebieski) |
| darkcyan | #008B8B | ciemnocyjanowy (ciemny cyjan) |
| darkgoldenrod | #B8860B | ciemnonawłociowy (ciemna nawłoć) |
| darkgray | #A9A9A9 | ciemnoszary (ciemny szary) |
| darkgreen | #006400 | ciemnozielony (ciemna zieleń) |
| darkgrey | #A9A9A9 | ciemnoszary (ciemny szary) |
| darkkhaki | #BDB76B | ciemnokhaki (ciemny khaki) |
| darkmagenta | #8B008B | ciemnoamarantowy (ciemny amarant) |
| darkolivegreen | #556B2F | ciemnooliwkowozielony (ciemna oliwka zieleń) |
| darkorange | #FF8C00 | ciemnopomarańczowy (ciemny pomarańcz) |
| darkorchid | #9932CC | ciemnostorczykowy (ciemny storczyk) |
| darkred | #8B0000 | ciemnoczerwony (ciemna czerwień) |
| darksalmon | #E9967A | ciemnołososiowy (ciemny łosoś) |
| darkseagreen | #8FBC8F | ciemnomorski (ciemne morze) |
| darkslateblue | #483D8B | ciemnołupkowoniebieski (ciemny łupek niebieski) |
| darkslategray | #2F4F4F | ciemnołupkowoszary (ciemny łupek szary) |
| darkslategrey | #2F4F4F | ciemnołupkowoszary (ciemny łupek szary) |
| darkturquoise | #00CED1 | ciemnoturkusowy (ciemny turkus) |
| darkviolet | #9400D3 | ciemnofioletowy (ciemny fiolet) |
| deeppink | #FF1493 | głębokoróżowy (głęboki róż) |
| deepskyblue | #00BFFF | głębokobłękitny (głęboki błękit) |
| dimgray | #696969 | przygaszony szary |
| dimgrey | #696969 | przygaszony szary |
| dodgerblue | #1E90FF | |
| firebrick | #B22222 | cegły ogniotrwałej (cegła ogniotrwała) |
| floralwhite | #FFFAF0 | kwiatowobiały (kwiatowa biel) |
| forestgreen | #228B22 | leśnozielony (las zieleń) |
| gainsboro | #DCDCDC | |
| ghostwhite | #F8F8FF | |
| gold | #FFD700 | złoty (złoto) |
| goldenrod | #DAA520 | nawłociowy (nawłoć) |
| greenyellow | #ADFF2F | zielonożółty (zielona żółć) |
| grey | #808080 | szary |
| honeydew | #F0FFF0 | |
| hotpink | #FF69B4 | gorącoróżowy (gorący róż) |
| indianred | #CD5C5C | indyjskoczerwony (indyjska czerwień) |
| indigo | #4B0082 | indygowy (indygo) |
| ivory | #FFFFF0 | kości słoniowej (kość słoniowa) |
| khaki | #F0E68C | khaki |
| lavender | #E6E6FA | lawendowy (lawenda) |
| lavenderblush | #FFF0F5 | |
| lawngreen | #7CFC00 | |
| lemonchiffon | #FFFACD | cytrynowoszyfonowy (cytryna szyfon) |
| lightblue | #ADD8E6 | jasnoniebieski (jasny niebieski) |
| lightcoral | #F08080 | jasnokoralowy (jasny koral) |
| lightcyan | #E0FFFF | jasnocyjanowy (jasny cyjan) |
| lightgoldenrodyellow | #FAFAD2 | jasnonawłociowożółty (jasna nawłoć żółć) |
| lightgray | #D3D3D3 | jasnoszary (jasny szary) |
| lightgreen | #90EE90 | jasnozielony (jasna zieleń) |
| lightgrey | #D3D3D3 | jasnoszary (jasny szary) |
| lightpink | #FFB6C1 | jasnoróżowy (jasny róż) |
| lightsalmon | #FFA07A | jasnołososiowy (jasny łosoś) |
| lightseagreen | #20B2AA | jasnomorski (jasne morze) |
| lightskyblue | #87CEFA | jasnobłękitny (jasny błękit) |
| lightslategray | #778899 | jasnołupkowoszary (jasny łupek szary) |
| lightslategrey | #778899 | jasnołupkowoszary (jasny łupek szary) |
| lightsteelblue | #B0C4DE | jasnostalowy (jasna stal) |
| lightyellow | #FFFFE0 | jasnożółty (jasna żółć) |
| limegreen | #32CD32 | limonowozielony (limonka zieleń) |
| linen | #FAF0E6 | bieliźniany (bielizna) |
| magenta | #FF00FF | amarantowy (amarant) |
| mediumaquamarine | #66CDAA | średnioakwamarynowy (średnia akwamaryna) |
| mediumblue | #0000CD | średnioniebieski (średni niebieski) |
| mediumorchid | #BA55D3 | średniostorczykowy (średni storczyk) |
| mediumpurple | #9370DB | średniopurpurowy (średnia purpura) |
| mediumseagreen | #3CB371 | średniomorski (średnie morze) |
| mediumslateblue | #7B68EE | średniołupkowoniebieski (średni łupek niebieski) |
| mediumspringgreen | #00FA9A | średniowiosennozielony (średnia wiosna zieleń) |
| mediumturquoise | #48D1CC | średnioturkusowy (średni turkus) |
| mediumvioletred | #C71585 | średniofioletowoczerwony (średni fiolet czerwień) |
| midnightblue | #191970 | |
| mintcream | #F5FFFA | miętowokremowy (mięta krem) |
| mistyrose | #FFE4E1 | bladoróżowy (blady róż) |
| moccasin | #FFE4B5 | |
| navajowhite | #FFDEAD | |
| oldlace | #FDF5E6 | starej koronki (stara koronka) |
| olivedrab | #6B8E23 | szarooliwkowy (szara oliwka) |
| orangered | #FF4500 | pomarańczowoczerwony (pomarańcz czerwień) |
| orchid | #DA70D6 | storczykowy (storczyk) |
| palegoldenrod | #EEE8AA | bladonawłociowy (blada nawłoć) |
| palegreen | #98FB98 | bladozielony (blada zieleń) |
| paleturquoise | #AFEEEE | bladoturkusowy (blady turkus) |
| palevioletred | #DB7093 | bladofioletowoczerwony (blady fiolet czerwień) |
| papayawhip | #FFEFD5 | papajowomusowy (papaja mus) |
| peachpuff | #FFDAB9 | brzoskwiniowoptysiowy (brzoskwinia ptyś) |
| peru | #CD853F | |
| pink | #FFC0CB | różowy (róż) |
| plum | #DDA0DD | śliwkowy (śliwka) |
| powderblue | #B0E0E6 | kobaltowy (błękit królewski) |
| rosybrown | #BC8F8F | różowobrązowy (róż brąz) |
| royalblue | #4169E1 | szafirowy (szafir) |
| saddlebrown | #8B4513 | |
| salmon | #FA8072 | łososiowy (łosoś) |
| sandybrown | #F4A460 | piaskowobrązowy (piasek brąz) |
| seagreen | #2E8B57 | morski (morze) |
| seashell | #FFF5EE | muszelkowy (muszelka) |
| sienna | #A0522D | sjenowy (sjena) |
| skyblue | #87CEEB | błękitny (błękit) |
| slateblue | #6A5ACD | łupkowoniebieski (łupek niebieski) |
| slategray | #708090 | łupkowoszary (łupek szary) |
| slategrey | #708090 | łupkowoszary (łupek szary) |
| snow | #FFFAFA | śnieżny (śnieg) |
| springgreen | #00FF7F | wiosennozielony (wiosna zieleń) |
| steelblue | #4682B4 | stalowy (stal) |
| tan | #D2B48C | |
| thistle | #D8BFD8 | ostowy (oset) |
| tomato | #FF6347 | pomidorowy (pomidor) |
| turquoise | #40E0D0 | turkusowy (turkus) |
| violet | #EE82EE | fioletowy (fiolet) |
| wheat | #F5DEB3 | pszeniczny (pszenica) |
| whitesmoke | #F5F5F5 | białego dymu (biel dym) |
| yellowgreen | #9ACD32 | żółtozielony (żółć zieleń) |
Źródło: CSS Color Module Level 3
Selektory CSS
Źródło: Cascading Style Sheets, Level 2, Selectors Level 3
Selektory elementów
| Wzór | Znaczenie | Opis | CSS |
|---|---|---|---|
* | każdy element | Selektor uniwersalny | 2 |
E | element E (element typu E) | Selektor typu | 1 |
E F | element F, który jest potomkiem elementu E | Selektor potomka | 1 |
E > F | element F, który jest dzieckiem elementu E | Selektor dziecka | 2 |
E + F | element F bezpośrednio poprzedzany przez element E | Selektor braci | 2 |
E ~ F | element F poprzedzany przez element E | Ogólny selektor braci | 3 |
Selektory atrybutów
| Wzór | Znaczenie | Opis | CSS |
|---|---|---|---|
E[atr] | element E z ustawionym atrybutem "atr" (na jakąkolwiek wartość) | Prosty selektor atrybutu | 2 |
E[atr="wart"] | element E, którego atrybut "atr" ma wartość dokładnie "wart" | Selektor atrybutu o określonej wartości | 2 |
E[atr~="wart"] | element E, którego wartość atrybutu "atr" jest listą oddzielonych spacjami wartości, a jedna z nich ma dokładnie wartość "wart" | Selektor atrybutu zawierającego określony wyraz | 2 |
E[lang|="en"] | element E, którego atrybut "lang" ma rozdzieloną łącznikami listę wartości, zaczynającą się (z lewej strony) od "en" | Selektor atrybutu zawierającego łączniki | 2 |
E[atr^="wart"] | element E, którego wartość atrybutu "atr" rozpoczyna się dokładnie od "wart" | Selektor atrybutu o wartości rozpoczynającej się od... | 3 |
E[atr$="wart"] | element E, którego wartość atrybutu "atr" kończy się dokładnie dokładnie na "wart" | Selektor atrybutu o wartości kończącej się na... | 3 |
E[atr*="wart"] | element E, którego wartość atrybutu "atr" zawiera "wart" | Selektor atrybutu zawierającego określony tekst | 3 |
Selektory specjalne
| Wzór | Znaczenie | Opis | CSS |
|---|---|---|---|
DIV.wart | Tylko HTML. To samo co DIV[class~="wart"] | Klasy selektorów | 1 |
E#ident | element E z identyfikatorem ID równym "ident" | Selektor identyfikatora | 1 |
Selektory pseudoelementów
| Wzór | Znaczenie | Opis | CSS |
|---|---|---|---|
P:first-line | pierwsza linijka akapitu P | Pierwsza linia | 1 |
P:first-letter | pierwsza litera akapitu P | Pierwsza litera | 1 |
E:before | wstawia treść przed zawartością elementu E | Przed... | 2 |
E:after | wstawia treść po zawartości elementu E | Po... | 2 |
Selektory pseudoklas
| Wzór | Znaczenie | Opis | CSS |
|---|---|---|---|
E:root | element E, który jest korzeniem dokumentu | Korzeń | 3 |
E:nth-child(n)E:nth-last-child(n)E:nth-of-type(n)E:nth-last-of-type(n) | element E, który jest odpowiednio: n-tym dzieckiem jego rodzica, n-tym dzieckiem licząc od końca, n-tym bratem typu E, n-tym bratem typu E licząc od końca | Pseudoklasy cykliczne | 3 |
E:first-child | element E, który jest pierwszym dzieckiem jego rodzica | Pierwsze dziecko | 2 |
E:last-child | element E, który jest ostatnim dzieckiem jego rodzica | Ostatnie dziecko | 3 |
E:only-child | element E, który jest jedynym dzieckiem jego rodzica | Jedyne dziecko | 3 |
E:first-of-typeE:last-of-typeE:only-of-type | element E, który jest odpowiednio: pierwszym, ostatnim bądź jedynym bratem typu E | Pseudoklasy typu | 3 |
E:empty | element E, który nie ma dzieci ani nie zawiera tekstu | Pusty element | 3 |
E:linkE:visited | element E, który jest kotwicą hiperlinku (odsyłaczem), której cel (strona docelowa) jeszcze nie został odwiedzony (:link) lub został już odwiedzony (:visited) | Odsyłacz podstawowy Odsyłacz odwiedzony | 1 |
E:activeE:hoverE:focus | element E podczas pewnych akcji użytkownika (:active - aktywacja, :hover - wskazanie, :focus - zogniskowanie) | Aktywacja Wskazanie myszką Zogniskowanie | 1 |
E:target | element E, który jest etykieta adresu dokumentu | Etykieta | 3 |
E:lang(c) | element typu E, który jest napisany w języku c (np.: pl - polski, en - angielski) | Atrybut języka | 2 |
E:enabledE:disabled | element E (interfejsu użytkownika), który jest odblokowany bądź zablokowany | Blokada | 3 |
E:checked | element E (interfejsu użytkownika), który jest zaznaczony (np. pole wyboru lub opcji) | Zaznaczenie | 3 |
E:not(s) | element E, którego nie kojarzy prosty selektor s | Negacja | 3 |
Reguły specjalne CSS
| Wzór | Znaczenie | Opis | CSS |
|---|---|---|---|
@charset "wart"; | strona kodowa | Zewnętrzny arkusz stylów | 2 |
@import "adr";@import url(adr); | import stylów z innego arkusza | Import arkusza stylów | 1 |
@font-face | opis czcionki | Czcionki osadzone | 2 |
@counter-style wart | niestandardowy styl licznika | Niestandardowy typ stylu wykazu | 3 |
@page | |||
@page :first | Okładka wydruku | 2 | |
@page :left@page :right | Druk dwustronny | 2 | |
@page wart | Typ strony wydruku | 2 | |
@import url(adr) wart;@media wart | docelowe typy mediów | Wybór medium | 2 |
@import url(adr) (wart);@media (wart) | cechy mediów | Zapytania mediów | 3 |
@supports (wart)@supports not (wart) | obsługiwane cechy | Zapytania właściwości | 3 |