tekst obrazek - Kurs HTML i CSS
HTML5 / Responsywny obrazek <picture, source>...IMG w najpowszechniej obsługiwanym formacie graficznym (np. JPEG). Jeśli tego nie zrobimy, w starszych przeglądarkach nie zostanie wyświetlony żaden obrazek. Przykład <picture, source type> <picture> <source srcset="zdjecie.webp" type="image/webp"> <source srcset="zdjecie.jxr" type="image/vnd.ms-photo"> <img src="zdjecie.jpg" alt="Przykładowe zdjęcie"> </picture> Jeśli przeglądarka nie będzie obsługiwać żadnego z nowoczesnych formatów graficznych, wtedy na ekranie zostanie wyświetlony...
Losowy element...elementów Wszystkie elementy w kolejności losowej Losowy element Często przydatną funkcją na stronie WWW może okazać się wyświetlenie losowego tekstu lub obrazka. Można w ten sposób np. zbudować bazę cytatów albo porad i prezentować je użytkownikowi losowo - jeden przy każdym wejściu na stronę. Innym zastosowaniem może być rotacja bannerów lub buttonów. Jeśli chcesz umieścić na swojej stronie kilka bannerów, ale masz na to tylko jedno miejsce, wstaw tam właśnie ten skrypt, dzięki czemu...
- Odsyłacze HTML / Odsyłacz obrazkowy <a href, img, map, area>
...odsyłaczy) <img, map, area> Mapa odsyłaczy po stronie serwera <a href, img ismap> Wstęp Do tej pory przedstawione zostały jedynie odsyłacze tekstowe, tzn. na ekranie był wyświetlany pewien krótki tekst (opis odsyłacza), po kliknięciu którego, następowało przeniesienie do wskazanego adresu. Łatwo zauważyć, że to nie wszystkie możliwości, jakie dają odsyłacze. Na większości stron internetowych można spotkać "aktywne" obrazki, symulujące przyciski. Po kliknięciu, zachowują się one jak...
Kursory CSS / Kształt kursora {cursor}...przeznaczenia auto - automatyczny wybór kształtu kursora (zależy od typu elementu, na który wskazujemy - tryb domyślny) Przykład Wskaż ten tekst myszką Zauważ, że kształt kursora typu "auto" powinien zmieniać się w zależności od tego, czy wskażesz myszką tekst czy fragment tła znajdującego się pod nim (już bez tekstu). default - kursor domyślny (strzałka) Przykład Wskaż ten tekst myszką none - brak kursora (CSS 3) - interpretuje MSIE 9, Firefox 3, Opera, Chrome Przykład...
- Formularze HTML / Wysłanie formularza <input "submit, image">
Spis treści <input "submit, image"> Przycisk tekstowy <input "submit"> Przycisk obrazkowy <input "image"> Nazwa przycisku wysłania formularza <input "submit" name> Przycisk tekstowy <input "submit"> <form action="..."> <input type="submit" value="wartość"> </form> gdzie jako "wartość" należy wpisać napis, który pojawi się na przycisku wysyłania formularza. Jeśli opuścimy ten parametr, pojawi się tam domyślny tekst, np.: "Prześlij kwerendę". Polecenie wprowadza na ekran przycisk z...
- Selektory pseudoelementów CSS / Przed... :before
...znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli i inne [zobacz: Wstawianie stylów]. Natomiast jako wyraz "treść" można wpisać dowolny tekst. Polecenie pozwala automatycznie dopisywać podaną treść przed określonymi elementami, na które wskazuje selektor. UWAGA! Polecenie nie interpretuje MSIE 7.0. W MSIE 8.0 wszystko jest w porządku, ale tylko w trybie Standards Compliance. Przykład :before Jeżeli w arkuszu stylów została umieszczona następująca reguła: p:before { content...
- Selektory pseudoelementów CSS / Po... :after
...znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli i inne [zobacz: Wstawianie stylów]. Natomiast jako wyraz "treść" można wpisać dowolny tekst. Polecenie pozwala automatycznie dopisywać podaną treść po określonych elementach, na które wskazuje selektor. UWAGA! Polecenie nie interpretuje MSIE 7.0. W MSIE 8.0 wszystko jest w porządku, ale tylko w trybie Standards Compliance. Przykład :after Jeżeli w arkuszu stylów została umieszczona następująca reguła: p:after { content...
- Kursory CSS / Kursor obrazkowy {cursor: url}
...względem lewego-górnego narożnika grafiki (wymagane jest podanie pozycji zawsze za pomocą dwóch współrzędnych). Przykład {cursor: url} Wskaż ten tekst myszką Pytania i odpowiedzi {cursor: url} Jak ustawić dowolny kursor? Aby ustawić dowolny kursor, użyj właściwości cursor w CSS i określ odpowiednią wartość kursora. Możesz również użyć niestandardowego obrazka jako kursora za pomocą url('ścieżka/do/obrazka.png'). Na przykład: element { cursor: url('myszka.png'), auto } ustawi...
- Pozycjonowanie CSS / Nakładanie {z-index}
Spis treści {z-index} Nakładanie {z-index} Kontekst stosu Nakładanie {z-index} selektor { position: rodzaj; parametry; z-index: numer } Selektorem może znacznik poddany pozycjonowaniu [zobacz: Wstawianie stylów]. Wyrażenie "position: rodzaj; parametry;" określa typ oraz parametry pozycjonowania (absolutne, relatywne lub ustalone). Natomiast jako "numer" należy wpisać pojedynczą liczbę, określającą, kolejność nakładania pozycjonowanych elementów (element z numerem 1 będzie na samym...
- Menu w CSS / Pionowe menu
...zajmowało całego ekranu. Stylizujemy odnośniki listy tak, aby wyświetlały się w bloku (display: block). Dzięki temu nie trzeba dokładnie wskazywać tekstu, aby link zmienił wygląd (sprawdź). Niestety zachowanie to może nie dotyczyć niektórych bardzo starch przeglądarek, dlatego bezpieczniej jest dodatkowo określić szerokość (width) bloku odnośnika. Zgodnie z modelem pudełkowym szerokość ta jest równa szerokości bloku rodzica, pomniejszonej o sumę grubości obramowania (border) i szerokości...