|
Na stronach wykonanych przy użyciu html-a często text nie jest zbyt piękny; przyssany do krawędzi, mały, nieczytelny. Gdy zaglądamy w kod okazuje się, że jego wygląd w ogóle nie jest zdefiniwany:-( Nie wygląda to dobrze. I tu po raz koleny z pomocą przychodzi CSS. Może to stwierdzenie jest już nudne, ale w sposób szybki i łatwy można to zmienić:-).
Jak sądzisz, ile tabelek jest na tej stronie? Policz. A oto wynik=2+2-4+1 :-)
tak tylko jedna! Jedna tabelka z jedną komórką, reszta zrobiona w CSS w 5 min. Może nie jest to najpiękniejsza strona jaką w życiu widziałem, ale na pewno jest przejżysta i schludna - a to dwie podstawowe cechy dobrej strony.
Więc czas by pokazać Ci co zrobić, by równie szybko twoja strona nabrała rumieńców.
Na początek określimy wygląd pierwszej kolumy drugiej tabeli (o przypisanej klasie 'menu'). Zrobimy to wg mojego projektu. Potrzebujemy zatem 2 nowych klas:
P.menu1 { // 1
margin: 10px 10px 0 10px; // 2
font-size: 9pt; // 3
padding: 2px 20px 2px 0; // 4
font-weight: bold; // 5
text-align: right; // 6
font-family: verdana,tahoma,helvetica,sans-serif; // 7
background-color:#B1BBBE; // 8
border-left: 1px solid white; // 9
border-right: 1px solid white;
border-bottom: 1px solid white;
border-top: 1px solid white;}
P.menu2 {// 1
margin:0 10px 0 0; // 2
font-size: 9pt; // 3
padding: 0; // 4
text-align: right; // 6
font-family: verdana,tahoma,helvetica,sans-serif; // 7
border-right: 1px solid white;} // 9
Opis:
1 - Tworzę dwie klasy 'menu1' i 'menu2'.
2 - Coś nowego - margin, oznacza odległość od obramowania (text także może je mieć!) na zewnątrz. W przeciwieństwie do padding, które określa odległość od obramowania do wewnątrz (patrz rys.3).
 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).
4 - 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.
5 - określam jakiej "wagi" [weight] ma być text [font] na pogrubiony [bold]. Inne możliwości: normal, bolder, lighter.
6 - wyrównanie textu do prawej.
7 - 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.
8 - kolor tła zabarwi powierzchnię pod textem i pod padding. Miejsca pod marginesami [margin] nie zabarwi.
9 - 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.
Wstaw teraz akapity, z tymi klasami na stronę wg przykładu:
Dodaj teraz te dwie nowe klasy do pliku 'style.css'. Na razie nie wiele zmienią, ale będą niezbędne do przejścia przez nastepną lekcję.
Zmiany w 'index.htm':
<tr>
<td class="menu">
<p class="menu1">Menu:</p>
<p class="menu2">To miejsce wypełnisz na następnej lekcji</p>
</td>
dalsza część strony
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 black;
border-right: 1px solid black;
border-left: 1px solid white;
background-color: #AFB4C0;}
Opis:
* - nie będę tu się za wiele rozpisywał, bo przed chwilką dokładnie opisywałem każdy element. Tu jedynie wartości są inne.
1 - nowa klasa 'stopka'.
Teraz możesz wykończyć swoją stronę. W ostatnią - najniższą tabelę (jej jedyną komórkę) wpisz dowolny text typu
<p class="stopka">(c) yarpo2004</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żnaby było to zrobić w jednej, ale tak poznasz ciekawy efekt).
p.tytul {
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; }
Opis:
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 {
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: 0 0 10px 10px;
padding: 5px 10px 5px 10px; }
Opis:
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.htm'.
 Wykonaj wg przykładu:
<td class="txt">
<p class="tytul">Tu nagłówek</p>
<p class="tresc">wpisz tu dowolny własny text</p>
</td>
</tr>
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 txt.
Kod CSS
p.gora { // 1
font-size: 15pt;
padding: 25px 0 25px 0;
font-family: verdana,tahoma,helvetica,sans-serif;
text-align: center;}
Opis:
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 baaardzo trudne zadanie - musisz wprowadzić zmiany na (aż) trzech stronach! Ale sobie poradzisz. Oczywiści możesz pozmienić pewne fragmety, 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ę.
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ć <font>[czcionkę]. Czcionka opisuje jedynie jakiś wybrany fragment textu. Akapit (o ile nie zostanie to zmienione) automatycznie zajmuje 100% dostepnego 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. Popróbuj:-)
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.
|
