układ - Kurs HTML i CSS
Komendy CSS3 / Układ wielokolumnowy CSS...nie Procenty nie column-fill Wypełnienie kolumn Wartość auto | balance | balance-all Inicjalizacja balance Zastosowanie kontenery układu wielokolumnowego Dziedziczenie nie Procenty nie column-rule Atrybuty mieszane linii rozdzielająca kolumny Wartość <'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'> Inicjalizacja zobacz cechy indywidualne Zastosowanie zobacz cechy indywidualne Dziedziczenie zobacz cechy indywidualne Procenty zobacz cechy...
- Komendy CSS3 / Układ elastyczny CSS
...baseline | stretch Inicjalizacja auto Zastosowanie dzieci kontenera elastycznego Dziedziczenie nie Procenty nie flex Atrybuty mieszane układu elastycznego Wartość none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] Inicjalizacja 0 1 auto Zastosowanie dzieci kontenera elastycznego Dziedziczenie nie Procenty zobacz cechy indywidualne flex-basis Baza układu elastycznego Wartość content | <'width'> Inicjalizacja auto Zastosowanie dzieci kontenera elastycznego...
- Komendy CSS3 / Układ siatki CSS
...grid-row grid-row-end grid-row-start grid-template grid-template-areas grid-template-columns grid-template-rows grid Atrybuty mieszane układu siatki Wartość <'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'> Inicjalizacja none Zastosowanie kontenery układu siatki Dziedziczenie zobacz cechy indywidualne Procenty zobacz cechy indywidualne grid-area Obszar...
- Układ elastyczny CSS / Kontener elastyczny {display: flex inline-flex}
...sprawia, że dzieci elementu (znaczniki które bezpośrednio się w nim zawierają), wyznaczonego podanym selektorem [zobacz: Wstawianie stylów], będą układane w nim w sposób elastyczny. Tak tworzy się tzw. kontener elastyczny (ang. flex container), w którym dzieci układane są elastycznie. Sam kontener nie jest układany elastycznie na stronie, a jedynie jego dzieci. Wstawienie takiego kontenera przełącza tryb wyświetlania elementów w nim zawartych na układ elastyczny. Aby jakiekolwiek...
- Dobre praktyki / Przykazania webmastera
...używaj elementów ani atrybutów zdeprecjonowanych Unikaj stosowania ramek - zarówno tradycyjnych jak i lokalnych Nie stosuj tabelek do budowania układu strony Nawigacja musi być intuicyjna i wygodna Unikaj używania atrybutu target="..." dla odsyłaczy Nie używaj znaczników img do wstawiania grafiki tworzącej oprawę graficzną strony Zawsze wypełniaj atrybut alt="..." dla ilustracji Zapisuj ilustracje we właściwych formatach graficznych Stosuj fizycznie pomniejszone miniatury zdjęć...
- Układ wielokolumnowy CSS / Multi-column layout
W zasadzie wszystkie popularne papierowe czasopisma przyzwyczaiły czytelników do układu wielokolumnowego. Tekst artykułów jest w nich ułożony w wielu wąskich, sąsiadujących ze sobą kolumnach. Dzięki temu zwykle staje się on łatwiejszy w czytaniu, gdyż przenosząc wzrok z końca jednej linijki na początek kolejnej, oko nie musi pokonywać długiej drogi. Wiele nowoczesnych serwisów internetowych również składa się z kilku kolumn, ale najczęściej inaczej niż w gazecie właściwa treść artykułu znajduje...
- Rozmiary CSS / Szerokość i marginesy automatyczne
...obmyślone w czasach, kiedy nie było jeszcze CSS lub był słabo wspierany przez przeglądarki. Wtedy był to jedyny sposób budowy bardziej wyszukanego układu treści. Obecnie interpretacja CSS w popularnych przeglądarkach jest już wystarczająca, aby ostatecznie porzucić stare nawyki projektowania struktury. Tabele służą do prezentacji danych tabelarycznych, a nie do tworzenia struktury strony. Jeżeli w dowolnym bloku, przedstawionym w ostatnim przykładzie, znajdzie się element szerszy niż...
- Tekst CSS / Białe znaki w tekście {white-space}
...i co należy zrobić, aby je zobaczyć? Białe znaki to symbole w tekście, które nie są widoczne jako drukowane znaki, ale wpływają na formatowanie i układ tekstu. Aby zobaczyć białe znaki w edytorze HTML, można włączyć tryb wyświetlania znaków specjalnych, który zazwyczaj jest dostępny w menu (np. "Widok / Pokaż białe znaki" - ang. "View / Show white space") lub ustawieniach programu. Czy spacja jest znakiem specjalnym? Tak, spacja jest uważana za znak specjalny w kontekście...
Znaki specjalne HTML / Encje HTML...wyświetlany jest na końcu linii jak tradycyjny myślnik ("-"), a dalszy ciąg wyrazu zostaje przeniesiony do następnej linijki. Jeśli natomiast układ tekstu w akapicie jest taki, że w miejscu wstawienia miękkiego łącznika linia nie musi być przedzielona, to w ogóle nie zostanie on wyświetlony. Nie jest on również uwzględniany przy przeszukiwaniu treści dokumentu. To, czy będzie uwzględniany przy kopiowaniu tekstu ze strony do schowka systemowego, zależy od przeglądarki - specyfikacja...
- Drukowanie CSS / Rozmiar papieru @page {size}
...i wysokość obszaru wydruku rozdzielone od siebie spacją Typowa drukarka najczęściej drukuje strony w orientacji pionowej (tzw. portret). Taki układ zwykle najlepiej sprawdza się przy drukowaniu tekstu. Na stronie możemy mieć jednak także zdjęcia np. krajobrazów, które typowo mają układ poziomy. W takiej sytuacji zdjęcie nie zostanie automatycznie obrócone, a więc zajmie tylko niewielki fragment kartki papieru. Użytkownik może co prawda samodzielnie zmienić orientację papieru przed...