left - Kurs HTML i CSS
Pozycjonowanie CSS / Nakładanie {z-index}...z-index). Po wpisaniu: <img style="width: 100px; height: 75px; position: relative" src="obrazek.jpg" alt="..."><br> <img style="position: relative; left: 84px; bottom: 91px" src="punkt.gif" alt="..."> Otrzymamy: A to przykład z użyciem z-index. Po wpisaniu: <img style="width: 100px; height: 75px; position: relative; z-index: 2" src="obrazek.jpg" alt="..."><br> <img style="position: relative; left: 84px; bottom: 91px; z-index: 1" src="punkt.gif" alt="..."> Otrzymamy: Jak widać w drugim...
Menu rozwijane, otwierane, wysuwane / Pozycja absolutna...pozostałych elementów strony. Można oczywiście dokładnie ustalić pozycję bloku menu, dodając dodatkowe deklarację CSS: 'position: absolute; left: 10px; top: 100px'. Zamiast wpisywać wprost deklaracje CSS, można podać tylko nazwę klasy CSS: <script> new Menu('menu0', 'menu'); </script> a deklaracje przenieść do arkusza stylów: .menu { position: absolute; left: 10px; top: 100px; } Ponieważ menu otworzy się ponad innymi elementami strony, należy zadbać, aby posiadało...
Komendy HTML 4.01 / Elementy zdeprecjonowane...align DIV, H1, H2, H3, H4, H5, H6, P CSS: text-align align HR CSS: text-align, float align LEGEND - align TABLE CSS: margin-left (auto), margin-right (auto), float alink BODY CSS: :active alt APPLET OBJECT archive APPLET OBJECT background BODY CSS: background-image bgcolor BODY, TABLE, TD, TH, TR CSS: background-color border IMG, OBJECT CSS: border-width clear BR CSS: clear code APPLET OBJECT codebase APPLET OBJECT color...
- Obramowanie CSS / Zaokrąglenie obramowania {border-...-radius}
(CSS 3 - interpretuje Internet Explorer 9, Firefox 4, Opera, Chrome) Zaokrąglenie górnego-lewego narożnika: selektor { border-top-left-radius: zaokrąglenie } Zaokrąglenie górnego-prawego narożnika: selektor { border-top-right-radius: zaokrąglenie } Zaokrąglenie dolnego-prawego narożnika: selektor { border-bottom-right-radius: zaokrąglenie } Zaokrąglenie dolnego-lewego narożnika: selektor { border-bottom-left-radius: zaokrąglenie } We wszystkich przypadkach selektorem może być dowolny...
- Reguły warunkowe CSS / Zapytania właściwości @supports
...które nie obsługują takiego układu, możemy podać alternatywne reguły 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...
- CSS dla zielonych / Wyrównanie tekstu CSS {text-align}
...regułę stylów: p { text-align: wyrównanie; } Dzięki temu tekst we wszystkich akapitach na stronie zostanie wyrównany w określony sposób: left - wyrównanie tekstu do lewego marginesu (domyślnie) right - wyrównanie do prawego marginesu center - do środka (wyśrodkowanie) justify - do obu marginesów jednocześnie (justowanie) Pytania i odpowiedzi {text-align} Jak wyrównać tekst do lewej CSS? W językach wywodzących się z alfabetu łacińskiego wyrównanie tekstu do lewej strony...
- Komendy CSS3 / Dekoracja tekstu CSS
...wszystkie elementy Dziedziczenie tak Procenty nie text-emphasis-position Pozycja wzmocnienia tekstu Wartość [ over | under ] && [ right | left ]? Inicjalizacja over right Zastosowanie wszystkie elementy Dziedziczenie tak Procenty nie text-emphasis-style Styl wzmocnienia tekstu Wartość none | [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] | <string> Inicjalizacja none Zastosowanie wszystkie elementy Dziedziczenie tak Procenty nie...
- Komendy CSS3 / Fragmentacja CSS
...wszystkie elementy Dziedziczenie nie Procenty nie Media visual break-after Przełamanie po... Wartość auto | avoid | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region Inicjalizacja auto Zastosowanie elementy blokowe, dzieci kontenera układu siatki, dzieci kontenera elastycznego, wiersze i grupy wierszy tabeli Dziedziczenie nie Procenty nie Media visual break-before Przełamanie przed... Wartość auto | avoid | avoid-page | page...
- Tekst CSS / Tryb pisania {writing-mode}
...ułożone poziomo jedna pod drugą (domyślnie) vertical-rl - linijki tekstu ułożone pionowo obok siebie od prawej do lewej strony (ang. right-to-left) vertical-lr - linijki tekstu ułożone pionowo obok siebie od lewej do prawej strony (ang. left-to-right) W wielu językach azjatyckich tekst podczas pisania tradycyjnie układany jest pionowo, gdzie kolejne linijki są położone obok siebie. Na przykład w językach pochodzenia mongolskiego linijki ułożone są pionowo obok siebie od lewej do...
- HTML5 / Okienko popover <... popover, button "button" popovertarget popovertargetaction, input "button" popovertarget popovertargetaction>
...popover pojawia się nad zawartością strony, ale jego pozycję można dostosować za pomocą CSS. Używając właściwości CSS, takich jak position, top, left, bottom, right czy margin, możesz precyzyjnie określić, gdzie popover ma się pojawić względem elementu wyzwalającego. Na przykład jeśli znacznik z popoverem ma przypisany atrybut id="identyfikator", to w zewnętrznym arkuszu stylów możesz wstawić następujący kod: #identyfikator { position: fixed; top: auto; left: auto; bottom: 10px; right...