strony - Kurs HTML i CSS
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...
- CSS dla zielonych / Edytory CSS
...wyglądu stron internetowych. Arkusz stylów CSS jest plikiem tekstowym, w którym wpisujemy wszystkie polecenia dotyczące formatowania tekstu, układu strony i inne. W czym pisać CSS? Arkusz stylów CSS jest plikiem tekstowym. Można go zatem tworzyć przy użyciu dowolnego prostego edytora tekstu. Jednak dużo lepszym wyborem jest skorzystanie z pomocy specjalnie przygotowanego do tego edytora CSS. Dzięki temu praca nad arkuszem stylów będzie wygodniejsza i szybsza, a rezultaty powinny być...
- Układ elastyczny CSS / Elastyczność {flex-grow, flex-shrink, flex-basis, flex}
...Może się zdarzyć, że w jednym wierszu kontenera elastycznego mogłoby się zmieścić więcej elementów niż mamy zapewnionych. Wtedy zwykle z prawej strony pozostaje wolna przestrzeń. Możemy jednak sprawić, aby w takiej sytuacji szerokość elementów elastycznie dopasowała się w taki sposób, aby wypełniły całą dostępną przestrzeń kontenera. Jeżeli chcemy, aby wszystkie elementy zostały rozciągnięte równomiernie, wystarczy każdemu przypisać styl "flex-grow: 1". Możemy też zadecydować, aby np...
- Reguły warunkowe CSS / Zapytania właściwości @supports
...ten prosty mechanizm. Zaimplementowana w przeglądarce obsługa jednej właściwości przy jednoczesnym braku innych może poważnie popsuć wygląd strony, a w przypadku skrajnym nawet całkowicie uniemożliwić jej odbiór przez czytelnika. Właście na taką ewentualność zostały stworzone warunkowe reguły stylów (zapytania właściwości - ang. feature queries). Pozwalają one dodać do arkusza deklaracje, które zostaną użyte przez przeglądarkę tylko jeżeli potrafi ona obsłużyć (albo nie potrafi...
- CSS dla zielonych / Arkusz stylów CSS
...Czym są i do czego służą arkusze stylów CSS? Arkusz stylów CSS jest plikiem tekstowym służącym do ustalania wyglądu strony internetowej. Zawiera on tzw. reguły stylów. Z kolei każda z nich składa się z selektora i deklaracji stylów. Poszczególne deklaracje obejmują listę poleceń, które określają, w jaki sposób chcemy zmienić wygląd elementu na stronie wskazanego przez selektor.