strony - Kurs HTML i CSS
Pozycjonowanie CSS / Pozycja relatywna {position: relative}...się wcześniej coś innego (tekst, grafika itp.), będzie to przykryte przez ten element. Należy przy tym pamiętać, że często ustawienie elementów strony zależy od rozdzielczości ekranu i rozmiarów okna przeglądarki! Przykład {position: relative} Szary prostokąt poniżej, który jest częściowo przykryty, przedstawia położenie spoczynkowe obrazka, poddanego pozycjonowaniu: position: relative; left: 50px; top: 45px. Dlatego obrazek ten jest oddalony od lewej krawędzi swojego położenia...
- Kursory CSS / Kolor karetki tekstowej {caret-color}
...kolor" należy podać definicję koloru albo wartość auto (zresetowanie karetki testowej do domyślnego koloru). W przypadku interaktywnych elementów strony, w których można wpisywać tekst, pojawia się tzw. karetka. Wskazuje ona miejsce, w którym pojawią nowe znaki tekstu, kiedy zaczniemy je wpisywać z klawiatury. Karetka tekstowa najczęściej ma postać pionowej, migającej kreski. Zdarzają się jednak inne kształty: pionowa kreska z krótkim poziomym daszkiem i podstawką albo migająca, wypełniona...
- Pozycjonowanie CSS / Obcinanie {clip}
...Wartości te należy podawać za pomocą jednostek długości. Za każdą z nich można wpisać również auto, co oznacza pominięcie cięcia z wybranej strony. Zamiast całego wyrażenia rect(góra, prawo, dół, lewo) można również podać auto - wartość automatyczna. UWAGA! Powyższy opis ustalania krawędzi cięcia pochodzi ze specyfikacji CSS 2.1. We wcześniejszej wersji - CSS 2 - wartości "góra, prawo, dół, lewo" oznaczały odległości cięcia od odpowiednich krawędzi elementu, a nie współrzędne...
- Drukowanie CSS / Rozmiar papieru @page {size}
...niż procent dwie wartości długości - szerokość i wysokość obszaru wydruku rozdzielone od siebie spacją Typowa drukarka najczęściej drukuje strony w orientacji pionowej (tzw. portret). Taki układ zwykle najlepiej sprawdza się przy drukowaniu tekstu. Na stronie możemy mieć jednak także zdjęcia np. krajobrazów, które typowo mają układ poziomy. W takiej sytuacji zdjęcie nie zostanie automatycznie obrócone, a więc zajmie tylko niewielki fragment kartki papieru. Użytkownik może co prawda...
- Drukowanie CSS / Okładka wydruku @page :first
@page :first { cecha: wartość } Jako cecha i wartość można wstawić jedną lub więcej deklaracji odpowiednich dla kontekstu strony. Na pierwszej stronie wydruku często znajduje się okładka, która różni się wizualnie od pozostałych stron. Na przykład może ona zawierać grafikę rozpościerającą się na całej powierzchni kartki bez żadnych marginesów. Taki efekt pozwala uzyskać pseudoklasa :first, dzięki której możemy ustawić marginesy na okładce inne niż na pozostałych stronach wydruku - np...
- Kolory CSS / Wykaz kolorów systemowych
...Light color for three-dimensional display elements (for edges facing the light source) Kolor oświetlenia trójwymiarowych elementów (krawędzie od strony światła) ThreeDShadow Dark shadow for three-dimensional display elements Cień trójwymiarowych elementów Window Window background Tło okna WindowFrame Window frame Ramka okna WindowText Text in windows Tekst w oknach Źródło: Cascading Style Sheets, Level 2
- Selektory CSS
...określony wyraz 2 E[lang|="en"] element E, którego atrybut "lang" ma rozdzieloną łącznikami listę wartości, zaczynającą się (z lewej strony) od "en" Selektor atrybutu zawierającego łączniki 2 E[atr^="wart"] element E, którego wartość atrybutu "atr" rozpoczyna się dokładnie od "wart" Selektor atrybutu o wartości rozpoczynającej się od... 3 E[atr$="wart"] element E, którego wartość atrybutu "atr" kończy się dokładnie dokładnie na "wart" Selektor atrybutu o wartości...
- Menu w CSS / Rozdzielenia struktury i prezentacji dokumentu
...przenośnych, gdzie menu nawigacyjne powinno wyglądać zupełnie inaczej. Znacznie łatwiej jest przygotować nowy arkusz CSS, niż przerabiać wszystkie strony serwisu i potem jeszcze pamiętać, aby przy każdej aktualizacji witryny nanieść poprawki we wszystkich powstałych wersjach dokumentów. Zacznijmy więc od przygotowania kodu HTML z odnośnikami, który będzie zupełnie pozbawiony formatowania: <ul> <li><a href="czcionki.html">Czcionki</a></li> <li><a href="tekst.html">Tekst</a></li> <li><a...
- Układ wielokolumnowy CSS / Szerokość kolumny {column-width}
...aby pomieścić całą zawartość elementu. Liczba kolumn nie będzie jednak większa niż zdoła się zmieścić w założonej szerokości elementu albo strony. Należy pamiętać, że faktyczna wyświetlona szerokość kolumny może być większa niż podana, ponieważ przeglądarka stara się wypełnić treścią całą szerokość wielokolumnowego bloku. Na przykład podając "column-width: 45px; width: 100px", aby kolumny zajęły całą poziomą przestrzeń elementu, zostaną dopasowane do szerokości 50px. W szczególnym...
- Układ wielokolumnowy CSS / Przełamanie kolumny {break-before, break-inside, break-after}
...się wcześniej, aby tytuł znalazł się na początku następnej. Taki efekt zapewnimy poprzez nadanie stylu: h1 { break-after: avoid-column } Z drugiej strony możemy chcieć wymusić przełamanie kolumny po zakończeniu w tekście sekcji, czyli np. zaraz po poziomej linii: hr { break-after: column } Wreszcie w pewnych przypadkach może nam zależeć, aby wybrany fragment tekstu - np. akapit - nigdy nie został przełamany do następnej kolumny: p { break-inside: avoid-column } Przykład {break-after} To...