Kurs css - akapit, czcionka - określanie właściwości

Kurs css - akapit, czcionka - określanie właściwości

Opracował: DR
TEMAT Akapit, czcionka - określanie właściwości
Na stronach wykonanych przy użyciu html-a często text nie jest zbyt piękny; przyczepiony do
krawędzi, mały, nieczytelny. Gdy zaglądamy w kod okazuje się, że jego wygląd nie jest
zdefiniowany. Z pomocą przychodzi CSS.
Przykład
Jedna tabelka z jedną komórką, reszta zrobiona w CSS w bardzo krótkim czasie. Na początek
określimy wygląd pierwszej kolumny drugiej tabeli (o przypisanej klasie 'menu'). Zrobimy to
wg projektu. Potrzebujemy zatem dwie nowe klasy:
P.menu1 {
margin: 10px 10px 0 10px;
font-size: 9pt; // 3
padding: 2px 20px 2px 0;
font-weight: bold;
text-align: right;
font-family: verdana,tahoma,helvetica,sans-serif;
background-color:#B1BBBE;
border-left: 1px solid white;
border-right: 1px solid white;
border-bottom: 1px solid white;
border-top: 1px solid white;}
// 1
// 2
// 4
// 5
// 6
// 7
// 8
// 9
P.menu2 {// 1
margin:0 10px 0 0;
font-size: 9pt;
padding: 0;
text-align: right;
font-family: verdana,tahoma,helvetica,sans-serif;
border-right: 1px solid white;}
1.
2.
Tworzę dwie klasy 'menu1' i 'menu2'.
margin, oznacza odległość od obramowania na zewnątrz. W przeciwieństwie do padding, które
określa odległość od obramowania do wewnątrz (Rys. – 4).
3.
określam rozmiar czcionki czcionka[font]-rozmiar[size]. Najczęściej podaje się w pixelach[px] lub
punktach[pt] (zaleca się jednak stosowanie innych jednostek niż punkty).
o tym było już wcześniej - padding - odległość obiektu od obramowania - prawie każdy obiekt może
mieć obramowanie (nawet text, link, grafika). Opisywane w kolejności: góra prawa dół lewa lub
jeśli wszystkie wartości są takie same jedną liczbą. Pamiętaj, że tylko 0 może nie mieć jednostki.
określam jakiej "wagi" [weight] ma być text [font] na pogrubiony [bold]. Inne możliwości: normal,
bolder, lighter.
wyrównanie textu do prawej.
określam rodzaj czcionki: czcionka[font]-rodzaj[family]: pierwsza, druga, trzecia. Podaje się kilka
czcionek, po to by w przypadku, kiedy jakaś czcionka nie była zainstalowana na komputerze
internauty nie wchodziła standardowa Times New Roman, tylko następna z kolejki.
kolor tła zabarwi powierzchnię pod textem i pod padding. Miejsca pod marginesami [margin] nie
zabarwi.
obramowanie textu(!) Też się zdziwiłem kiedy o tym usłyszałem. Efekt możesz ocenić na tej stronie.
Spójrz na lewą lub prawą (podwójną) ramkę - jedna linia z tabeli, druga z textu.
4.
Opis
// 2
// 3
// 4
// 6
// 7
// 9
5.
6.
7.
8.
9.
Dodaj teraz te dwie nowe klasy do pliku 'style.css'. Na razie nie wiele zmienią, ale będą
niezbędne do przejścia przez następną lekcję.
Wstaw teraz akapity, z tymi klasami na stronę wg przykładu [zmiany w 'index.htm']:
ZSP Oleśnica
-1-
Opracował: DR
Przykład
<tr>
<td class="menu">
<p class="menu1">Menu:</p>
<p class="menu2">To miejsce wypełnisz na następnej lekcji</p>
</td>
Opis
Przykład
Jeśli włączasz teraz swoją stronę 'index.htm' to na dole jest jeszcze tak brzydko wykończona
(właściwie, niewykończona). Zaraz to zmienimy - tu zrozumiesz po co (m.in) stworzono
możliwość obramowania textu:
P.stopka { // 1
margin: 0;
padding: 10px 1px 1px 1px;
font-family: arial;
font-size: 7pt;
text-align: center;
border-bottom: 1px solid while;
border-right: 1px solid while;
border-left: 1px solid white;
background-color: #AFB4C0;}
1.
nowa klasa 'stopka'.
Przyk
ład
Teraz możesz wykończyć swoją stronę. W ostatnią - najniższą tabelę (jej jedyną komórkę)
wpisz dowolny text typu:
<p class="stopka">(c) ZSP-Olesnica 2006</p>
Teraz kolej na określenie wyglądu głównego txtu na stronie. Do tego będą potrzebne także 2
klasy (oczywiście można by było to zrobić w jednej, ale tak poznasz ciekawy efekt).
Przykład
p.tytul {
ZSP Oleśnica
border-left:1px solid #333333;
border-right:1px solid #333333;
border-top:1px solid #333333;
font-family: arial,tahoma,helvetica,sans-serif;
font-size: 10pt;
font-weight: bold;
text-align: justify;
margin: 10px 0 0 10px;
padding: 5px 10px 5px 10px; }
-2-
Opis
Opracował: DR
Wszystkie właściwości powinieneś już znać. Zauważ, że nie określiłem dolnego obramowania, a dolny
margines [margin:10px 0 0 10px;] ustaliłem na zero. Dzięki temu boczne obramowania (tej i niższej
klasy) jakby "skleją" się ze sobą.
P.tresc {
Opis
Przykład
border-left:1px solid #333333;
border-right:1px solid #333333;
border-bottom:1px solid #333333;
font-family: arial;
font-size: 9pt;
text-align: justify;
margin: 0px 10px 10px 10px;
padding: 5px 10px 5px 10px; }
Wszystkie właściwości powinieneś już znać. Zauważ, że nie określiłem dolnego obramowania, a dolny
margines [margin:10px 0 0 10px;] ustaliłem na zero. Dzięki temu boczne obramowania (tej i niższej
klasy) jakby "skleją" się ze sobą.
Tu już możesz zauważyć jak to będzie zrobione. Można to porównać do garnka z pokrywką - klasa 'tytul'
jest "pokrywką" klasy 'tresc'. Może teraz jeszcze za bardzo nie rozumiesz, ale kiedy popróbujesz to
zrozumiesz. Pozmieniaj wartości 'border' i 'margin'.
Po przeanalizowaniu rezultatów powinieneś już wszystko zrozumieć.
Mam nadzieję, że już dokonałeś zmian w pliku 'style.css', ale nadal trzeba uzupełnić
zawartość 'index.html'.
Przykład
<td class="txt">
<p class="tytul">Tu nagłówek</p>
<p class="tresc">wpisz tu dowolny własny text</p>
</td>
</tr>
Opis
Przykład
Jest jeszcze jedno miejsce, które przeważnie na stronach wypełnia grafika - miejsce na
banner. Na twojej stronie tworzonej podczas tego kursu jest to jedyna komórka pierwszej
tabeli (z przypisaną klasą 'gorna'). Stwórz teraz nową klasę i wpisz w komórkę:
<p class="gora">WWW.TwojaStrona.pl</p> - lub dowolny inny tekst.
p.gora {
font-size: 15pt;
padding: 25px 0 25px 0;
font-family: verdana,tahoma,helvetica,sans-serif;
text-align: center;}
1.
// 1
Nowa klasa 'gora', text bedzie dosyć duży - 15pt, wyśrodkowany. Odległość od górnej granicy
wynosi 25, prawe - 0, dolej 25, lewej - 0 [pixeli], rodzaj czcionki 'verdana', jeśli nie będzie takiej
czytaj tahoma itd.
Teraz masz bardzo trudne zadanie - musisz wprowadzić zmiany na (aż) trzech stronach.
Ale sobie poradzisz. Oczywiści możesz pozmieniać pewne fragmenty, dostosowując je do
własnego gustu - to przecież twoja strona. (nie zmieniaj jednak struktury strony rozmieszczenia i ilości tabel, bo będzie Ci potem trudno się odnaleźć).
W linku do tej lekcji widnieje napis 'akapit, czcionka'. O akapicie napisałem już wiele - teraz
czas na czcionkę.
ZSP Oleśnica
-3-
Opracował: DR
Może najpierw wyjaśnię na czym polega różnica między nimi. Otóż akapit <p> odnosi się do
pewnej spójnej całości. W akapit nie można wstawić w innego akapitu, ale można wstawić
[czcionkę]. Czcionka opisuje jedynie jakiś wybrany fragment textu. Akapit (o ile nie zostanie
to zmienione) automatycznie zajmuje 100% dostępnego miejsca, podczas gdy font zajmuje
jedynie (jeśli nie zostanie to zmienione) fragment szerokości strony, na którym jest text. Font
posiada prawie wszystkie właściwości akapitu, dlatego nie będę tu omawiał żadnego
przykładu, bo myślę, że wszystko jasne.
Uwaga: Znacznik <font> został usunięty ze specyfikacji HTML. Oznacza to, że nie należy go
używać. W jego zastępstwie należy stosować <span>. O tym znaczniku więcej w dalszej
części kursu.
ZSP Oleśnica
-4-