stronie - Kurs HTML i CSS
Obramowanie CSS / Atrybuty mieszane obramowania {border}...można posłużyć się klasą selektorową, tzn. w arkuszu stylów wpisujemy np.: *.podkreslenie { border-bottom: 2px #f80 solid } a następnie na stronie: <span class="podkreslenie">...</span> Zagnieżdżanie obramowania <div style="border: solid red 3px"> <div style="border: solid green 3px"> <div style="border: solid blue 3px"> Potrójnie zagnieżdżone obramowanie </div> </div> </div> Potrójnie zagnieżdżone obramowanie Pytania i odpowiedzi {border} Jak zrobić obramowanie w...
- Drukowanie CSS / Przełamanie strony {page-break-before, page-break-after}
...h1 { page-break-before: always } lub z podaniem klasy: h1.tytul { page-break-before: always } Dzięki temu każdy rozdział rozpocznie się na nowej stronie, co sprawi, że treść będzie wyglądała bardziej estetycznie. Takie rozwiązanie nie jest jednak zbyt odpowiednie, jeśli strona zawiera bardzo krótkie rozdziały, ponieważ wtedy wydruk będzie składał się większej ilości stron, które nie będą całkowicie zapełnione (właściciel drukarki może nie być tym zachwycony 🙂). Innym przydatnym...
- Pozycjonowanie CSS / Nakładanie {z-index}
...kolejność nakładania elementów na siebie w warstwach. Wyższa wartość z-index umożliwia elementowi znajdowanie się na wierzchu innych elementów na stronie. To przydatne, gdy chcemy kontrolować, który element jest wyświetlany jako pierwszy, a który jako drugi. Dlaczego "z-index" nie działa? Brak działania z-index może być spowodowany kilkoma czynnikami. Najczęstsze problemy to brak ustawionej pozycji elementów (np. "position: relative", "position: absolute" albo "position: fixed")...
- Kursory CSS / Kształt kursora {cursor}
...Chrome 37 Przykład Wskaż ten tekst myszką Pytania i odpowiedzi {cursor} Jak zmienić wygląd kursora? Aby zmienić wygląd kursora na stronie internetowej, można użyć CSS i właściwości cursor. Na przykład, aby zmienić kursor na obrazek dłoni, można użyć poniższego kodu: "cursor: pointer". Jak zmienić kursor w CSS? Aby zmienić kursor za pomocą CSS, należy użyć właściwości cursor. Możesz ustawić różne wartości dla tej właściwości, takie jak pointer, text, grab itp., aby...
- Drukowanie CSS / Blokada przełamania strony {page-break-inside}
...Polecenie page-break-inside: avoid powoduje, że strona nie zostanie przełamana wewnątrz wskazanego elementu, tzn. pozostanie on w całości na jednej stronie (chyba że będzie zbyt duży, aby się na niej zmieścić). Jest to przydatne, jeśli nie chcemy, aby np. wykaz albo tabela zostały przedzielone pomiędzy dwie strony. W takim przypadku lepiej żeby drukarka przełamała stronę trochę wcześniej, a element zostanie przeniesiony na następną kartkę. Przykład {page-break-inside} Jeśli to możliwe...
Aktywne przyciski / Pamięć podręczna...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 obrazka jedna linia. Nie radzę jednak przesadzać z ilością oraz wagą takich grafik, ponieważ są one wczytywane na zapas, tzn. nawet jeśli użytkownik nigdy ich nie użyje, to i tak muszą się załadować, oczywiście wydłużając całkowity czas wczytywania strony!
- Migotanie
...Pamiętaj, że absolutnie nie może on zawierać spacji! Identyfikator nie może się powtórzyć w całym dokumencie! Jeżeli chcesz wstawić na jednej stronie kilka migających tekstów, należy dla każdego podać inny identyfikator (kod nagłówkowy skryptu wkleja się zawsze tylko raz). kolor1 Pierwszy kolor migotania czas1 Czas wyświetlania koloru1, podany w milisekundach (1 s = 1000 ms) kolor2 Drugi kolor migotania czas2 Czas wyświetlania koloru2 Używaj migotania z umiarem, ponieważ zwykle...
- Indeks, wyszukiwarka / Ramka
...można pominąć ten argument albo wpisać null) strona z indeksem znajduje się w tej samej ramce, do której chcemy wczytać wynik self.nazwaramki Na stronie z indeksem znajduje się ramka lokalna o nazwie nazwaramki, do której ma zostać wczytany wynik. Nazwa ramki może zawierać tylko angielskie litery, cyfry (ale nie na początku) i podkreślniki ("_"). [Zobacz: Wczytywanie strony do ramki lokalnej] parent.nazwaramki Stosujemy, gdy serwis składa się z ramek, ale jest tylko jeden plik definiujący...
- Indeks, wyszukiwarka / Automatyczne sortowanie
...indeks.wstaw(new Array( ['Hasło 1','adres1'], ['Hasło 2','adres2'], ['Hasło 3','adres3'] ), null, null, -1); Po jego wpisaniu, na stronie nie zostanie wyświetlony normalny indeks, ale fragment kodu skryptu z hasłami ułożonymi alfabetycznie. Wystarczy ten kod skopiować, wkleić w odpowiednie miejsce do pliku indeks_hasla.js i na koniec usunąć wartość opcji (wraz z końcowym przecinkiem przed zamknięciem nawiasu).
- AutoIFRAME / Kilka ramek AutoIFRAME
Czasami zachodzi potrzeba umieszczenia na jednej stronie kilku ramek <iframe>...</iframe>, których wysokość powinna się automatycznie dopasowywać do zawartości. Oczywiście dla każdej takiej ramki proces dostosowywania wysokości musi zachodzić niezależnie. Aby to zrobić, należy dla każdej takiej ramki należy ustawić odrębny identyfikator id="...". Na przykład tak mógłby wyglądać fragment strony głównej serwisu: <iframe src="..." name="..." id="autoiframe" width="100%" height="560">...</iframe>...