dokumentu - Kurs HTML i CSS
Selektory elementów CSS / Grupowanie selektorów...deklaracja stylu pozwala nadać te same wartości atrybutów kilku różnym selektorom jednocześnie (bez względu na ich położenie w hierarchii drzewa dokumentu). Oznacza to, że zamiast wpisywać kilka razy te same deklaracje, wystarczy wymienić dowolną liczbę selektorów po przecinku i jednorazowo przypisać im wszystkim ten sam styl. Przykład Jeśli w arkuszu stylów strony została umieszczona następująca reguła: b, i { color: red } to po wpisaniu: <b>pogrubienie</b> <i>pochylenie</i> otrzymamy...
- Selektory specjalne CSS / Klasy selektorów <... class>
...odpowiada klasie: class="B&W?". Zdefiniowanie klasy selektorów w części arkuszu stylów, pozwala później się do niej odnosić już we właściwej treści dokumentu. Dzięki temu możemy np. ustalić określone atrybuty dla danego elementu (selektora) na całej stronie, a jednocześnie zmienić wygląd tylko niektórych, bezpośrednio przy nich. Nie musimy już wtedy za każdym razem wpisywać stylu inline, którego zapis czasem może być dosyć długi, ale wystarczy odwołać się do nazwy klasy z arkusza. Deklaracja...
- Tło CSS / Tło obrazkowe {background-image}
...chcemy wstawić jako tło. Wpisanie "none" usunie obrazek. Ścieżkę dostępu należy konstruować względem lokalizacji arkusza CSS, a nie względem adresu dokumentu HTML! Polecenie pozwala wstawić dowolny obrazek jako tło pod elementem. Pamiętaj jednak, żeby obrazek w tle nie był zbyt jaskrawy. Spowoduje to tylko zaciemnienie zawartości strony i utrudni czytanie. Wspólnie z tą własnością często podaje się dodatkowo kolor tła. W takim przypadku, jeśli obrazek będzie niedostępny lub użytkownik...
- Wykazy CSS / Wyróżnik obrazkowy wykazu {list-style-image}
...ma się pojawić jako wyróżnik wykazu (marker). Wpisanie none usunie obrazek. Ścieżkę dostępu należy konstruować względem arkusza CSS, a nie względem dokumentu HTML! Polecenie pozwala zastosować dowolny obrazek jako wyróżnik wykazu (czyli marker). Dzięki temu nie musimy korzystać już tylko z podstawowych typów wykazu, ale możemy stworzyć swoje własne. Sprawi to, że nasza strona będzie wyglądała bardziej oryginalnie i estetycznie. Wspólnie z tą własnością można również podać dodatkowo...
- Kursory CSS / Kursor obrazkowy {cursor: url}
...selektor { cursor: url(ścieżka dostępu) x y, rodzaj } Ścieżkę dostępu należy konstruować względem lokalizacji arkusza CSS, a nie względem adresu dokumentu HTML! Zwracam również uwagę, że podanie na końcu deklaracji ogólnego rodzaju kursora jest konieczne - inaczej nie zostanie on wyświetlony w Firefoksie. Dzięki takiej deklaracji możliwe jest wczytanie dowolnego kursora z pliku, który znajduje się, razem ze stroną, na dysku serwera w Internecie. Przypominam, że w systemie operacyjnym...
- Drukowanie CSS / Wydruk @media print
...z czarnym tłem 🙂). Z uwagi na odrębność różnych mediów, wprowadzono możliwość definiowania oddzielnych własności dla różnych form prezentacji dokumentu. Na przykład rozmiar czcionki można ustalić zarówno dla ekranu, jak i dla drukarki, lecz dokumenty na komputerze potrzebują zwykle większej czcionki niż na papierze. Podobnie doświadczenie wskazuje, że czcionki z rodziny sans-serif są czytelniejsze na ekranie, podczas gdy serif - na papierze. Z tych powodów konieczne jest określenie, że...
Aktywne przyciski / Pamięć podręczna...w kodzie strony - tak jak właśnie wariant podstawowy przycisków - automatycznie zapisuje się w pamięci podręcznej. Wstaw w kodzie nagłówkowym dokumentu (wewnątrz <head>...</head> następujący kod: <script> new Image().src = 'obrazek_podswietlony.gif'; new Image().src = 'obrazek_klikniety.gif'; </script> Należy tutaj umieścić ścieżki dostępu do wszystkich obrazków aktywnych przycisków w wariantach "podświetlony" i "kliknięty", które znajdują się gdziekolwiek na stronie - dla każdego...
- Migotanie
Przykład Migotanie tekstu... ...inne migotanie Aby uzyskać taki efekt, wklej w nagłówku dokumentu: <script> function flash(id, kolor, czas, kolor2, czas2) { document.getElementById(id).style.color = kolor; setTimeout('flash("' + id + '","' + kolor2 + '",' + czas2 + ',"' + kolor + '",' + czas + ')', czas); } </script> a następnie w wybranym miejscu strony: <div id="identyfikator">Migotanie</div> <script> flash("identyfikator", "kolor1", czas1, "kolor2", czas2); </script> przy...
- Losowy element
...wczytywania, ponieważ za każdym razem ładowany jest tylko jeden obrazek. Aby wstawić na stronę losowy tekst lub obrazek, należy w wybranym miejscu dokumentu wkleić następujący kod: <script> Array.prototype.random = function(limit) { if (typeof limit == 'undefined' || limit < 0) limit = 1; else if (!limit) limit = this.length; for (var i = 0, source = this, target = new Array(), n = source.length; i < limit && n > 0; i++) { do { var index = Math.random(); } while (index == 1)...
- Indeks, wyszukiwarka / Wygląd
...margin-right: 5px; } W wyróżnionych miejscach wpisano identyfikator indeksu, zdefiniowany uprzednio w pliku indeks_hasla.js. Teraz w nagłówku dokumentu HTML (<head>...</head>), na którym wstawiony jest indeks haseł, wystarczy wstawić odwołanie do utworzonego właśnie zewnętrznego arkusza stylów: <link rel="stylesheet" href="indeks.css">