Gdyby nie wszędobylskie elementy graficzne, strony internetowe byłyby znacznie mniej atrakcyjne. Zobaczmy, jak przy użyciu CSS poprawnie osadzać zdjęcia i tworzyć graficzne tła.
Marginesy i wypełnienia
Tworzenie stron przy użyciu CSS bazuje na modelu pudełkowym (z ang. box model). Wyobraźmy sobie, że wszystkie elementy na stronie są prostokątami. Prostokąty mogą się zagnieżdżać, tj. jedno pudełko możemy włożyć do drugiego.
Wyświetlając obrazek podajemy jego rozmiary w pikselach. Powierzchnia obrazka to jakiś prostokąt. Podobnie jest z tekstem. Zajmuje on na ekranie określoną przestrzeń i gdyby ozdobić go ramką, byłby kolejnym prostokątnym pudełkiem.
Te wszystkie pudełka mają standardowe odległości między sobą. Gdy tworzymy akapit typu H1, zauważamy, że tworzy się dużo wolnej przestrzeni wokół niego. Tekstu nie da się umieścić w tej samej linii obok nagłówka, a umieszczony poniżej znajduje się kilkanaście pikseli pod samym tekstem nagłówka.
Takie domyślnie ustawienia marginesów można oczywiście zmienić. Służą do tego dwie właściwości: margin oraz padding. Jaka jest między nimi różnica? Spójrzmy na przykład 1.
Utworzyliśmy trzy nagłówki pierwszego stopnia, określając dla nich różne parametry: margin, padding oraz border. Arkusz stylu prezentuje się następująco:
H1 { background-color: black; color: white; font-size: 1.4em; }
H1.a { padding: 10px; margin: 10px; border: 3px solid green;}
H1.b { background-color: black; color: white; padding: 5px; margin: 5px; border: 1px solid green; }
H1.c { background-color: black; color: white; padding: 25px; margin: 5px; border: 8px solid green; }
Dla wszystkich elementów H1 określiliśmy powtarzający się kod. Wszystkie mają ten sam kolor tła, czcionki, rozmiar. Kolejne nagłówki to klasy a, b i c. Margines to przestrzeń, która znajduje się poza ramką. Padding określa odległość tekstu do ramki.
Ramka to przestrzeń, która rozdziela pojęcia margines i wypełnienie (padding). Korzystając z tych właściwości możemy używać zarówno jednostek w postaci pikseli, jak i em oraz procentów. Ponieważ obrazki są wymiarowane w pikselach, częściej stosuje się piksele.
Teraz nasze nagłówki mają takie same marginesy. Jeżeli chcemy, by lewy margines wynosił 0, możemy to zrobić w następujący sposób:
margin: 5px; margin-right: 0px;
Przeglądarka ustawi wszystkie marginesy na 5 px, lecz po uwzględnieniu właściwości margin-right, zmieni ten parametr na podany.
Istnieją odmiany właściwości margin:
- margin-top – margines górny
- margin-right – margines prawy
- margin-bottom – margines dolny
- margin-left – margines lewy
Gdy każdy margines ma mieć inną wartość, postąpimy następująco:
margin-top: 5px; margin-right: 6px; margin-bottom: 7px; margin-left: 8px;
W skrócie możemy podać do właściwości margin kolejne wartości marginesów (stąd zaprezentowana została taka ich kolejność, a nie inna):
margin-top: 5px; margin-right: 6px; margin-bottom: 7px; margin-left: 8px;
Jak zapamiętać kolejność? Poruszamy się zgodnie z ruchem wskazówek zegara od górnego marginesu – góra prawy, dół lewy. Możemy też podać dwie wartości:
margin: 5px 15px;
Wówczas margines dolny i góry będzie wynosił 5px, a lewy i prawy 15 px. Stosując trzy wartości, pierwszą przypiszemy do górnego marginesu, drugą do lewego i prawego, a trzecią do dolnego:
margin: 5px 15px 20px;
Zapis procentowy to określenie długości marginesu w stosunku do całej szerokości/wysokości dokumentu:
margin: 3%;
Analogiczna składnia występuje przy właściwości padding.
Obramowania
Do tworzenia obramowań udostępniono 21 właściwości. W gruncie rzeczy korzysta się z kilku będących swojego rodzaju skrótami. Właściwość border tworzy jednakowe obramowanie wokół elementu, definiując trzy parametry wejściowe:
border: TYP KOLOR GRUBOŚĆ
Kolor obramowania może być dowolny, wyrażony w jednej z oferowanych przez CSS jednostek. Grubość to parametr, który określamy w pikselach. Kod przykładowego obramowania prezentuje się następująco:
margin: solid gray 10px;
Analogiczne parametry wejściowe mają właściwości: border-top, border-right, border-bottom i border-left, z tym że występuje tu rozdzielenie na obramowanie (odpowiednio) górne, prawe, dolne i lewe.
Przydatne właściwości, które rozbijają obramowanie na poszczególne parametry:
- border-top-color, border-left-color, border-right-color, border-bottom-color – określają kolor poszczególnych obramowań,
- border-top-style, border-right-style, border-bottom-style, border-left-style – określają typ dla poszczególnych obramowań,
- border-top-width, border-right-width, border-bottom-width, border-left-width – określają szerokość obramowania dla poszczególnych stron obramowania,
- border-color – określa kolor dla całego obramowania,
- border-style – określa typ dla całego obramowania,
- border-width – określa szerokość dla całego obramowania.
Tekst opływający obraz
W HTML do utworzenia efektu okalania zdjęcia przez tekst używało się właściwości align, np. align = \”left\”. W CSS odpowiednikiem jest właściwość float.
Styl dla IMG wygląda następująco:
P IMG { float: left; margin: 15px; padding: 0; border: none; }
Właściwość left może przyjmować następujące wartości:
- left – wyrównaj do lewej,
- right – wyrównaj do prawej,
- none – nie otaczaj przez żadne inne elementy.
Odwrotną do tej właściwości jest clear, który deklaruje, że żaden element pływający nie znajdzie się po lewej, prawej lub po obu stronach elementu. Przyjmuje wartości (odpowiednio): left, right, both.
BORDER=0
Korzystając z CSS zaleca się zrezygnowanie ze składni:
![](\"jakisobraz.jpg\")
co pozwala uniknąć sytuacji, gdy wokół podlinkowanego obrazu tworzy się brzydka ramka. W dokumencie CSS wystarczy użyć:
IMG { border: none; }
Tak utworzona właściwość zostanie zastosowana do wszystkich obrazów w dokumencie.
Obramowanie obrazów
Ze względów estetycznych dobrze jest zastosować cienką obwódkę wokół obrazów. Ilustruje to przykład 2.
Realizacja jest bardzo prosta:
DIV.mi IMG { border: solid gray 1px; }
Wszystkie obrazy znajdujące się w klasie mi zostaną obramowane.
Tło graficzne
Klasycznym efektem jest cieniowanie górnej części strony przy użyciu powtarzającego się tła gradientu. Realizacja takiego efektu polega na stworzeniu obrazka o dowolnych wymiarach, które będziemy powielać według osi x i/lub y. Tworzymy zatem obrazek, nazywając go bg1.jpg, i stosujemy kod:
BODY { font-family: Verdana, sans-serif; background-image: url(bg1.jpg); background-repeat: repeat-x; }
Oczywiście tło może obejmować dowolny element DIV, P, czy nawet A. Lecz nam chodzi o zastosowanie tła dla całego dokumentu. Umieszczamy go więc w sekcji BODY. Ale istnieje cała masa właściwości powiązanych z tłem:
- background – może przyjąć do 5 parametrów: kolor tła, obraz tła, sposób powielania, nieruchomość, pozycja,
- background-attachment – określa czy tło ma być statyczne, czyli utrzymywać się w jednym miejscu przy przewijaniu strony (fixed), czy też przewijać się wraz ze stroną (scroll),
- background-color – kolor tła,
- background-image – obrazek tła, umieszczamy adres URL obrazka w nawiasach url(), bez cudzysłowu,
- background-position – pozwala ustalić pozycję tła na stronie, przyjmując dwie wartości; najpierw dla poziomu (top, center, bottom), a później dla pionu (left, center, right); jeżeli podamy jedną wartość, będzie ona potraktowana jako pozioma, natomiast wartość pionowa przyjmie domyślnie 50%,
- background-repeat – ustala w jaki sposób obraz ma się powtarzać; istnieją cztery dopuszczalne wartości: repeat (powtarza w pionie i poziomie), no-repeat (nie powtarza), repeat-x (powtarza tylko w poziomie), repeat-y (powtarza tylko w pionie).
Tło niepowtarzające się
Jeżeli chcemy umieścić element graficzny tła na początku, możemy użyć następującej składni:
BODY { font-family: Verdana, sans-serif; background: url(bg3.jpg) no-repeat; }
Centrowanie tła graficznego
Spróbujmy utworzyć następujący kod:
BODY { font-family: Verdana, sans-serif; background-image: url(bg3.jpg); background-position: center center; background-repeat: no-repeat; }
Mamy zamiar wyświetlić na środku strony nasz obrazek – tło. O ile Internet Explorer prawidłowo rozpatruje ten styl, o tyle Mozilla wyświetla tło w niepożądanym miejscu. Niestety, nie da się nic z tym zrobić. Jeżeli chcemy wyśrodkować tło, musimy dostarczyć odpowiedniej długości tekst, co ilustruje przykład 3.
Pozycjonowanie tła
Ciekawy efekt można uzyskać dzięki właściwości background-attachment. Przewijając stronę, nasze tło będzie stało w miejscu. Dodatkowo spróbujmy ukryć część tła, pozycjonując go.
Kod stylu:
BODY { font-family: Verdana, sans-serif; background-image: url(bg3.jpg); background-position: -60px -60px; background-repeat: no-repeat; background-attachment: fixed; }
Do właściwości background-position przypisaliśmy wartości ujemne. Oznacza to, że część tła będzie obcięta, tj. górna i lewa jego część zostanie schowana, czy też obcięta o 60 pikseli.
Pozycjonowanie tekstu na obrazie
Chcąc na obrazie umieścić tekst, musimy go potraktować jako tło i określić odstępy, po których ma nastąpić wyświetlenie tekstu. Efekt widoczny na przykładzie 4 uzyskuje się przy użyciu następującego kodu:
#box { position: relative; }
#box .text { color: white; font-style: italic; font-size: 1.6em; position: absolute; left: 3em; top: 2em; width: 250px; }
Kod HTML do tego przykładu:
![](\"foto2.jpg\")
Skorzystaj z promocji... i jedź nad morze już teraz!
W tym przykładzie wykorzystujemy tak zwane pozycjonowanie. Element z właściwością position ustawioną na absolute zostanie umieszczony na początku (współrzędne (0,0)) elementu rodzica, którego właściwość position ma inną wartość niż static.
Wartość relative oznacza możliwość zmiany umiejscowienia elementu o podane współrzędne, gdzie punktem odniesienia jest miejsce, w którym ten element by się znajdował, gdyby jego wartość position była równa static (domyślna).
Do określenia miejsca, w którym ma rozpocząć się tekst służą właściwości left oraz top, do których zdefiniowania możemy używać dowolnych jednostek. Aby tekst ładnie się zawijał, ustaliliśmy długość jego bloku na maksymalnie 250 pikseli.
Przycinanie obrazów
Zaprezentowany na przykładzie 4 obrazek mógłby być troszkę mniejszy. Nie korzystając z edytora graficznego, możemy przyciąć. Style będą wtedy wyglądały tak:
#box { position: relative; overflow: hidden; }
#box IMG { position: relative; top: -70px; left: -120px; }
#box .text { color: white; font-style: italic; font-size: 1.6em; position: absolute; left: 1em; top: 0.6em; width: 250px; }
Właściwość overflow ustala sposób postępowania, gdy zawartość elementu jest większa od jego wymiarów. Wartość hidden oznacza, że zawartość ta zostanie ukryta. Właściwość może też przyjmować wartości:
- auto – przeglądarka sama ustawia suwaki,
- scroll – poziome i pionowe suwaki będą zawsze wyświetlone,
- visible – część nadmiarowa zostanie wyświetlona.
Obrazek obcinamy, tworząc dla niego styl, gdzie właściwość position jest ustalona na relatywną, a pozycja na ujemną (ucinamy 70 px z wysokości i 120 px z szerokości). Ponieważ zmieniły się rozmiary zdjęcia, musimy od nowa ustalić pozycję tekstu.
Efekt półprzezroczystości
Nanoszony na obraz tekst prezentuje się bardzo ładnie, ale tylko wówczas, gdy tło jest jednolitego koloru. Gdy tak nie jest, można zdefiniować tło dla tekstu. Ciekawie wyglądałby efekt półprzezroczystości tła. Na przykładzie 5 pokazany jest efekt końcowy.
Kod potrzebny do stworzenia takiego efektu:
#box { position: absolute; top: 50px; left: 50px; width: 480px; height: 360px; background: url(\'foto1.jpg\') no-repeat; }
#box .text { margin-top: 50px; margin-left: 50px; width: 400px; padding: 0.5em; background-color: white; filter: alpha(opacity=70); opacity: 0.7; border: 1px solid gray; }
Kluczowe właściwości to filter i opacity. Pierwsza przeznaczona jest dla przeglądarek Internet Explorer 4+, druga dla przeglądarek opartych na silniku Gecko (Mozilla, NS6+). Wartości 70 i 0.7 to współczynniki przezroczystości, gdzie (odpowiednio) 100 i 1 to brak efektu przezroczystości.
Niestety ta metoda ma też pewne wady. Przykład uruchomiony w przeglądarce IE 6 nie działa. Wymagane jest ustawienie zezwolenia, bowiem właściwość opacity może stanowić zagrożenie bezpieczeństwa.
Sprawdzanie poprawności dokumentów CSS
Walidator CSS (http://jigsaw.w3.org/css-validator/) to usługa oferowana przez witrynę internetową organizacji W3C, odpowiedzialnej za opracowanie i udostępnienie standardu CSS. Walidator pozwala na sprawdzenie dowolnego arkusza stylu pod względem zgodności ze standardem.
Jest to o tyle istotne, że nieprawidłowy arkusz może zostać niepoprawnie przetworzony przez przeglądarki
Jeżeli nasz dokument CSS nie ma błędów, walidator pogratuluje nam zdolności programistycznych i pozwoli zamieścić na swojej stronie ikonkę zgodności. Gdy napotka na błędy, wyświetli informację o jego przyczynach.
Oprócz błędów występują też ostrzeżenia. Nie są one krytyczne dla poprawnego działania dokumentu CSS, lecz wskazują na sekcje, które można jeszcze udoskonalić.
