CSS - 2. Właściwości tekstu, czcionek

Wielkość: px

Rozpocząć pokaz od strony:

Download "CSS - 2. Właściwości tekstu, czcionek"

Julia Janowska
8 lat temu
Przeglądów:

1 CSS - 2 Właściwości tekstu, czcionek

2 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

3 Określanie koloru tekstu Właściwość:» color» nazwa koloru» rgb(n,n,n)» #xxxxxx

4 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

5 Odstępy między wyrazami Właściwość:» word-spacing Wartości» normal» odległość Dopuszczalne wartości ujemne

6 Wyrównywanie tekstu Właściwość:» text-align» left do lewej» right do prawej» center wyśrodkowany» justify wyjustowany

7 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

8 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

9 Kierunek tekstu Właściwość:» direction» ltr z lewej na prawą» rtl z prawej na lewą

10 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}

11 Konwersje tekstu Własność:» text-transform» none bez zmian» capitalize pierwsze litery wyrazów wielkie» uppercase wszystkie litery wiekie» lowercase wszystkie litery małe

12 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

13 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

14 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

15 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

16 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}

17 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

18 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

19 Pogrubienie czcionki Własność:» font-weight» normal bez pogrubienia» bold» bolder» lighter» 100» 200» 300» normal» 500» 600» bold» 800» 900

20 Nachylenie czcionki Właściwość:» font-style Wartości» normal» italic - kursywa» oblique - pochylona

21 Warianty czcionek Własność:» font-variant Wartości» normal» small-caps wielkie litery, pierwsza większego rozmiaru

22 Rozciąganie czcionek Własność:» font-stretch» normal» wider» narrower» ultra-condensed» extra-condensed» condensed» semi-condensed» semi-expanded» expanded» extra-expanded» ultra-expanded

23 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 px/14px arial}

24 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

25 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

26 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

27 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

28 Zbiorcze własności obramowania Własność:» border Zbiorcze określenie dla całych obramowań wartości:» szerokości» stylu» koloru

29 Własności obramowania górnego Własności:» border-top-width» border-top-style» border-top-color lub:» border-top - zbiorczo

30 Własności obramowania prawego Własności:» border-right-width» border-right-style» border-right-color lub:» border-right - zbiorczo

31 Własności obramowania dolnego Własności:» border-bottom-width» border-bottom-style» border-bottom-color lub:» border-bottom - zbiorczo

32 Własności obramowania lewego Własności:» border-left-width» border-left-style» border-left-color lub:» border-left - zbiorczo

33 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

34 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

35 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

Podobne dokumenty

LABORATORIUM 3 WSTĘP DO SIECI TELEINFORMATYCZNYCH CSS CECHY WYBRANYCH SELEKTORÓW

LABORATORIUM 3 WSTĘP DO SIECI TELEINFORMATYCZNYCH CSS CECHY WYBRANYCH SELEKTORÓW 1. Definicja tła Tło elementu HTML można definiować w CSS korzystając z następujących cech: background-color background-image