rozmiary - Kurs HTML i CSS
Rozmiary CSS / Minimalna szerokość {min-width}...podanej wartości. Różnica w stosunku do prostej własności width jest taka, że jeśli element osiągnie szerokość większą lub równą niż podana, to jego rozmiary nie zostaną zmienione. Dla elementów zastępowanych (np. obrazków) własność ta może mieć wpływ również na wysokość elementu, ponieważ będzie on przeskalowany tak, aby zachował swoje proporcje. Przykład {min-width} Ten obrazek powinien mieć szerokość minimalną 200px (min-width: 200px):
- Rozmiary CSS / Przepełnienie {overflow}
...wyświetlany w bloku albo zastępowany [zobacz: Wstawianie stylów]. Jako "sposób" należy podać: visible - pokazanie całej zawartości bez względu na rozmiary (domyślnie) hidden - ukrycie nadmiaru scroll - suwaki do przewijania auto - pokazanie suwaków jeśli to konieczne Według CSS 2.1 polecenie można również zastosować do komórek tabeli. Określa co zrobić, gdy zawartość elementu nie mieści się w rozmiarach podanych przez width oraz height. Możliwe jest ukrycie nadmiarowej zawartość...
- Jednostki CSS / Długość
...jednostek długości Wstęp Jednostki długości stosuje się w bardzo wielu poleceniach dotyczących stylów, np. wielkość czcionki, marginesów czy rozmiary elementów itd. Format wartości długości składa się z opcjonalnego znaku liczby ("+" - domyślny lub "-"), liczby całkowitej lub rzeczywistej oraz jednostki. Po wartości długości 0 jednostka jest opcjonalna. Należy pamiętać, że nie każdy parametr może przyjąć wartość ujemną! Są dwa typy jednostek długości: względne (relatywne) i...
Galeria zdjęć HTML / Klasyczna galeria zdjęć...wczytywania dużych plików. Zmniejszenia wymiarów obrazka można dokonać praktycznie w każdym programie graficznym. Najczęściej ustala się takie same rozmiary dla wszystkich miniatur, ponieważ ułatwia to utrzymanie estetyki strony. Obrazki w galerii zwykle ustawia się w komórkach tabeli (najczęściej bez obramowania), dzięki czemu można je dokładnie ustawić w rzędach i kolumnach. Jeżeli zamierzasz umieścić na swojej stronie obszerniejszą galerię grafik, zaleca się podzielenie jej na kilka części...
- Menu rozwijane, otwierane, wysuwane / Wygląd menu rozwijanego, otwieranego, wysuwanego
Jeżeli nie odpowiada nam podstawowy wygląd menu, można go zmienić wykorzystując polecenia CSS. W tym celu w pliku menu.css należy wkleić np.: #menu0 { width: 200px; margin: 10px; padding: 0; } #menu0 dt { background-color: #888; color: #fff; font-weight: bold; text-align: center; cursor: pointer; margin: 10px 0 0 0; padding: 2px; } #menu0 dd { background-color: #eee; color: #000; border-width: 0 1px 1px 1px; border-style: solid; border-color: #888...
- Wykaz skryptów / Pozostałe skrypty
...Nowe okno Automatyczne otwarcie nowego okna zaraz po załadowaniu strony albo po kliknięciu w link. Możliwe jest określenie wyglądu nowego okna (rozmiary, paski menu, narzędzi, stanu itd.). [Generator] Galeria zdjec Umieszczenie na stronie kolekcji zdjęć z możliwością podglądu pełnowymiarowych obrazków, po kliknięciu ich miniaturki. Dostępna również wersja skryptu z "blokadą" zapisywania zdjęć z galerii. Przeglądarka zdjęć Przeglądanie wprost na stronie serii zdjęć. Ponieważ...
- Układ elastyczny CSS / Flexbox
...Paradoksalnie właściwość position (pozycja) nie nadawała się zbytnio do ustalania głównego układu elementów na stronie, ponieważ wymagała, aby rozmiary bloków były z góry znane. W praktyce z taką sytuacją rzadko mamy do czynienia, gdyż nie jesteśmy w stanie od razu dokładnie przewidzieć, ile tekstu będą zawierać artykuły, opublikowane w serwisie. Rozwiązaniem miało być płynne ustalanie pozycji przy pomocy właściwości float [zobacz: Szablon strony na DIV-ach]. I rzeczywiście w większości...
- Wykaz generatorów
...generatora. Generator okien Automatyczne generowanie kodu potrzebnego do otworzenia okna JavaScript (np. pop-up), w którym można ustalić rozmiary, pozycję oraz możliwość ukrycia pasków narzędzi itp. Test przeglądarki Wyświetla szczegółowe informacje dotyczące używanej przeglądarki internetowej, systemu operacyjnego, urządzenia, ekranu, połączenia internetowego, stanu baterii, odtwarzacza i rejestratora audio-wideo.
Odsyłacze HTML / Ćwiczenia...umieszczając na początku wykaz z listą odsyłaczy do tych etykiet. Przygotuj po dwie wersje ilustracji z Twojej strony. Pierwsza powinna mieć rozmiary dokładnie takie jak widoczne bezpośrednio na stronie. Natomiast druga wersja może być zdjęciem w wysokiej rozdzielczości. W tym celu otwórz duże zdjęcie w dowolnym programie graficznym - może to być nawet aplikacja Paint, która jest dostępna w systemie Windows - i pomniejsz go (w prorgamie Paint należy użyć opcji "Zmień rozmiar")...
- Tło CSS / Gradient liniowy {background: linear-gradient repeating-linear-gradient}
...kłopotliwe, gdyż każdą zmianę trzeba było przygotowywać w programie graficznym. Do tego taki plik graficzny z zapisanym gradientem mógł mieć niemałe rozmiary, niepotrzebnie wydłużając czas wczytywania strony w przeglądarce użytkownika. Dlatego właśnie efekt gradientu wprowadzono do składni CSS, aby dać webmasterom lepszą kontrolę nad wyglądem stron. Przy definiowaniu wyglądu gradientu kluczowe znaczenie ma tzw. linia gradientu. Musimy sobie ją wyobrazić jako prostą, która przebiega w kierunku...