tabeli - Kurs HTML i CSS
Tło CSS / Tło obrazkowe {background-image}...{ background-image: url(ścieżka dostępu do obrazka) } Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów]. Natomiast jako "ścieżka dostępu do obrazka" należy podać miejsce, gdzie znajduje się obrazek, który chcemy wstawić jako tło. Wpisanie "none" usunie obrazek. Ścieżkę dostępu należy konstruować względem lokalizacji arkusza CSS, a nie względem adresu dokumentu HTML! Polecenie pozwala wstawić dowolny obrazek jako...
- Tło CSS / Powtarzanie tła obrazkowego {background-repeat}
...Chrome) selektor { background-repeat: powtarzanie } Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów]. Natomiast jako "powtarzanie" należy wpisać: repeat - powtarzanie tła w obu kierunkach (domyślnie) repeat-x - powtarzanie tła tylko w kierunku poziomym repeat-y - powtarzanie tła tylko w kierunku pionowym no-repeat - brak powtarzania tła (zostanie wyświetlone jako pojedynczy obrazek) space - przestrzeń...
- Tło CSS / Atrybuty mieszane tła {background}
...Chrome) selektor { background: wartości atrybutów } Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów]. Natomiast jako "wartości atrybutów" należy wpisać konkretne wartości atrybutów, dotyczących tła, które będą oddzielone od siebie spacjami (przy czym można niektóre pominąć). Są to: kolor tła tło obrazkowe powtarzanie tła zaczepienie tła pozycja tła lub pozycja tła / rozmiary tła (CSS 3)...
- Tło CSS / Usunięcie tła {background: none, background-color: transparent}
selektor { background: none } Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów]. Polecenie umożliwia wykasowanie zdefiniowanego wcześniej tła. Okazuje się ono przydatne, częściej niż można by sądzić. Na przykład wyobraźmy sobie, że w zewnętrznym arkuszu stylów określamy ogólne własności dla wszystkich stron naszego serwisu. Załóżmy, że znajduje się tam m.in. deklaracja tła obrazkowego stron. Jeśli teraz zechcemy...
- Rozmiary CSS / Blok obejmujący CSS
...Dla innych elementów, które mają ustalone pozycjonowanie relatywne lub statyczne blok obejmujący jest tworzony przez najbliższy blok, komórkę tabeli lub inline-block będący przodkiem dla danego elementu. Jeśli element jest pozycjonowany w sposób ustalony, blok obejmujący wyznacza okno przeglądarki. Jeśli element jest pozycjonowany absolutnie, blok obejmujący jest wyznaczony przez najbliższego przodka z pozycjonowaniem absolutnym, relatywnym lub ustalonym w następujący sposób: Jeśli...
- Rozmiary CSS / Szerokość {width}
...nie odnosi się do elementów inline! Polecenie to pozwala ustalić dokładną szerokość różnych elementów (np. akapitu, wykazu, poziomej linii, tabeli, obrazka itd.). Przykład {width} To jest akapit o szerokości 30% (width: 30%). To jest wykaz o szerokości 5em (width: 5em): Punkt pierwszy Punkt drugi To jest tabela o szerokości 100px (width: 100px) Poniżej widać obrazek o szerokości 200px (width: 200px): Pytania i odpowiedzi {width} Co oznacza "width" w CSS? W CSS...
- Rozmiary CSS / Wysokość {height}
...nie odnosi się do elementów inline! Polecenie to pozwala ustalić dokładną wysokość różnych elementów (np. akapitu, wykazu, poziomej linii, tabeli, obrazka itd.). Przykład {height} To jest akapit o wysokości 5cm (height: 5cm). To jest wykaz o wysokości 20em (height: 20em): Punkt pierwszy Punkt drugi To jest tabela o wysokości 100px (height: 100px) Poniżej widać obrazek o wysokości 40px (height: 40px): Pytania i odpowiedzi {height} Jak ustawić wysokość w CSS? W CSS...
- Rozmiary CSS / Przepełnienie {overflow}
...scroll - suwaki do przewijania auto - pokazanie suwaków jeśli to konieczne Według CSS 2.1 polecenie można również zastosować do komórek tabeli. Określa co zrobić, gdy zawartość elementu nie mieści się w rozmiarach podanych przez width oraz height. Możliwe jest ukrycie nadmiarowej zawartość, pokazanie wszystkiego poprzez powiększenie rozmarów elementu (bez względu na parametry width i height) albo utworzenie suwaków do przewijania przepełnionej treści. Przykład {overflow} width...
AutoIFRAME / Automatyczne dopasowanie wysokości ramki HTML...w oparciu o tabele (lub elementy <div>...</div>) i ramki <iframe>...</iframe> (przykład takiego właśnie szablonu znajdziesz w rozdziale Struktura tabeli). Jest to wygodne o tyle, że pozwala szybko zbudować stronę elastyczną w aktualizacji, bez wykorzystania języków skryptowych po stronie serwera (np. PHP). Niestety takie rozwiązanie ma przynajmniej jedną poważną wadę: trudno jest dopasować wysokość ramki IFRAME tak, aby była odpowiednia dla każdej rozdzielczości ekranu. Jeśli ustalimy za...
- Pozycjonowanie CSS / Ustawienie {float, vertical-align}
...w pionie {vertical-align} selektor { vertical-align: sposób } Polecenie można zastosować do elementów wyświetlanych w linii (inline) lub komórek tabeli (<td>...</td> i <th>...</th>). Jako "sposób" należy podać: baseline - wyrównuje linię bazową elementu do linii bazowej elementu nadrzędnego (domyślnie) middle - ustawia element na środku wysokości elementów sąsiadujących text-top - wyrównuje szczyt elementu do szczytu tekstu elementu nadrzędnego text-bottom - wyrównuje podstawę...