margin - Kurs HTML i CSS
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...
Marginesy CSS / Model pudełkowy CSS...prostokątny obszar zwany pudełkiem (ang. Box model). Pudełko składa się z: Zawartości - "Content" (np. test, obrazek itd.) Otaczających marginesów wewnętrznych - "Padding" Obramowania - "Border" Marginesów - "Margin" Ostatnie trzy składniki są opcjonalne, tzn. mogą mieć wartość zero. Obwód (zewnętrzny) każdego z czterech obszarów nazywamy krawędzią ("Edge"). Według CSS rozmiary elementu (własności width oraz height) odnoszą się do samej zawartości ("Content") i nie wpływają...
- Marginesy CSS / Górny margines wewnętrzny {padding-top}
...to pozwala zdefiniować dodatkowy wewnętrzny odstęp pomiędzy elementami, np. tekstem i obramowaniem tabeli (co nie byłoby możliwe poprzez ustalenie marginesu - margin). Jest przydatne np. w połączeniu z tłem pod tekstem, obramowaniem, czy też tabelami. W przeglądarce Opera każda strona posiada domyślnie ustalone niezerowe marginesy wewnętrzne. Jeżeli chcemy je zlikwidować, należy do selektora BODY przypisać następujący styl: body { padding: 0 } Przykład {padding-top} Tekst w tej komórce...
- 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...
- 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...
- Komendy CSS3 / Kształty CSS
Źródło: CSS Shapes Module Level 1 Spis treści shape-outside shape-image-threshold shape-margin shape-outside Kształt obszaru oblewania Wartość none | [ <basic-shape> || <shape-box> ] | <image> Inicjalizacja none Zastosowanie elementy z oblewaniem (float) Dziedziczenie nie Media visual shape-image-threshold Wybór pikseli obrazka obszaru oblewania Wartość <number> Inicjalizacja 0.0 Zastosowanie elementy z oblewaniem (float) Dziedziczenie nie Media visual shape-margin...
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ą...
- Przeglądarka zdjęć
...odpowiednio wystylizować przeglądarkę zdjęć, można do niej dołączyć np. taki arkusz CSS: .zdjecia { text-align: center; } .zdjecia_menu { margin-bottom: 10px; font-size: 10px; } .zdjecia_menu input, .zdjecia_menu select { font-size: 10px; } .zdjecia_opis { margin-top: 10px; text-align: justify; } Najwygodniej będzie zapisać go w osobnym pliku z rozszerzeniem *.css - np. przegladarka_zdjec.css i osadzić w nagłówku dokumentu za pomocą znacznika: <link...
- Marginesy CSS / Załamywanie marginesów
W przypadku sąsiadowania ze sobą lub zagnieżdżania wewnątrz siebie elementów posiadających marginesy, może zajść proces załamywania marginesów zewnętrznych (ang. collapsing margins), polegający na połączeniu kilku sąsiadujących odstępów w jeden o rozmiarze pojedynczego marginesu, a nie sumy składowych. Według CSS 2.1 załamywane mogą być tylko marginesy pionowe w następujących przypadkach: Dwa lub więcej sąsiadujące marginesy pionowe bloków bez "oblewania" (float) zostają załamane. Wynikowy...
- 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...