grafika - Kurs HTML i CSS
Odsyłacze HTML / Odsyłacz obrazkowy <a href, img, map, area>...tekstowych, które nie wyświetlają grafiki. Dzięki temu również w takich przeglądarkach możliwe będzie używanie odsyłacza obrazkowego, chociaż grafika nie zostanie wyświetlona. Jeżeli nie podasz tekstu alternatywnego (atrybut alt="..." dla znacznika <img>) dla obrazka w odsyłaczu, użytkownicy z przeglądarkami tekstowymi albo z wyłączonym wyświetlaniem obrazów mogą mieć utrudnioną lub wręcz uniemożliwioną nawigację w takim menu! Przykład <a href, img> Kliknij na tym przycisku: Aby...
Oprawa graficzna / Zamiennik obrazkowySpis treści Wstęp Fahrner Dwyer Phark Gilder/Levin Jefferies Zamienniki obrazkowe a Google Wstęp Po lekturze rozdziałów Menu w CSS oraz Szablon strony na DIV-ach powinny być Ci już znane ogromne możliwości wpływania na wygląd dokumentów stron WWW tylko za pomocą stylów CSS. Wiesz już, w jaki sposób można przygotować optymalny kod HTML, a następnie za pomocą w zasadzie drobnych wpisów w arkuszu CSS, wprowadzać daleko idące zmiany wyglądu witryny. Nie jest żadnym kłopotem zmiana...
- Komendy HTML 4.01 / LINK
...urządzeń aural - syntezatory mowy braille - urządzenia do czytania braillem handheld - urządzenia ręczne (mały ekran, monochromatyczne, grafika bitmapowa, ograniczona szerokość pasma) print - urządzenia drukujące nieprzezroczyście i umożliwiające podgląd wydruku projection - projektor screen - ekran komputera (domyślnie) tty - urządzenie o ograniczonych zdolnościach wyświetlania (terminale, urządzenia przenośne itp.) ty - telewizor (niska rozdzielczość, kolor, ograniczone...
- Komendy HTML 4.01 / STYLE
...urządzeń aural - syntezatory mowy braille - urządzenia do czytania braillem handheld - urządzenia ręczne (mały ekran, monochromatyczne, grafika bitmapowa, ograniczona szerokość pasma) print - urządzenia drukujące nieprzezroczyście i umożliwiające podgląd wydruku projection - projektor screen - ekran komputera (domyślnie) tty - urządzenie o ograniczonych zdolnościach wyświetlania (terminale, urządzenia przenośne itp.) ty - telewizor (niska rozdzielczość, kolor, ograniczone...
- Tło CSS / Zaczepienie tła obrazkowego {background-attachment}
...(jeśli posiada on suwaki), ale przewijane względem okna przeglądarki (CSS 3) [Zobacz także: Wstawianie stylów] Normalnie jeśli tłem strony jest grafika, przesuwa się ona razem z tekstem, w miarę przewijania treści okna za pomocą suwaka. Możemy jednak sprawić, że tło będzie przez cały czas nieruchome, nawet jeśli będziemy przewijali zawartość strony. Wtedy w wewnętrznym arkuszu stylów strony należy użyć polecenia: body { background-image: url(obrazek.jpg); background-attachment: fixed }...
- Obramowanie CSS / Obramowanie obrazkowe {border-image-source}
...bloków i przygotowania trzech obrazków. Ramka musi mieć stałą szerokość. Natomiast wysokość automatycznie dopasowuje się do zawartości, ale za to grafika pionowych krawędzi ramki nie może być zbyt skomplikowana. Obrazek obramowania {border-image-source} selektor { border-image-source: url(ścieżka dostępu do obrazka) } Selektorem może być praktycznie dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów]. Natomiast jako "ścieżka dostępu do obrazka" należy podać...
- Obramowanie CSS / Szerokość obramowania obrazkowego {border-image-width}
...szerokością obramowania obrazkowego możemy udekorować krawędzie elementu, który w ogóle nie posiada tradycyjnego obramowania. W takim przypadku grafika obramowania wchodzi pod zawartość tekstową - podobnie jakby była wstawiona w tle. border-image-source: url(punkt.gif); border-image-slice: 15; border-image-width: 10px; border-width: 15px Z drugiej strony, ustalając szerokość tradycyjnego obramowania większą niż szerokość obramowania obrazkowego, możemy odsunąć grafikę krawędzi od...
- Obramowanie CSS / Nawis obramowania obrazkowego {border-image-outset}
...się faktycznie widocznego marginesu elementu, oddzielającego go do sąsiednich bloków. Jeżeli szerokość marginesu będzie niewystarczająca, grafika z nawisu obramowania może nawet wejść pod zawartość sąsiedniego elementu lub schować się poza granicami strony. Dlatego ustalając nawis obramowania obrazkowego zawsze warto jednocześnie zadbać o nadanie odpowiedniej wartości marginesu. Jeżeli "border-image-slice: 124", to wartość nawisu obramowania obrazkowego można zilustrować...
- Pozycjonowanie CSS / Pozycja absolutna {position: absolute}
...poza krawędzie "obejmującego bloku". Jeśli w miejscu gdzie ma być umieszczony pozycjonowany element, znajdowało się wcześniej coś innego (tekst, grafika itp.), będzie to przykryte przez ten element. Należy przy tym pamiętać, że często ustawienie normalnych elementów strony zależy od rozdzielczości ekranu i rozmiarów okna przeglądarki! Przykład {position: absolute} Przykład
- Pozycjonowanie CSS / Pozycja relatywna {position: relative}
...gdy nie używamy żadnego pozycjonowania. Jeśli w miejscu gdzie ma być umieszczony pozycjonowany element, znajdowało się wcześniej coś innego (tekst, grafika itp.), będzie to przykryte przez ten element. Należy przy tym pamiętać, że często ustawienie elementów strony zależy od rozdzielczości ekranu i rozmiarów okna przeglądarki! Przykład {position: relative} Szary prostokąt poniżej, który jest częściowo przykryty, przedstawia położenie spoczynkowe obrazka, poddanego pozycjonowaniu: position...