margin - Kurs HTML i CSS
Drukowanie CSS / Okładka wydruku @page :first...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 zadrukować całej powierzchni papieru, więc jakieś minimalne marginesy zawsze pozostaną - jak duże...
HTML dla zielonych / Jak zrobić dobrą stronę HTML...logo serwisu</header> <nav style="width: 300px; float: left; overflow: hidden"> Tu umieszcza się odsyłacze spisu treści </nav> <article style="margin-left: 320px"> Tu wpisuje się treść strony </article> <footer style="text-align: center; clear: both">Tutaj można umieścić stopkę serwisu</footer> a otrzymamy: Tutaj można umieścić logo serwisu Tu umieszcza się odsyłacze spisu treści Tu wpisuje się treść strony Tutaj można umieścić stopkę serwisu Nawigacja w serwisie to bardzo...
- Tabele HTML / Struktura tabeli HTML <table, tr, td>
...rozciągnięta, ale ustawi się po lewej stronie ekranu. Aby wyśrodkować taką wąską tabelę, można się posłużyć następującym kodem: <table style="margin: auto">...</table>.
- Selektory elementów CSS / Selektor uniwersalny
...i odpowiedzi Co 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...
- Selektory pseudoklas CSS / Zaznaczenie :checked
...Zaznaczenie dla opcji listy rozwijalnej obsługuje tylko Firefox. Przykład :checked Po wpisaniu w arkuszu stylów: input:checked, option:checked { margin-left: 30px } a w dowolnym miejscu strony: <form action="?"> <fieldset> <input type="radio" checked name="pole_opcji"> <input type="radio" name="pole_opcji"> </fieldset> <fieldset> <input type="checkbox" checked> <input type="checkbox"> </fieldset> <select size="3"> <option selected>Opcja 1</option> <option>Opcja...
- Wstawianie stylów CSS / Zewnętrzny arkusz stylów <link "stylesheet"> @charset
...stylów: /* SELEKTORY: */ body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; color: #003868; background-color: #80B8E8; margin: 6mm; } p { text-align: justify; } pre, code { font-size: 8pt; } Ciekawostka Przeglądarki zwykle umożliwiają formatowanie wszystkich oglądanych stron (bez względu na ich pochodzenie), przy użyciu arkusza stylów dostarczonego przez użytkownika. Pozwala to np. określić odpowiadającą nam wielkość czcionki, jej rodzaj, kolor tła oraz...
- Selektory pseudoklas CSS / Domyślne :default
...była opcją domyślą, aby ewentualnie do niej wrócić. Przykład :default Po wpisaniu w arkuszu stylów: input:default, option:default, button:default { margin-left: 30px } a w dowolnym miejscu strony: <form action="?"> <fieldset> <input type="radio" checked name="pole_opcji" class="przyklad_domyslne"> <input type="radio" name="pole_opcji" class="przyklad_domyslne"> </fieldset> <select size="3"> <option selected class="przyklad_domyslne">Opcja 1</option> <option...
- Tekst CSS / Wcięcie w tekście {text-indent}
...podać konkretną wielkość wcięcia, używając jednostek długości. Wcięcie w tekście oznacza dodatkowy odstęp pierwszej linijki w bloku od lewego marginesu (jak tabulator). Stosuje się je, gdy rozpoczynamy nowy akapit (na inny temat). Przykład {text-indent} To jest akapit, w którego pierwszej linijce wcięcie wynosi 1cm... To jest akapit, w którego pierwszej linijce wcięcie wynosi 1cm... To jest akapit, w którego pierwszej linijce wcięcie wynosi 1cm... Pytania i odpowiedzi {text-indent}...
- Rozmiary CSS / Wysokość {height}
...dostępną wysokość, można użyć właściwości CSS "height: 100%" na <html> i <body>, a także upewnić się, że żadne z tych elementów nie ma ustawionej marginesów ani paddingu, które mogą wpłynąć na wysokość. Na przykład: <html style="height: 100%"> <body style="height: 100%; margin: 0"> <div style="height: 100%">Ten DIV zajmie całą dostępną wysokość.</div> </body> </html>.
- Reguły warunkowe CSS / Zapytania właściwości @supports
...CSS: @supports not (display: flex) { #MENU { width: 150px; float: left; overflow: hidden; position: relative; } #TRESC { margin-left: 150px; } } Możliwe jest również określanie bardziej skomplikowanych warunków przy użyciu operatorów logicznych and (ang. i) oraz or (ang. lub): @supports (box-shadow: 0 0 10px 0 #000) or (-moz-box-shadow: 0 0 10px 0 #000) or (-webkit-box-shadow: 0 0 10px 0 #000) or (-o-box-shadow: 0 0 10px 0 #000) { .box...