dokumentu - Kurs HTML i CSS
CSS dla zielonych / Arkusz stylów CSS...również języka CSS. Utworzone style zapisujemy w dowolnym pliku z rozszerzeniem *.css, który stanowi tzw. arkusz stylów, a następnie dołączamy go do dokumentu HTML [zobacz: Wstawienie arkusza stylów]. Czym są i do czego służą arkusze stylów CSS? Arkusz stylów CSS jest plikiem tekstowym służącym do ustalania wyglądu strony internetowej. Zawiera on tzw. reguły stylów. Z kolei każda z nich składa się z selektora i deklaracji stylów. Poszczególne deklaracje obejmują listę poleceń, które...
- Menu w CSS / Pionowe menu
...odnośnika tlo2.gif - tło odnośnika podświetlonego Widok w powiększeniu: Za pomocą CSS nie można dodawać żadnych znaczników do kodu źródłowego dokumentu, nie można zatem wygenerować znacznika <img>, który byłby nam potrzebny do stylizacji punktów. Można natomiast wstawiać grafikę w tle. Tak właśnie został osadzony obrazek punktów listy (punkt.gif). Normalnie jeżeli grafika wstawiona w tle jest mniejsza od rozmiarów elementu, zostaje powielona, tak aby zajmowała cały dostępny obszar. W...
- CSS dla zielonych / Wyrównanie tekstu CSS {text-align}
...Możliwe jest również wycentrowanie tylko jednego akapitu. W tym celu trzeba się jednak posłużyć kodem HTML, który wstawimy w kodzie źródłowym dokumentu HTML, a nie w arkuszu stylów CSS: <p style="text-align: center">...</p>.
- CSS dla zielonych / Marginesy strony CSS {margin, margin-top, margin-bottom, margin-left, margin-right}
...od jednostki. Pytania i odpowiedzi {margin} Jak ustawić marginesy w CSS? W tym celu najlepiej w arkuszu stylów do selektora właściwego ciała dokumentu dodać deklarację o odpowiedniej wartości. Na przykład: body { margin: 20px; } ustawi wszystkie marginesy strony o szerokości i wysokości 20 pikseli. Jak ustawić margines 2,5 cm? W języku CSS oprócz pikseli możemy używać również szeregu innych jednostek długości. Na przykład: body { margin: 2.5cm; } ustawi wszystkie marginesy strony...
- Dziedziczenie stylów CSS / Hierarchia elementów
Z drzewem dokumentu związana jest własność dziedziczności stylów. Polega ona na tym, że elementy leżące niżej w hierarchii (potomkowie), jeśli nie zaznaczymy inaczej, dziedziczą (przejmują) atrybuty formatowania, które zostały nadane ich przodkom. Niestety w niektórych starszych przeglądarkach internetowych zdarzała się błędna interpretacja dziedziczenia stylów. Problemy stwarzały np. elementy tabeli: nawet jeśli zdefiniowaliśmy określoną wielkość czcionki dla elementu wyżej w hierarchii, w...
- Dziedziczenie stylów CSS / Przywrócenie wartości domyślnej {...: initial}
...bez względu na dziedziczenie stylów. Jeśli chcesz przywrócić pierwotny wygląd elementowi - tzn. zawsze jaki był przed dołączeniem naszych stylów do dokumentu - sprawdź, czy w takim przypadku bardziej odpowiednie nie będzie użycie wartości revert. Przykład {...: initial} To jest akapit koloru zielonego, wewnątrz którego znajduje się: pochylenie oraz podkreślenie, którym nie zostały nadane żadne style, a więc dziedziczą je po przodku, czyli po akapicie (są również zielone). A to jest...
- Dziedziczenie stylów CSS / Przywrócenie wartości pierwotnej {...: revert}
...w kolejnych rozdziałach. Każda przeglądarka ma wbudowany domyślny arkusz stylów. Dzięki niemu nawet jeśli nie dołączymy żadnych własnych stylów do dokumentu, to np. tekst zawarty w znaczniku B i tak będzie pogrubiony. To bardzo przydatna funkcja, bo przeglądarka w ten sposób załatwia za nas sporo pracy. Może się jednak zdarzyć, że w naszym arkuszu stylów zmienimy sposób formatowania jakiegoś elementu, ale potem będziemy chcieli przywrócić mu pierwotny wygląd. Oczywiście najprostszym...
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
...czas); } flash("flash1", "red", 500, "black", 500); flash("flash2", "white", 500, "black", 250); 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>...
- 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)...