Formatowanie tekstu

Karta pracy 2014/2015

Adres:

http://plotkarka.eu/KP/formatowanietekstu.html

Autor:

Radosław Kowaluk

Fonty w CSS

Skopiuj plik formatowanietekstu.zip rozpakuj go do folderu WWW. Otwórz plik formatowanietekstu.html w przeglądarce internetowej. Zapoznaj się ze źródłem pliku.

Nazwa fontu¹, czcionka² lub/i nazwa rodziny czcionek³

W elemencie style dodaj kod.

<style type="text/css">
h1, h2, h3 {
font-family: Arial, Helvetica, sans-serif;
}
</style>

Zapisz zmiany i odśwież podgląd.

Rozmiar fontu⁴

W elemencie style dodaj kod.

h1 {
font-size: 34px;
}
h2 {
font-size: 21px;
}
h3 {
font-size: 13px;
}

Zapisz zmiany i odśwież podgląd.

Właściwości fontu⁵

W elemencie style dodaj kod.

p {
font: 12px 'Times New Roman', Times, serif;
}

Zapisz zmiany i odśwież podgląd.

Pogrubienie tekstu⁶

W elemencie style dodaj kod.

h4 {
font: bold 15px 'Courier New', Courier, monospace;
}

Zapisz zmiany i odśwież podgląd.

Kursywa tekstu⁷

W elemencie style dodaj kod.

h5 {
font: italic 10px 'Comic Sans MS';
}

Zapisz zmiany i odśwież podgląd.

Kapitaliki⁸

W elemencie style dodaj kod.

h6 {
font: small-caps 10px Georgia;
}

Zapisz zmiany i odśwież podgląd.

Pseudoklasy hiperłącza⁹

W elemencie style dodaj kod.

a:link {
font-weight: bold;
}
a:visited {
font-style: italic;
}
a:hover {
font-variant: small-caps;
}
a:active {
font: bold italic small-caps 12px Impact;
}

Zapisz zmiany i odśwież podgląd w przeglądarce. Przetestuj działanie hiperłączy na stronie.

Wgrywanie plików na serwer

Umieść plik formatowanietekstu.htm na serwerze.

1. Styl {font-family:} - definiuje fonty i/lub rodzinę.
2. Nazwa fontu może przyjmować wartość (windows): Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana. Nazwy fontów oddzielamy przecinkami, nazwy wielowyrazowe piszemy w apostrofie.
3. Nazwa rodziny fontów może przyjmować wartość: serif (czcionka szeryfowa), sans-serif (czcionka bezszeryfowa), monospace (czcionka o stałej szerokości znaków – monotypiczna), cursive (czcionka pochyła, pismo ręczne), fantasy (czcionka fantazyjna, dekoracyjna).
4. Styl {font-size:} – definiuje wielkość czcionki. Wartość może być równa: medium (standardowa), długość wyrażona w [px|mm|cm|in|pt|pc|em|ex], procent, xx-small, x-small, small, smaller (małe rozmiary), xx-large, x-large, large, larger (duże rozmiary)
5. Styl {font:} – definiuje właściwości czcionki: wyróżnienie, wielkość, font, rodzinę. Należy minimalnie określić rozmiar i nazwę fontu.
6. Styl {font-weight:} - definiuje pogrubienie czcionki. Wartość może być równa: lighter, normal, bold, bolder, 100, 200, 300, 400, 500, 600, 700, 800, 900.
7. Styl {font-style:} - definiuje pochylenie lub kursywę fontu. Wartość może być równa: normal, oblique, italic.
8. Styl {font-variant:} - definiuje kapitaliki. Wartość może być równa: normal, small-caps.
9. Pseudoklasy elementu a: a:link - hiperłącze nieodwiedzone; a:visited - hiperłącze odwiedzone; a:hover - hiperłącze wskazane; a:active - hiperłącze aktywne. Kolejność deklarowania pseudoklas w arkuszu stylów przypisanych do odsyłaczy ma znaczenie.

Efekty i obramowania

Wyróżnienie tekstu¹ - usunięcie podkreślenia hiperłącza

W elemencie style dodaj kod.

a {
text-decoration: none;
}

Zapisz zmiany i odśwież podgląd.

Obramowanie²

W elemencie style dodaj kod.

a {
text-decoration: none;
border: 4px outset silver;
}

Zapisz zmiany i odśwież podgląd.

Obramowanie lewe³, prawe⁴ górne⁵ i dolne⁶

W elemencie style dodaj kod.

<style type="text/css">
h1, h2, h3, h4, h5, h6 {
margin: 5px;
padding: 5px;
}
h1 {
border-left: 2px solid red;
}
h2 {
border-right: 2px solid red;
}
h3 {
border-top: 2px solid red;
}
h4 {
border-bottom: 2px solid red;
}
h5 {
border-bottom: 1px solid silver;
border-left: 20px solid red;
}
</style>

Zapisz zmiany i odśwież podgląd.

Styl obramowania: rozmiar⁷, kolor⁸ i styl lini⁹.

W elemencie style dodaj kod.

a {
border-width: 4px;
border-color: silver;
}
a:link {
border-style: groove;
}
a:visited {
border-style: ridge;
}
a:hover {
border-style: inset;
}
a:active {
border-style: outset;
}

Zapisz zmiany i odśwież podgląd.

Wskazanie elementu¹⁰

W elemencie style dodaj kod.

p:hover {
outline: 1px solid silver;
}

Zapisz zmiany i odśwież podgląd.

Aktywacja elementu¹⁰

W elemencie style dodaj kod.

p:active {
border:  1px solid red;
}

Zapisz zmiany i odśwież podgląd.

Wgrywanie plików na serwer

Umieść plik formatowanietekstu.htm na serwerze.

1. Styl {text-decoration:} - definiuje wyróżnienie tekstu. Wartość może być równa: none (brak), underline (podkreślenie), overline (nadkreślenie), line-through (przekreślenie), blink (migotanie).
2. Styl {border:} - definiuje obramowanie. Wartość może być równa: rozmiar styl i kolor linii.
3. Styl {border-left:} - definiuje obramowanie lewe. Wartość może być równa: rozmiar styl i kolor linii.
4. Styl {border-right:} - definiuje obramowanie prawe. Wartość może być równa: rozmiar styl i kolor linii.
5. Styl {border-top:} - definiuje obramowanie górne. Wartość może być równa: rozmiar styl i kolor linii.
6. Styl {border-bottom:} - definiuje obramowanie dolne. Wartość może być równa: rozmiar styl i kolor linii.
7. Styl {border-width:} – definiuje rozmiar lini.
8. Styl {border-color:} – definiuje kolor lini. Wartością jest color.
9. Styl {border-style:} – definiuje styl lini obramowania. Może przyjmować wartości: solid (ciągła), double (podwójna), dotted (kropkowana), dashed (kreskowana), groove (wklęsła), ridge (wypukła), inset (przycisk wciśnięty), outset (przcisk zwolniony).
10. Pseudoklasa :hover - element wskazany.
11. Pseudoklasa :active - element aktywny.