spis - Kurs HTML i CSS
Obramowanie CSS / Obramowanie obrazkowe {border-image-source}Spis treści {border-image-source} Ramka obrazkowa w tle Obrazek obramowania {border-image-source} Ramka obrazkowa w tle Możliwości jakie dają style, jeżeli chodzi o efekty obramowania elementów, są bardzo duże. Jednak nie zawsze jest to wystarczające. Czasami mimo wszystko chcielibyśmy urozmaicić stronę, umieszczając na niej estetycznie wyglądające ramki z graficznie wykończonymi krawędziami. W tradycyjnym podejściu zwykle przygotowuje się wtedy trzy elementy obrazkowe: górna krawędź...
- Tło CSS / Atrybuty mieszane tła {background}
Spis treści {background} Atrybuty mieszane tła {background} Tło graficzne obok tekstu Wielokrotne atrybuty mieszane Atrybuty mieszane tła {background} (interpretuje Internet Explorer 6, Firefox, Opera, 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...
- Tło CSS / Gradient liniowy {background: linear-gradient repeating-linear-gradient}
Spis treści {background: linear-gradient repeating-linear-gradient} Gradient liniowy {background: linear-gradient} Powtarzany gradient liniowy {background: repeating-linear-gradient} Gradient liniowy {background: linear-gradient} (CSS 3 - interpretuje Internet Explorer 10, Firefox, Opera, Chrome) selektor { background: linear-gradient(kierunek, kolor1 odległość1, kolor2 odległość2...) } Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli...
- Tło CSS / Gradient promienisty {background: radial-gradient repeating-radial-gradient}
Spis treści {background: radial-gradient repeating-radial-gradient} Gradient promienisty {background: radial-gradient} Powtarzany gradient promienisty {background: repeating-radial-gradient} Gradient promienisty {background: radial-gradient} (CSS 3 - interpretuje Internet Explorer 10, Firefox, Opera, Chrome) selektor { background: radial-gradient(kształt rozmiar at pozycja, kolor1 odległość1, kolor2 odległość2...) } Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1...
- Rozmiary CSS / Wysokość i marginesy automatyczne
Spis treści Wstęp Elementy inline, nie-zastępowane Elementy zastępowane: inline, blokowe, inline-block oraz z oblewaniem (float) Elementy nie-zastępowane: blokowe oraz z oblewaniem (float) Elementy pozycjonowane absolutnie, nie-zastępowane Elementy pozycjonowane absolutnie, zastępowane Wstęp Podrozdział ten opisuje analogiczne zagadnienie, jak Szerokość i marginesy automatyczne, tzn. specjalne zasady dopasowywania wysokości (height) oraz pionowych marginesów elementów (margin-top...
- Obramowanie CSS / Atrybuty mieszane obramowania {border}
Spis treści {border} Atrybuty mieszane obramowania {border} Podkreślenie tekstu Zagnieżdżanie obramowania Atrybuty mieszane obramowania {border} Atrybuty mieszane górnego obramowania: selektor { border-top: wartości atrybutów } Atrybuty mieszane dolnego obramowania: selektor { border-bottom: wartości atrybutów } Atrybuty mieszane lewego obramowania: selektor { border-left: wartości atrybutów } Atrybuty mieszane prawego obramowania: selektor { border-right: wartości atrybutów }...
- Tabele CSS / Obramowanie tabeli {border-collapse, border}
Spis treści {border-collapse, border} Model obramowania tabeli {border-collapse} Styl, szerokość i kolor obramowania tabeli {border} Przy definiowaniu obramowania tabeli możesz skorzystać ze specjalnego generatora zamieszczonego tutaj. ✅ Rozpocznij konfigurację tabeli Model obramowania tabeli {border-collapse} selektor { border-collapse: model } Selektorem może być element TABLE [zobacz: Wstawianie stylów]. Natomiast jako "model" należy podać: collapse - pojedyncze obramowanie...
- Wykazy CSS / Typ stylu wykazu {list-style-type}
Spis treści {list-style-type} Typ stylu wykazu {list-style-type} Znakowy typ stylu wykazu Alfabetyczny typ stylu wykazu Numeryczny typ stylu wykazu Typ stylu wykazu {list-style-type} selektor { list-style-type: typ } Selektorem mogą być znaczniki dotyczące wykazów: ul - wypunktowanie, ol - wykaz numerowany oraz li - pojedynczy punkt wykazu [zobacz: Wstawianie stylów]. Natomiast "typ" odpowiada za wygląd wyróżnika (markera) wykazu. Należy zamiast niego wpisać dowolny z poniżej...
- Układ elastyczny CSS / Przepływ elastyczny {flex-direction, flex-wrap, flex-flow}
(CSS 3 - interpretuje Internet Explorer 10, Firefox, Opera 12, Chrome) Spis treści {flex-direction, flex-wrap, flex-flow} Kierunek elastyczny {flex-direction} Zawijanie elastyczne {flex-wrap} Atrybuty mieszane przepływu elastycznego {flex-flow} Kierunek elastyczny {flex-direction} selektor { flex-direction: kierunek } Selektorem musi być kontener elastyczny. Kierunek określa sposób układania kolejnych elementów wewnątrz układu elastycznego: row - elementy będą układane w wierszach...
- Wykazy CSS / Odstęp wyróżnika wykazu {marker-offset}
Spis treści {marker-offset} Odstęp wyróżnika wykazu {marker-offset} Wyróżnik obrazkowy w tle Odstęp wyróżnika wykazu {marker-offset} (nieinterpretowane) selektor { marker-offset: odstęp } Selektorem może być element z ustalonym wyświetlaniem typu marker [zobacz: Wstawianie stylów]. Natomiast "odstęp" oznacza odległość wyróżnika wykazu (markera) od tekstu, znajdującego się w poszczególny punktach. Wartość odstępu należy podać używając jednostek długości. Polecenie to pozwala nam w...