center - Kurs HTML i CSS
Szablon strony na DIV-ach / Responsywny szablon...TRESC { margin-left: 150px; } #STOPKA { clear: both; } } @media only all and (min-width: 1280px) { html, body { text-align: center; } #top { width: 1260px; margin-left: auto; margin-right: auto; text-align: left; } #MENU { width: 300px; } #TRESC { width: 960px; float: left; overflow: hidden; margin-left: 0; } #STOPKA { width: 100%; } } Wyjaśnienie: Na początku powyższego arkusza stylów znajdują się podstawowe...
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>.
- Podcast HTML / #7 Widżety HTML
...z odsyłaczem Należy wstawić kod JavaScript bezpośrednio po znaczniku otwierającym BODY: <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> Jeśli strona zostanie wczytana poza ramkami, wyświetli się tekst z odsyłaczem do strony głównej (index.html). Przy poprawnym załadowaniu w ramce tekst się nie pojawi. Automatyczne przekierowanie Możliwe jest...
- Podcast HTML / #9 HTML5
...Przestarzałe elementy: elementy formatujące, których funkcję przejęły style CSS, zostały wycofane. Należą do nich m.in.: <basefont>, <big>, <center>, <font>, <strike>, <tt>, <frame>, <frameset>, <noframes>. Przestarzałe atrybuty: wycofano atrybuty takie jak rev i charset dla <link> i <a>, longdesc dla <img> i <iframe>, oraz wiele atrybutów formatujących, np. align dla wielu elementów. border dla <table>: może zawierać tylko pustą wartość lub cyfrę "1". reversed w <ol>: atrybut...