strona - Kurs HTML i CSS
Rozmiary CSS / Blok obejmujący CSS...sposób: Jeśli przodek jest wyświetlany jako inline-block i kierunek tekstu (direction) jest określony jako ltr (od lewej do prawej) góra i lewa strona bloku obejmującego jest górną i lewą krawędzią zawartości pierwszego pudełka utworzonego przez przodka, natomiast dół i prawa krawędź jest dolną i prawą krawędzią zawartości ostatniego pudełka przodka. W przypadku kierunku tekstu rtl (od prawej do lewej) wszystko jest odwrotnie. W przeciwnym razie obejmujący blok jest tworzony przez...
- Pozycjonowanie CSS / Pozycja ustalona {position: fixed}
...pozycjonowanie absolutne, z tą różnicą, że pozycja elementu jest zawsze obliczana względem krawędzi okna przeglądarki (obszaru w którym znajduje się strona). Dodatkowo element taki jest nieruchomy podczas przewijania strony, przez co jest on przez cały czas widoczny na ekranie, dokładnie w tym samym miejscu. Daje to zbliżony efekt, jak nieruchome pojedyncze tło. Przykład {position: fixed} Przykład
- Drukowanie CSS / Blokada przełamania strony {page-break-inside}
...Natomiast jako "wartość" należy podać: avoid - unikanie przełamania auto - brak ograniczeń 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...
- Drukowanie CSS / Po co drukować strony internetowe?
...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 internetowa była tak funkcjonalna, jak to możliwe - nie tylko w internecie, ale i w świecie druku!
- Tryb Quirks / X-UA-Compatible
...przypadkach może to nam przysporzyć wiele kłopotów. Ze względu na całą masę błędów w poprzednich wersjach tej przeglądarki, często okazuje się, że strona zoptymalizowana tak, aby prawidłowo funkcjonowała np. w MSIE 6 lub 7, teraz wyświetla się nieprawidłowo, ponieważ wszystkie "obejścia", które wcześniej trzeba było zastosować, powodują teraz problemy. W takiej sytuacji doraźnym rozwiązaniem mogłoby być przynajmniej tymczasowe wymuszenie trybu renderowania dokumentu w trybie Compatibility...
- Selektory CSS
...który nie ma dzieci ani nie zawiera tekstu Pusty element 3 E:link E:visited element E, który jest kotwicą hiperlinku (odsyłaczem), której cel (strona docelowa) jeszcze nie został odwiedzony (:link) lub został już odwiedzony (:visited) Odsyłacz podstawowy Odsyłacz odwiedzony 1 E:active E:hover E:focus element E podczas pewnych akcji użytkownika (:active - aktywacja, :hover - wskazanie, :focus - zogniskowanie) Aktywacja Wskazanie myszką Zogniskowanie 1 E:target element E, który...
- CSS dla zielonych / Wstawienie arkusza stylów CSS <link "stylesheet">
...style.css" trzeba podać pełną ścieżkę dostępu (tworzy się ją w analogiczny sposób, jak przy wstawianiu obrazka). Warto podkreślić, że jeśli Twoja strona WWW składa się z wielu podstron, na każdej z nich możesz dołączyć ten sam plik arkusza stylów. Dzięki temu zmiany wykonane tylko w jednym miejscu - czyli w pliku arkusza stylów - wpłyną na wygląd od razu wszystkich podstron Twojego serwisu. Czyż to nie jest piękne? Już nigdy więcej nie będzie Cię czekać żmudne przerabianie każdej podstrony...
- Reguły warunkowe CSS / Zapytania właściwości @supports
...które nie interpretują pełnej specyfikacji. Właściwości (cechy), których przeglądarka nie rozumie, są ignorowane. Oczywiście w takiej sytuacji strona nie będzie wyglądać dokładnie tak, jak założył jej twórca, ale nadal powinna być czytelna. Co ważne, nie spowoduje to odrzucenia całego arkusza stylów, więc dokument HTML zostanie poddany częściowemu formatowaniu - na tyle, ile będzie możliwe. Zdarzają się jednak przypadki zbyt skomplikowane, aby do ich obsługi wystarczył ten prosty...
- Reguły specjalne CSS
...poziom specyfikacji języka, w którym po raz pierwszy wybrana reguła została wprowadzona. Wzór Znaczenie Opis CSS @charset "wart"; strona kodowa Zewnętrzny arkusz stylów 2 @import "adr"; @import url(adr); import stylów z innego arkusza Import arkusza stylów 1 @font-face opis czcionki Czcionki osadzone 2 @counter-style wart niestandardowy styl licznika Niestandardowy typ stylu wykazu 3 @page pudełko strony Kontekst strony 2 @page :first Okładka...
AutoIFRAME / Automatyczne dopasowanie wysokości ramki HTMLW Internecie dosyć popularnym rozwiązaniem, stosowanym na wielu stronach, jest budowanie struktury serwisu w oparciu o tabele (lub elementy <div>...</div>) i ramki <iframe>...</iframe> (przykład takiego właśnie szablonu znajdziesz w rozdziale Struktura tabeli). Jest to wygodne o tyle, że pozwala szybko zbudować stronę elastyczną w aktualizacji, bez wykorzystania języków skryptowych po stronie serwera (np. PHP). Niestety takie rozwiązanie ma przynajmniej jedną poważną wadę: trudno jest dopasować...