stronie - Kurs HTML i CSS
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...
- Drukowanie CSS / Rozmiar papieru @page {size}
...Typowa drukarka najczęściej drukuje strony w orientacji pionowej (tzw. portret). Taki układ zwykle najlepiej sprawdza się przy drukowaniu tekstu. Na stronie możemy mieć jednak także zdjęcia np. krajobrazów, które typowo mają układ poziomy. W takiej sytuacji zdjęcie nie zostanie automatycznie obrócone, a więc zajmie tylko niewielki fragment kartki papieru. Użytkownik może co prawda samodzielnie zmienić orientację papieru przed uruchomieniem wydruku, ale nie wszyscy potrafią to zrobić. W takiej...
- Drukowanie CSS / Okładka wydruku @page :first
@page :first { cecha: wartość } Jako cecha i wartość można wstawić jedną lub więcej deklaracji odpowiednich dla kontekstu strony. Na pierwszej stronie wydruku często znajduje się okładka, która różni się wizualnie od pozostałych stron. Na przykład może ona zawierać grafikę rozpościerającą się na całej powierzchni kartki bez żadnych marginesów. Taki efekt pozwala uzyskać pseudoklasa :first, dzięki której możemy ustawić marginesy na okładce inne niż na pozostałych stronach wydruku - np...
- Drukowanie CSS / Po co drukować strony internetowe?
...jak przełamanie strony przy pomocy page-break-before i page-break-after, blokadę przełamania stron za pomocą page-break-inside, a także linijki na stronie z użyciem widows i orphans. Dodatkowo, pokażemy, jak wykorzystywać kontekst strony z @page, w tym druk dwustronny i definiowanie rozmiaru papieru. Na końcu wyjaśnimy podstawowe reguły @media print i podpowiemy, jak projektować treści odpowiednie zarówno na ekran, jak i na papier. A to jeszcze nie wszystko 🙂 Zadbaj o to, aby Twoja strona...
- Menu w CSS / Rozdzielenia struktury i prezentacji dokumentu
...inaczej. Być może zapytasz teraz: jaki jest tego cel? Wyobraź sobie, że Twój serwis internetowy zawiera 100 podstron z artykułami. Na każdej podstronie zostało wstawione menu nawigacyjne. Jeśli teraz zechcesz zmienić jego wygląd, co będzie lepiej zrobić: modyfikować ręcznie 100 plików, czy dokonać zmiany tylko w jednym - zewnętrznym arkuszu stylów? No dobrze, stronę można wykonać w technologii ramkowej lub korzystając ze skryptów na serwerze, takich jak PHP - wtedy również będzie...
- Układ elastyczny CSS / Kontener elastyczny {display: flex inline-flex}
...tworzy się tzw. kontener elastyczny (ang. flex container), w którym dzieci układane są elastycznie. Sam kontener nie jest układany elastycznie na stronie, a jedynie jego dzieci. Wstawienie takiego kontenera przełącza tryb wyświetlania elementów w nim zawartych na układ elastyczny. Aby jakiekolwiek własności, opisane dalej w tym rozdziale, dały widoczny efekt, konieczne jest dodanie powyższego stylu do elementu, który ma wyznaczać układ elastyczny. Pytania i odpowiedzi {display: flex}...
- CSS dla zielonych / Zaczynamy kurs CSS!
...podobne, bo to nieprawda. Zacznij już lepiej czytać. Mam tylko jedną prośbę: postaraj się przeczytać w miarę uważnie i po kolei całą treść na tej stronie. Jeśli pominiesz jakiś punkt lub przeczytasz go zbyt pobieżnie, może to spowodować, że nie zrozumiesz następnych.
- Komendy CSS3 / Obrazki CSS
...Images Module Level 3 Spis treści image-orientation image-rendering object-fit object-position image-orientation Orientacja obrazka na stronie Wartość from-image | none | [ <angle> || flip ] Inicjalizacja from-image Zastosowanie wszystkie elementy Dziedziczenie tak Procenty nie image-rendering Określenie jak przeskalozwać obrazek Wartość auto | smooth | high-quality | crisp-edges | pixelated Inicjalizacja auto Zastosowanie wszystkie elementy Dziedziczenie tak...
Wykaz skryptów / Skrypty w kursie...pocztowego, czy wszystkie pola zostały wypełnione przez użytkownika. Strona na hasło Jeżeli nie chcesz, aby wszystkie informacje na Twojej stronie były publicznie dostępne, możesz zabezpieczyć wybrane podstrony hasłem. Prezentowany skrypt jest niezwykle prosty do wprowadzenia, ale jednocześnie bardzo skuteczny. Dynamiczne blokowanie pól formularza Blokowanie/odblokowywanie albo ukrywanie/wyświetlanie jednego lub kilku pól formularza dopiero po wcześniejszym wybraniu przez...
- 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!