strony - Kurs HTML i CSS
Marginesy CSS / Model pudełkowy CSS...przezroczyste ("Transparent"). Zapamiętanie tych krótkich zasad pozwoli Ci uniknąć w przyszłości nieoczekiwanych problemów z wyświetlaniem elementów strony. UWAGA! W trybie Quirks interpretacja modelu pudełkowego różni się od przedstawionej powyżej i jest niezgodna z CSS 2. Pytania i odpowiedzi Co to jest model pudełkowy? Model pudełkowy (box model) to koncept w kontekście Kaskadowych Arkuszy Stylów (CSS), w którym każdy element na stronie jest traktowany jako "pudełko" składające się z...
- Marginesy CSS / Atrybuty mieszane marginesu {margin}
...Jak ustawić marginesy w CSS? Aby ustawić marginesy w CSS, można użyć właściwości margin i określić wartości dla górnej, prawej, dolnej i lewej strony marginesu. Na przykład: "margin: 10px 20px 10px 20px" ustawia marginesy 10 pikseli na górze i na dole oraz 20 pikseli po prawej i lewej stronie elementu. Co to jest "margin" w CSS? margin w CSS to właściwość określająca odstęp pomiędzy elementem a jego otoczeniem zewnętrznym. Może to być przestrzeń pomiędzy elementami lub między...
- Marginesy CSS / Górny margines wewnętrzny {padding-top}
...silver; margin: 1cm; padding: 5mm">...</p> Otrzymamy: To jest akapit z określonym marginesem zewnętrznym - 1cm (to ta odległość między brzegami strony (także sąsiadującymi elementami) a zewnętrznymi krawędziami szarego prostokąta). Natomiast margines wewnętrzny wynosi 5mm (to ta odległość między krawędziami szarego prostokąta a tekstem, który właśnie czytasz). Margines zewnętrzny leży na zewnątrz elementu (na zewnątrz szarego prostokąta), a margines wewnętrzny - wewnątrz. To jest...
- Marginesy CSS / Atrybuty mieszane marginesu wewnętrznego {padding}
...Aby ustawić margines wewnętrzny, czyli odstęp wewnątrz elementu, użyj właściwości padding i określ wartości dla górnej, prawej, dolnej i lewej strony marginesu wewnętrznego. Na przykład: "padding: 15px 20px 15px 20px" ustawia margines wewnętrzny o wymiarach 15 pikseli na górze i na dole oraz 20 pikseli po prawej i lewej stronie elementu.
- Obramowanie CSS / Zaokrąglenie obramowania {border-...-radius}
...Źródło: CSS Backgrounds and Borders Module Level 3 Zaokrąglone narożniki to bardzo ciekawy efekt wizualny, który może zwiększyć estetykę strony. Co ciekawe, element wcale nie musi mieć obramowania, aby miał zaokrąglone narożniki. Wystarczy jeśli będzie miał ustalone jakieś tło, aby efekt był widoczny na ekranie. Ale uwaga: tekst wewnątrz elementu nie zostanie zawinięty do zaokrąglonych rogów. Jeśli promień zaokrąglenia będzie zbyt duży, tekst wyjdzie na zewnątrz. Przy tworzeniu...
- Obramowanie CSS / Dekoracja przełamania obramowania {box-decoration-break}
...(domyślnie) Zdarza się, że na wydruku blok zostanie przełamany pomiędzy dwie kartki w taki sposób, że jego początek znajdzie się na końcu jednej strony, a koniec - na samym początku następnej. W takim przypadku standardowo na dole pierwszego fragmentu ani na górze drugiego nie będzie obramowania. Podobnie jeśli obramowanie zostanie przypisane do długiego elementu wyświetlanego w linii, tak że tekst się przełamie na końcu wiersza, przy prawym marginesie ani w następnej linijce przy lewym...
- Obramowanie CSS / Szerokość obramowania obrazkowego {border-image-width}
...jakby była wstawiona w tle. border-image-source: url(punkt.gif); border-image-slice: 15; border-image-width: 10px; border-width: 15px Z drugiej strony, ustalając szerokość tradycyjnego obramowania większą niż szerokość obramowania obrazkowego, możemy odsunąć grafikę krawędzi od zawartości tekstowej elementu - podobnie jak to ma miejsce w przypadku marginesu wewnętrznego. border-image-source: url(punkt.gif); border-image-slice: 15; border-width: 15px Dla porównania - tak wygląda ten sam...
- Obramowanie CSS / Nawis obramowania obrazkowego {border-image-outset}
...marginesu będzie niewystarczająca, grafika z nawisu obramowania może nawet wejść pod zawartość sąsiedniego elementu lub schować się poza granicami strony. Dlatego ustalając nawis obramowania obrazkowego zawsze warto jednocześnie zadbać o nadanie odpowiedniej wartości marginesu. Jeżeli "border-image-slice: 124", to wartość nawisu obramowania obrazkowego można zilustrować następująco: Źródło: CSS Backgrounds and Borders Module Level 3 Przykład {border-image-outset} border-image-source...
- Rozmiary CSS / Przepełnienie tekstu {text-overflow}
...taki tekst i tak wyjdzie poza obręb elementu. Oczywiście nie będzie to wyglądało zbyt estetycznie, a czasem może nawet zupełnie popsuć układ całej strony. Ponieważ często nie wiadomo z góry, jak długi może być tekst na stronie - bo powstanie on dopiero później - dlatego aby zabezpieczyć się na taką okoliczność, zwykle ukrywa się nadmiarową zawartość przy pomocy stylu "overflow: hidden" albo "overflow: auto". Kłopot w tym, że wtedy użytkownik może się w ogóle nie zorientować, że tekst został...
- Pozycjonowanie CSS / Pozycja ustalona {position: fixed}
...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