left - Kurs HTML i CSS
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...
- 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...
- Tabele CSS / Podpis tabeli {caption-side}
...być element CAPTION [zobacz: Wstawianie stylów]. Natomiast jako "ustawienie" należy podać: top - podpis na powyżej tabeli bottom - poniżej tabeli left - (wycofano w CSS 2.1) po lewej (interpretuje Opera 6) right - (wycofano w CSS 2.1) po prawej Określa ustawienie podpisu tabeli (znacznik <caption>...</caption>). Przy dodawaniu podpisu tabeli możesz skorzystać ze specjalnego generatora zamieszczonego tutaj. ✅ Rozpocznij konfigurację tabeli Przykład {caption-side} caption-side: top...
- Pozycjonowanie CSS / Pozycja ustalona {position: fixed}
...fixed; parametry } Selektorem może być praktycznie dowolny znacznik [zobacz: Wstawianie stylów]. Natomiast jako "parametry" należy podać: left: wartość - odległość od lewej krawędzi okna top: wartość - odległość od górnej krawędzi okna right: wartość - odległość od prawej krawędzi okna bottom: wartość - odległość od dolnej krawędzi okna Wyraz "wartość" oznacza konkretną odległość od podanej krawędzi okna przeglądarki. Należy ją wpisać używając jednostek długości. Wartość ujemna...
- 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...
- 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...
- 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...
- 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...
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...