margin left - Kurs HTML i CSS
Dobre praktyki / Przykazania webmastera...niepoprawnie - znacznika br, nie tylko tworzysz niesemantyczny kod, ale również utrudniasz sobie późniejszą stylizację (np. ustalenie wysokości marginesu między sąsiednimi elementami). Nie stosuj encji do robienia wcięć ani odstępów pomiędzy wyrazami Jeśli to zrobisz, nie będzie możliwości sterowania szerokością takich wcięć czy odstępów. Do ustalania wcięć używaj własności CSS text-indent, a do odstępów - margin albo padding. Nie nadużywaj znacznika div ani span Do stylizacji...
- 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ć...
- 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 / Wygląd...indeks.css należy wkleić np.: #indeks { width: 300px; padding: 10px 0; background: #ccc; border: 2px outset #aaa; text-align: center; margin: 1em auto; } #indeks input.text { width: 290px; } #indeks select { width: 100%; margin: 2px 0 10px 0; } #indeks input.button { width: 100px; margin-left: 5px; margin-right: 5px; } W wyróżnionych miejscach wpisano identyfikator indeksu, zdefiniowany uprzednio w pliku indeks_hasla.js. Teraz w nagłówku dokumentu HTML...
- Wykazy CSS / Odstęp wyróżnika wykazu {marker-offset}
...własności marker-offset przez zespół reguł CSS interpretowanych praktycznie wszędzie: ul, li { list-style-type: none; display: block; margin: 0; padding: 0; } ul li { background: url(marker.gif) no-repeat left top; padding-left: 20px; } Pierwsza z reguł stylów powyżej usuwa domyślne formatowanie wykazu oraz jego punktów. Trzeba tutaj nadmienić, że z uwagi na różnice w interpretacji nie wszystkie z wymienionych poleceń formatujących w tej deklaracji jest wymagana we...
HTML5 / Okienko popover <... popover, button "button" popovertarget popovertargetaction, input "button" popovertarget popovertargetaction>...otwierać, a drugi zamykać. Okienko popover domyślnie nie ma przypisanego żadnego bardziej skomplikowanego wyglądu poza czarną ramką i niewielkim marginesem wewnątrz. Aby to zmienić, użyj stylów CSS. Możesz również skorzystać ze specjalnego generatora zamieszczonego tutaj. ✅ Rozpocznij konfigurację obramowania Przykład <div popover, button "button" popovertarget popovertargetaction> <div id="popover1" popover> <p>To jest popover, który powinien się wyświetlić ponad standardową...
- Dobre praktyki / CSS Zorientowane Obiektowo
...tej klasy może wyglądać na przykład tak: .Menu { background-color: white; } .Menu ul, .Menu li { display: block; list-style: none; margin: 0; padding: 0; } .Menu li { float: left; margin-right: 1em; } .Menu a { color: blue; text-decoration: none; } Kompozycja Zwróćmy uwagę, że typowy artykuł może zawierać informacje o: autorze - np. z jego imieniem, nazwiskiem i zdjęciem źródle - nazwa, logo i odnośnik Każdy z tych elementów można traktować jako osobny...
- 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...
- 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...
- 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...