center - Kurs HTML i CSS
HTML dla zielonych / Jak zrobić dobrą stronę HTML...się takiemu kanonowi, lecz jeżeli chcesz uzyskać podobną strukturę, we właściwej treści strony (BODY) wpisz np.: <header style="text-align: center">Tutaj można umieścić 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...
Pozycjonowanie CSS / Wyświetlanie {display}...Jak wyśrodkować "inline-block"? Aby wyśrodkować element inline-block wewnątrz jego kontenera, można użyć właściwości CSS "text-align: center" dla kontenera. To spowoduje wyśrodkowanie elementu poziomo wewnątrz kontenera. Na przykład: <div style="text-align: center"> <span style="display: inline-block">Wyśrodkowany element</span> </div>.
- Menu w CSS / Menu z nagłówkami
...dl { width: 200px; } dt { background-color: #ccc; color: #000; padding: 7px; font-weight: bold; font-size: larger; text-align: center; } dl a:link, dl a:visited { display: block; width: 186px; text-decoration: none; background-color: #ccc; color: #000; padding: 5px; border: 2px outset #ccc; } dl a:hover { border-style: inset; padding: 7px 3px 3px 7px; } CSS Czcionki Tekst Tło Marginesy Obramowanie dl, dt, dd { display: block...
- Układ elastyczny CSS / Justowanie zawartości {justify-content}
...może być kontener elastyczny. Justowanie: flex-start - do początkowej krawędzi kontenera (domyślnie) flex-end - do końcowej krawędzi kontenera center - wyśrodkowanie space-between - równe odstępy między elementami space-around - równa przestrzeń wokół elementów Polecenie steruje justowaniem elementów kontenera elastycznego, gdy jest on zbyt duży, aby został wypełniony w całości. Działa analogicznie jak justowanie tekstu, ale może operować na blokach. Przykład {justify-content}...
- Układ elastyczny CSS / Wyrównanie wierszy {align-content}
...w wielu wierszach. Wyrównanie: flex-start - wyrównanie wierszy do początkowej krawędzi kontenera flex-end - do końcowej krawędzi kontenera center - wyśrodkowanie wierszy (dla tekstu w języku polskim - w pionie) space-between - równe odstępy między wierszami space-around - równa przestrzeń wokół wierszy stretch - rozciągnięcie wierszy do obu krawędzi jednocześnie (domyślnie) Polecenie steruje wyrównaniem wielu wierszy wewnątrz kontenera elastycznego, kiedy ich sumaryczna...
- Komendy CSS3 / Mowa CSS
...normal Zastosowanie wszystkie elementy Dziedziczenie tak Procenty nie Media speech voice-balance Balans głosu Wartość <number> | left | center | right | leftwards | rightwards Inicjalizacja center Zastosowanie wszystkie elementy Dziedziczenie tak Procenty nie Media speech voice-duration Czas trwania głosu Wartość auto | <time> Inicjalizacja auto Zastosowanie wszystkie elementy Dziedziczenie nie Procenty nie Media speech voice-family Rodzina głosów Wartość...
- HTML5 / Filmy i dźwięk <video, audio, source>
...ustawić odtwarzacz wideo na środku ekranu, należy go umieścić wewnątrz elementu blokowego z przypisanym odpowiednim stylem: <div style="text-align: center"> <video src="film.mp4"></video> </div>.
- Komendy CSS 2 / text-align
WARTOŚĆ left | right | center | justify | <łańcuch znakowy> | inherit OPIS Wyrównanie tekstu INICJALIZACJA zależy od przeglądarki ZASTOSOWANIE elementy blokowe DZIEDZICZENIE tak PROCENTY nie MEDIA visual
- HTML dla zielonych / Łączenie znaczników i atrybutów HTML <p "text-align", span "font-size, color", b, i, u>
...kolor czcionki, pogrubienie, pochylenie, przekreślenie) dotyczące tekstu można łączyć, np. po wpisaniu w edytorze: <p style="text-align: center"><span style="font-size: large; color: red"><b><i><u> To jest jakiś tekst </u></i></b></span></p> otrzymamy: To jest jakiś tekst Zauważ, że znaczniki zamykamy w kolejności odwrotnej jak je otwieraliśmy. Czyli najpierw zamykamy znacznik, który został otwarty jako ostatni (w naszym przykładzie jest to: <u>), a na końcu zamykamy ten...
- Widżety HTML / Ostrzeżenie przed ramką
...bezpośrednio po znaczniku otwierającym BODY [zobacz: Ramy dokumentu] następujący kod: <script> if (self == parent) document.write('<div align="center"><b>UWAGA!</b> To jest tylko ramka - wróć do <a href="index.html"><b>STRONY GŁÓWNEJ</b></a></div><hr><br><br>'); </script> gdzie w miejsce tekstu "index.html" należy podać lokalizację na dysku, gdzie znajduje się strona startowa. W efekcie, jeśli strona zostanie wczytana poza ramkami, na ekranie zostanie wyświetlony tekst z...