O szkole
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;
}
