stronie - Kurs HTML i CSS
Marginesy CSS / Model pudełkowy CSS...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 treści, marginesów, paddingu i obramowania. Właściwości CSS, takie jak width, height, margin, padding oraz border, wpływają na wymiary i układ tych pudełek, co pozwala na precyzyjne pozycjonowanie i stylizację elementów na stronie. Co to jest model blokowy? Model blokowy odnosi się do...
- Marginesy CSS / Atrybuty mieszane marginesu {margin}
...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 elementem a krawędzią kontenera. Przykład: "margin: 20px" ustawia margines o szerokości 20 pikseli wokół elementu. Jak działa "margin: auto...
- Rozmiary CSS / Przepełnienie tekstu {text-overflow}
...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ł przycięty - zwłaszcza jeśli litery ułożą się w taki sposób, że żaden...
- Pozycjonowanie CSS / Przyleganie {clear}
...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 oczekiwaliśmy - lecz obok...
- Drukowanie CSS / Druk dwustronny @page :left :right
...jak książkę, dla wygodniejszego odwracania kartek marginesy wydruku powinny być asymetryczne. Gdy rozłożymy spięty wydruk, kartka leżąca po lewej stronie powinna mieć prawy margines szerszy, a kartka po prawej stronie - lewy margines szerszy. Taki efekt można uzyskać stosując pseudoklasy :left i :right, które pozwalają ustawić różne marginesy wydruku dla stron lewych i prawych. W językach o kierunku tekstu od lewej do prawej (np. język polski lub angielski) pierwszą stroną dokumentu...
- Układ wielokolumnowy CSS / Multi-column layout
...gazetowym układzie strony, tekst z końca jednej kolumny tabeli nie przechodzi automatycznie na początek kolejnej, umieszczonej po jej prawej stronie. Po zmianie wielkości lub rodzaju czcionki, tekst w kolumnie tabeli ułoży się w zupełnie inny sposób - najprawdopodobniej wysokość przestrzeni zajmowanej przez tekst w kolumnach nie będzie identyczna. Na niewielkich ekranach - np. telefonów komórkowych - ustalona zbyt duża liczba kolumn w tabeli może sprawić, że będą one zdecydowanie zbyt...
- CSS dla zielonych / Tapeta CSS {background-color, background-image, color}
Tapety graficzne umieszczone w tle są chętnie używanym elementem w każdym systemie operacyjnym. Podobne rozwiązanie można zastosować również na stronie internetowej. Najprostszym rodzajem tapety jest powielany wzorek w postaci kafelków. Przypomina on płytki położone na podłodze czy na ścianach w łazience - zakładając, że wzór na każdej płytce jest identyczny. Niewątpliwą zaletą tego typu tapety jest fakt, że można nią pokryć dowolnie dużą powierzchnię. Jest to o tyle ważne, że nie wiemy z góry...
- Dziedziczenie stylów CSS / Resetowanie wszystkich wartości {all}
...cechy CSS. Problem ten rozwiązuje specjalna właściwość all, która pozwala za jednym zamachem zrobić to dla wszystkich cech CSS wybranego elementu na stronie. Wyjątkiem są jedynie własności: direction (kierunek tekstu) i unicode-bidi (algorytm dwukierunkowego tekstu), których wartości nie zostaną zmienione. Ale tak naprawdę zwykle w ogóle nie zaleca się ich używać w języku CSS, ponieważ mają one swoje odpowiedniki w języku HTML. Jednym z przykładowych zastosowań tej własności może być...
Nowe okno / Jedno okno...konieczności otwierania następnych. Można otworzyć nowe okno, a później wczytywać do niego dokumenty, za pomocą odsyłaczy umieszczonych na głównej stronie. Jeśli nie mamy zamiaru wczytywać do otwartego okna żadnych stron, można nie podawać nazwy. Nazwa powinna spełniać takie same wymagania jak w przypadku znacznika <iframe>...</iframe>! UWAGA! Pierwsze dwa warianty są obecnie blokowane przez prawie wszystkie przeglądarki, z uwagi na dużą uciążliwość dla internautów. Oznacza to, że mogą w...
- Wykaz generatorów
...Totalna zmiana wyglądu pól formularza, a wszystko całkowicie automatycznie. Generator daty i czasu HTML5 Oznaczaj daty i godziny na swojej stronie szybko, łatwo i przyjemnie. Konwerter HTML/Tekst Narzędzie pomocne w przypadku, kiedy chcemy wyświetlić na stronie WWW kod źródłowy HTML (w normalnych warunkach nie można tego zrobić, ponieważ kod znaczników nie pojawia się na ekranie). Dodatkowo zawiera opcje inteligentnego trybu preformatowanego, dzięki któremu nie trzeba wstawiać...