obrazek - Kurs HTML i CSS
HTML5 / Priorytet ładowania <img fetchpriority, link fetchpriority, script fetchpriority>(interpretuje: Opera 87, Chrome 101) Obrazek: <img src="lokalizacja" fetchpriority="priorytet"> Zewnętrzny zasób: <link href="lokalizacja" fetchpriority="priorytet"> Zewnętrzny skrypt JavaScript: <script src="lokalizacja" fetchpriority="priorytet"></script> lokalizacja Ścieżka dostępu albo adres URL wskazujące na miejsce, skąd ma zostać załadowany zewnętrzny zasób priorytet Należy wybrać jedną z następujących wartości: high - wskazany zasób załaduje się wcześniej względem innych...
- HTML5 / Rozmiary przycisku obrazkowego <input "image" width height>
...specyfikacji HTML 4.01. Od teraz można już ustawiać rozmiary przycisku obrazkowego służącego do wysyłania formularza. Jeśli tego nie zrobimy, zanim obrazek się załaduje, przeglądarka zarezerwuje dla niego na stronie domyślną wolną przestrzeń. Zwykle nie będzie ona dokładnie odpowiadać rzeczywistym rozmiarom grafiki. Dlatego po załadowaniu obrazka, elementy strony w pobliżu i poniżej niego mogą przeskoczyć w dół lub na bok. Jeśli użytkownik dokładnie w tym czasie próbował kliknąć w coś na...
- Podcast HTML / #6 Multimedia HTML
...obrazków, grafik, zdjęć lub ilustracji na stronę WWW. Kluczowe atrybuty to: src: wskazuje ścieżkę dostępu do lokalizacji, w której znajduje się obrazek. alt (tekst alternatywny): krótka informacja, która pojawia się, jeśli grafika nie zostanie wyświetlona (np. gdy użytkownik wyłączył wyświetlanie grafiki) lub jest odczytywana przez syntezatory mowy. width i height: określają szerokość i wysokość obrazka w pikselach ("x") lub w procentach ekranu ("x%"). Jest to dobry nawyk, ponieważ...
Selektory pseudoklas CSS / Łączenie selektorów...wskazaniu go myszką: img.przyklad_selektory3 { border: 5px solid black } a:hover img.przyklad_selektory3 { border: 5px solid red } Wskaż poniższy obrazek myszką: Inny ciekawy przykład - tym razem z automatycznym generowaniem zawartości: a.przyklad_selektory4:hover:after { content: "Rollover"; position: absolute; color: #000; background-color: #eee; font-size: 10px; border-width: 1px 2px 2px 1px; border-style: solid; border-color: #888; padding: 1px 5px } Jeśli wskażesz ten odsyłacz...
- Tło CSS / Przycinanie tła {background-clip}
...się tylko pod właściwą zawartością elementu Możliwe jest również określenie kilku wartości przycinania - kiedy wstawiamy w tle więcej niż jeden obrazek: selektor { background-clip: przycinanie obrazka 1, przycinanie obrazka 2,... } Przykład {background-clip} border-box padding-box content-box
- Tekst CSS / Tryb pisania {writing-mode}
...poziomej. Jest to celowy zabieg, ponieważ jeśli chcemy, aby tekst w takich elementach był ułożony pionowo, możemy po prostu przygotować taki obrazek albo nadać taki tryb dla dokumentu HTML wyświetlanego wewnątrz ramki lokalnej. Inaczej sprawa się ma w przypadku elementów zastępowanych powiązanych z tekstem, które nie są ładowane z zewnętrznego pliku. W takiej sytuacji ułożenie tekstu w ich obrębie powinno być zgodne z ustalonym trybem pisania. To zachowanie nie jest jednak wymagane...
- Tło CSS / Pozycja początkowa tła obrazkowego {background-origin}
...korzystamy również z przycinania tła. Możliwe jest również określenie kilku wartości pozycji początkowej - kiedy wstawiamy w tle więcej niż jeden obrazek: selektor { background-origin: początek obrazka 1, początek obrazka 2,... } Przykład {background-origin} no-repeat; left top; border-box no-repeat; left top; padding-box no-repeat; left top; content-box
- Marginesy CSS / Model pudełkowy CSS
...Każdy element generuje w dokumencie prostokątny obszar zwany pudełkiem (ang. Box model). Pudełko składa się z: Zawartości - "Content" (np. test, obrazek itd.) Otaczających marginesów wewnętrznych - "Padding" Obramowania - "Border" Marginesów - "Margin" Ostatnie trzy składniki są opcjonalne, tzn. mogą mieć wartość zero. Obwód (zewnętrzny) każdego z czterech obszarów nazywamy krawędzią ("Edge"). Według CSS rozmiary elementu (własności width oraz height) odnoszą się do samej zawartości...
- Obramowanie CSS / Cień {box-shadow}
(CSS 3 - interpretuje Internet Explorer 9, Firefox 4, Opera, Chrome) Cień na zewnątrz elementu: selektor { box-shadow: poziom pion rozmycie rozprzestrzenienie kolor,... } Cień wewnątrz elementu: selektor { box-shadow: inset poziom pion rozmycie rozprzestrzenienie kolor,... } Wartości "poziom pion rozmycie rozprzestrzenienie kolor" określają własności cienia (wartości "rozmycie", "rozprzestrzenienie" oraz "kolor" nie są wymagane): poziom - przesunięcie cienia w prawo (ujemne wartości...
- Obramowanie CSS / Obcięcie obramowania obrazkowego {border-image-slice}
...np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów]. Natomiast jako "obcięcie" należy podać podziałkę (domyślnie: 100%), według której obrazek zostanie pocięty na siatkę, składającą się z dziewięciu części: czterech narożników, czterech krawędzi i środka. Możliwe jest przy tym podanie: jednej wartości - określa jednakowe odległości cięć linii siatki od wszystkich krawędzi obrazka; jeżeli cała grafika będzie kwadratowa i jako obcięcie podamy wartość trzy razy mniejszą od...