1.2 Prosta strona internetowa
Temat: Prosta strona internetowa
- definiowanie właściwości czcionek,
- stosowanie jednostek miar absolutnych i względnych,
- definiowanie właściwości akapitu.
Podstawowa struktura strony www
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="mojstyl.css" type="text/css">
<title>Tytuł strony...</title>
</head>
<body>
Główna treść dokumentu
</body>
</html>
DEFINIOWANIE WŁAŚCIWOŚCI CZCIONEK W DOKUMENCIE HTML
Krój czcionki
Dobrze jest określić co najmniej dwa typy czcionek. Jeśli w komputerze użytkownika nie będzie typu występującego na pierwszej pozycji, to zostanie zastosowana następna. Jeśli zabraknie wszystkich wymienionych czcionek, zastosowana zostanie domyślna czcionka użytkownika. W przypadku wstawiania kilku typów czcionek należy oddzielać poszczególne nazwy przecinkiem i spacją. Jeśli nazwa czcionki składa się z kilku wyrazów, należy zastosować apostrofy proste.
Załóżmy, że chcesz ostylować jednozdaniowy akapit „Ala ma słonia.”. Twój preferowany krój czcionki to Courier New. Gdyby nie było go w komputerze użytkownika, należy zastosować czcionkę o stałej szerokości albo bezszeryfową. Jak to zapisać?
<p style="font-family: 'courier new', monospace, 'sans-serif';"> Ala ma słonia. </p>
Styl czcionki
Właściwość font-style: ma trzy dopuszczalne wartości:
- normal – czcionka prosta (jest to wartość domyślna);
- italic – kursywa stosowana, gdy w zestawie czcionki przewidziano znaki pochylone;
- oblique – kursywa stosowana, gdy w zestawie czcionki nie ma znaków pochylonych.
<p style="font-style: italic;"> Ala ma słonia. </p> <p style="font-family: 'courier new'; font-style: italic;"> Ala ma koguta. </p>
Wariant czcionki
Właściwość font-variant: może przyjąć dwie wartości:
normal – małe litery wyświetlające się standardowo (jest to wartość domyślna);
small-caps – małe litery wyświetlające się w postaci kapitalików lub przeskalowanych wielkich liter.
Aby małe litery w zdaniu „Ala ma wiele różnych zwierząt.” wyświetlały się w postaci kapitalików, należy zastosować następujący zapis:
<p style="font-style: normal; font-variant: small-caps;"> Ala ma wiele różnych zwierząt. </p>
Wysokość czcionki
Właściwość font-size: dopuszcza poniższe wartości względne:
- medium – wielkość czcionki domyślnej;
- small – wielkość będąca wynikiem działania: wysokość medium/1,5;
- x–small – wielkość będąca wynikiem działania: wysokość small/1,5;
- xx–small – wielkość będąca wynikiem działania: wysokość x-small/1,5;
- large – wielkość będąca wynikiem działania: wysokość medium*1,5;
- x–large – wielkość będąca wynikiem działania: wysokość large*1,5;
- xx–large – wielkość będąca wynikiem działania: wysokość x-large*1,5;
- larger – wielkość będąca wynikiem działania: wysokość domyślna*1,5;
- smaller – wielkość będąca wynikiem działania: wysokość domyślna/1,5.
<p style="font-size: 1cm;"> Ala ma <span style="font-size: 150%;">kota, słonia i koguta</span>. </p>
Zauważmy, że znacznik span pozwala przypisać styl konkretnym elementom.
Odstępy między literami
Właściwość letter-spacing: może przyjąć dwie wartości: domyślną (normal) oraz liczbę w jednostkach miary.
<p style="letter-spacing: 2mm;"> Ala ma zwierzęta - 2mm </p> <p style="letter-spacing: 10px;"> Ala ma zwierzęta - 10px </p> <p style="letter-spacing: normal;"> Ala ma zwierzęta - normal </p>
Zmiana wielkości znaków
Jeśli chcemy zdefiniować zmianę wielkości znaków, musimy zastosować właściwość text-transform:, której dopuszczalne wartości to:
- capitalize – ustawienie wielkiej litery na początku każdego wyrazu;
- uppercase – wypisanie całego tekstu wielkimi literami;
- lowercase – wypisanie całego tekstu małymi literami;
- none – wartość domyślna.
<p style="text-transform: capitalize;"> Ala ma konia, słonia, kota oraz jenota - capitalize.</p> <p style="text-transform: uppercase;"> Ala ma konia, słonia, kota oraz jenota - uppercase.</p> <p style="text-transform: lowercase;"> Ala ma konia, słonia, kota oraz jenota - lowercase.</p> <p style="text-transform: none;"> Ala ma konia, słonia, kota oraz jenota - none.</p>
DEFINIOWANIE WŁAŚCIWOŚCI AKAPITU W DOKUMENCIE HTML
Odstępy między wyrazami
Jak w przypadku właściwości letter-spacing: właściwość word-spacing: może przyjąć dwie wartości: domyślną (normal) oraz liczbę w jednostkach miary.
<p style="word-spacing: 4em;"> Ala ma zwierzęta - 4em</p> <p style="word-spacing: 18pt;"> Ala ma zwierzęta - 18pt</p> <p style="word-spacing: normal;"> Ala ma zwierzęta - normal</p>
Dekorowanie tekstu
Właściwość text-decoration: przyjmuje następujące wartości:
- underline – podkreślenie;
- overline – nadkreślenie;
- line-through – przekreślenie;
- none – brak elementów dekoracyjnych.
<p style="text-decoration: underline;"> Ala ma zwierzęta - underline</p> <p style="text-decoration: overline;"> Ala ma zwierzęta - overline</p> <p style="text-decoration: line-through;"> Ala ma zwierzęta - line-through</p> <p style="text-decoration: none;"> Ala ma zwierzęta - none</p>
Wyrównywanie tekstu w poziomie względem elementu nadrzędnego
Własność text-align: dopuszcza następujące wartości:
- left – wyrównanie tekstu do lewego marginesu elementu nadrzędnego;
- right – wyrównanie tekstu do prawego marginesu elementu nadrzędnego;
- center – wyrównanie tekstu względem środka elementu nadrzędnego;
- justify – wyrównanie tekstu do lewego i prawego marginesu elementu nadrzędnego.
Elementem nadrzędnym może być np. akapit lub większy blok tekstu wydzielony za pomocą znacznika <div>, tak jak w poniższym przykładzie. Zauważ, że aby określić sposób wyrównywania tekstu, trzeba podać dokładne wymiary elementu nadrzędnego.
<div style="width: 380px; background-color: #ffeeee; text-align: left;"> A może ona nie ma tych zwierząt? A może ona nie ma tych zwierząt? </div> <div style="width: 380px; background-color: #eeffee; text-align: right;"> A może ona nie ma tych zwierząt? A może ona nie ma tych zwierząt? </div> <div style="width: 380px; background-color: #eeeeff; text-align: center;"> A może ona nie ma tych zwierząt? A może ona nie ma tych zwierząt? </div> <div style="width: 380px; background-color: #ffeeff; text-align: justify;"> A może ona nie ma tych zwierząt? A może ona nie ma tych zwierząt? </div>
