Zestawienie najczęściej stosowanych atrybutów
Efektywne wykorzystanie arkuszy stylów do formatowania dokumentów HTML wymaga znajomości podstawowych atrybutów i ich dopuszczalnych wartości. Tabele od 1 do 6 zawierają najważniejsze atrybuty CSS pogrupowane kategoriami, zaś listing 5 prezentuje sposoby użycia części atrybutów.
lp. | Atrybut | Poprawne wartości | Opis |
---|---|---|---|
1. | text-align | justify, left, right, center | wyrównanie poziome |
2. | vertical-align | baseline, sub, super, top, text-top, middle, bottom, text-bottom, długość | wyrównanie pionowe |
Tabela 1. Wyrównanie pionowe i poziome
lp. | Atrybut | Poprawne wartości | Opis |
---|---|---|---|
1. | width | długość | szerokość |
2. | height | długość | wysokość |
3. | max-width | długość | maksymalna szerokość |
4. | max-height | długość | maksymalna wysokość |
5. | min-width | długość | minimalna szerokość |
6. | min-height | długość | minimalna wysokość |
7. | margin | długość | marginesy (wszystkie cztery) |
8. | margin-left, margin-right, margin-top, margin-bottom | długość | marginesy lewy, prawy, górny i dolny |
9. | padding | długość | otaczanie (z czterech stron) |
10. | padding-left, padding-right, padding-top, padding-bottom | długość | otaczanie z lewej, prawej, górne i dolne |
Tabela 2. Wysokość, szerokość, marginesy i otaczanie
lp. | Atrybut | Poprawne wartości | Opis |
---|---|---|---|
1. | font-family | nazwa kroju czcionki, np. Courier, Verdana, Arial, Serif |
nazwa kroju czcionki |
2. | font-size | długość, larger, smaller | wielkość czcionki |
3. | font-weight | normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 |
grubość kroju |
4. | font-style | normal, italic, oblique | kursywa |
5. | font-variant | normal, small-caps | kapitaliki |
6. | font-stretch | normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded |
rozstrzelenie liter |
7. | font | kombinacja powyższych wartości oddzielonych białymi znakami |
Tabela 3. Czcionki
lp. | Atrybut | Poprawne wartości | Opis |
---|---|---|---|
1. | text-indent | długość | wielkość wcięcia akapitu |
2. | text-decoration | none, underline, overline, line-through, blink | dekoracja tekstu |
3. | text-transform | capitalize, uppercase, lowercase, none | przekształcanie tekstu |
4. | word-spacing | normal, długość | odstępy między słowami |
5. | white-space | normal, pre, nowrap | interpretacja białych znaków |
6. | letter-spacing | normal, długość | odstępy między literami |
7. | line-height | normal, długość | wysokość linii |
Tabela 4. Tekst
lp. | Atrybut | Poprawne wartości | Opis |
---|---|---|---|
1. | border-style | none, hidden, dotted, dashed, solid, double, groove ridge, inset, outset |
rodzaj obramowania (linia ciągła, przerywana, itd.) |
2. | border-style-left, border-style-right, border-style-top, border-style-bottom |
takie jak border-style | rodzaj obramowania każdej krawędzi z osobna |
3. | border-width | thin, medium, thick, długość | grubość obramowania |
4. | border-left-width, border-right-width, border-top-width, border-bottom-width |
takie jak border-width | grubość obramowania każdej krawędzi z osobna |
5. | border-color | kolor | kolor obramowania |
6. | border-left-color, border-right-color, border-top-color, border-bottom-color |
kolor | kolor obramowania każdej krawędzi z osobna |
7. | border-collapse | collapse, separate | złączanie krawędzi sąsiadujących komórek tabeli |
8. | border | kombinacja wszystkich właściwości oddzielonych białymi znakami |
|
9. | border-left, border-right, border-top, border-bottom |
kombinacja wszystkich właściwości oddzielonych białymi znakami w stosunku do każdej krawędzi z osobna |
Tabela 5. Obramowanie
lp. | Atrybut | Poprawne wartości | Opis |
---|---|---|---|
1. | list-style-type | disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-alpha, lower-latin, upper-alpha, upper-latin, hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha, none |
styl numerowanie i wypunktowania |
2. | list-style-position | inside, outside | położenie numeracji względem tekstu |
3. | list-style-image | adres uri obrazu | ikona wypunktowania |
Tabela 6. Wypunktowanie i numerowanie
P { text-align : justify; } TR { vertical-align : top; } DIV { width : 100px; height : 75px; max-width : 55px; max-height : 66%; } BODY { margin : 5px; margin-right : -40px; margin-top : 50%; margin-bottom : -5%; } TD { padding : 5%; padding-top : 7px; } P { font-family : Courier; font-size : 8pt; font-weight : bold; font-style : italic; } DIV { font-family : Verdana; font-size : 150%; font-weight : 900; } TD { font-family : Arial; font-size : larger; font-weight : lighter; } SPAN { font : Arial 10pt bold italic; } STRONG { font : Verdana 200% 900 small-caps wider; }