przykład - Kurs HTML i CSS
Pozycjonowanie CSS / Pozycja absolutna {position: absolute}selektor { position: absolute; parametry } Selektorem może być praktycznie dowolny znacznik [zobacz: Wstawianie stylów]. Natomiast jako "parametry" należy podać: left: wartość - odległość od lewej krawędzi bloku obejmującego top: wartość - odległość od górnej krawędzi bloku obejmującego right: wartość - odległość od prawej krawędzi bloku obejmującego bottom: wartość - odległość od dolnej krawędzi bloku obejmującego Wyraz "wartość" oznacza konkretną odległość od podanej krawędzi...
- Pozycjonowanie CSS / Pozycja relatywna {position: relative}
selektor { position: relative; parametry } Selektorem może być praktycznie dowolny znacznik [zobacz: Wstawianie stylów]. Natomiast jako "parametry" należy podać: left: wartość - odległość od lewej krawędzi położenia spoczynkowego top: wartość - odległość od górnej krawędzi położenia spoczynkowego right: wartość - odległość od prawej krawędzi położenia spoczynkowego bottom: wartość - odległość od dolnej krawędzi położenia spoczynkowego Wyraz "wartość" oznacza konkretną odległość (od...
- Pozycjonowanie CSS / Pozycja ustalona {position: fixed}
selektor { position: fixed; parametry } Selektorem może być praktycznie dowolny znacznik [zobacz: Wstawianie stylów]. Natomiast jako "parametry" należy podać: left: wartość - odległość od lewej krawędzi okna top: wartość - odległość od górnej krawędzi okna right: wartość - odległość od prawej krawędzi okna bottom: wartość - odległość od dolnej krawędzi okna Wyraz "wartość" oznacza konkretną odległość od podanej krawędzi okna przeglądarki. Należy ją wpisać używając jednostek długości...
- Pozycjonowanie CSS / Obcinanie {clip}
...prawy, dolny i lewy margines przycinania. Jak wyciąć fragment obrazu w CSS? Aby wyciąć fragment obrazu w CSS, używa się właściwości clip. Na przykład, jeśli mamy obraz o wymiarach 200 pikseli na 200 pikseli, i chcemy wyciąć jego górny lewy kwadratowy fragment o wymiarach 50 pikseli na 50 pikseli, możemy to zrobić następująco: "clip: rect(0, 50px, 50px, 0)". Ta deklaracja clip określa obszar, który ma być widoczny, a wartości to kolejno: górny margines, prawy margines, dolny margines i...
- Pozycjonowanie CSS / Przyleganie {clear}
...będą do niego przylegać. Polecenia pozwalające sterować przyleganiem elementów są dosyć przydatne, chociaż początkowo może się tak nie wydawać. Na przykład umieszczamy na stronie opis poparty odpowiednimi ilustracjami, które mają być ułożone po prawej stronie względem otaczającego tekstu (float: right). Jeśli w kodzie źródłowym umieścimy obrazki zbyt blisko siebie, tzn. nie rozdzielimy ich odpowiednio długim tekstem opisu, nie zostaną one ułożone jeden pod drugim - tak jak prawdopodobnie...
- Drukowanie CSS / Linijki na stronie {widows, orphans}
...lub na dole strony. Powyższe polecenia nie blokują przełamania strony ani go nie wywołują. Mogą być jednak przydatne ze względów estetycznych. Na przykład przeniesienie ostatniej linijki długiego akapitu na następną stronę, może nie wyglądać zbyt dobrze. Jeśli już przełamanie musi nastąpić wewnątrz bloku, znacznie lepiej byłoby przenieść na następną stronę więcej niż jedną linijkę. Za pomocą widows: liczba możemy określić, że na początku strony powinny wystąpić przynajmniej np. 4 linijki...
- Drukowanie CSS / Wydruk @media print
...tłem 🙂). Z uwagi na odrębność różnych mediów, wprowadzono możliwość definiowania oddzielnych własności dla różnych form prezentacji dokumentu. Na przykład rozmiar czcionki można ustalić zarówno dla ekranu, jak i dla drukarki, lecz dokumenty na komputerze potrzebują zwykle większej czcionki niż na papierze. Podobnie doświadczenie wskazuje, że czcionki z rodziny sans-serif są czytelniejsze na ekranie, podczas gdy serif - na papierze. Z tych powodów konieczne jest określenie, że dany arkusz...
- Drukowanie CSS / Okładka wydruku @page :first
...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. wyzerować je. Trzeba jednak zdawać sobie sprawę, że większość typowych drukarek nie pozwala...
- Układ wielokolumnowy CSS / Szerokość kolumny {column-width}
...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 przypadku kolumna może być również węższa niż podano - jeżeli cały blok jest węższy, aby mógł pomieścić przynajmniej jedną kolumnę. W obecnej wersji specyfikacja CSS nie pozwala ustalać...
- Układ wielokolumnowy CSS / Liczba kolumn {column-count}
...liczbie kolumn, a przeglądarka sama zajęła się automatycznym dopasowaniem ich szerokości. Przykład {column-count} column-count: 3; To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie... To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej...