marginesy - Kurs HTML i CSS
Szablon strony na DIV-ach / Stały szablon...systemów operacyjnych szerokość paska przewijania wynosi 20px, a więc żaden szablon nie powinien być szerszy niż 780px - o ile wyzerujemy poziome marginesy strony. Biorąc pod uwagę malejącą liczbę użytkowników pracujących w rozdzielczości 800x600, coraz częściej spotyka się stałe szablony, przystosowane do wyświetlania w 1024x768 i wyższych rozdzielczościach ekranu. Wtedy dostępna przestrzeń to 1004px. Jeżeli dobrze zaplanujemy taki szablon, to również użytkownicy 800x600 będą w stanie w...
- Menu w CSS / Pionowe menu
Przypominam, że naszym celem będzie stworzenie estetycznego i funkcjonalnego menu nawigacyjnego na bazie kodu HTML przedstawionego na wstępie w formie listy nieuporządkowanej - tylko poprzez dołączenie deklaracji CSS. Zaczniemy od prostszego przykładu - ułożenia linków w menu zgodnie z normalnym formatowaniem listy, czyli w pionie. Domyślny sposób prezentacji oczywiście nie jest zadowalający. Pierwsze co musimy zrobić, to usunąć wyróżniki punktów wykazu (tzw. markery) oraz zniwelować...
- Drukowanie CSS / Kontekst strony @page
@page { cecha: wartość } Jako cecha i wartość można wstawić jedną lub więcej deklaracji: marginesy strony: margin, margin-top, margin-right, margin-bottom, margin-left rozmiar papieru: size W deklaracjach kontekstu strony nie wolno używać jednostek "em" (wysokość czcionki) ani "ex" (wysokość małej litery), ponieważ nie istnieje w nim pojęcie czcionki. Kontekst strony definiuje wygląd samej strony - np. arkusza papieru na wydruku - a nie jej zawartości. Można w ten sposób ustawić...
- Menu w CSS / Rozdzielenia struktury i prezentacji dokumentu
...<ul> <li><a href="czcionki.html">Czcionki</a></li> <li><a href="tekst.html">Tekst</a></li> <li><a href="tlo.html">Tło</a></li> <li><a href="marginesy.html">Marginesy</a></li> <li><a href="obramowanie.html">Obramowanie</a></li> </ul> Rezultat bez stylizacji jest następujący: Czcionki Tekst Tło Marginesy Obramowanie Kod ten będzie wykorzystywany we wszystkich przykładach, zawartych dalej w tym rozdziale. W rzeczywistych warunkach warto jeszcze dodać do znacznika <ul>...</ul>...
- Marginesy CSS / Górny margines {margin-top}
...wprowadza dodatkowy odstęp między danym elementem a elementem poprzedzającym. Jeśli definiowane własności mają odnosić się do całej strony (np. marginesy strony), można użyć selektora BODY (zobacz także: Marginesy wewnętrzne). Przykład {margin-top} To jest pierwszy akapit... ...a to jest następny akapit z górnym marginesem margin-top: 2cm. Dlatego odstęp pomiędzy nimi wynosi 2cm.
- Drukowanie CSS / Okładka wydruku @page :first
...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 zadrukować całej powierzchni papieru, więc jakieś minimalne marginesy zawsze pozostaną - jak duże zależy od konkretnego modelu drukarki. Przykład @page :first Wydruk z okładką: @page...
- Drukowanie CSS / Druk dwustronny @page :left :right
...i uruchamiając wydruk stron parzystych. Jeśli takie arkusze papieru chcielibyśmy później spiąć 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...
Indeks, wyszukiwarka / Przykład indeksu, wyszukiwarki...['Kolory','../html/kolory.html'], ['Kolory (CSS)','../css/kolory.html'], ['Kursory','../css/kursory.html'], ['Marginesy','../css/marginesy.html'], ['Media','../css/media.html'], ['Multimedia','../html/multimedia.html'], ['Obramowanie','../css/obramowanie.html'], ['Odsyłacze','../html/odsylacze.html'], ['Pozycjonowanie','../css/pozycjonowanie.html'], ['Promocja strony WWW','../html/promocja.html'], ['Ramki','../html/ramki.html'], ['Rozmiary','../css/rozmiary.html']...
- Selektory elementów CSS / Selektor uniwersalny
...oznacza * w CSS? W CSS * jest znakiem wieloznacznym, który odnosi się do wszystkich elementów HTML na stronie. Przykład: * { margin: 0; } zeruje marginesy dla wszystkich elementów. Co to jest selektor uniwersalny? Selektor uniwersalny w CSS odnosi się do wszystkich elementów na stronie. Jest to najogólniejszy selektor, który ma zastosowanie do każdego elementu HTML, umożliwiając jednolitą zmianę stylów dla całej strony. Jaką rolę podczas definiowania stylów odgrywa selektor...
- Marginesy CSS / Model pudełkowy CSS
...i poniżej nich. W przeciwieństwie do elementów liniowych, elementy blokowe można stylizować przy użyciu właściwości CSS, takich jak szerokość, marginesy czy obramowanie. Przykładowy kod: <div style="width: 300px; margin: 10px; background-color: blue">Treść</div>.