Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

Właściwości CSS Czcionki, tekst, odnośniki. Rodzina czcionki [font-family] Wyróżniamy dwa typy nazw używanych do kategoryzowania czcionek: – Nazwy rodziny.

Podobne prezentacje


Prezentacja na temat: "Właściwości CSS Czcionki, tekst, odnośniki. Rodzina czcionki [font-family] Wyróżniamy dwa typy nazw używanych do kategoryzowania czcionek: – Nazwy rodziny."— Zapis prezentacji:

1 Właściwości CSS Czcionki, tekst, odnośniki

2 Rodzina czcionki [font-family] Wyróżniamy dwa typy nazw używanych do kategoryzowania czcionek: – Nazwy rodziny (family-name) – często nazywane czcionkami np.: Arial, Times New Roman, Tahoma – Rodzina ogólna (generic family) – grupa czcionek z pewnymi określonymi cechami, np. sans-serif, który jest kolekcją czcionek bez tzw. stopy

3 Rodzina czcionki [font-family]

4 Przykład listy priorytetowej: h1 {font-family: arial, verdena, sans-serif;} h2 {font-family: Times New Roman, serif;} PRZYKŁAD

5 Styl czcionki [font-style] h1 {font-family: arial, verdena, sans-serif;} h2 {font-family: Times New Roman, serif; font-style: italic;} PRZYKŁAD

6 Wariant czcionki [font-variant] Właściwości font-variant używamy gdy chcemy wybrać powiędzy czcionką normalną (wartość normal) lub kapitalikami (wartość small-caps).

7 Wariant czcionki [font-variant] h1 {font-variant: small-caps;} h2 {font-variant: normal;} PRZYKŁAD

8 Font weight [font-weight] Właściwość font-weight opisuje jak gruba lub "ciężka" ma być czcionka. Czcionka może być normalna (wartość normal) lub pogrubiona (wartość bold). p {font-family: arial, verdena, sans-serif;} td {font-family: Times New Roman, serif; font-weight: bold;} PRZYKŁAD

9 Wielkość czcionki [font-size] h1 {font-size: 30px;} h2 {font-size: 12pt;} h3 {font-size: 120%} p {font-size: 1em} PRZYKŁAD

10 Kompilacja [font] Kolejność cechy font jest następująca: font-style – font-variant – font-weight – font-size – font-family p { font-style: italic; font-weight: bold; font-size: 30px; font-family: arial; sans-serif; } p {font: italic bold 30px arial, sans-serif}

11 Wcięcie tekstu [text-indent] p { text-indent: 30px; } PRZYKŁAD

12 Ułożenie tekstu [text-align] th { text-align: right;} td {text-align: center;} p {text-align: justify;} PRZYKŁAD

13 Dekoracja tekstu [text-decoration] h1 { text-decoration: underline;} h2 { text-decoration: overline;} h3 { text-decoration: line-through;} PRZYKŁAD

14 Odstęp literowy [letter-spacing] h1 { letter-spacing: 6px; } p { lette-spacing: 3px; } PRZYKŁAD

15 Transformacja tekstu [text-transform] Właściwość text-transform kontroluje wielkość liter tekstu. capitalize - zamienia na dużą literę wszystkie pierwsze litery w wyrazach. uppercase - konwertuje wszystkie litery na duże. lowercase - konwertuje wszystkie litery na małe. none - bez transformacji - tekst jest prezentowany tak jak został on umieszczony w kodzie HTML.

16 Transformacja tekstu [text-transform] h1 { text-transform: uppercase; } p { text-transform: capitalize; } PRZYKŁAD

17 Odnośniki Pseudo-klasa pozwala zaingerować w sprawę warunków lub zdarzeń gdy definiujesz właściwości CSS dla znaczników HTML. a:link, a visited – jeżeli odnośnik był nie odwiedzony i odwiedzony; a:active, a:hover – jeżeli nie najechaliśmy i najechaliśmy kursorem myszy na odnośnik

18 Pseudo-klasa: link a:link { color: #6699CC; } PRZYKŁAD

19 Pseudo-klasa: visited a:visited { color: #660099; } PRZYKŁAD

20 Pseudo-klasa: active a:active { background-color: #FFFF00; } PRZYKŁAD

21 Pseudo-klasa: hover a:hover { color: #FF6600; font-style: italic; } PRZYKŁAD

22 Efekt kiedy kursor jest nad odnośnikiem Odstęp między literami a:hover { letter-spacing: 10px; font-weight: bold; color: #FF0000; } PRZYKŁAD

23 Efekt kiedy kursor jest nad odnośnikiem UPPERCASE and lowercase a:hover { text-trasform: uppercase; font-weight: bold; color: #0000FF; background-color: FFFF00; } PRZYKŁAD

24 Usuń podkreślenie odnośnika a:link { color: 0000FF; text-decoration:none; } a:visited { color: #FF00FF; text-decoration:none; } a:active { background-color: #FFFF00; text-decoration:none; } a:hover { color:red; text-decoration:none; } PRZYKŁAD


Pobierz ppt "Właściwości CSS Czcionki, tekst, odnośniki. Rodzina czcionki [font-family] Wyróżniamy dwa typy nazw używanych do kategoryzowania czcionek: – Nazwy rodziny."

Podobne prezentacje


Reklamy Google