Tutorial: css dla nowicjuszy

Mój drobny poradnik w odcinkach nie pretenduje do miana fachowego. Powstał na podstawie nauki css metodą prób i błedów ;) przy drobnej pomocy dostępnych w internecie materiałów, do których sięgałam w momentach krytycznych (czytaj: gdy chciałam ładnie a wychodziło inaczej ;) ).

Pierwsza część poradnika css to podstawy - formatowanie tekstu, wstawianie tła, określanie marginesów i definiowanie stylu linków.
Pliki dotyczące tej części:
style.htm i style.css

Gwoli encyklopedycznej ścisłości ;) - rozwinięcie skrótu: css - czyli kaskadowy arkusz styli (Cascading Style Sheet).

Na początku tworzymy plik css. Możemy to zrobić w zwykłym notatniku, lub w innym edytorze tekstu. Możemy także użyć programów do tworzenia stron www. Niektórzy z zasady gardzą wizualnymi edytorami - dla mnie są one podstawowym narzędziem - po prostu lubię widzieć od razu to co robię ;). Zazwyczaj używam Dreamweavera.

Plik css tworzymy zapisując po prostu plik z rozszerzeniem css. W moim przykładzie będzie to plik: style.css

Teraz stwórzmy plik htm - najlepiej żeby był on zgodny z xhtml.
W moim przykładzie będzie to plik: style.htm - zgodny z XHTML 1.0 transitional. Jeśli ktoś używa zwykłego html - podane w przykładach fragmenty kodu html będą zamknięte tagiem - ">", a nie "/>"

Teraz musimy plik style.htm połączyć z plikiem style.css - po to, aby pobierał dane z pliku css. Plik css najlepiej "podpiąć" jako link - wpisując w sekcji head:

<link href="style.css" rel="stylesheet" type="text/css" />

Teraz możemy zacząć zabawę ;).
Najpierw zajmijmy się formatowaniem tekstu.

Formatowanie tekstu, które w html wyglądałby w ten sposób:

<font color="#000000" size="2px" face="Verdana,
Arial, Helvetica, sans-serif">Zwykły tekst.</font>

w css wyglada tak:

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}

(podstawową czcionkę możemy także zdefiniować w pliku css za pomocą tagu: p { } - jeśli jednak ma dotyczyć całości dokumentu, a przy tym będziemy także określali kolor lub grafikę tła, marginesy strony lub inne ogólne elementy lepiej użyć - body { })

Gdy już mamy w pliku css taki zapis - wystarczy, że w pliku html wpiszemy:

Zwykły tekst.
(lub jeśli użyliśmy tagu - p {}: <p>Zwykły tekst.</p>)

Jeśli chcemy na stronie używać także innych kolorów i krojów czcionek - możemy je zdefiniować w dodatkowych tagach css - np. jeżeli chcemy uzyskać efekt, który

w html wyglądałby tak:

<font color="#CC0000" size="3" face="Verdana, Arial, Helvetica, sans-serif"><strong>Tekst wyróżniony.</strong></font>

wpisujemy w pliku css:

.font_bordo {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #CC0000;
font-weight: bold;
}

oczywiście nazwa nie ma znaczenia - może być dowolna - ważne jest jedynie to, aby nie zawierała spacji i żeby przed nazwą była kropka "." - to ona określa w css styl, którego możemy użyć dla dowolnych tagów i elementów w pliku html (zastosowanie class style do innych elementów - poza tekstem - opiszę w kolejnej części).

Teraz, aby użyć tego formatowania w tekście html - wystarczy wpisać:

<span class="font_bordo">Tekst wyróżniony.</span>

lub jeśli tekst ma być widoczny w nowej linii możemy użyć:

<p class="font_bordo">Tekst wyróżniony.</p>

I w ten sposób możemy definiować dowolną ilość czcionek potrzebnych do naszej strony.

Innym sposobem na definiowanie parametrów tekstu jest używanie tagów nagłówkowych - h1, h2, h3... - można w ten sposób zdefiniować np. jakiś tytuł.

W przykładowym pliku style.css wpisałam:

h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
color: #333333;
font-weight: bold;
}

w pliku html wpisujemy tag:

<h1>Jakiś tytuł</h1>

Uwaga: teoretycznie zamiast tagów nagłówkowych można w css wpisać jakąkolwiek nazwę - typu - big_font {}. I po wposaniu w html tagu - <big_font></big_font> - tekst wyświetli się prawidłowo sformatowany. Tyle, że wymyślona przez nas nazwa tagu nie będzie zgodna z żadnym standardem ;) - dlatego nie polecam tworzenia takich "neologizmów" html.

W znaczniku - body pliku css możemy także zdefiniować inne stałe elementy strony. Np. dla tła w kolorze jasno żółtym (#FFFFCC) - w pliku css trzeba dodać - background: #FFFFCC; - do znacznika body,

który po dopisaniu wygląda tak:

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background: #FFFFCC;
}

Jeśli tłem strony ma być grafika - tak jak w moim przykładowym pliku - to zamiast koloru trzeba w pliku css dodać linię - background: url(images/bg_a.gif) - oczywiście podając ścieżkę do swojego pliku tła ;).

Znacznik body w przykładowym pliku style.css wygląda teraz tak:

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background: url(images/bg_a.gif)
}

(można także określić tło strony wpisując - background-image: url(images/bg_a.gif); - jednak lepiej używać - background i dodać także kolor tła w tym znaczniku - pamietając, iż są ludzie, którzy wyłączają wyświetlanie grafik na stronach. Wpis określający jednocześnie kolor i grafikę wygląd tak - background: #FFFFCC url(images/bg_a.gif); ).

W znaczniku body możemy także okreslić marginesy - w moim pliku są ustawione marginesy 10 pixeli.

Sekcja body po dopisaniu wartości marginesów wygląda tak:

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background: #FFFFCC url(images/bg_a.gif);
margin: 10px;
}

Można oczywiście określić różne wartości dla marginesów, np. - margin: 5px 0 0 0; . Te wartości określają po kolei: górny, prawy, dolny i lewy margines. Przy identycznych wartościach dla wszystkich marginesów wystarczy wpisać - margin: 10px; - tak jak w przykładowym pliku css. Oczywiście wartość liczbową określając według swoich potrzeb (dla strony bez marginesów bedzie to - margin: 0px; ).
(marginesy można również określać w osobnych tagach wpisami - margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0 - ale lepiej określać je tak jak w moim przykładzie).

Teraz zajmiemy się wyglądem linków. Przede wszystkim podstawowy format linków, który ma dotyczyć całego dokumentu. W moim przykładzie linki są ciemnozielone i podkreślone. Czcionkę określamy tylko wtedy jeśli chcemy, aby była inna niż podstawowa czcionka strony.

W przykładowym pliku style.css ustawienia linków wyglądają tak:

a:link {
color: #336600;
text-decoration: underline;
}

a:visited {
color:#FF6600;
}

a:hover {

color: #009966;

}
a:active {
color: #009966;
}

Informację dotyczącą podkreślenia i innych dodatkowych parametrów tekstu dekoracyjnego wystarczy podać w tagu - a:link { }, natomiast jeśli chcemy, żeby np. po kliknięciu w lnk "dodatkowe ozdobniki" nie były już uwzględniane

musimy wpisać:

a:visited {
color:#FF6600;
text-decoration: none;
}

na tej samej zasadzie działa wykluczenie ozdobników z parametrów - a:hover { } (widok po najechaniu na link myszką) i a:active { } (widok w momencie klikania linku).

Określiliśmy już podstawowe formatowanie linków. Jeśli chcemy, aby na stronie pojawiły się także linki w innych kolorach - np. linki w menu - również możemy je zdefiniować w pliku css.

W tym celu najpierw określamy podstawowe parametry specjalnych linków.

W przykładowym pliku css wyglądają one tak:

.menu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #CC0000;
}

ten element stylu będziemy mogli wykorzystać nie tylko do linków także do np. linków menu.

Teraz określamy wygląd linków dla tego elementu:

.menu
a:link {
color: #2C5B7E;
text-decoration: none;
}

.menu a:visited {
color: #497E98;
text-decoration: none;
}

.menu a:hover {
color: #3A7EB6;
text-decoration: none;
}

.menu a:active {
coor: #3A7EB6;
text-decoration: none;

Należy pamiętać, aby wykluczyć tekst dekoracyjny jeśli w ustawieniach linków dla całego dokumentu dodaliśmy jakiś element dekoracyjnego tekstu, a nie chcemy, aby był on widoczny w linkach formatowanych przy pomocy class style. Żeby wykorzystać ten styl

w pliku html wpisujemy:

<span class="menu"><a href="link_1.html">link
1</a> <a href="link_2.html">;link 2</a> <a href="link_3.html">link 3</a></span>

Podobnie jak w przypadku tagów dotyczących zwykłego tekstu zamiast znacznika <span class="menu"</span> możemy użyć tagu <p class="menu></p> - chociaż tworząc menu raczej wykorzystuje się tag span class.

I to koniec odcinka pierwszego, którego zapewne i tak nikt nie przeczyta.