CSS - 2 Właściwości tekstu, czcionek
Właściwości tekstu Służą do nadawania określonego wyglądu tekstowi:» color» direction» letter-spacing» text-align» text-decoration» text-indent» text-shadow» text-transform» unicode-bidi» white-space» word-spacing
Określanie koloru tekstu Właściwość:» color» nazwa koloru» rgb(n,n,n)» #xxxxxx
Odstępy między literami Właściwość:» letter-spacing» normal standardowe odległości» odległość: npx n pikseli ncm n centymetrów nmm n milimetrów nem n szerokości czcionki nex n wysokości czcionki nin n cali npt n punktów (1pt = 1/72 cala) npc n picas (1pc = 12pt) Dopuszczalne są wartości ujemne i ułamkowe, justowanie tekstu zależy od klienta
Odstępy między wyrazami Właściwość:» word-spacing Wartości» normal» odległość Dopuszczalne wartości ujemne
Wyrównywanie tekstu Właściwość:» text-align» left do lewej» right do prawej» center wyśrodkowany» justify wyjustowany
Krój czcionki Właściwość:» text-decoration» none brak efektów» underline podkreślenie» overline linia nad tekstem» line-through tekst przekreślony» blink tekst migający
Wcięcia Właściwość:» text-indent Wartości» szerokość wcięcia (em, ex, px, in, pc, pt, cm, mm)» x% - procentowo określone w stosunku do elementu nadrzędnego Dopuszczalne są wartości ujemne, wtedy pierwsza linia jest wyrównana do lewej
Kierunek tekstu Właściwość:» direction» ltr z lewej na prawą» rtl z prawej na lewą
Cieniowanie tekstu Właściwość:» text-shadow» none brak» kolor offset_x offset_y zasięg_efektu_rozmycia Cechy:» dodatnie wartości offsetów oznaczają dół i prawą stronę (ujemne górę i lewo)» możliwość zastosowania kilku efektów cieniowania (lista oddzielana przecinkami)» efekty stosowane są w wyspecyfikowanej kolejności» efekty mogą zakrywać siebie nawzajem, ale nie mogą zasłonić tekstu Przykłady:» H1 {background: white; color: white; text-shadow: black 0px 0px 5px}» H2 {text-shadow: 3px 3px}» H3 {text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px}
Konwersje tekstu Własność:» text-transform» none bez zmian» capitalize pierwsze litery wyrazów wielkie» uppercase wszystkie litery wiekie» lowercase wszystkie litery małe
Własność unicode-bidi Służy do określania sposobu wyświetlania tekstów, które są pisane w 2 różnych kierunkach» normal» embed» override
Białe znaki Własność:» white-space» normal łączenie w jeden znak, łamanie linii według rozmiaru okna» pre białe znaki nie są łączone, łamanie linii wg znaków przejścia do nowej linii» nowrap grupy białych znaków łączone jak w normal, łamanie linii jak w pre
Odstępy między liniami Własność:» line-height» normal» liczba będzie traktowana jako mnożnik dla rozmiaru czcionki przy ustalaniu odległości między liniami» odległość stała odległość między liniami wyrażona w jednej z wielkości: em, ex, px, pt, pc, in, cm, mm» n% - ustalenie odległości między liniami jako n procent z bieżącego rozmiaru czcionki
Właściwości czcionek Decydują o doborze czcionki i sposobie jej wyświetlania:» font-family» font-size» font-size adjust» font-stretch» font-style» font-variant» font-weight» font
Rodziny czcionek Własność:» font-family» nazwa-rodziny np. times, arial, courier» rodzina-ogólna np. serif, sans-serif, cursive, monospace Cechy:» może mieć kilka wartości (lista oddzielana przecinkami)» przeglądarka użyje pierwszej "rozpoznanej" z listy» wskazane jest podanie jako ostatniej rodziny ogólnej» jeśli nazwa czcionki zawiera białe znaki, to musi być ujęta w cudzysłowiu Przykład:» p {font-family: verdana, arial, "lucinda console", sans-serif}
Rozmiar czcionki Własność:» font-size» xx-small» x-small» small» medium» large» x-large» xx-large» smaller mniejsza niż w elemencie nadrzędnym» larger większa niż w elemencie nadrzędnym» length o określonej wielkości» n% - procent rozmiaru elementu nadrzędnego
Własność font-size-adjust Różne czcionki mają różne współczynniki stosunku rozmiaru małych liter czcionki do jej rozmiaru (np. Verdana ma współczynnik 0.58, Times 0,46) Przy substytucji czcionek o małych rozmiarach, w celu zapewnienia czytelności, konieczne jest zachowanie rozmiaru małych liter» none» liczba określa współczynnik stosunku rozmiaru małych liter do rozmiaru czcionki Wartość "liczba" posłuży do wyliczenia rozmiaru czcionki zastępczej wg wzoru rcz = rpc*(fsa/wcz) gdzie: rcz rozmiar czcionki zastępczej rpc rozmiar pierwszej na liście czcionki fsa wartość font-size-adjust wcz wartość współczynnika dla czcionki zastępczej
Pogrubienie czcionki Własność:» font-weight» normal bez pogrubienia» bold» bolder» lighter» 100» 200» 300» 400 - normal» 500» 600» 700 - bold» 800» 900
Nachylenie czcionki Właściwość:» font-style Wartości» normal» italic - kursywa» oblique - pochylona
Warianty czcionek Własność:» font-variant Wartości» normal» small-caps wielkie litery, pierwsza większego rozmiaru
Rozciąganie czcionek Własność:» font-stretch» normal» wider» narrower» ultra-condensed» extra-condensed» condensed» semi-condensed» semi-expanded» expanded» extra-expanded» ultra-expanded
Różne właściwości w jednym Właściwość:» font» tak jak w font-style» tak jak w font-variant» tak jak w font-weight» tak jak w font-size/line-height» tak jak w font-family» caption font użuwany w kontrolkach (np. przyciski)» icon czcionka używana w etykietach ikon» menu czcionka używana w rozwijalnych menu» message-box czcionka używana w oknach dialogowych» small-caption» status-bar czcionka uzywana na pasku stanu okna Przykład: p {font: italic small-caps 900 12px/14px arial}
Własności obramowań Służą do określania obramowania wokół dowolnych elementów HTML:» border» border-color» border-style» border-width» border-bottom» border-bottom-color» border-bottom-style» border-bottom-width» border-left» border-left-color» border-left-style» border-left-width» border-right» border-right-color» border-right-style» border-right-width» border-top» border-top-color» border-top-style» border-top-width
Kolor obramowania Własność:» border-color Wartości» kolor nazwa rbg(n,n,n) #xxxxxx» transparent Cechy:» można podać do 4 kolorów: 1 kolor dla całego obramowania 2 pierwszy góra i dół, drugi lewo i prawo 3 góra, llewo i prawo, dół 4 góra, prawo, dół, lewo
Styl obramowania Właściwość:» border-style» none brak obramowania» hidden w zasadzie tak samo jak none» dotted kropkowane» dashed przerywane» solid pełne» double podwójne» groove 3D wklęsłe» ridge 3D wypukłe» inset 3D efekt podklejonego obramowania» outset 3D efekt naklejonego obramowania Cechy:» można zdefinować od 1 do 4 wartości o podobnym znaczeniu jak w przypadku border-color
Szerokość obramowania Właściwość:» border-width» thin cienka» medium średnia» thick gruba» grubość określona za pomocą jednej z następujcych wielkości: em, ex, px, pt, pc, in, mm, cm Cechy:» można zdefinować od 1 do 4 wartości o podobnym znaczeniu jak w przypadku border-color
Zbiorcze własności obramowania Własność:» border Zbiorcze określenie dla całych obramowań wartości:» szerokości» stylu» koloru
Własności obramowania górnego Własności:» border-top-width» border-top-style» border-top-color lub:» border-top - zbiorczo
Własności obramowania prawego Własności:» border-right-width» border-right-style» border-right-color lub:» border-right - zbiorczo
Własności obramowania dolnego Własności:» border-bottom-width» border-bottom-style» border-bottom-color lub:» border-bottom - zbiorczo
Własności obramowania lewego Własności:» border-left-width» border-left-style» border-left-color lub:» border-left - zbiorczo
Własności marginesów Określają przestrzeń wokół elementów Dopuszczalne są wartości ujemne, czego efektem jest nakładanie się elementów Różne domyślne ustawienia marginesów w przeglądarkach Własności:» margin» margin-top» margin-right» margin-bottom» margin-left
Marginesy definiowane osobno Własności:» margin-top» margin-right» margin-bottom» margin-left» auto automatyczne ustawienia przeglądarki» szerokość stała szerokość określona jedną z wielkości: ex,em, px, pt, pc, in, cm,mm» n% - n procent wysokości / szerokości całego dokumentu
Wszystkie marginesy razem Własność:» margin Wartości od 1 do 4:» 1 dotyczy: margin-top, margin-right, margin-bottom i margin-left» 2 pierwsza dotyczy: margin-top i margin-bottom; druga: margin-right i margin-left» 3 pierwsza dotyczy: margin-top; druga: margin-right i margin-left; trzecia: margin-bottom;» 4 pierwsza dotyczy: margin-top; druga: margin-right; trzecia: margin-bottom; czwarta: margin-left