css.docx

Zestawienie Cech selektorów CSS

W języku CSS występuje wiele cech związanych z długością lub wielkością elementów. Wartości dla tych cech możemy określać, posługując się różnymi jednostkami. Każda jednostka ma swój skrót i musi być użyta bezpośrednio po podaniu wartości, np. 12px – oznacza 12 pikseli, a 12pt- oznacza 12 punktów. Tabela przedstawia opis i skróty większości obsługiwanych jednostek:

Własności czcionek

Cechy selektorów  własności czcionki pozwalają na zmianę wielkość, rodzaju, stylu, rodziny i wariantów czcionek. Każdą z tych cech można regulować na wiele sposobów, przy użyciu jednostek miar, przez odwołanie do elementów nadrzędnych lub też użycie predefiniowanych nazw.

•         font-size – cecha odpowiada za wielkość . Dozwolone wartości :

•         w jednostkach miary – centymetrach, calach, milimetrach, punktach, pica i pikselach – 1cm, 1in, 10mm, 12pt, 1pc, 16px;

•         Ralatywna – w stosunku do domyślnej – larger, smaller;

•         Absolutna – xxsmall, x-small,small,medium,large, x-large, xx-large;

•         font-family – cecha odpowiada za krój czcionki . Jako wartość tej cechy podajemy krój czcionki. Jako wartość tej właściwości można umieścić kilka nazw czcionek, oddzielając przecinkami. Wówczas jeśli przeglądarka nie odnajdzie pierwszej czcionki z listy, spróbuje użyć kolejnej. Można stosować wyliczenia nazw rodziny czcionek (serif- czcionki szeryfowe, sans-serif – czcionki bezszeryfowe, cursive – czcionki pochylone, monospace- czcionki nieproporcjonalne i tek samej szerokości, fantasy  - czcionki ozdobne) i krojów. Dozwolone wartości:

•         nazwa rodzajowa rodziny czcionek –serif, sans-serif, cursive, fantasy,monotype;

•         nazwa kroju czcionki - Arial

•         font-style – cecha odpowiada za styl czcionki: normalny lub pochylony (kursywa). Dozwolone wartości: normal, italic

•         font-variant – cecha odpowiada za wariant czcionki: zwykła lub kapitaliki. Dozwolone wartości: normal, small-caps.

•         font-weight – cecha odpowiada za stopień pogrubienia czcionki. Dozwolone wartości: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.

•         color – kolor tekstu

•         font – określa wszystkie cechy czcionki według schematu:

•         font: font-style font-variant font-weight font-size/line-height font family, np. font:italic normal 10pt Times, serif; - definiuje tekst pochylony, o wielkości 10 pt, z rodziny Times lub innego kroju szeryfowego (serif).

Własności tekstu

Cechy własności tekstu dotyczą wyrównywania tekstu, kontrolowania odstępów pomiędzy literami, wyrazami i wierszami, ustawiania wcięć oraz formatowania akapitów.

•         text-align – cecha odpowiada za poziome wyrównywanie tekstu: left, right, center, justify.

•         vertical-align – cecha odpowiada za wyrównywanie tekstu w pionie: baseline – wyrównywanie do linii bazowej (wyrównywanie domyślne), bottom – dolna linia elementu jest wyrównywana do najniższej linii w wierszu, middle – wyrównanie do linii środkowej, sub – indeks dolny, super –indeks górny, top – górna linia elementu jest wyrównywana do najwyższej linii w wierszu, text-top – górna linia elementu jest wyrównywana do górnej linii czcionki elementu nadrzędnego, text-bottom – dolna linia elementu jest wyrównywana do dolnej linii czcionki elementu nadrzędnego.

•         line-height – cecha odpowiada za ustalanie odstępów międzywierszowych. Dozwolone wartości w jednostkach miary - centymetrach, calach, milimetrach, punktach, pica i pikselach – 1cm, 1in, 1mm, 1pt, 1pc, 1px;

•         word-spacing - cecha odpowiada za ustalanie odstępów między słowami. Dozwolone wartości w jednostkach miary - centymetrach, calach, milimetrach, punktach, pica i pikselach – 1cm, 1in, 1mm, 1pt, 1pc, 1px;

•         letter-spacing – cecha odpowiada za ustalanie odstępów między literami tekstu. Dozwolone wartości w jednostkach miary - centymetrach, calach, milimetrach, punktach, pica i pikselach – 1cm, 1in, 1mm, 1pt, 1pc, 1px;

•         text-indent – cecha odpowiada za wcięcie pierwszego wiersza akapitu. Dozwolone wartości:

•         w procentach - %

•         w jednostkach miary - centymetrach, calach, milimetrach, punktach, pica i pikselach – 1cm, 1in, 1mm, 1pt, 1pc, 1px;

•         text-decoration – cecha odpowiada za wyróżnienie tekstu: none - brak, underline- podkreślenie, overline – nakreślenie, line –through – przekreślenie, blink –migotanie.

•         text-transform- cecha odpowiada za przekształcenie tekstu: none – brak, capitalize –  kapitaliki.

•         text-shadow – cecha odpowiada za tworzenie cienia pod tekstem. Wartości: kolor, poziom, pion, rozmycie.

•         white-space - cecha odpowiada za kontrola przeglądarki w stosunku do wyświetlania białych znaków. Dozwolone wartości: pre – wyświetlanie tekstu dokładnie w taki sposób, w jaki jest przedstawiony; nowrap- brak zawijania tekstu jeśli nie mieści się w elemencie.

•         direction – cecha odpowiada za określenie kierunku tekstu. Dozwolone wartości ltr – od lewej do prawej, rtl – od prawej do lewej.

Kolory i tło

W HTML/CSS kolory można określać na dwa sposoby. Pierwszy z nich to użycie nazw kolorów (16 kolorów) w języku angielskim: black, olive, teal, red, blue, maroon, navy, gray, lime, fuchsia, whire, green, purple, silver, yellow i aqua.

Z pełnej palety barw można skorzystać definiując barwę według schematu #RRGGBB, gdzie składowe RR, GG oraz BB określają wysycenie odpowiednio koloru czerwonego, zielonego i niebieskiego przyjmując wartości od 0 do 255 w zapisie szesnastkowym.

•         color – cecha odpowiada za kolor obiektu. Dozwolone wartości:

•         Predefiniowana nazwa koloru np. olive.

•         Barwa w kodzie szesnastkowym np..#FF00BB.

•         background-color – cecha odpowiada za kolor  tła obiektu. Dozwolona wartość:

•         Predefiniowana nazwa koloru np. olive.

•         Barwa w kodzie szesnastkowym np.#FF00BB.

•         background-image – cecha ustala obraz znajdujący się w tle obiektu. Obraz pobierany jest z podanego pliku. Jako wartość tej cechy wpisujemy nazwę pliku graficznego, jaki ma zostać użyty wewnątrz polecenia url().

•         background-repeat – cecha odpowiada za ustalenie powielania obrazu pliku graficznego podczas jego wyświetlania w tle. Dozwolone wartości  to repeat – domyślne powielanie w poziomie i w pionie, no-repeat – bez powielania, repeat-x – powielanie tylko w poziomie, repeat-y – powielanie tylko w pionie.

•         background-attachment – cecha odpowiada za sposób wyświetlania tła. Dozwolone wartości: scroll – wraz z przesuwaniem zawartości strony tło również się przesuwa, fixed – podczas przesuwania strony tło jest nieruchome.

•         background-position – cecha odpowiada za początek pozycji obrazu pliku graficznego. Dozwolone wartości: top left...