prawej - Kurs HTML i CSS
Tło CSS / Pozycja tła obrazkowego {background-position}...Natomiast jako "pozycja" należy wpisać: Jedną wartość: center - obrazek na środku (w centrum) left - obrazek po lewej right - po prawej top - na górze bottom - na dole jednostka długości - odległość od lewej krawędzi Dwie wartości (oddzielone spacją): left top - lewy-górny róg left bottom - lewy-dolny róg right top - prawy-górny róg right bottom - prawy-dolny róg dwie jednostki długości, z których pierwsza oznacza odległość od lewej krawędzi, a druga - od górnej...
- Tabele CSS / Podpis tabeli {caption-side}
...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 komórka1 komórka2 komórka3 komórka4 caption-side: bottom komórka1 komórka2...
- Pozycjonowanie CSS / Pozycja absolutna {position: absolute}
...odległość od lewej krawędzi bloku obejmującego top: wartość - odległość od górnej krawędzi bloku obejmującego right: wartość - odległość od prawej krawędzi bloku obejmującego bottom: wartość - odległość od dolnej krawędzi bloku obejmującego Wyraz "wartość" oznacza konkretną odległość od podanej krawędzi "obejmującego bloku". Należy ją wpisać używając jednostek długości. Wartość ujemna oznacza przesunięcie w przeciwną stronę. Można również wpisać auto, co ustali wartość automatyczną...
- Pozycjonowanie CSS / Pozycja ustalona {position: fixed}
...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 oznacza przesunięcie w przeciwną stronę. Podanie auto oznacza położenie automatyczne. Można oczywiście łączyć parametry, np. left...
- Pozycjonowanie CSS / Przyleganie {clear}
...chociaż początkowo może się tak nie wydawać. Na przykład umieszczamy na stronie opis poparty odpowiednimi ilustracjami, które mają być ułożone po prawej stronie względem otaczającego tekstu (float: right). Jeśli w kodzie źródłowym umieścimy obrazki zbyt blisko siebie, tzn. nie rozdzielimy ich odpowiednio długim tekstem opisu, nie zostaną one ułożone jeden pod drugim - tak jak prawdopodobnie oczekiwaliśmy - lecz obok siebie. Co więcej, ułożenie będzie zależało od rozdzielczości ekranu i...
- Układ wielokolumnowy CSS / Multi-column layout
...w prawdziwym, gazetowym układzie strony, tekst z końca jednej kolumny tabeli nie przechodzi automatycznie na początek kolejnej, umieszczonej po jej prawej stronie. Po zmianie wielkości lub rodzaju czcionki, tekst w kolumnie tabeli ułoży się w zupełnie inny sposób - najprawdopodobniej wysokość przestrzeni zajmowanej przez tekst w kolumnach nie będzie identyczna. Na niewielkich ekranach - np. telefonów komórkowych - ustalona zbyt duża liczba kolumn w tabeli może sprawić, że będą one...
- Układ elastyczny CSS / Flexbox
...można było stworzyć prawdziwie elastycznego układu strony, z kolumną menu po lewej stronie, a treścią artykułu zajmującą całą wolną przestrzeń po prawej. Na szczęście CSS3 rozwiązuje ten problem. Nie trzeba już stosować tabelek, pozycji absolutnych ani trików z płynnym układaniem elementów. Dzięki koncepcji układu elastycznego (ang. flexible box layout lub w skrócie: flexbox) dostajemy zaawansowane możliwości rozplanowania bloków na stronie, przy jednoczesnym automatycznym dopasowywaniu...
- Układ elastyczny CSS / Przepływ elastyczny {flex-direction, flex-wrap, flex-flow}
...analogicznie jak wyrazy tekstu w akapitach (domyślnie) row-reverse - ułożenie w wierszach w przeciwnym kierunku (w języku polskim będzie to od prawej do lewej krawędzi kontenera) column - ułożenie pionowo w kolumnach (w języku polskim - od góry do dołu) column-reverse - ułożenie pionowo w kolumnach (w języku polskim - od dołu do góry) Polecenie pozwala sterować ułożeniem bloków w sposób podobny do wyrazów w tekście akapitu. Wyrazom jednak nie możemy nadawać rozmiarów, a blokom w...
- Układ elastyczny CSS / Elastyczność {flex-grow, flex-shrink, flex-basis, flex}
...Może się zdarzyć, że w jednym wierszu kontenera elastycznego mogłoby się zmieścić więcej elementów niż mamy zapewnionych. Wtedy zwykle z prawej strony pozostaje wolna przestrzeń. Możemy jednak sprawić, aby w takiej sytuacji szerokość elementów elastycznie dopasowała się w taki sposób, aby wypełniły całą dostępną przestrzeń kontenera. Jeżeli chcemy, aby wszystkie elementy zostały rozciągnięte równomiernie, wystarczy każdemu przypisać styl "flex-grow: 1". Możemy też zadecydować, aby...
- CSS dla zielonych / Tapeta CSS {background-color, background-image, color}
...wzorzystej tkaniny. W tym celu wystarczy zapewnić, aby wszystkie krawędzie wzorku z lewej strony kafelka znajdowały się na tej samej wysokości co po prawej stronie. Analogicznie należy postąpić dla górnej i dolnej krawędzi. Przykładowo, aby stworzyć efekt zeszytu w kratkę, wystarczy przygotować kwadratową grafikę z przecinającymi się liniami w formie krzyżyka. Kafelek nie zawsze jednak musi być kwadratowy. Dla uzyskania efektu zeszytu w linie wystarczy przygotować grafikę o wysokości...