Wortal webmastera, skrypty, szablony, html, php, mysql, javascript, css

Style CSS są bardzo przydatne w tworzeniu i obsłudze stron www. W jednym pliku .css możemy zapisać wszystkie ustawienia (kolory, czcionki, tła, itd.) wyglądu strony. Postaram się opisać kolejne etapy pisania stylów css.

Podstawy

Style CSS możemy umieszczać na trzy różne sposoby, lecz ich własność nie zmienni się:

1. Przez zamieszczenie w kodzie html -sekcja <head> odnośnika do odrębnego plik (arkuszu stylów)
<LINK REL=STYLESHEET TYPE="text/css" HREF="pilk.css">

2.Wpis w kodzie html w sekcji <HEAD> tagu w którym określamy cechy strony, w której kod umieszczamy:

</style>

3.Określenie stylu w kodzie html

<p style="font-variant: small-caps; font-size: 10pt; font-weight: bold; color: red; font-family: Verdana">styl strony</p>

Osobiście polecam sposób pierwszy ponieważ jeżeli np. chcę zwiększyć rozmiar czcionki zmieniam tylko odpowiednią sekcję w pliku .css i na wszystkich podstronach czcionka jest zmieniona. A po drugie po co pisać naście razy to samo ? (nie wiem czy to dobrze wytłumaczyłem, bo ja tłumaczyć nie umiem, ale chyba wiecie o co chodzi).

Informacje ogólne

Kiedy informacja o stylu jest zawarta w tagu <STYLE> lub pliku .css, stosuje się taką formę :
elementA,elementB,...
{
własność1: wartość ;
własność2: wartość ;
}
Na początku wypisujemy element lub elementy który ma mieć określony przez nas styl następnie w nawiasie klamrowym podajemy własności i ich wartości np. H1,H2,H3,H4,H5 {font-weight: bold; color: green; font-family: Arial;}
Własnościami i ich wartościami zajmiemy się w następnych rozdziałach.

Jednostki długości

W tworzeniu stylów będziemy używać różnych określeń jednostek
W poniższych przykładach zaprezentowałem do czego służą

jednostki względne:
H5 { margin: 0.5em } /* w proporcji do wysokości
czcionki danego elementu */
H5 { margin: 1ex } /* w proporcji do wysokości litery x */
P { font-size: 10px } /* piksele na ekranie */

jednostki absolutne:
H1 { margin: 0.5in } /* cale, 1in = 2.54cm */
H2 { line-height: 3cm } /* centymetry */
H3 { word-spacing: 4mm } /* milimetry */
H4 { font-size: 12pt } /* punkty, 1pt = 1/72 cala */
H4 { font-size: 1pc } /* pica, 1pc = 12 punktów */

Komentarze

Aby wstawić komentarz do stylu używamy pary znaczników /* ... */ . Niektórym mogą się one wydać znajome gdyż występują one w języku C. Do stylu dołączamy je w następujący sposób :
H1 {font-weight: bold; color: green; font-family: Courier;} /* Nagłówek 1 będzie pogrubiony, koloru zielonego, czcionką Courier */

Tekst

text-align: - wyrównuje tekst względem marginesów. Wartości: left, center, right, justify (wyrównuje tekst do obu marginesów).

text-decoration: - 'dekoruje' tekst. Wartości: underline, overline, line-through, none - odpowiednio podkreśla, linia ponad tekstem, przekreśla, likwiduje wcześniejsze wartości.

line-height: - określa wysokość linii (odstęp między dolnymi krawędziami liter w wierszach). Wartości: liczba, mnożona przez wysokość czcionki (np. 1.4); dowolna inna jednostka długości; wartość procentowa; normal nakazuje zastosowanie wartości domyślnej.

vertical-align: - określa pozycję elementów wpisanych względem reszty tekstu. Może być użyta telko do takich elementów. Wartości:

baseline; tekst umieszczany na linii bazowej;
bottom; podstawa elementu na wysokości podstawy elementu rodzicielskiego;
middle; środek elementu na wysokości środka elementu rodzicielskiego;
sub; tekst poniżej linii bazowej (subscript); tylko IE;
super; tekst powyżej linii bazowej (superscript); tylko IE;
text-top; najwyższy punkt na wysokości najwyższego punktu czcionki elementu rodzicielskiego;
text-bottom; najniższy punkt na wysokości najniższego punktu czcionki elementu rodzicielskiego;
top; najwyższy punkt elementu na wysokości najwyższego elementu rodzicielskiego;
wartość procentowa

text-indent: - wcięcie akapitu na określoną głębokość. Może być przydatne do rozpoczynania akapitu zamiast stosowania seri niełamliwych spacji. Dopuszczalne jednostki długości i wartości procentowe.

text-transform: - zastępuje (konwertuje) wielkość liter występujących w pliku tekstowym literami określonymi przy pomocy wartości. Wartości:
capitalize; - pierwszy znak wielką literą;
uppercase; - wszystkie znaki wielkimi literami;
lowercase; - wszystkie znaki małymi literami: none; - pozostawia litery niezmienione (zastępuje ustawienia odziedziczoną)

letter-spacing: - ustala odstępy między literami. Dopuszczalne wszelkie jednostki długości. Przykład:
<P STYLE="letter-spacing: 8px" >odstępy między literami wynoszą 10pt</P>
odstępy między literami wynoszą 8px

float: - jak zawijać jeden tekst wokół drugiego (np. jeden akapit opływa drugi). Wartości:
right; - tekst pierwszego akapitu umieszczony z prawej strony, opływany przez tekst drugiego akapitu - przykład 1 (otwiera nowe okno, ok. 5kb)
left; - tekst pierwszego akapitu umieszczony z lewej strony, opływany przez tekst drugiego akapitu - przykład 1 (otwiera nowe okno, ok. 5kb)
none; - zachowuje wartość odziedziczoną.

clear: - stosuje się by zmusić przeglądarkę do wyświetlenia danego elementu poniżej innego elementu zamiast opływania (float). Wartości left, right, both, none ustalają położenie początku ruchomego wiersza za ruchomym obiektem.

list-style-type: - określa znaczek (albo literę/cyfrę) stosowany do oznaczania kolejnych elementów listy. Może być użyty tylko w obrębie znacznika <LI>. Wartości (nie wszystkie mogą być wyświetlone zgodnie ze swoją nazwą):
disc, circle, square - listy nieuporządkowane;
decimal; czyli ciąg 1, 2, 3, ...
decimal-leading-zero; wstawia wiodące zera : 01, 02, 03, ..., 58, 59.
lower-roman;, upper-roman; liczby rzymskie (małe: i,ii,iii; duże: I,II,III)
lower-latin; albo lower-alpha; małe litery alfabetu łacińskiego a, b, c,
upper-latin; albo upper-alpha; duże litery alfabetu łacińskiego A, B, C,

Przykład 2:
<OL>
<LI STYLE="list-style-type:lower-roman;">punkt 1
<LI STYLE="list-style-type:lower-roman;">punkt 2
<LI STYLE="list-style-type:lower-roman;">punkt 3
</OL>

punkt 1
punkt 2
punkt 3

list-style-image: - określa URL obrazka (format rozumiany przez przeglądarki - gif, jpg, png itp.), który ma być użyty do oznaczania elementów listy. Przykład:list-style-image: url(../images/obrazek.gif). Jeśli użytkownik włączy wyświetlanie obrazków, to nic nie zobaczy. NN nie obsługuje tej własności.

list-style-position: - określa sposób 'zawijania' listy. Wartości: inside; spowoduje wyświetlenie następnego wiersza pod znaczkiem wypunktowania; outside; spowoduje wyświetlenie następnego wiersza pod pierwszą literą poprzedniego wiersza.

<P STYLE="text-align: center; text-decoration: line-through;">Tekst wyśrodkowany, przekreślony</P>
Tekst wyśrodkowany, przekreślony

<P STYLE="line-height: 10pt;">Wysokość linii, czyli odstęp między dolnymi krawędziami liter w wierszach ustalony na 20 punktów. Można korzystać z dowolnych dostępnych jednostek długości lub liczby - mnożnika (bo wysokość linii jest iloczynem wysokości czcionki oraz tej liczby)</P>
Wysokość linii, czyli odstęp między dolnymi krawędziami liter w wierszach ustalony na 20 punktów. Można korzystać z dowolnych dostępnych jednostek długości lub liczby - mnożnika (bo wysokość linii jest iloczynem wysokości czcionki oraz tej liczby)

Czcionki

font-family: - określa grupę czcionek, przy użyciu których należy wyświetlić tekst. Dopuszczalne są 'rodziny ogólne' czcionek, lub ich nazwy własne np.:Verdana, Arial, "Vera Humana 95", sans-serif;. Elementy listy czcionek oddzielamy przecinkami, a nazwy wielowyrazowe ujmujemy w cudzysłowy. Przeglądarka wyświetla tekst pierwszą znalezioną czcionką, dlatego warto chwilę pomyśleć, która czcionka może wystąpić u użytkownika i projektować stronę używając właśnie tej czcionki.

font-size: - wysokość czcionki. Najpopularniejszą jednostką wysokości jest punkt (pt); dopuszczalne są inne jednostki względne i bezwzględne. Ponadto można stosować następujące wartości względne (bo przeglądarki różnie interpretują):xx-small, x-small, small, medium, large, x-large, xx-large oraz larger i smaller - odpowiednio zwiększają lub zmniejszają wyświetlany tekst (który ma odziedziczoną wysokość np. chcemy dodatkowo powiększyć w stosunku do całego akapitu pogrubiony element. Przykład:

<P>akapit pisany czcionką odpowiednią dla akapitu, a teraz <B STYLE="font-size: larger;" >uwaga!</B></P>

akapit pisany czcionką odpowiednią dla akapitu, a teraz uwaga!

font-style: - określa styl czcionki. Wartości: italic, oblique, normal. Efekt wartości italic i oblique jest podobny. Różnica polega na tym, że italic korzysta z czcionki pochyłej (zwykle każdy styl czcionki - pogrubienie, pochylenie itp. - jest zapisane w oddzielnym pliku na dysku, np. Arial.ttf to czcionka prosta, Arialbd.ttf to czcionka pogrubiona, Ariali.ttf to czcionka pochyła), natomiast oblique pochyla czcionkę prostą. normal nakazuje zastosowanie wartości domyślnej. oblique nie działa w NN. Czcionka pochyła jest mniejsza od pochylonej.

font-weight: - określa stopień pogrubienia tekstu. Wartości: bold, 100-900 co 100, bolder, lighter. normal nakazuje zastosowanie wartości domyślnej. Stosowanie wartości liczbowych wymaga przetestowania. Zwykle można wyodrębnić 3 wagi: 100-300 - najmniejsze pogrubienie; 400-500 - średnie; 600 i więcej - największe pogrubienie. Nie należy przesadzać z pogrubianiem tekstu - zgadnij co będzie wyróżnione, jeśli wszystko będzie pogrubione.

color: - definiuje kolor tekstu. Dopuszczalne są kody kolorów lub nazwy własne. Możesz zobaczyć również rozdział o tłach.

Przykład definicji czcionek

<STYLE TYPE="text/css">

</STYLE>

W powyższym przykładzie zdefiniowano selektor klasy o nazwie pogrub. Tekst wewnątrz tej klasy będzie wyświetlany czcionką Verdana lub Arial lub Helvetica lub inną bezszeryfową dostępną w systemie użytkownika; pogrubioną; o wysokości 15 punktów drukarskich.

Style linków

Często używamy CSS do tworzenia schematów dla wyglądu linków czyli odnośników. Jest to kolejno:

a:link - wygląd linku
a: hover - wygląd po najechaniu kursora myszki
a:visited - link który był już odwiedzony
a:active - aktywny link

Najczęściej używamy znaczników takich jak:

FONT-SIZE - rozmiar czcionki w pixelach
TEXT-DECORATION - styl linka
none - brak podkreślenia
underline - podkreślenia
COLOR - kolor odnośnika
FONT-FAMILY - czcionka linka
BACKGROUND - tło linka np none, red, #cccccc

Oto przykład stylu dla linka na którego najeżdżamy myszką:

a:hover { FONT-SIZE: 15px; BACKGROUND: red; COLOR: #363636; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: underline }

A tak wygląda w efekcie: