rozmiar - Kurs HTML i CSS
Nagłówek i treść HTML / Skalowanie strony <meta "viewport">...jest szczególnie przydatne na urządzeniach mobilnych takich jak smartfony czy tablety. Ponieważ ekran przeglądarek mobilnych zwykle jest dość małych rozmiarów, strona może być odpowiednio powiększana, tak aby jej zawartość była dobrze czytelna. W pewnym zakresie możemy sterować tym zachowaniem za pomocą powyższego polecenia. W szczególności możemy zaprojektować stronę z użyciem techniki Responsive Web Design (w skrócie: RWD), tak aby automatycznie dopasowywała się do dostępnej szerokości...
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")...
Układ elastyczny CSS / Elastyczność {flex-grow, flex-shrink, flex-basis, flex}...(ale nie sam kontener). Baza jest wartością określoną w jednostkach długości albo słowem kluczowym "auto" (domyślnie). Baza określa początkowy rozmiar elementu w kontenerze, zanim wolna przestrzeń zostanie rozłożona pomiędzy dzieci kontenera. Wartość "0" (zero) spowoduje, że rozmiary elementów będą bezpośrednio proporcjonalne do przypisanych im wartości flex-grow (albo flex-shrink - w przypadku ściśnięcia). Jeżeli wszystkie elementy kontenera będą miały przypisany styl "flex-grow: 1", w...
- CSS dla zielonych / Wstawienie arkusza stylów CSS <link "stylesheet">
...Czyż to nie jest piękne? Już nigdy więcej nie będzie Cię czekać żmudne przerabianie każdej podstrony tylko po to, aby zmienić na niej np. kolor albo rozmiar tekstu 🙂 Dla zainteresowanych Jeśli chcesz dowiedzieć się więcej na temat dodatkowych możliwości wstawiania stylów CSS na stronach internetowych, zobacz rozdział: Wstawianie stylów. Pytania i odpowiedzi <link "stylesheet"> Jak dodać styl CSS? Najbardziej zalecanym sposobem wstawienia stylów CSS jest dodanie arkusza stylów do...
- Komendy CSS3 / Tekst CSS
...Wartość [ <length-percentage> ] && hanging? && each-line? Inicjalizacja 0 Zastosowanie elementy blokowe Dziedziczenie tak Procenty odnosi się do rozmiaru kontenera w kierunku pisania text-justify Metoda justowania tesktu Wartość auto | none | inter-word | inter-character Inicjalizacja auto Zastosowanie tekst Dziedziczenie tak Procenty nie text-transform Transformacja tekstu Wartość none | [capitalize | uppercase | lowercase ] || full-width || full-size-kana Inicjalizacja...
- Jednostki CSS / Wyrażenia matematyczne
...dzielenie Czasami proste określnie pojedynczej jednostki staje się niewystarczające. Przykładowo możemy chcieć, aby jakiś element miał rozmiar 50% i dodatkowo 10 pikseli. Sposobem na uzyskanie takiego rezultatu jest określenie wyrażenia matematycznego: calc(50% + 10px) Tworzenie prostych wyrażeń matematycznych jest dość intuicyjne. Wystarczy pamiętać o kilku podstawowych zasadach: Dodawać i odejmować można tylko wielkości tego samego typu. W przeciwnym razie takie wyrażenie...
- Komendy CSS3 / Maskowanie CSS
...obramowania Wartość <number-percentage>{1,4} fill? Inicjalizacja 0 Zastosowanie wszystkie elementy Dziedziczenie nie Procenty odnosi się do rozmiaru maski obrazka obramowania Media visual mask-border-source Źródło maski obrazka obramowania Wartość none | <image> Inicjalizacja none Zastosowanie wszystkie elementy Dziedziczenie nie Procenty nie Media visual mask-border-width Szerokość maski obrazka obramowania Wartość [ <length-percentage> | <number> | auto ]{1,4}...
- HTML5 / Leniwe ładowanie <iframe loading, img loading>
...elementy - nawet znajdujące się na samym dole strony, które w tym momencie w ogóle nie są widoczne na ekranie. Jeśli zdjęcia lub widżety mają duży rozmiar, spowolni to wczytywanie całej strony. Dodatkowo może narazić na dodatkowe koszty użytkowników korzystających z połączenia mobilnego. Możemy tego uniknąć stosując atrybut loading="lazy". Pytania i odpowiedzi <iframe loading, img loading> Co to jest leniwe ładowanie w HTML? Leniwe ładowanie w HTML to technika optymalizacji wydajności...
- Ikony (symbole) / Prywatność i bezpieczeństwo
...dowolną ikonę używając w tym celu specjalnego generatora. Wybierz wariant ikony, a następnie kliknij przycisk "Pobierz". Możesz dopasować kolor i rozmiar przy użyciu kontrolek znajdujących się w nagłówku tabeli. Nazwa Wariant Odznaka badge badge Zweryfikowany użytkownik verified_user verified_user Zgłoszenie report report Ustawienia panelu administratora admin_panel_settings admin_panel_settings Bezpieczeństwo security security Klucz VPN vpn_key vpn_key Polityka policy policy...
- Ikony (symbole) / Komunikacja
...dowolną ikonę używając w tym celu specjalnego generatora. Wybierz wariant ikony, a następnie kliknij przycisk "Pobierz". Możesz dopasować kolor i rozmiar przy użyciu kontrolek znajdujących się w nagłówku tabeli. Nazwa Wariant Poczta mail mail Połączenie call call Powiadomienia notifications notifications Wyślij send send Czatuj chat chat Link link link Forum forum forum Inwentarz 2 inventory_2 inventory_2 Dymek czatu chat_bubble chat_bubble Telefon w trakcie rozmowy...