wygląd - Kurs HTML i CSS
Formularze HTML / Lista rozwijalna <select, option, optgroup>Spis treści <select, option, optgroup> Lista rozwijalna <select, option, optgroup> Możliwość wyboru kilku opcji (typ rozszerzony) <select multiple> Z zaznaczoną domyślnie opcją <option selected> O określonej wysokości pola <select size> Blokada pola <select disabled> Grupy opcji <optgroup> Lista rozwijalna <select, option, optgroup> <form action="..."> <select name="nazwa"> <option>Tu wpisz pierwszą możliwość</option> <option>Tu wpisz drugą możliwość</option> (...) </select>...
Wstawianie stylów CSS / Zewnętrzny arkusz stylów <link "stylesheet"> @charset...przeniesione do podanej strony (podczas jej wyświetlania). Wszystkie podstrony serwisu z osadzonym w swoim nagłówku takim poleceniem, uzyskają wygląd, określony w załączonym arkuszu stylów. W pojedynczym dokumencie HTML można dołączyć dowolną liczbę zewnętrznych arkuszy stylów - każdy jako osobny element <link rel="stylesheet">. W przypadku konfliktów, ważniejsze będą deklaracje z arkusza dołączonego później. Zwykle tworzy się pojedynczy zewnętrzny arkusz i załącza go w całym serwisie...
- Selektory pseudoklas CSS / Atrybut języka :lang
...inside block, but without attribute lang.</p> <p lang="pl">4. To jest akapit wewnątrz bloku, który posiada atrybut <b>lang="pl"</b> i dlatego jego wygląd nie zmieni się, pomimo że blok nadrzędny posiada atrybut lang="en".</p> ...and this is end of block.</div> Na ekranie powinniśmy otrzymać pierwsze trzy akapity napisane kolorem czerwonym, a ostatni bez zmian: 1. This is paragraph with attribute lang="en". 2. This is paragraph with attribute lang="en-US". This is block with attribute...
- Selektory pseudoklas CSS / Łączenie selektorów
...część odnośników na stronie wystylizować inaczej, jeżeli chodzi o ich podświetlanie po wskazaniu myszką. Mogą to być np. linki z menu, które powinny wyglądać inaczej niż normalne hiperłącza w tekście. Jeżeli jednak chcemy zmienić wygląd wszystkich odsyłaczy znajdujących się w jednym miejscu - np. w menu serwisu - wygodniej jest użyć następującej reguły: .przyklad_selektory2 a:hover { font-weight: bold } Teraz wystarczy wstawić: <div class="przyklad_selektory2"> <a href="?">Link1</a> <a...
- Wstawianie stylów CSS / Alternatywny arkusz stylów <link "alternate stylesheet">
...zaznaczenie spowoduje dołączenie wszystkich takich arkuszy jednocześnie. Alternatywny arkusz stylów pozwala udostępnić użytkownikowi kilka wersji wyglądu strony do wyboru. Projektuje się wtedy kilka zewnętrznych arkuszy CSS, a następnie osadza w specjalny sposób, dzięki czemu w przeglądarce użytkownika pojawi się możliwość wyboru jednego spośród przygotowanych wyglądów. Jest to namacalny dowód potęgi języka CSS. Nie trzeba tworzyć, a potem aktualizować kilku wersji witryny, aby zapewnić...
Wykaz skryptów / Pozostałe skryptyAktywne przyciski Przyciski które zmieniają wygląd, po wskazaniu ich myszką (przydatne przy tworzeniu menu). Data aktualizacji strony Automatyczne wyświetlenie daty ostatniej aktualizacji strony. Aktualna data Wyświetlenie na stronie aktualnej daty. Nowość Sygnalizowanie nowości bezpośrednio w spisie treści lub na każdej ze stron, poprzez wyświetlenie specjalnego obrazka albo napisu. System newsów Automatyczny system wiadomości na stronie WWW, które są wyświetlane tylko przez określony...
- HTML5 / Sekcja <section>
...do: <a href="#moja-sekcja">Moja sekcja</a> Sekcja nie powinna być używana jako ogólny pojemnik na elementy. Jeżeli istnieje potrzeba, aby zmienić wygląd kilku następujących po sobie elementów, należy do tego użyć znacznika DIV, który w odróżnieniu od SECTION, nie niesie ze sobą żadnego znaczenia semantycznego. Ponadto znacznik SECTION został przeznaczony do tworzenia ogólnych sekcji dokumentu. Lepiej jest używać znaczników, które jak najbardziej szczegółowo opisują znaczenie treści. Dlatego...
- CSS dla zielonych / Wstawienie arkusza stylów CSS <link "stylesheet">
...Dzięki znacznikowi <link> do dokumentu zostanie automatycznie dołączony arkusz stylów. W nim właśnie wpisuje się wszystkie polecenia zmieniające wygląd strony. Ważne jest tylko, aby ten plik posiadał rozszerzenie *.css. W powyższym przykładzie jest to plik pod nazwą "style.css", który znajduje się w tym samym katalogu co dokument *.html. Można go oczywiście zapisać w innej lokalizacji - wtedy zamiast "style.css" trzeba podać pełną ścieżkę dostępu (tworzy się ją w analogiczny sposób, jak...
- Czcionki CSS / Wariant pozycji czcionki {font-variant-position}
...w tekście. Co więcej w języku CSS mamy dodatkowo możliwość ustalania pozycji tekstu w pionie formatując nawet zwykły tekst w taki sposób, aby wyglądał jak indeks dolny lub górny: "vertical-align: sub" i "vertical-align: super". Jest jednak pewna wada obu tych metod. Aby indeks dolny czy górny zmieścił się w tekście i nie zachodził na sąsiadujące wiersze, wysokość linii musi zostać nieco powiększona. Powoduje to nieestetyczny efekt, kiedy sąsiednie linijki tekstu są od siebie bardziej...
- Nagłówek i treść HTML / Strona mobilna <link media>
...Ten link informuje przeglądarkę o istnieniu alternatywnej wersji strony przeznaczonej dla urządzeń o mniejszych ekranach. Jak sprawdzić wygląd strony na urządzeniach mobilnych? Aby sprawdzić wygląd strony na urządzeniach mobilnych, można skorzystać z narzędzi deweloperskich przeglądarki, takich jak tryb responsywności. Wchodząc w inspekcję elementu (Ctrl+Shift+I), można przełączyć się w tryb responsywności (ikona ze smartfonem) i dostosować widok do różnych rozmiarów ekranów...