rozmiary - Kurs HTML i CSS
Dobre praktyki / Przykazania webmastera...<a href="...">...</a> </li> <li> <a href="...">...</a></li> <li><a href="...">...</a> </li> </ul></div> Co prawda wcięcia zwiększają rozmiary dokumentu, wydłużając nieco czas ładowania strony, ale zawsze możesz pójść na jakiś kompromis - np. zrezygnować z tych oczywistych wcięć (wiadomo że bezpośrednio w ul musi zawierać sie li). Staraj się używać znacznika button zamiast input Ułatwi Ci to późniejszą stylizację wyglądu oraz umożliwi bezproblemowe zastosowanie techniki...
- Tło CSS / Tło obrazkowe {background-image}
...jest akapit z tłem obrazkowym. Jak już pisałem, użycie zbyt jaskrawego tła, może znacznie utrudnić czytanie tekstu... Sztuczka, pozwalająca ustalić rozmiary obrazka w tle... Wielokrotne tło obrazkowe (CSS 3 - interpretuje Internet Explorer 9, Firefox, Opera, Chrome) selektor { background-image: url(ścieżka dostępu do obrazka 1), url(ścieżka dostępu do obrazka 2),... } Dzięki powyższej składni możliwe jest wstawienie pod jednym elementem wielu obrazków w tle. Będą ona ułożone jeden pod...
- Tło CSS / Atrybuty mieszane tła {background}
...spacjami (przy czym można niektóre pominąć). Są to: kolor tła tło obrazkowe powtarzanie tła zaczepienie tła pozycja tła lub pozycja tła / rozmiary tła (CSS 3) pozycja początkowa tła (CSS 3) przycinanie tła (CSS 3) Wartość rozmiarów tła (background-size) musi być poprzedzona znakiem ukośnika i musi się znajdować bezpośrednio po wartości pozycji (background-position), np.: "left top / contain". Nie można podać rozmiarów tła bez określenia pozycji, ale można samą pozycję bez...
- Układ elastyczny CSS / Elastyczność {flex-grow, flex-shrink, flex-basis, flex}
...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 efekcie mogą zostać rozciągnięte do dokładnie takiego samego rozmiaru. Wartość "auto" (domyślnie) spowoduje, że rozmiary absolutne...
Indeks, wyszukiwarka / Przykład indeksu, wyszukiwarki...['Promocja strony WWW','../html/promocja.html'], ['Ramki','../html/ramki.html'], ['Rozmiary','../css/rozmiary.html'], ['Selektory','../css/selektory.html'], ['Selektory atrybutów','../css/atrybuty.html'], ['Selektory elementów','../css/elementy.html'], ['Selektory pseudoelementów','../css/pseudoelementy.html'], ['Selektory pseudoklas','../css/pseudoklasy.html'], ['Selektory specjalne','../css/specjalne.html']...
HTML dla zielonych / Jak zrobić dobrą stronę HTML...oznacza, że musi się od nich roić. Pamiętaj, że to właśnie grafika najbardziej wpływa na szybkość ładowania strony, dlatego ogranicz jej ilość oraz rozmiary. Jeśli już musisz coś umieścić, postaraj się, aby było to naprawdę dobrej jakości. Tworząc samodzielnie obrazy używaj antialiasingu, czyli wygładzania poszarpanych krawędzi. Cechą po której na pierwszy rzut oka można rozpoznać dobrego projektanta jest oszczędne i umiejętne operowanie grafiką, która dobrze komponuje się z wyglądem strony...
- HTML5 / Filmy i dźwięk <video, audio, source>
...plik wideo albo jego metadane zostaną załadowane, przeglądarka nie zna właściwych wymiarów filmu. Dlatego najpierw może przyjąć jakieś standardowe rozmiary, by potem zmienić je na właściwe. Może to wywołać efekt "skakania" elementów strony. Dlatego zawsze powinno się od razu określać, jaką szerokość (width="...") i wysokość (height="...") ma film, który będzie załadowany do odtwarzacza VIDEO. Formaty audio/wideo Wprowadzając w HTML5 nowe znaczniki AUDIO i VIDEO początkowo starano się...
- Tryb Quirks / Co zmienia przejście z trybu Quirks do trybu zgodności ze standardami?
...font-size, font-weight, font-style, font-variant, text-decoration, text-transform, letter-spacing i line-height. Tryb Quirks pozwala określić rozmiary elementów wyświetlanych w linii (inline). W trybie zgodności znak odwróconego ukośnika "\" pozwala usunąć z następnego znaku jego specjalne znaczenie (tzw. "escape character"). W trybie Quirks przeglądarka Firefox i Opera obsługuje pseudoklasę :hover tylko dla odsyłaczy, obrazków i pól formularzy, chyba że selektor zawiera dodatkowo...
- Menu w CSS / Poziome menu
...solid #fff; border-right: 1px solid #fff; } ul a:hover { background-color: #800; background-image: url("tlo2.gif"); } Chociaż w tym przykładzie rozmiary odnośników nie zostały ustalone, wyświetliliśmy je blokowo z uwagi na możliwy błąd w bardzo starych przeglądarkach. Ponadto konieczne było przypisanie oblewania (float: left) również znacznikowi obejmującemu pozycje listy (<ul>...</ul>), ponieważ bez tego menu wyglądałoby następująco: Czcionki Tekst Tło Marginesy Obramowanie...
- Dobre praktyki / CSS Zorientowane Obiektowo
...Mówimy, że Article jest klasą bazową, którą rozszerza klasa pochodna Review. Dzięki tej technice, unikając powtórzeń deklaracji, zmniejszysz rozmiary arkusza CSS (szybsze ładowanie, mniejszy transfer), a przede wszystkim przyspieszysz sposób zarządzania zmianami, ponieważ modyfikacja definicji klasy Article od razu zmieni elementy class="Article" oraz class="Article Review", tak aby pasowały do nowego szablonu witryny, a jednocześnie modyfikując klasę Review nie musisz się obawiać, że...